Skip to content

Commit a9759fe

Browse files
BadeJayaBadeJaya
committed
refactor(Choice Tile): convert Light DOM LESS to SCSS
1 parent 25a260d commit a9759fe

File tree

8 files changed

+323
-61
lines changed

8 files changed

+323
-61
lines changed

‎docs/components/_index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
@import "typography/index";
44

55
/// load styles needed to test component visuals
6+
@import "choice-tile/spec";
67
@import "menu/spec";
78
@import "popover/spec";
89
@import "textarea/spec";

‎docs/components/choice-tile/_spec.scss‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
@import "components/choice-tile/mixins/hxChoiceTile";
2+
3+
.choice-tile-spec {
4+
label.hxChoice > input {
5+
// Default (focus, hover)
6+
&.pseudo-focus + hx-tile {
7+
@include hxChoiceTile($pseudo-state: focus);
8+
}
9+
& + hx-tile.pseudo-hover {
10+
@include hxChoiceTile($pseudo-state: hover);
11+
}
12+
13+
// Subdued ( hover)
14+
& + hx-tile.hxSubdued.pseudo-hover {
15+
@include hxChoiceTile--subdued($pseudo-state: hover);
16+
}
17+
18+
// Invalid (focus, hover)
19+
&[invalid].pseudo-focus + hx-tile {
20+
@include hxChoiceTile--invalid($pseudo-state: focus);
21+
}
22+
&[invalid] + hx-tile.pseudo-hover {
23+
@include hxChoiceTile--invalid($pseudo-state: hover);
24+
}
25+
26+
// Invalid + Checked (focus, hover)
27+
// &[invalid]:checked.pseudo-focus + hx-tile {
28+
// &:extend(label.hxChoice > input[invalid]:checked:focus + hx-tile all);
29+
// }
30+
// &[invalid]:checked + hx-tile.pseudo-hover {
31+
// &:extend(label.hxChoice > input[invalid]:checked + hx-tile:hover all);
32+
// }
33+
34+
// Disabled
35+
&:disabled + hx-tile.pseudo-hover {
36+
@include hxChoiceTile--disabled;
37+
}
38+
// &[disabled][invalid] + hx-tile.pseudo-hover {
39+
// // &:extend(label.hxChoice > input[disabled][invalid] + hx-tile:hover all);
40+
// }
41+
// &[disabled]:checked + hx-tile.pseudo-hover {
42+
// // &:extend(label.hxChoice > input[disabled]:checked + hx-tile:hover all);
43+
// }
44+
// &[disabled][invalid]:checked + hx-tile.pseudo-hover {
45+
// // &:extend(label.hxChoice > input[disabled][invalid]:checked + hx-tile:hover all);
46+
// }
47+
}
48+
}

