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

Commit ede869e

Browse files
sfrisksfrisk
committed
Buttons: Switched to Mixins
1 parent 475a2d8 commit ede869e

File tree

3 files changed

+110
-203
lines changed

3 files changed

+110
-203
lines changed

‎scss/atoms/buttons/_buttons.scss

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

7-
@import "extends";
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;
813

914
.ui-button {
1015
&--default {
11-
@extend %ui-button;
12-
@extend %ui-button--default;
13-
@extend %ui-button--default--hover;
14-
@extend %ui-button--default--focus;
15-
@extend %ui-button--default--active;
16-
@extend %ui-button--default--disabled;
17-
@extend %ui-button--default-size;
16+
@include ui-button($chassis-gray-dark, $background);
17+
@include ui-button-sizes(default);
18+
@include ui-button-states($chassis-gray-dark, $background);
1819

1920
&--disabled {
20-
@extend %ui-button;
21-
@extend %ui-button--default;
22-
@extend %ui-button--disabled;
23-
@extend %ui-button--default-size;
21+
@include ui-button-sizes(default);
22+
@include ui-button($chassis-gray-dark, $background, true);
2423
}
2524

2625
&--large {
27-
@extend %ui-button;
28-
@extend %ui-button--default;
29-
@extend %ui-button--default--hover;
30-
@extend %ui-button--default--focus;
31-
@extend %ui-button--default--active;
32-
@extend %ui-button--default--disabled;
33-
@extend %ui-button--large;
26+
@include ui-button($chassis-gray-dark, $background);
27+
@include ui-button-sizes(large);
28+
@include ui-button-states($chassis-gray-dark, $background);
3429

3530
&--disabled {
36-
@extend %ui-button;
37-
@extend %ui-button--default;
38-
@extend %ui-button--disabled;
39-
@extend %ui-button--large;
31+
@include ui-button($chassis-gray-dark, $background, true);
32+
@include ui-button-sizes(large);
4033
}
4134
}
4235

4336
&--small {
44-
@extend %ui-button;
45-
@extend %ui-button--default;
46-
@extend %ui-button--default--hover;
47-
@extend %ui-button--default--focus;
48-
@extend %ui-button--default--active;
49-
@extend %ui-button--default--disabled;
50-
@extend %ui-button--small;
37+
@include ui-button($chassis-gray-dark, $background);
38+
@include ui-button-sizes(small);
39+
@include ui-button-states($chassis-gray-dark, $background);
5140

5241
&--disabled {
53-
@extend %ui-button;
54-
@extend %ui-button--default;
55-
@extend %ui-button--disabled;
56-
@extend %ui-button--small;
42+
@include ui-button($chassis-gray-dark, $background, true);
43+
@include ui-button-sizes(small);
5744
}
5845
}
5946

6047
&--extra-small {
61-
@extend %ui-button;
62-
@extend %ui-button--default;
63-
@extend %ui-button--default--hover;
64-
@extend %ui-button--default--focus;
65-
@extend %ui-button--default--active;
66-
@extend %ui-button--default--disabled;
6748
@extend %ui-button--extra-small;
49+
@include ui-button($chassis-gray-dark, $background);
50+
@include ui-button-states($chassis-gray-dark, $background);
6851

6952
&--disabled {
70-
@extend %ui-button;
71-
@extend %ui-button--default;
72-
@extend %ui-button--disabled;
73-
@extend %ui-button--extra-small;
53+
@include ui-button($chassis-gray-dark, $background, true);
54+
@include ui-button-sizes(extra-small);
7455
}
7556
}
7657
}
7758

7859
&--primary {
79-
@extend %ui-button;
80-
@extend %ui-button--primary;
81-
@extend %ui-button--primary--hover;
82-
@extend %ui-button--primary--focus;
83-
@extend %ui-button--primary--active;
84-
@extend %ui-button--primary--disabled;
85-
@extend %ui-button--default-size;
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);
8663

8764
&--disabled {
88-
@extend %ui-button;
89-
@extend %ui-button--primary;
90-
@extend %ui-button--disabled;
91-
@extend %ui-button--default-size;
65+
@include ui-button($chassis-gray-light, $chassis-blue, true);
66+
@include ui-button-sizes(default);
9267
}
9368

9469
&--large {
95-
@extend %ui-button;
96-
@extend %ui-button--primary;
97-
@extend %ui-button--primary--hover;
98-
@extend %ui-button--primary--focus;
99-
@extend %ui-button--primary--active;
100-
@extend %ui-button--primary--disabled;
101-
@extend %ui-button--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);
10273

10374
&--disabled {
104-
@extend %ui-button;
105-
@extend %ui-button--primary;
106-
@extend %ui-button--disabled;
107-
@extend %ui-button--large;
75+
@include ui-button($chassis-gray-light, $chassis-blue, true);
76+
@include ui-button-sizes(large);
10877
}
10978
}
11079

