Skip to content
This repository was archived by the owner on Dec 11, 2021. It is now read-only.

Commit ff413db

Browse files
sfrisksfrisk
committed
Buttons: Added classes for each state, demos, cleaned up variable names
1 parent f425e31 commit ff413db

File tree

4 files changed

+344
-92
lines changed

4 files changed

+344
-92
lines changed

‎demos/buttons.html

Lines changed: 79 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -82,26 +82,96 @@ <h3>Button Element</h3>
8282
</p>
8383
</form>
8484

85-
<h3>Anchor Element</h3>
85+
86+
<h3>Setting Button Appearence Via Classes</h3>
87+
88+
<p>Sometimes you might need to set the class of a ui-button to display a state. This code works a<code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> elements.</p>
89+
90+
<h3>Disabled Class</h3>
8691
<p>Add <code>--disabled</code> to the end of the button class.</p>
8792
<form>
8893
<p>
89-
<a class="ui-button--primary--large--disabled" href="#" role="button">Large Link</a>
90-
<a class="ui-button--default--large--disabled" href="#" role="button">Large Link</a>
94+
<a class="ui-button--primary--large--disabled" href="#" role="button">Disabled</a>
95+
<a class="ui-button--default--large--disabled" href="#" role="button">Disabled</a>
96+
</p>
97+
<p>
98+
<a class="ui-button--primary--disabled" href="#" role="button">Disabled</a>
99+
<a class="ui-button--default--disabled" href="#" role="button">Disabled</a>
100+
</p>
101+
<p>
102+
<a class="ui-button--primary--small--disabled" href="#" role="button">Disabled/a>
103+
<a class="ui-button--default--small--disabled" href="#" role="button">Disabled</a>
104+
</p>
105+
<p>
106+
<a class="ui-button--primary--extra-small--disabled" href="#" role="button">Disabled</a>
107+
<a class="ui-button--default--extra-small--disabled" href="#" role="button">Disabled</a>
108+
</p>
109+
</form>
110+
111+
<h3>Active Class</h3>
112+
<p>Add <code>--active</code> to the end of the button class.</p>
113+
<form>
114+
<p>
115+
<a class="ui-button--primary--large--active" href="#" role="button">Active</a>
116+
<a class="ui-button--default--large--active" href="#" role="button">Active</a>
117+
</p>
118+
<p>
119+
<a class="ui-button--primary--active" href="#" role="button">Active</a>
120+
<a class="ui-button--default--active" href="#" role="button">Active</a>
121+
</p>
122+
<p>
123+
<a class="ui-button--primary--small--active" href="#" role="button">Active</a>
124+
<a class="ui-button--default--small--active" href="#" role="button">Active</a>
125+
</p>
126+
<p>
127+
<a class="ui-button--primary--extra-small--active" href="#" role="button">Active</a>
128+
<a class="ui-button--default--extra-small--active" href="#" role="button">Active</a>
129+
</p>
130+
</form>
131+
132+
<h3>Focus Class</h3>
133+
<p>Add <code>--focus</code> to the end of the button class.</p>
134+
<form>
135+
<p>
136+
<a class="ui-button--primary--large--focus" href="#" role="button">Focus</a>
137+
<a class="ui-button--default--large--focus" href="#" role="button">Focus</a>
91138
</p>
92139
<p>
93-
<a class="ui-button--primary--disabled" href="#" role="button">Default Link</a>
94-
<a class="ui-button--default--disabled" href="#" role="button">Default Link</a>
140+
<a class="ui-button--primary--focus" href="#" role="button">Focus</a>
141+
<a class="ui-button--default--focus" href="#" role="button">Focus</a>
95142
</p>
96143
<p>
97-
<a class="ui-button--primary--small--disabled" href="#" role="button">Small Link</a>
98-
<a class="ui-button--default--small--disabled" href="#" role="button">Small Link</a>
144+
<a class="ui-button--primary--small--focus" href="#" role="button">Focus</a>
145+
<a class="ui-button--default--small--focus" href="#" role="button">Focus</a>
99146
</p>
100147
<p>
101-
<a class="ui-button--primary--extra-small--disabled" href="#" role="button">Extra Small Link</a>
102-
<a class="ui-button--default--extra-small--disabled" href="#" role="button">Extra Small Link</a>
148+
<a class="ui-button--primary--extra-small--focus" href="#" role="button">Focus</a>
149+
<a class="ui-button--default--extra-small--focus" href="#" role="button">Focus</a>
103150
</p>
104151
</form>
105152

