Skip to content

Commit 69b103f

Browse files
jpeg22jpeg22
authored
Merge pull request #6359 from topcoder-platform/reskin
WIP: reskin for unit test check
2 parents a3b51fa + 1f5c3bf commit 69b103f

File tree

6 files changed

+178
-163
lines changed

6 files changed

+178
-163
lines changed

‎src/shared/components/SortingSelectBar/style.scss

Lines changed: 139 additions & 138 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import '~styles/mixins';
2+
23
$view-options-toggle-right-margin: $base-unit * 2;
34
$down-arrow-size: $base-unit;
45

@@ -46,6 +47,144 @@ $down-arrow-size: $base-unit;
4647
@include xs-to-md {
4748
margin-right: 16px;
4849
}
50+
51+
:global {
52+
// 'Sort by' dropdown
53+
.Select {
54+
@include roboto-regular;
55+
}
56+
57+
.is-focused {
58+
font-weight: 700;
59+
}
60+
61+
.Select-control {
62+
line-height: 12px;
63+
padding: 4px 35px 4px 10px;
64+
width: 208px;
65+
height: 40px;
66+
background-color: $tc-white;
67+
font-weight: 400;
68+
font-size: 12px;
69+
text-transform: none;
70+
border: 1px solid #aaa;
71+
color: $tc-gray-90;
72+
position: relative;
73+
overflow: hidden;
74+
box-sizing: border-box;
75+
}
76+
77+
.Select-input {
78+
width: 100% !important;
79+
height: 0;
80+
padding: 0;
81+
opacity: 0;
82+
position: absolute;
83+
}
84+
85+
.Select--single > .Select-control .Select-value {
86+
position: static;
87+
padding: 0;
88+
overflow: visible;
89+
}
90+
91+
.Select.is-focused:not(.is-open) > .Select-control {
92+
border-color: #137d60 !important;
93+
}
94+
95+
.Select-value-label {
96+
@include roboto-regular;
97+
98+
font-size: 400;
99+
font-size: 14px;
100+
line-height: 22px;
101+
color: $tco-black;
102+
vertical-align: middle;
103+
}
104+
105+
.Select-arrow-zone {
106+
content: ' ';
107+
display: block;
108+
height: 0;
109+
position: absolute;
110+
right: 17px;
111+
top: 50%;
112+
width: 0;
113+
114+
svg {
115+
width: 10px;
116+
height: 10px;
117+
}
118+
}
119+
120+
.Select-menu-outer {
121+
width: 100%;
122+
color: $tc-gray-90;
123+
font-weight: 400;
124+
font-size: 12px;
125+
background-color: $tc-white;
126+
box-sizing: border-box;
127+
margin-top: 2px;
128+
padding: 4px 0;
129+
position: absolute;
130+
top: 100%;
131+
right: 0;
132+
z-index: 1000;
133+
-webkit-overflow-scrolling: touch;
134+
border: none !important;
135+
}
136+
137+
.Select-menu {
138+
max-height: none;
139+
overflow-y: visible;
140+
height: 22px;
141+
font-size: 14px;
142+
}
143+
144+
.Select-option {
145+
box-sizing: border-box;
146+
color: rgba(51, 51, 51, 0.8);
147+
cursor: pointer;
148+
display: block;
149+
padding: 6px 16px;
150+
border-left: 1px solid #aaa;
151+
border-right: 1px solid #aaa;
152+
}
153+
154+
.Select-option:last-child {
155+
border-bottom-right-radius: 5px !important;
156+
border-bottom-left-radius: 5px !important;
157+
border-bottom: 1px solid #aaa;
158+
}
159+
160+
.Select-option:first-child {
161+
border-top: 1px solid #aaa;
162+
border-top-left-radius: $base-unit;
163+
border-top-right-radius: $base-unit;
164+
}
165+
166+
.Select-option:hover {
167+
color: $tc-black;
168+
}
169+
170+
.Select-option.is-selected {
171+
color: $tc-black;
172+
font-weight: 500;
173+
background: $tc-white;
174+
}
175+
176+
.Select-option.is-focused {
177+
background: $tc-white;
178+
}
179+
180+
.Select-noresults {
181+
box-sizing: border-box;
182+
color: $tc-gray-90;
183+
cursor: default;
184+
display: block;
185+
padding: 8px 20px;
186+
}
187+
}
49188
}
50189

