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

Commit 2b22c8d

Browse files
sfrisksfrisk
committed
Buttons: Removing # of background declarations per selector
1 parent 3a8ec9d commit 2b22c8d

File tree

2 files changed

+93
-85
lines changed

2 files changed

+93
-85
lines changed

‎scss/atoms/buttons/_buttons.scss

Lines changed: 72 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -8,241 +8,241 @@
88

99
.ui-button {
1010
&--default {
11-
@include ui-button($ui-button-default-color, $ui-button-default-background);
11+
@include ui-button();
1212
@include ui-button-sizes($ui-button-default);
1313
@include ui-button-states($ui-button-default-color, $ui-button-default-background);
1414

1515
&--disabled {
16-
@include ui-button($ui-button-default-color, $ui-button-default-background);
16+
@include ui-button();
1717
@include ui-button-sizes($ui-button-default);
18-
@include ui-button-state-disabled($ui-button-default-background);
18+
@include ui-button-state-disabled($ui-button-default-color, $ui-button-default-background);
1919
}
2020

2121
&--focus {
22-
@include ui-button($ui-button-default-color, $ui-button-default-background);
22+
@include ui-button();
2323
@include ui-button-sizes($ui-button-default);
24-
@include ui-button-state-focus($ui-button-default-background);
24+
@include ui-button-state-focus($ui-button-default-color, $ui-button-default-background);
2525
}
2626

2727
&--active {
28-
@include ui-button($ui-button-default-color, $ui-button-default-background);
28+
@include ui-button();
2929
@include ui-button-sizes($ui-button-default);
30-
@include ui-button-state-active($ui-button-default-background);
30+
@include ui-button-state-active($ui-button-default-color, $ui-button-default-background);
3131
}
3232

3333
&--hover {
34-
@include ui-button($ui-button-default-color, $ui-button-default-background);
34+
@include ui-button();
3535
@include ui-button-sizes($ui-button-default);
36-
@include ui-button-state-hover($ui-button-default-background);
36+
@include ui-button-state-hover($ui-button-default-color, $ui-button-default-background);
3737
}
3838

3939
&--large {
40-
@include ui-button($ui-button-default-color, $ui-button-default-background);
40+
@include ui-button();
4141
@include ui-button-sizes($ui-button-large);
4242
@include ui-button-states($ui-button-default-color, $ui-button-default-background);
4343

4444
&--disabled {
45-
@include ui-button($ui-button-default-color, $ui-button-default-background);
45+
@include ui-button();
4646
@include ui-button-sizes($ui-button-large);
47-
@include ui-button-state-disabled($ui-button-default-background);
47+
@include ui-button-state-disabled($ui-button-default-color, $ui-button-default-background);
4848
}
4949

5050
&--focus {
51-
@include ui-button($ui-button-default-color, $ui-button-default-background);
51+
@include ui-button();
5252
@include ui-button-sizes($ui-button-large);
53-
@include ui-button-state-focus($ui-button-default-background);
53+
@include ui-button-state-focus($ui-button-default-color, $ui-button-default-background);
5454
}
5555

5656
&--active {
57-
@include ui-button($ui-button-default-color, $ui-button-default-background);
57+
@include ui-button();
5858
@include ui-button-sizes($ui-button-large);
59-
@include ui-button-state-active($ui-button-default-background);
59+
@include ui-button-state-active($ui-button-default-color, $ui-button-default-background);
6060
}
6161

6262
&--hover {
63-
@include ui-button($ui-button-default-color, $ui-button-default-background);
63+
@include ui-button();
6464
@include ui-button-sizes($ui-button-large);
65-
@include ui-button-state-hover($ui-button-default-background);
65+
@include ui-button-state-hover($ui-button-default-color, $ui-button-default-background);
6666
}
6767
}
6868

6969
&--small {
70-
@include ui-button($ui-button-default-color, $ui-button-default-background);
70+
@include ui-button();
7171
@include ui-button-sizes($ui-button-small);
7272
@include ui-button-states($ui-button-default-color, $ui-button-default-background);
7373

7474
&--disabled {
75-
@include ui-button($ui-button-default-color, $ui-button-default-background);
75+
@include ui-button();
7676
@include ui-button-sizes($ui-button-small);
77-
@include ui-button-state-disabled($ui-button-default-background);
77+
@include ui-button-state-disabled($ui-button-default-color, $ui-button-default-background);
7878
}
7979

8080
&--focus {
81-
@include ui-button($ui-button-default-color, $ui-button-default-background);
81+
@include ui-button();
8282
@include ui-button-sizes($ui-button-small);
83-
@include ui-button-state-focus($ui-button-default-background);
83+
@include ui-button-state-focus($ui-button-default-color, $ui-button-default-background);
8484
}
8585

8686
&--active {
87-
@include ui-button($ui-button-default-color, $ui-button-default-background);
87+
@include ui-button();
8888
@include ui-button-sizes($ui-button-small);
89-
@include ui-button-state-active($ui-button-default-background);
89+
@include ui-button-state-active($ui-button-default-color, $ui-button-default-background);
9090
}
9191

9292
&--hover {
93-
@include ui-button($ui-button-default-color, $ui-button-default-background);
93+
@include ui-button();
9494
@include ui-button-sizes($ui-button-small);
95-
@include ui-button-state-hover($ui-button-default-background);
95+
@include ui-button-state-hover($ui-button-default-color, $ui-button-default-background);
9696
}
9797
}
9898

9999
&--extra-small {
100-
@include ui-button($ui-button-default-color, $ui-button-default-background);
100+
@include ui-button();
101101
@include ui-button-sizes($ui-button-extra-small);
102102
@include ui-button-states($ui-button-default-color, $ui-button-default-background);
103103

104104
&--disabled {
105-
@include ui-button($ui-button-default-color, $ui-button-default-background);
105+
@include ui-button();
106106
@include ui-button-sizes($ui-button-extra-small);
107-
@include ui-button-state-disabled($ui-button-default-background);
107+
@include ui-button-state-disabled($ui-button-default-color, $ui-button-default-background);
108108
}
109109

110110
&--focus {
111-
@include ui-button($ui-button-default-color, $ui-button-default-background);
111+
@include ui-button();
112112
@include ui-button-sizes($ui-button-extra-small);
113-
@include ui-button-state-hover($ui-button-default-background);
113+
@include ui-button-state-hover($ui-button-default-color, $ui-button-default-background);
114114
}
115115

116116
&--active {
117-
@include ui-button($ui-button-default-color, $ui-button-default-background);
117+
@include ui-button();
118118
@include ui-button-sizes($ui-button-extra-small);
119-
@include ui-button-state-active($ui-button-default-background);
119+
@include ui-button-state-active($ui-button-default-color, $ui-button-default-background);
120120
}
121121

122122
&--hover {
123-
@include ui-button($ui-button-default-color, $ui-button-default-background);
123+
@include ui-button();
124124
@include ui-button-sizes($ui-button-extra-small);
125-
@include ui-button-state-hover($ui-button-default-background);
125+
@include ui-button-state-hover($ui-button-default-color, $ui-button-default-background);
126126
}
127127
}
128128
}
129129

130130
&--primary {
131-
@include ui-button($ui-button-primary-color, $ui-button-primary-background);
131+
@include ui-button();
132132
@include ui-button-sizes($ui-button-default);
133133
@include ui-button-states($ui-button-primary-color, $ui-button-primary-background);
134134

135135
&--disabled {
136-
@include ui-button($ui-button-primary-color, $ui-button-primary-background);
136+
@include ui-button();
137137
@include ui-button-sizes($ui-button-default);
138-
@include ui-button-state-disabled($ui-button-primary-background);
138+
@include ui-button-state-disabled($ui-button-primary-color, $ui-button-primary-background);
139139
}
140140

141141
&--focus {
142-
@include ui-button($ui-button-primary-color, $ui-button-primary-background);
142+
@include ui-button();
143143
@include ui-button-sizes($ui-button-default);
144-
@include ui-button-state-focus($ui-button-primary-background);
144+
@include ui-button-state-focus($ui-button-primary-color, $ui-button-primary-background);
145145
}
146146

147147
&--active {
148-
@include ui-button($ui-button-primary-color, $ui-button-primary-background);
148+
@include ui-button();
149149
@include ui-button-sizes($ui-button-default);
150-
@include ui-button-state-active($ui-button-primary-background);
150+
@include ui-button-state-active($ui-button-primary-color, $ui-button-primary-background);
151151
}
152152

153153
&--hover {
154-
@include ui-button($ui-button-primary-color, $ui-button-primary-background);
154+
@include ui-button();
155155
@include ui-button-sizes($ui-button-default);
156-
@include ui-button-state-hover($ui-button-primary-background);
156+
@include ui-button-state-hover($ui-button-primary-color, $ui-button-primary-background);
157157
}
158158

159159
&--large {
160-
@include ui-button($ui-button-primary-color, $ui-button-primary-background);
160+
@include ui-button();
161161
@include ui-button-sizes($ui-button-large);
162162
@include ui-button-states($ui-button-primary-color, $ui-button-primary-background);
163163

164164
&--disabled {
165-
@include ui-button($ui-button-primary-color, $ui-button-primary-background);
165+
@include ui-button();
166166
@include ui-button-sizes($ui-button-large);
167-
@include ui-button-state-disabled($ui-button-primary-background);
167+
@include ui-button-state-disabled($ui-button-primary-color, $ui-button-primary-background);
168168
}
169169

170170
&--focus {
171-
@include ui-button($ui-button-primary-color, $ui-button-primary-background);
171+
@include ui-button();
172172
@include ui-button-sizes($ui-button-large);
173-
@include ui-button-state-focus($ui-button-primary-background);
173+
@include ui-button-state-focus($ui-button-primary-color, $ui-button-primary-background);
174174
}
175175

176176
&--active {
177-
@include ui-button($ui-button-primary-color, $ui-button-primary-background);
177+
@include ui-button();
178178
@include ui-button-sizes($ui-button-large);
179-
@include ui-button-state-active($ui-button-primary-background);
179+
@include ui-button-state-active($ui-button-primary-color, $ui-button-primary-background);
180180
}
181181

182182
&--hover {
183-
@include ui-button($ui-button-primary-color, $ui-button-primary-background);
183+
@include ui-button();
184184
@include ui-button-sizes($ui-button-large);
185-
@include ui-button-state-hover($ui-button-primary-background);
185+
@include ui-button-state-hover($ui-button-primary-color, $ui-button-primary-background);
186186
}
187187
}
188188

189189
&--small {
190-
@include ui-button($ui-button-primary-color, $ui-button-primary-background);
190+
@include ui-button();
191191
@include ui-button-sizes($ui-button-small);
192192
@include ui-button-states($ui-button-primary-color, $ui-button-primary-background);
193193

194194
&--disabled {
195-
@include ui-button($ui-button-primary-color, $ui-button-primary-background);
195+
@include ui-button();
196196
@include ui-button-sizes($ui-button-small);
197-
@include ui-button-state-disabled($ui-button-primary-background);
197+
@include ui-button-state-disabled($ui-button-primary-color, $ui-button-primary-background);
198198
}
199199

200200
&--focus {
201-
@include ui-button($ui-button-primary-color, $ui-button-primary-background);
201+
@include ui-button();
202202
@include ui-button-sizes($ui-button-small);
203-
@include ui-button-state-focus($ui-button-primary-background);
203+
@include ui-button-state-focus($ui-button-primary-color, $ui-button-primary-background);
204204
}
205205

206206
&--active {
207-
@include ui-button($ui-button-primary-color, $ui-button-primary-background);
207+
@include ui-button();
208208
@include ui-button-sizes($ui-button-small);
209-
@include ui-button-state-active($ui-button-primary-background);
209+
@include ui-button-state-active($ui-button-primary-color, $ui-button-primary-background);
210210
}
211211

212212
&--hover {
213-
@include ui-button($ui-button-primary-color, $ui-button-primary-background);
213+
@include ui-button();
214214
@include ui-button-sizes($ui-button-small);
215-
@include ui-button-state-hover($ui-button-primary-background);
215+
@include ui-button-state-hover($ui-button-primary-color, $ui-button-primary-background);
216216
}
217217
}
218218

219219
&--extra-small {
220-
@include ui-button($ui-button-primary-color, $ui-button-primary-background);
220+
@include ui-button();
221221
@include ui-button-sizes($ui-button-extra-small);
222222
@include ui-button-states($ui-button-primary-color, $ui-button-primary-background);
223223

224224
&--disabled {
225-
@include ui-button($ui-button-primary-color, $ui-button-primary-background);
225+
@include ui-button();
226226
@include ui-button-sizes($ui-button-extra-small);
227-
@include ui-button-state-disabled($ui-button-primary-background);
227+
@include ui-button-state-disabled($ui-button-primary-color, $ui-button-primary-background);
228228
}
229229

230230
&--focus {
231-
@include ui-button($ui-button-primary-color, $ui-button-primary-background);
231+
@include ui-button();
232232
@include ui-button-sizes($ui-button-extra-small);
233-
@include ui-button-state-focus($ui-button-primary-background);
233+
@include ui-button-state-focus($ui-button-primary-color, $ui-button-primary-background);
234234
}
235235

236236
&--active {
237-
@include ui-button($ui-button-primary-color, $ui-button-primary-background);
237+
@include ui-button();
238238
@include ui-button-sizes($ui-button-extra-small);
239-
@include ui-button-state-active($ui-button-primary-background);
239+
@include ui-button-state-active($ui-button-primary-color, $ui-button-primary-background);
240240
}
241241

242242
&--hover {
243-
@include ui-button($ui-button-primary-color, $ui-button-primary-background);
243+
@include ui-button();
244244
@include ui-button-sizes($ui-button-extra-small);
245-
@include ui-button-state-hover($ui-button-primary-background);
245+
@include ui-button-state-hover($ui-button-primary-color, $ui-button-primary-background);
246246
}
247247
}
248248
}

‎scss/atoms/buttons/_mixins.scss

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,14 @@
44
* ==========================================================================
55
*/
66

7-
@mixin ui-button($color, $bgcolor) {
8-
background: $bgcolor;
7+
@mixin ui-button() {
98
border: 0;
10-
color: $color;
119
display: inline-block;
1210
font-weight: $ui-button-font-weight;
1311
margin: $ui-button-margin;
1412
text-align: center;
1513
text-decoration: none;
1614
text-transform: $ui-button-text-transform;
17-
touch-action: manipulation;
1815
vertical-align: middle;
1916
}
2017

@@ -25,37 +22,48 @@
2522
}
2623

2724
@mixin ui-button-states($color, $bgcolor) {
25+
background: $bgcolor;
26+
color: $color;
2827
&:active {
29-
@include ui-button-state-active($bgcolor);
28+
@include ui-button-state-active($color, $bgcolor);
3029
}
3130
&:focus {
32-
@include ui-button-state-focus($bgcolor);
31+
@include ui-button-state-focus($color, $bgcolor);
3332
}
3433
&:hover {
35-
@include ui-button-state-active($bgcolor);
34+
@include ui-button-state-active($color, $bgcolor);
3635
}
3736
&:disabled {
38-
@include ui-button-state-disabled($bgcolor);
37+
@include ui-button-state-disabled($color, $bgcolor);
3938
}
4039
&[aria-disabled="true"] {
41-
@include ui-button-state-disabled($bgcolor);
40+
@include ui-button-state-disabled($color, $bgcolor);
4241
}
4342
}
4443

45-
@mixin ui-button-state-active($bgcolor) {
44+
@mixin ui-button-state-default($color, $bgcolor) {
45+
background: $bgcolor;
46+
color: $color;
47+
}
48+
49+
@mixin ui-button-state-active($color, $bgcolor) {
4650
background: darken($bgcolor, 20%);
51+
color: $color;
4752
}
4853

49-
@mixin ui-button-state-focus($bgcolor) {
54+
@mixin ui-button-state-focus($color, $bgcolor) {
5055
background: darken($bgcolor, 15%);
56+
color: $color;
5157
}
5258

53-
@mixin ui-button-state-hover($bgcolor) {
59+
@mixin ui-button-state-hover($color, $bgcolor) {
5460
background: darken($bgcolor, 10%);
61+
color: $color;
5562
}
5663

57-
@mixin ui-button-state-disabled($bgcolor) {
64+
@mixin ui-button-state-disabled($color, $bgcolor) {
5865
background: $bgcolor;
66+
color: $color;
5967
cursor: default;
6068
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity="+$ui-button-disabled-opacity+")";
6169
filter: alpha(opacity=$ui-button-disabled-opacity);

0 commit comments

Comments
 (0)