Skip to content

Commit 3321da9

Browse files
wuda-iowuda-io
authored
Merge pull request #578 from gselderslaghs/buttons-scss-mixin
refactor(Buttons) implement buttons styling with mixin
2 parents 1d8cb84 + 97e6837 commit 3321da9

File tree

3 files changed

+179
-43
lines changed

3 files changed

+179
-43
lines changed

‎sass/components/_buttons.scss‎

Lines changed: 22 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,21 @@
1-
.btn, .btn-floating, .btn-large, .btn-small, .btn-flat {
1+
:root {
22
--btn-height: 40px;
33
--btn-font-size-icon: 16px;
44
--btn-padding: 24px;
55
--btn-padding-icon: 16px;
66
--btn-gap-icon: 8px;
77
--btn-border-radius: 4px;
88
--btn-font-size: 14px;
9+
}
910

10-
height: var(--btn-height);
11-
border: none;
12-
border-radius: var(--btn-border-radius);
13-
padding-left: var(--btn-padding);
14-
padding-right: var(--btn-padding);
15-
font-size: var(--btn-font-size);
16-
font-weight: 500;
17-
text-decoration: none;
18-
display: inline-flex;
19-
align-items: center;
20-
cursor: pointer;
21-
-webkit-tap-highlight-color: transparent; // Gets rid of tap active state
22-
white-space: nowrap;
23-
outline: 0;
24-
user-select: none;
25-
transition: background-color .2s ease-out;
11+
.btn, .btn-floating, .btn-large, .btn-small, .btn-flat {
12+
@include btn(
13+
var(--btn-height),
14+
var(--btn-border-radius),
15+
var(--btn-padding),
16+
var(--btn-padding),
17+
var(--btn-font-size)
18+
);
2619
}
2720

2821
// Icon
@@ -54,49 +47,36 @@
5447
//------------------ Enabled
5548

5649
.btn.filled {
57-
color: var(--md-sys-color-on-primary);
58-
background-color: var(--md-sys-color-primary);
50+
@include btn-filled;
5951
}
6052

6153
.btn.tonal {
62-
color: var(--md-sys-color-on-secondary-container);
63-
background-color: var(--md-sys-color-secondary-container);
54+
@include btn-tonal;
6455
}
6556

6657
.btn.elevated {
67-
color: var(--md-sys-color-on-secondary-container);
68-
background-color: var(--md-sys-color-secondary-container);
69-
@extend .z-depth-1;
58+
@include btn-elevated;
7059
}
7160

7261
.btn.outlined {
73-
background-color: transparent;
74-
color: var(--md-sys-color-primary);
75-
border: 1px solid var(--md-sys-color-outline);
62+
@include btn-outlined;
7663
}
7764

7865
.btn.text, .btn-flat {
79-
@extend .z-depth-0;
80-
color: var(--md-sys-color-primary);
81-
background-color: transparent;
66+
@include btn-flat;
8267
}
8368

8469
//------------------ Disabled
8570

8671
.btn.disabled, .btn-floating.disabled, .btn-large.disabled, .btn-small.disabled, .btn-flat.disabled,
8772
.btn:disabled, .btn-floating:disabled, .btn-large:disabled, .btn-small:disabled, .btn-flat:disabled,
8873
.btn[disabled], .btn-floating[disabled], .btn-large[disabled], .btn-small[disabled], .btn-flat[disabled] {
89-
@extend .z-depth-0;
90-
color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 76%);
91-
background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 24%);
92-
pointer-events: none;
93-
box-shadow: none;
94-
cursor: default;
74+
@include btn-disabled();
9575
}
9676

9777
//------------------ Hover
9878

