Skip to content

Commit e92a9ef

Browse files
Cathy SillerRyan A. Johnson
Cathy Siller
authored and
Ryan A. Johnson
committed
feat(SelectorStrips): add Selector Strip styles
1 parent f97c5f5 commit e92a9ef

File tree

6 files changed

+261
-0
lines changed

6 files changed

+261
-0
lines changed

‎docs/_data/nav.json5‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@
4848
{ label: 'Progress', path: 'progress' },
4949
{ label: 'Reveals', path: 'reveals' },
5050
{ label: 'Search', path: 'search' },
51+
{ label: 'Selector Strips', path: 'selector-strips' },
5152
{ label: 'Status Pills', path: 'status-pills' },
5253
{ label: 'Tables', path: 'tables' },
5354
{ label: 'Tabs', path: 'tabs' },

‎docs/components/selector-strips/index.html‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
---
2+
title: Selector Strips
3+
---
4+
{% extends 'component.njk' %}
5+
{% block content %}
6+
7+
<section>
8+
<h2 id="multi-select">Multi-Select</h2>
9+
<p>a.k.a. "checkbox strip"<p>
10+
<div class="demo">
11+
<div class="hxSelector">
12+
<label>
13+
<input type="checkbox" name="a" />
14+
<span>a</span>
15+
</label>
16+
<label>
17+
<input type="checkbox" name="b" checked />
18+
<span>b</span>
19+
</label>
20+
<label>
21+
<input type="checkbox" name="c" disabled />
22+
<span>c</span>
23+
</label>
24+
<label>
25+
<input type="checkbox" name="d" invalid />
26+
<span>d</span>
27+
</label>
28+
<label>
29+
<input type="checkbox" name="e" invalid checked />
30+
<span>e</span>
31+
</label>
32+
</div>
33+
</div>
34+
{% code 'text' %}
35+
<div class="hxSelector">
36+
<label>
37+
<input type="checkbox" name="a" />
38+
<span>a</span>
39+
</label>
40+
<label>
41+
<input type="checkbox" name="b" checked />
42+
<span>b</span>
43+
</label>
44+
<label>
45+
<input type="checkbox" name="c" disabled />
46+
<span>c</span>
47+
</label>
48+
<label>
49+
<input type="checkbox" name="d" invalid />
50+
<span>d</span>
51+
</label>
52+
<label>
53+
<input type="checkbox" name="e" invalid checked />
54+
<span>e</span>
55+
</label>
56+
</div>
57+
{% endcode %}
58+
</section>
59+
60+
<section>
61+
<h2 id="single-select">Single-Select</h2>
62+
<p>a.k.a. "radio strip"<p>
63+
<div class="demo">
64+
<div class="hxSelector hxRadio">
65+
<label>
66+
<input type="radio" name="foo" checked />
67+
<span>1</span>
68+
</label>
69+
<label>
70+
<input type="radio" name="foo" />
71+
<span>2</span>
72+
</label>
73+
<label>
74+
<input type="radio" name="foo" disabled />
75+
<span>3</span>
76+
</label>
77+
<label>
78+
<input type="radio" name="foo" />
79+
<span>4</span>
80+
</label>
81+
<label>
82+
<input type="radio" name="foo" />
83+
<span>5</span>
84+
</label>
85+
</div>
86+
</div>
87+
{% code 'text' %}
88+
<div class="hxSelector hxRadio">
89+
<label>
90+
<input type="radio" name="foo" checked />
91+
<span>1</span>
92+
</label>
93+
<label>
94+
<input type="radio" name="foo" />
95+
<span>2</span>
96+
</label>
97+
<label>
98+
<input type="radio" name="foo" disabled />
99+
<span>3</span>
100+
</label>
101+
<label>
102+
<input type="radio" name="foo" />
103+
<span>4</span>
104+
</label>
105+
<label>
106+
<input type="radio" name="foo" />
107+
<span>5</span>
108+
</label>
109+
</div>
110+
{% endcode %}
111+
</section>
112+
{% endblock %}

‎src/helix-ui/styles/components.less‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
@import 'components/pagination';
1515
@import 'components/progress';
1616
@import 'components/search';
17+
@import 'components/selectors';
1718
@import 'components/stepper'; // BETA
1819
@import 'components/tables';
1920
@import 'components/text-inputs';