‎docs/docs.less‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -314,7 +314,6 @@ min-version {
314314
// Spec Styles
315315
@import 'spec/button-spec';
316316
@import 'spec/checkbox-spec';
317-
@import 'spec/choice-tile-spec';
318317
@import 'spec/dropdown-select-spec';
319318
@import 'spec/file-input-spec';
320319
@import 'spec/panel-spec';

‎docs/styles/spec/choice-tile-spec.less‎

Lines changed: 0 additions & 59 deletions
This file was deleted.

‎src/less/components.less‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@
2525
\* ========== COMPONENTS ========== */
2626
@import 'components/button/index';
2727
@import 'components/checkbox/index';
28-
@import 'components/choice-tile/index';
2928
@import 'components/dropdown-select/index';
3029
@import 'components/file/index';
3130
@import 'components/form/index';

‎src/scss/components/_index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
@import "badge/index";
44
@import "box/index";
55
@import "breadcrumb/index";
6+
@import "choice-tile/index";
67
@import "drawer/index";
78
@import "form/index";
89
@import "grid/index";

‎src/scss/components/choice-tile/_index.scss‎

Lines changed: 223 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,223 @@
1+
@import "components/box/config";
2+
@import "components/grid/config";
3+
@import "components/form/mixins/input";
4+
@import "./mixins/hxChoiceTile";
5+
@import "mixins";
6+
7+
hx-tile {
8+
@include box-size(md);
9+
10+
border-radius: 2px;
11+
display: inline-block;
12+
height: 100%;
13+
position: relative;
14+
text-align: center;
15+
width: 100%;
16+
17+
> header {
18+
font-size: 1rem;
19+
font-weight: 700;
20+
margin-bottom: 0;
21+
}
22+
23+
> p {
24+
font-size: 0.75rem;
25+
}
26+
27+
&.hxSm {
28+
$pad: 0.75rem;
29+
30+
padding: $pad;
31+
32+
> p {
33+
display: none;
34+
}
35+
36+
hx-icon[type="checkmark"] {
37+
right: $pad;
38+
top: $pad;
39+
}
40+
}
41+
42+
&.hxLg {
43+
$pad: 1.75rem;
44+
45+
padding: $pad;
46+
47+
hx-icon[type="checkmark"] {
48+
right: $pad;
49+
top: $pad;
50+
}
51+
}
52+
53+
> header + *,
54+
.hx-tile-icon + * {
55+
margin-top: 0.5rem;
56+
}
57+
58+
.hx-tile-icon {
59+
hx-icon {
60+
font-size: 1.75rem;
61+
}
62+
}
63+
64+
hx-icon[type="checkmark"] {
65+
display: none;
66+
font-size: 1rem;
67+
right: 1.25rem;
68+
top: 1.25rem;
69+
}
70+
71+
&.hxSubdued {
72+
@include hxChoiceTile--subdued;
73+
74+
&:hover {
75+
@include hxChoiceTile--subdued($pseudo-state: hover);
76+
}
77+
}
78+
}
79+
80+
.hxRow > label.hxChoice {
81+
@include grid-column;
82+
}
83+
84+
// Layout & Geometry
85+
// ========== COMMON ==========
86+
label.hxChoice {
87+
position: relative;
88+
}
89+
90+
label.hxChoice > input {
91+
@include reset-focus;
92+
@include hxInput(visuallyHidden);
93+
94+
&:checked + hx-tile {
95+
hx-icon[type="checkmark"] {
96+
display: block;
97+
position: absolute;
98+
}
99+
}
100+
}
101+
102+
// ========== SUBDUED ==========
103+
label.hxChoice > input + hx-tile:hover.hxSubdued,
104+
label.hxChoice > input[disabled] + hx-tile.hxSubdued,
105+
label.hxChoice > input[invalid] + hx-tile.hxSubdued {
106+
@include hxChoiceTile--subdued($pseudo-state: hover);
107+
}
108+
109+
// ========== DEFAULT ==========
110+
// NOTE: These styles may be able to go into default hx-tile defs
111+
label.hxChoice > input + hx-tile {
112+
background-color: $gray-0;
113+
border: solid 1px $gray-400;
114+
color: $gray-900;
115+
cursor: pointer;
116+
117+
.hx-tile-icon {
118+
color: $gray-700;
119+
}
120+
}
121+
122+
label.hxChoice > input + hx-tile:hover {
123+
@include hxChoiceTile($pseudo-state: hover);
124+
}
125+
126+
// same as hover, with focus glow
127+
label.hxChoice > input:focus + hx-tile {
128+
@include hxChoiceTile($pseudo-state: focus);
129+
}
130+
131+
// ========== CHECKED ==========
132+
label.hxChoice > input:checked + hx-tile {
133+
border-color: $cyan-900;
134+
color: $cyan-900;
135+
136+
.hx-tile-icon {
137+
color: $cyan-900;
138+
}
139+
140+
> p {
141+
color: $gray-900;
142+
}
143+
144+
// DEPRECATED: remove in v1.0.0
145+
hx-tile-description {
146+
color: $gray-900;
147+
}
148+
}
149+
150+
// ========== INVALID ==========
151+
label.hxChoice > input[invalid] + hx-tile {
152+
@include hxChoiceTile--invalid;
153+
154+
> p {
155+
color: $gray-900;
156+
}
157+
158+
// DEPRECATED: remove in v1.0.0
159+
hx-tile-description {
160+
color: $gray-900;
161+
}
162+
163+
.hx-tile-icon {
164+
color: inherit;
165+
}
166+
}
167+
168+
label.hxChoice > input[invalid] + hx-tile:hover {
169+
@include hxChoiceTile--invalid($pseudo-state: hover);
170+
}
171+
172+
label.hxChoice > input[invalid]:focus + hx-tile {
173+
@include hxChoiceTile--invalid($pseudo-state: focus);
174+
}
175+
176+
// ========== DISABLED ==========
177+
label.hxChoice > input[disabled] + hx-tile,
178+
label.hxChoice > input[disabled] + hx-tile:hover {
179+
@include hxChoiceTile--disabled;
180+
181+
> p {
182+
color: inherit;
183+
}
184+
185+
// DEPRECATED: remove in v1.0.0
186+
hx-tile-description {
187+
color: inherit;
188+
}
189+
190+
hx-icon {
191+
color: $gray-500;
192+
}
193+
}
194+
195+
// DEPRECATED: remove in v1.0.0
196+
hx-tile-description {
197+
display: block;
198+
font-size: 0.75rem;
199+
}
200+
201+
hx-tile-title {
202+
display: block;
203+
font-size: 1rem;
204+
font-weight: 700;
205+
}
206+
207+
hx-tile {
208+
position: relative;
209+
210+
hx-tile-title {
211+
margin-bottom: 0;
212+
}
213+
214+
&.hxSm {
215+
hx-tile-description {
216+
display: none;
217+
}
218+
}
219+
220+
hx-tile-title + * {
221+
margin-top: 0.5rem;
222+
}
223+
}

0 commit comments

Comments
 (0)