99-
.btn.elevated:hover {
79+
/*.btn.elevated:hover {
10080
@extend .z-depth-2;
10181
color: var(--md-sys-color-primary);
10282
background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%);
@@ -122,11 +102,11 @@
122102
.btn.text:hover {
123103
color: var(--md-sys-color-primary);
124104
background-color: color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent);
125-
}
105+
}*/
126106

127107
//------------------ Focus
128108

129-
.btn:focus {
109+
/*.btn:focus {
130110
background-color: var(--md-sys-color-primary-container);
131111
}
132112
@@ -157,10 +137,10 @@
157137
.btn:focus.text {
158138
color: var(--md-sys-color-primary);
159139
background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);
160-
}
140+
}*/
161141

162142
// Focus with Keyboard
163-
.btn:focus-visible {
143+
/*.btn:focus-visible {
164144
&.filled,
165145
&.elevated,
166146
&.tonal,
@@ -169,7 +149,7 @@
169149
outline: 3px solid var(--md-sys-color-secondary);
170150
outline-offset: 2px;
171151
}
172-
}
152+
}*/
173153

174154
//----------
175155

‎sass/components/mixins.module.scss‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
@mixin btn(
2+
$height: var(--btn-height),
3+
$border-radius: var(--btn-border-radius),
4+
$padding-left: var(--btn-padding),
5+
$padding-right: var(--btn-padding),
6+
$font-size: var(--btn-font-size),
7+
) {
8+
height: $height;
9+
border-radius: $border-radius;
10+
padding-left: $padding-left;
11+
padding-right: $padding-right;
12+
font-size: $font-size;
13+
font-weight: 500;
14+
text-decoration: none;
15+
display: inline-flex;
16+
align-items: center;
17+
cursor: pointer;
18+
-webkit-tap-highlight-color: transparent; // Gets rid of tap active state
19+
white-space: nowrap;
20+
outline: 0;
21+
user-select: none;
22+
transition: background-color .2s ease-out;
23+
24+
&:focus {
25+
background-color: var(--md-sys-color-primary-container);
26+
}
27+
}
28+
29+
@mixin btn-filled {
30+
color: var(--md-sys-color-on-primary);
31+
background-color: var(--md-sys-color-primary);
32+
33+
&:hover,
34+
&:focus {
35+
color: var(--md-sys-color-on-primary);
36+
}
37+
38+
&:hover {
39+
@extend .z-depth-1;
40+
background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 16%);
41+
}
42+
43+
&:focus {
44+
@extend .z-depth-0;
45+
background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 20%);
46+
}
47+
48+
@include focus-visible();
49+
}
50+
51+
@mixin btn-tonal {
52+
color: var(--md-sys-color-on-secondary-container);
53+
background-color: var(--md-sys-color-secondary-container);
54+
55+
&:hover,
56+
&:focus {
57+
color: var(--md-sys-color-on-secondary-container);
58+
}
59+
60+
&:hover {
61+
@extend .z-depth-1;
62+
background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%);
63+
}
64+
65+
&:focus {
66+
@extend .z-depth-0;
67+
background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 20%);
68+
}
69+
70+
@include focus-visible();
71+
}
72+
73+
@mixin btn-elevated {
74+
color: var(--md-sys-color-on-secondary-container);
75+
background-color: var(--md-sys-color-secondary-container);
76+
@extend .z-depth-1;
77+
78+
&:hover,
79+
&:focus {
80+
color: var(--md-sys-color-primary);
81+
}
82+
83+
&:hover {
84+
@extend .z-depth-2;
85+
background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%);
86+
}
87+
88+
&:focus {
89+
@extend .z-depth-1;
90+
background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-primary) 20%);
91+
}
92+
93+
@include focus-visible();
94+
}
95+
96+
@mixin btn-outlined {
97+
background-color: transparent;
98+
color: var(--md-sys-color-primary);
99+
border: 1px solid var(--md-sys-color-outline);
100+
101+
&:hover,
102+
&:focus {
103+
color: var(--md-sys-color-primary);
104+
}
105+
106+
&:hover {
107+
background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 16%);
108+
}
109+
110+
&:focus {
111+
background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);
112+
border: 1px solid var(--md-sys-color-primary);
113+
}
114+
115+
@include focus-visible();
116+
}
117+
118+
@mixin btn-flat {
119+
@extend .z-depth-0;
120+
color: var(--md-sys-color-primary);
121+
background-color: transparent;
122+
123+
&:hover,
124+
&:focus {
125+
color: var(--md-sys-color-primary);
126+
}
127+
128+
&:hover {
129+
background-color: color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent);
130+
}
131+
132+
&:focus {
133+
background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);
134+
}
135+
136+
@include focus-visible();
137+
}
138+
139+
@mixin btn-disabled {
140+
@extend .z-depth-0;
141+
color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 76%);
142+
background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 24%);
143+
pointer-events: none;
144+
box-shadow: none;
145+
cursor: default;
146+
}
147+
148+
// Focus with Keyboard
149+
@mixin focus-visible {
150+
&:focus-visible {
151+
outline: 3px solid var(--md-sys-color-secondary);
152+
outline-offset: 2px;
153+
}
154+
}
155+

‎sass/materialize.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
//@import "components/_theme_variables";
66
@import "components/colors.module";
77
@import "components/typography.module";
8+
@import "components/mixins.module";
89

910
// Color
1011
@import "components/color-variables";
@@ -17,6 +18,7 @@
1718

1819
// components
1920
@import "components/global";
21+
@import "components/buttons";
2022
@import "components/collection";
2123
@import "components/badges";
2224
@import "components/icons-material-design";
@@ -28,7 +30,6 @@
2830
@import "components/toast";
2931
@import "components/tabs";
3032
@import "components/tooltip";
31-
@import "components/buttons";
3233
@import "components/dropdown";
3334

3435
@import "components/modal";

0 commit comments

Comments
 (0)