‎src/helix-ui/styles/components/selectors.less‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
@import 'mixins';
2+
3+
.hxSelector {
4+
border-radius: 2px;
5+
color: @cyan-900;
6+
display: inline-flex;
7+
height: 2.5rem;
8+
padding: 1px;
9+
position: relative;
10+
white-space: nowrap;
11+
z-index: 0;
12+
13+
&::before,
14+
&::after {
15+
bottom: 0;
16+
content: '';
17+
display: block;
18+
left: 0;
19+
pointer-events: none;
20+
position: absolute;
21+
right: 0;
22+
top: 0;
23+
}
24+
25+
&::before {
26+
background-color: @gray-0;
27+
}
28+
29+
&::after {
30+
border: 1px solid @gray-500;
31+
}
32+
33+
label {
34+
flex-grow: 1;
35+
flex-shrink: 0;
36+
height: 100%;
37+
z-index: 0;
38+
39+
span {
40+
align-items: center;
41+
display: flex;
42+
height: 100%;
43+
line-height: 1;
44+
padding: 0 1rem;
45+
text-transform: uppercase;
46+
}
47+
48+
input {
49+
#Mix.resetFocus();
50+
#Mix.hideInput();
51+
52+
// unchecked (focused)
53+
&:focus + span {
54+
background-color: @cyan-100;
55+
color: @cyan-900;
56+
}
57+
58+
// checked (unfocused)
59+
&:checked + span {
60+
background-color: @cyan-900;
61+
color: @gray-0;
62+
}
63+
64+
// checked (focused)
65+
&:checked:focus + span {
66+
box-shadow: 0 0 4px 0 @cyan-900;
67+
}
68+
69+
// pressed (checked or unchecked)
70+
&:active + span {
71+
background-color: @cyan-700;
72+
color: @gray-0;
73+
}
74+
75+
// invalid (unchecked)
76+
&[invalid] + span {
77+
background-color: @gray-0;
78+
border: 2px solid @red-900;
79+
color: @red-900;
80+
}
81+
82+
// invalid (checked)
83+
&[invalid]:checked + span {
84+
background-color: @red-100;
85+
}
86+
87+
// invalid (focused)
88+
&[invalid]:focus + span {
89+
box-shadow: 0 0 4px 0 @red-900;
90+
}
91+
92+
//invalid (pressed)
93+
//TODO: need specs
94+
95+
//disabled (unchecked)
96+
&[disabled] + span {
97+
background-color: transparent;
98+
color: @gray-400;
99+
cursor: not-allowed;
100+
}
101+
102+
//disabled (checked)
103+
//TODO: need specs
104+
}//input
105+
}//label
106+
107+
&.hxRadio {
108+
@radius: 3rem;
109+
110+
border-radius: @radius;
111+
overflow-y: hidden;
112+
padding: 0;
113+
114+
&::after {
115+
border-radius: @radius;
116+
}
117+
118+
input + span {
119+
border-radius: @radius;
120+
}
121+
}//.hxRadio
122+
}//.hxSelector

‎src/helix-ui/styles/mixins.less‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,5 +51,28 @@
5151
outline: none;
5252
}
5353
}//.resetFocus
54+
55+
/*
56+
Useful to hide checkbox/radio inputs in-place
57+
in order to style sibling elements
58+
59+
<label>
60+
<input /><!-- hide me -->
61+
<span><!-- style me --></span>
62+
</label>
63+
*/
64+
.hideInput {
65+
-moz-appearance: none;
66+
-webkit-appearance: none;
67+
appearance: none;
68+
border: 0;
69+
height: 1px;
70+
margin: -1px;
71+
overflow: hidden;
72+
padding: 0;
73+
position: absolute;
74+
width: 1px;
75+
z-index: -10;
76+
}
5477
}//#Mix
5578

‎src/helix-ui/styles/reset/forms.less‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ button {
77

88
fieldset {
99
border: none;
10+
margin: 0;
11+
padding: 0;
1012
}
1113

1214
label {

0 commit comments

Comments
 (0)