153+
<h3>Hover Class</h3>
154+
<p>Add <code>--hover</code> to the end of the button class.</p>
155+
<form>
156+
<p>
157+
<a class="ui-button--primary--large--hover" href="#" role="button">Hover</a>
158+
<a class="ui-button--default--large--hover" href="#" role="button">Hover</a>
159+
</p>
160+
<p>
161+
<a class="ui-button--primary--hover" href="#" role="button">Hover</a>
162+
<a class="ui-button--default--hover" href="#" role="button">Hover</a>
163+
</p>
164+
<p>
165+
<a class="ui-button--primary--small--hover" href="#" role="button">Hover</a>
166+
<a class="ui-button--default--small--hover" href="#" role="button">Hover</a>
167+
</p>
168+
<p>
169+
<a class="ui-button--primary--extra-small--hover" href="#" role="button">Hover</a>
170+
<a class="ui-button--default--extra-small--hover" href="#" role="button">Hover</a>
171+
</p>
172+
</form>
173+
174+
175+
106176
</body>
107177
</html>

‎scss/atoms/buttons/_buttons.scss

Lines changed: 192 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -3,99 +3,246 @@
33
* Buttons
44
* ==========================================================================
55
*/
6+
@import "variables";
67
@import "mixins";
78

8-
/* These colors won't remain here, will be removed with jsass */
9-
$background: #fff;
10-
$chassis-blue: #4fc0c8;
11-
$chassis-gray-light: #f2f2f2;
12-
$chassis-gray-dark: #383838;
13-
149
.ui-button {
1510
&--default {
16-
@include ui-button($chassis-gray-dark, $background);
17-
@include ui-button-sizes(default);
18-
@include ui-button-states($chassis-gray-dark, $background);
11+
@include ui-button($ui-button-default-color, $ui-button-default-background);
12+
@include ui-button-sizes($ui-button-default);
13+
@include ui-button-states($ui-button-default-color, $ui-button-default-background);
1914

2015
&--disabled {
21-
@include ui-button-sizes(default);
22-
@include ui-button($chassis-gray-dark, $background, true);
16+
@include ui-button($ui-button-default-color, $ui-button-default-background);
17+
@include ui-button-sizes($ui-button-default);
18+
@include ui-button-state-disabled($ui-button-default-background);
19+
}
20+
21+
&--focus {
22+
@include ui-button($ui-button-default-color, $ui-button-default-background);
23+
@include ui-button-sizes($ui-button-default);
24+
@include ui-button-state-disabled($ui-button-default-background);
25+
}
26+
27+
&--active {
28+
@include ui-button($ui-button-default-color, $ui-button-default-background);
29+
@include ui-button-sizes($ui-button-default);
30+
@include ui-button-state-active($ui-button-default-background);
31+
}
32+
33+
&--hover {
34+
@include ui-button($ui-button-default-color, $ui-button-default-background);
35+
@include ui-button-sizes($ui-button-default);
36+
@include ui-button-state-hover($ui-button-default-background);
2337
}
2438

2539
&--large {
26-
@include ui-button($chassis-gray-dark, $background);
27-
@include ui-button-sizes(large);
28-
@include ui-button-states($chassis-gray-dark, $background);
40+
@include ui-button($ui-button-default-color, $ui-button-default-background);
41+
@include ui-button-sizes($ui-button-large);
42+
@include ui-button-states($ui-button-default-color, $ui-button-default-background);
2943

3044
&--disabled {
31-
@include ui-button($chassis-gray-dark, $background, true);
32-
@include ui-button-sizes(large);
45+
@include ui-button($ui-button-default-color, $ui-button-default-background);
46+
@include ui-button-sizes($ui-button-large);
47+
@include ui-button-state-disabled($ui-button-default-background);
48+
}
49+
50+
&--focus {
51+
@include ui-button($ui-button-default-color, $ui-button-default-background);
52+
@include ui-button-sizes($ui-button-large);
53+
@include ui-button-state-focus($ui-button-default-background);
54+
}
55+
56+
&--active {
57+
@include ui-button($ui-button-default-color, $ui-button-default-background);
58+
@include ui-button-sizes($ui-button-large);
59+
@include ui-button-state-active($ui-button-default-background);
60+
}
61+
62+
&--hover {
63+
@include ui-button($ui-button-default-color, $ui-button-default-background);
64+
@include ui-button-sizes($ui-button-large);
65+
@include ui-button-state-hover($ui-button-default-background);
3366
}
3467
}
3568

3669
&--small {
37-
@include ui-button($chassis-gray-dark, $background);
38-
@include ui-button-sizes(small);
39-
@include ui-button-states($chassis-gray-dark, $background);
70+
@include ui-button($ui-button-default-color, $ui-button-default-background);
71+
@include ui-button-sizes($ui-button-small);
72+
@include ui-button-states($ui-button-default-color, $ui-button-default-background);
4073

4174
&--disabled {
42-
@include ui-button($chassis-gray-dark, $background, true);
43-
@include ui-button-sizes(small);
75+
@include ui-button($ui-button-default-color, $ui-button-default-background);
76+
@include ui-button-sizes($ui-button-small);
77+
@include ui-button-state-disabled($ui-button-default-background);
78+
}
79+
80+
&--focus {
81+
@include ui-button($ui-button-default-color, $ui-button-default-background);
82+
@include ui-button-sizes($ui-button-small);
83+
@include ui-button-state-focus($ui-button-default-background);
84+
}
85+
86+
&--active {
87+
@include ui-button($ui-button-default-color, $ui-button-default-background);
88+
@include ui-button-sizes($ui-button-small);
89+
@include ui-button-state-active($ui-button-default-background);
90+
}
91+
92+
&--hover {
93+
@include ui-button($ui-button-default-color, $ui-button-default-background);
94+
@include ui-button-sizes($ui-button-small);
95+
@include ui-button-state-hover($ui-button-default-background);
4496
}
4597
}
4698

4799
&--extra-small {
48100
@extend %ui-button--extra-small;
49-
@include ui-button($chassis-gray-dark, $background);
50-
@include ui-button-states($chassis-gray-dark, $background);
101+
@include ui-button($ui-button-default-color, $ui-button-default-background);
102+
@include ui-button-states($ui-button-default-color, $ui-button-default-background);
51103

52104
&--disabled {
53-
@include ui-button($chassis-gray-dark, $background, true);
54-
@include ui-button-sizes(extra-small);
105+
@include ui-button($ui-button-default-color, $ui-button-default-background);
106+
@include ui-button-sizes($ui-button-extra-small);
107+
@include ui-button-state-disabled($ui-button-default-background);
108+
}
109+
110+
&--focus {
111+
@include ui-button($ui-button-default-color, $ui-button-default-background);
112+
@include ui-button-sizes($ui-button-extra-small);
113+
@include ui-button-state-hover($ui-button-default-background);
114+
}
115+
116+
&--active {
117+
@include ui-button($ui-button-default-color, $ui-button-default-background);
118+
@include ui-button-sizes($ui-button-extra-small);
119+
@include ui-button-state-active($ui-button-default-background);
120+
}
121+
122+
&--hover {
123+
@include ui-button($ui-button-default-color, $ui-button-default-background);
124+
@include ui-button-sizes($ui-button-extra-small);
125+
@include ui-button-state-hover($ui-button-default-background);
55126
}
56127
}
57128
}
58129

59130
&--primary {
60-
@include ui-button($chassis-gray-light, $chassis-blue);
61-
@include ui-button-sizes(default);
62-
@include ui-button-states($chassis-gray-light, $chassis-blue);
131+
@include ui-button($ui-button-primary-color, $ui-button-primary-background);
132+
@include ui-button-sizes($ui-button-default);
133+
@include ui-button-states($ui-button-primary-color, $ui-button-primary-background);
63134

64135
&--disabled {
65-
@include ui-button($chassis-gray-light, $chassis-blue, true);
66-
@include ui-button-sizes(default);
136+
@include ui-button($ui-button-primary-color, $ui-button-primary-background);
137+
@include ui-button-sizes($ui-button-default);
138+
@include ui-button-state-disabled($ui-button-primary-background);
139+
}
140+
141+
&--focus {
142+
@include ui-button($ui-button-primary-color, $ui-button-primary-background);
143+
@include ui-button-sizes($ui-button-default);
144+
@include ui-button-state-focus($ui-button-primary-background);
145+
}
146+
147+
&--active {
148+
@include ui-button($ui-button-primary-color, $ui-button-primary-background);
149+
@include ui-button-sizes($ui-button-default);
150+
@include ui-button-state-active($ui-button-primary-background);
151+
}
152+
153+
&--hover {
154+
@include ui-button($ui-button-primary-color, $ui-button-primary-background);
155+
@include ui-button-sizes($ui-button-default);
156+
@include ui-button-state-hover($ui-button-primary-background);
67157
}
68158

69159
&--large {
70-
@include ui-button($chassis-gray-light, $chassis-blue);
71-
@include ui-button-sizes(large);
72-
@include ui-button-states($chassis-gray-light, $chassis-blue);
160+
@include ui-button($ui-button-primary-color, $ui-button-primary-background);
161+
@include ui-button-sizes($ui-button-large);
162+
@include ui-button-states($ui-button-primary-color, $ui-button-primary-background);
73163

74164
&--disabled {
75-
@include ui-button($chassis-gray-light, $chassis-blue, true);
76-
@include ui-button-sizes(large);
165+
@include ui-button($ui-button-primary-color, $ui-button-primary-background);
166+
@include ui-button-sizes($ui-button-large);
167+
@include ui-button-state-disabled($ui-button-primary-background);
168+
}
169+
170+
&--focus {
171+
@include ui-button($ui-button-primary-color, $ui-button-primary-background);
172+
@include ui-button-sizes($ui-button-large);
173+
@include ui-button-state-focus($ui-button-primary-background);
174+
}
175+
176+
&--active {
177+
@include ui-button($ui-button-primary-color, $ui-button-primary-background);
178+
@include ui-button-sizes($ui-button-large);
179+
@include ui-button-state-active($ui-button-primary-background);
180+
}
181+
182+
&--hover {
183+
@include ui-button($ui-button-primary-color, $ui-button-primary-background);
184+
@include ui-button-sizes($ui-button-large);
185+
@include ui-button-state-hover($ui-button-primary-background);
77186
}
78187
}
79188

80189
&--small {
81-
@include ui-button($chassis-gray-light, $chassis-blue);
82-
@include ui-button-sizes(small);
83-
@include ui-button-states($chassis-gray-light, $chassis-blue);
190+
@include ui-button($ui-button-primary-color, $ui-button-primary-background);
191+
@include ui-button-sizes($ui-button-small);
192+
@include ui-button-states($ui-button-primary-color, $ui-button-primary-background);
84193

85194
&--disabled {
86-
@include ui-button($chassis-gray-light, $chassis-blue, true);
87-
@include ui-button-sizes(small);
195+
@include ui-button($ui-button-primary-color, $ui-button-primary-background);
196+
@include ui-button-sizes($ui-button-small);
197+
@include ui-button-state-disabled($ui-button-primary-background);
198+
}
199+
200+
&--focus {
201+
@include ui-button($ui-button-primary-color, $ui-button-primary-background);
202+
@include ui-button-sizes($ui-button-small);
203+
@include ui-button-state-focus($ui-button-primary-background);
204+
}
205+
206+
&--active {
207+
@include ui-button($ui-button-primary-color, $ui-button-primary-background);
208+
@include ui-button-sizes($ui-button-small);
209+
@include ui-button-state-active($ui-button-primary-background);
210+
}
211+
212+
&--hover {
213+
@include ui-button($ui-button-primary-color, $ui-button-primary-background);
214+
@include ui-button-sizes($ui-button-small);
215+
@include ui-button-state-hover($ui-button-primary-background);
88216
}
89217
}
90218

91219
&--extra-small {
92-
@include ui-button($chassis-gray-light, $chassis-blue);
93-
@include ui-button-sizes(extra-small);
94-
@include ui-button-states($chassis-gray-light, $chassis-blue);
220+
@include ui-button($ui-button-primary-color, $ui-button-primary-background);
221+
@include ui-button-sizes($ui-button-extra-small);
222+
@include ui-button-states($ui-button-primary-color, $ui-button-primary-background);
95223

96224
&--disabled {
97-
@include ui-button($chassis-gray-light, $chassis-blue, true);
98-
@include ui-button-sizes(extra-small);
225+
@include ui-button($ui-button-primary-color, $ui-button-primary-background);
226+
@include ui-button-sizes($ui-button-extra-small);
227+
@include ui-button-state-disabled($ui-button-primary-background);
228+
}
229+
230+
&--focus {
231+
@include ui-button($ui-button-primary-color, $ui-button-primary-background);
232+
@include ui-button-sizes($ui-button-extra-small);
233+
@include ui-button-state-focus($ui-button-primary-background);
234+
}
235+
236+
&--active {
237+
@include ui-button($ui-button-primary-color, $ui-button-primary-background);
238+
@include ui-button-sizes($ui-button-extra-small);
239+
@include ui-button-state-active($ui-button-primary-background);
240+
}
241+
242+
&--hover {
243+
@include ui-button($ui-button-primary-color, $ui-button-primary-background);
244+
@include ui-button-sizes($ui-button-extra-small);
245+
@include ui-button-state-hover($ui-button-primary-background);
99246
}
100247
}
101248
}

0 commit comments

Comments
 (0)