11180
&--small {
112-
@extend %ui-button;
113-
@extend %ui-button--primary;
114-
@extend %ui-button--primary--hover;
115-
@extend %ui-button--primary--focus;
116-
@extend %ui-button--primary--active;
117-
@extend %ui-button--primary--disabled;
118-
@extend %ui-button--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);
11984

12085
&--disabled {
121-
@extend %ui-button;
122-
@extend %ui-button--primary;
123-
@extend %ui-button--disabled;
124-
@extend %ui-button--small;
86+
@include ui-button($chassis-gray-light, $chassis-blue, true);
87+
@include ui-button-sizes(small);
12588
}
12689
}
12790

12891
&--extra-small {
129-
@extend %ui-button;
130-
@extend %ui-button--primary;
131-
@extend %ui-button--primary--hover;
132-
@extend %ui-button--primary--focus;
133-
@extend %ui-button--primary--active;
134-
@extend %ui-button--primary--disabled;
135-
@extend %ui-button--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);
13695

13796
&--disabled {
138-
@extend %ui-button;
139-
@extend %ui-button--primary;
140-
@extend %ui-button--disabled;
141-
@extend %ui-button--extra-small;
97+
@include ui-button($chassis-gray-light, $chassis-blue, true);
98+
@include ui-button-sizes(extra-small);
14299
}
143100
}
144101
}

‎scss/atoms/buttons/_extends.scss

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

‎scss/atoms/buttons/_mixins.scss

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
/*
2+
* ==========================================================================
3+
* Buttons (Mixins)
4+
* ==========================================================================
5+
*/
6+
7+
@mixin ui-button($color, $bgcolor, $disabled: false) {
8+
background: $bgcolor;
9+
border: 0;
10+
box-sizing: border-box;
11+
color: $color;
12+
display: inline-block;
13+
font-weight: 500;
14+
margin: .25em;
15+
text-align: center;
16+
text-decoration: none;
17+
text-transform: uppercase;
18+
19+
@if($disabled) {
20+
cursor: default;
21+
opacity: .6;
22+
}
23+
}
24+
25+
@mixin ui-button-sizes($size: default) {
26+
@if($size == large) {
27+
font-size: 20px;
28+
line-height: 20px;
29+
padding: .75em;
30+
}
31+
32+
@if($size == default) {
33+
font-size: 16px;
34+
line-height: 16px;
35+
padding: .5em;
36+
}
37+
38+
@if($size == small) {
39+
font-size: 14px;
40+
line-height: 14px;
41+
padding: .2em .5em;
42+
}
43+
44+
@if($size == extra-small) {
45+
font-size: 12px;
46+
line-height: 12px;
47+
padding: .2em .5em;
48+
}
49+
}
50+
51+
@mixin ui-button-states($color, $bgcolor) {
52+
&:active {
53+
background: darken($bgcolor, 20%);
54+
}
55+
&:focus {
56+
background: darken($bgcolor, 15%);
57+
}
58+
&:hover {
59+
background: darken($bgcolor, 10%);
60+
}
61+
&:disabled {
62+
background: $bgcolor;
63+
opacity: .6;
64+
}
65+
}

0 commit comments

Comments
 (0)