51190
.view-options {
@@ -92,142 +231,4 @@ $down-arrow-size: $base-unit;
92231
border-top: $down-arrow-size solid $tc-gray-50;
93232
margin-left: 3 * $base-unit;
94233
}
95-
96-
:global {
97-
// 'Sort by' dropdown
98-
.Select {
99-
@include roboto-regular;
100-
}
101-
102-
.is-focused {
103-
font-weight: 700;
104-
}
105-
106-
.Select-control {
107-
line-height: 12px;
108-
padding: 4px 35px 4px 10px;
109-
width: 208px;
110-
height: 40px;
111-
background-color: $tc-white;
112-
font-weight: 400;
113-
font-size: 12px;
114-
text-transform: none;
115-
border: 1px solid #aaa;
116-
color: $tc-gray-90;
117-
position: relative;
118-
overflow: hidden;
119-
box-sizing: border-box;
120-
}
121-
122-
.Select-input {
123-
width: 100% !important;
124-
height: 0;
125-
padding: 0;
126-
opacity: 0;
127-
position: absolute;
128-
}
129-
130-
.Select--single > .Select-control .Select-value {
131-
position: static;
132-
padding: 0;
133-
overflow: visible;
134-
}
135-
136-
.Select.is-focused:not(.is-open) > .Select-control {
137-
border-color: #137d60 !important;
138-
}
139-
140-
.Select-value-label {
141-
@include roboto-regular;
142-
143-
font-size: 400;
144-
font-size: 14px;
145-
line-height: 22px;
146-
color: $tco-black;
147-
vertical-align: middle;
148-
}
149-
150-
.Select-arrow-zone {
151-
content: ' ';
152-
display: block;
153-
height: 0;
154-
position: absolute;
155-
right: 17px;
156-
top: 50%;
157-
width: 0;
158-
159-
svg {
160-
width: 10px;
161-
height: 10px;
162-
}
163-
}
164-
165-
.Select-menu-outer {
166-
width: 100%;
167-
color: $tc-gray-90;
168-
font-weight: 400;
169-
font-size: 12px;
170-
background-color: $tc-white;
171-
box-sizing: border-box;
172-
margin-top: 2px;
173-
padding: 4px 0;
174-
position: absolute;
175-
top: 100%;
176-
right: 0;
177-
z-index: 1000;
178-
-webkit-overflow-scrolling: touch;
179-
border: none !important;
180-
}
181-
182-
.Select-menu {
183-
max-height: none;
184-
overflow-y: visible;
185-
height: 22px;
186-
font-size: 14px;
187-
}
188-
189-
.Select-option {
190-
box-sizing: border-box;
191-
color: rgba(51, 51, 51, 0.8);
192-
cursor: pointer;
193-
display: block;
194-
padding: 6px 16px;
195-
border-left: 1px solid #aaa;
196-
border-right: 1px solid #aaa;
197-
}
198-
199-
.Select-option:last-child {
200-
border-bottom-right-radius: 5px !important;
201-
border-bottom-left-radius: 5px !important;
202-
border-bottom: 1px solid #aaa;
203-
}
204-
205-
.Select-option:first-child {
206-
border-top: 1px solid #aaa;
207-
border-top-left-radius: $base-unit;
208-
border-top-right-radius: $base-unit;
209-
}
210-
211-
.Select-option:hover {
212-
color: $tc-black;
213-
}
214-
215-
.Select-option.is-selected {
216-
color: $tc-black;
217-
font-weight: 500;
218-
background: $tc-white;
219-
}
220-
221-
.Select-option.is-focused {
222-
background: $tc-white;
223-
}
224-
225-
.Select-noresults {
226-
box-sizing: border-box;
227-
color: $tc-gray-90;
228-
cursor: default;
229-
display: block;
230-
padding: 8px 20px;
231-
}
232-
}
233234
}

‎src/shared/components/Tooltip/style.scss

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,28 @@
1313
padding: 0;
1414
}
1515

16+
.rc-tooltip-arrow {
17+
background: url(assets/images/tooltip-arrow.svg);
18+
width: 30px;
19+
height: 9px;
20+
z-index: 10000;
21+
}
22+
1623
.rc-tooltip-placement-top .rc-tooltip-arrow,
1724
.rc-tooltip-placement-topLeft .rc-tooltip-arrow,
1825
.rc-tooltip-placement-topRight .rc-tooltip-arrow {
1926
border-top-color: $tc-gray-80;
20-
background: url(assets/images/tooltip-arrow.svg);
27+
padding: 0;
28+
bottom: 1px;
29+
border-width: 0;
30+
}
31+
32+
.rc-tooltip-placement-top .rc-tooltip-arrow {
33+
margin-left: -19px;
34+
}
35+
36+
.rc-tooltip-placement-topLeft .rc-tooltip-arrow {
37+
margin-left: -13px;
2138
}
2239

2340
.rc-tooltip-placement-right .rc-tooltip-arrow,

‎src/shared/components/challenge-detail/MySubmissions/SubmissionsList/styles.scss

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -96,10 +96,13 @@
9696
flex-direction: column;
9797
font-size: 13px;
9898
line-height: 20px;
99-
margin: 16px 40px 0 40px;
99+
padding-top: 30px;
100+
padding-bottom: 50px;
101+
margin: 0 41px;
100102

101103
@include xs-to-sm {
102-
margin: 16px 0 0 0;
104+
padding: 0;
105+
margin: 0 16px;
103106
}
104107
}
105108

@@ -177,6 +180,10 @@ button.column-1-1,
177180
margin: 0 32px 0 16px;
178181
height: auto;
179182
}
183+
184+
@include xs-to-sm {
185+
margin-top: 24px;
186+
}
180187
}
181188

182189
.column-1 {

0 commit comments

Comments
 (0)