Skip to content

Commit 22eff29

Browse files
mrholekmrholek
committed
refactor: improve buttons generator syntax
1 parent 9c37e9a commit 22eff29

File tree

4 files changed

+106
-69
lines changed

4 files changed

+106
-69
lines changed

‎scss/_buttons.scss‎

Lines changed: 24 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -60,16 +60,16 @@
6060
.btn-#{$state} {
6161
@include button-variant(
6262
$background: var(--#{$variable-prefix}btn-background, map-get($map, "background")),
63-
$border: var(--#{$variable-prefix}btn-border-color, map-get($map, "border")),
63+
$border-color: var(--#{$variable-prefix}btn-border-color, map-get($map, "border-color")),
6464
$color: var(--#{$variable-prefix}btn-color, map-get($map, "color")),
6565
$hover-background: var(--#{$variable-prefix}btn-hover-background, map-get($map, "hover-background")),
66-
$hover-border: var(--#{$variable-prefix}btn-hover-border, map-get($map, "hover-border")),
66+
$hover-border-color: var(--#{$variable-prefix}btn-hover-border, map-get($map, "hover-border-color")),
6767
$hover-color: var(--#{$variable-prefix}btn-hover-color, map-get($map, "hover-color")),
6868
$active-background: var(--#{$variable-prefix}btn-active-background, map-get($map, "active-background")),
69-
$active-border: var(--#{$variable-prefix}btn-active-border, map-get($map, "active-border")),
69+
$active-border-color: var(--#{$variable-prefix}btn-active-border, map-get($map, "active-border-color")),
7070
$active-color: var(--#{$variable-prefix}btn-active-color, map-get($map, "active-color")),
7171
$disabled-background: var(--#{$variable-prefix}btn-disabled-background, map-get($map, "disabled-background")),
72-
$disabled-border: var(--#{$variable-prefix}btn-disabled-border, map-get($map, "disabled-border")),
72+
$disabled-border-color: var(--#{$variable-prefix}btn-disabled-border, map-get($map, "disabled-border-color")),
7373
$disabled-color: var(--#{$variable-prefix}btn-disabled-color, map-get($map, "disabled-color")),
7474
$shadow: var(--#{$variable-prefix}btn-shadow, map-get($map, "shadow"))
7575
);
@@ -78,29 +78,36 @@
7878
// scss-docs-end button-modifiers
7979

8080
// scss-docs-start button-outline-modifiers
81-
@each $state, $map in $button-variants {
81+
@each $state, $map in $button-outline-ghost-variants {
8282
.btn-outline-#{$state} {
8383
@include button-outline-variant(
84-
$color: var(--#{$variable-prefix}btn-outline-color, map-get($map, "background")),
85-
$color-hover: var(--#{$variable-prefix}btn-outline-hover-color, map-get($map, "color")),
86-
$active-background: var(--#{$variable-prefix}btn-outline-active-background, map-get($map, "background")),
87-
$active-border: var(--#{$variable-prefix}btn-outline-active-border, map-get($map, "background")),
88-
$active-color: var(--#{$variable-prefix}btn-outline-active-color, map-get($map, "active-color")),
89-
$shadow: var(--#{$variable-prefix}btn-outline-shadow, map-get($map, "shadow"))
84+
$color: var(--#{$variable-prefix}btn-color, map-get($map, "color")),
85+
$hover-background: var(--#{$variable-prefix}btn-hover-background, map-get($map, "hover-background")),
86+
$hover-border-color: var(--#{$variable-prefix}btn-hover-border-color, map-get($map, "hover-border-color")),
87+
$hover-color: var(--#{$variable-prefix}btn-hover-color, map-get($map, "hover-color")),
88+
$active-background: var(--#{$variable-prefix}btn-active-background, map-get($map, "active-background")),
89+
$active-border-color: var(--#{$variable-prefix}btn-active-border-color, map-get($map, "active-border-color")),
90+
$active-color: var(--#{$variable-prefix}btn-active-color, map-get($map, "active-color")),
91+
$disabled-color: var(--#{$variable-prefix}btn-disabled-color, map-get($map, "disabled-color")),
92+
$shadow: var(--#{$variable-prefix}btn-shadow, map-get($map, "shadow"))
9093
);
9194
}
9295
}
9396
// scss-docs-end button-outline-modifiers
9497

9598
// scss-docs-start button-ghost-modifiers
96-
@each $state, $map in $button-variants {
99+
@each $state, $map in $button-outline-ghost-variants {
97100
.btn-ghost-#{$state} {
98101
@include button-ghost-variant(
99-
$color: var(--#{$variable-prefix}btn-ghost-color, map-get($map, "background")),
100-
$color-hover: var(--#{$variable-prefix}btn-ghost-hover-color, map-get($map, "color")),
101-
$active-background: var(--#{$variable-prefix}btn-ghost-active-background, map-get($map, "background")),
102-
$active-border: var(--#{$variable-prefix}btn-ghost-active-border, map-get($map, "background")),
103-
$shadow: var(--#{$variable-prefix}btn-ghost-shadow, map-get($map, "shadow"))
102+
$color: var(--#{$variable-prefix}btn-color, map-get($map, "color")),
103+
$hover-background: var(--#{$variable-prefix}btn-hover-background, map-get($map, "hover-background")),
104+
$hover-border-color: var(--#{$variable-prefix}btn-hover-border-color, map-get($map, "hover-border-color")),
105+
$hover-color: var(--#{$variable-prefix}btn-hover-color, map-get($map, "hover-color")),
106+
$active-background: var(--#{$variable-prefix}btn-active-background, map-get($map, "active-background")),
107+
$active-border-color: var(--#{$variable-prefix}btn-active-border-color, map-get($map, "active-border-color")),
108+
$active-color: var(--#{$variable-prefix}btn-active-color, map-get($map, "active-color")),
109+
$disabled-color: var(--#{$variable-prefix}btn-disabled-color, map-get($map, "disabled-color")),
110+
$shadow: var(--#{$variable-prefix}btn-shadow, map-get($map, "shadow"))
104111
);
105112
}
106113
}

‎scss/_functions.scss‎

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -196,21 +196,35 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
196196
@return if(color-contrast($color) == $color-contrast-light, shade-color($color, $shade), tint-color($color, $tint));
197197
}
198198

199-
@function btn-color-map($background, $border) {
199+
@function btn-color-map($background, $border-color) {
200200
@return (
201201
"background": $background,
202-
"border": $border,
202+
"border-color": $border-color,
203203
"color": color-contrast($background),
204-
"hover-background": btn-color($background, 15%, 15%),
205-
"hover-border": btn-color($border, 20%, 10%),
206-
"hover-color": color-contrast(btn-color($background, 15%, 15%)),
207-
"active-background": btn-color($background, 20%, 20%),
208-
"active-border": btn-color($border, 25%, 10%),
209-
"active-color": color-contrast(btn-color($background, 20%, 20%)),
204+
"hover-background": btn-color($background, $btn-hover-bg-shade-amount, $btn-hover-bg-tint-amount),
205+
"hover-border-color": btn-color($border-color, $btn-hover-border-shade-amount, $btn-hover-border-tint-amount),
206+
"hover-color": color-contrast(btn-color($background, $btn-hover-bg-shade-amount, $btn-hover-bg-tint-amount)),
207+
"active-background": btn-color($background, $btn-active-bg-shade-amount, $btn-active-bg-tint-amount),
208+
"active-border-color": btn-color($border-color, $btn-active-border-shade-amount, $btn-active-border-tint-amount),
209+
"active-color": color-contrast(btn-color($border-color, $btn-active-border-shade-amount, $btn-active-border-tint-amount)),
210210
"disabled-background": $background,
211-
"disabled-border": $border,
211+
"disabled-border-color": $border-color,
212212
"disabled-color": color-contrast($background),
213-
"shadow": rgba(mix($background, $border, 15%), .5)
213+
"shadow": rgba(mix($background, $border-color, 15%), .5)
214+
);
215+
}
216+
217+
@function btn-outline-color-map($background) {
218+
@return (
219+
"color": $background,
220+
"hover-background": btn-color($background, $btn-hover-bg-shade-amount, $btn-hover-bg-tint-amount),
221+
"hover-border-color": btn-color($background, $btn-hover-border-shade-amount, $btn-hover-border-tint-amount),
222+
"hover-color": color-contrast(btn-color($background, $btn-hover-bg-shade-amount, $btn-hover-bg-tint-amount)),
223+
"active-background": btn-color($background, $btn-active-bg-shade-amount, $btn-active-bg-tint-amount),
224+
"active-border-color": btn-color($background, $btn-active-border-shade-amount, $btn-active-border-tint-amount),
225+
"active-color": color-contrast(btn-color($background, $btn-active-border-shade-amount, $btn-active-border-tint-amount)),
226+
"disabled-color": $background,
227+
"shadow": rgba(mix($background, $background, 15%), .5)
214228
);
215229
}
216230
// scss-docs-end button-color-functions

‎scss/_variables.scss‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -730,6 +730,15 @@ $btn-border-radius-lg: $border-radius-lg !default;
730730

731731
$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
732732

733+
$btn-hover-bg-shade-amount: 15% !default;
734+
$btn-hover-bg-tint-amount: 15% !default;
735+
$btn-hover-border-shade-amount: 20% !default;
736+
$btn-hover-border-tint-amount: 10% !default;
737+
$btn-active-bg-shade-amount: 20% !default;
738+
$btn-active-bg-tint-amount: 20% !default;
739+
$btn-active-border-shade-amount: 25% !default;
740+
$btn-active-border-tint-amount: 10% !default;
741+
733742
$button-variants: (
734743
"primary": btn-color-map($primary, $primary),
735744
"secondary": btn-color-map($secondary, $secondary),
@@ -741,15 +750,16 @@ $button-variants: (
741750
"dark": btn-color-map($dark, $dark)
742751
) !default;
743752

744-
// TODO: check if we can use those variables
745-
// $btn-hover-bg-shade-amount: 15% !default;
746-
// $btn-hover-bg-tint-amount: 15% !default;
747-
// $btn-hover-border-shade-amount: 20% !default;
748-
// $btn-hover-border-tint-amount: 10% !default;
749-
// $btn-active-bg-shade-amount: 20% !default;
750-
// $btn-active-bg-tint-amount: 20% !default;
751-
// $btn-active-border-shade-amount: 25% !default;
752-
// $btn-active-border-tint-amount: 10% !default;
753+
$button-outline-ghost-variants: (
754+
"primary": btn-outline-color-map($primary),
755+
"secondary": btn-outline-color-map($secondary),
756+
"success": btn-outline-color-map($success),
757+
"danger": btn-outline-color-map($danger),
758+
"warning": btn-outline-color-map($warning),
759+
"info": btn-outline-color-map($info),
760+
"light": btn-outline-color-map($light),
761+
"dark": btn-outline-color-map($dark)
762+
) !default;
753763
// scss-docs-end btn-variables
754764

755765

‎scss/mixins/_buttons.scss‎

Lines changed: 39 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -6,35 +6,35 @@
66
// scss-docs-start btn-variant-mixin
77
@mixin button-variant(
88
$background,
9-
$border,
9+
$border-color,
1010
$color,
1111
$hover-background,
12-
$hover-border,
12+
$hover-border-color,
1313
$hover-color,
1414
$active-background,
15-
$active-border,
15+
$active-border-color,
1616
$active-color,
1717
$disabled-background,
18-
$disabled-border,
18+
$disabled-border-color,
1919
$disabled-color,
2020
$shadow
2121
) {
2222
color: $color;
2323
@include gradient-bg($background);
24-
border-color: $border;
24+
border-color: $border-color;
2525
@include box-shadow($btn-box-shadow);
2626

2727
&:hover {
2828
color: $hover-color;
2929
@include gradient-bg($hover-background);
30-
border-color: $hover-border;
30+
border-color: $hover-border-color;
3131
}
3232

3333
.btn-check:focus + &,
3434
&:focus {
3535
color: $hover-color;
3636
@include gradient-bg($hover-background);
37-
border-color: $hover-border;
37+
border-color: $hover-border-color;
3838
@if $enable-shadows {
3939
@include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width $shadow);
4040
} @else {
@@ -52,7 +52,7 @@
5252
background-color: $active-background;
5353
// Remove CSS gradients if they're enabled
5454
background-image: if($enable-gradients, none, null);
55-
border-color: $active-border;
55+
border-color: $active-border-color;
5656

5757
&:focus {
5858
@if $enable-shadows {
@@ -70,27 +70,30 @@
7070
background-color: $disabled-background;
7171
// Remove CSS gradients if they're enabled
7272
background-image: if($enable-gradients, none, null);
73-
border-color: $disabled-border;
73+
border-color: $disabled-border-color;
7474
}
7575
}
7676
// scss-docs-end btn-variant-mixin
7777

7878
// scss-docs-start btn-outline-variant-mixin
7979
@mixin button-outline-variant(
8080
$color,
81-
$color-hover,
81+
$hover-background,
82+
$hover-border-color,
83+
$hover-color,
8284
$active-background,
83-
$active-border,
85+
$active-border-color,
8486
$active-color,
87+
$disabled-color,
8588
$shadow
8689
) {
8790
color: $color;
8891
border-color: $color;
8992

9093
&:hover {
91-
color: $color-hover;
92-
background-color: $active-background;
93-
border-color: $active-border;
94+
color: $hover-color;
95+
background-color: $hover-background;
96+
border-color: $hover-border-color;
9497
}
9598

9699
.btn-check:focus + &,
@@ -105,7 +108,7 @@
105108
&.dropdown-toggle.show {
106109
color: $active-color;
107110
background-color: $active-background;
108-
border-color: $active-border;
111+
border-color: $active-border-color;
109112

110113
&:focus {
111114
@if $enable-shadows {
@@ -119,7 +122,7 @@
119122

120123
&:disabled,
121124
&.disabled {
122-
color: $color;
125+
color: $disabled-color;
123126
background-color: transparent;
124127
}
125128
}
@@ -129,51 +132,54 @@
129132

130133
@mixin button-ghost-variant(
131134
$color,
132-
$color-hover,
135+
$hover-background,
136+
$hover-border-color,
137+
$hover-color,
133138
$active-background,
134-
$active-border,
139+
$active-border-color,
140+
$active-color,
141+
$disabled-color,
135142
$shadow
136143
) {
137144
color: $color;
138-
background-color: transparent;
139-
background-image: none;
145+
// background-color: transparent;
146+
// background-image: none;
140147
border-color: transparent;
141148

142149
&:hover {
143-
color: $color-hover;
144-
background-color: $active-background;
145-
border-color: $active-border;
150+
color: $hover-color;
151+
background-color: $hover-background;
152+
border-color: $hover-border-color;
146153
}
147154

148155
.btn-check:focus + &,
149156
&:focus {
150-
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
157+
box-shadow: 0 0 0 $btn-focus-width $shadow;
151158
}
152159

153160
.btn-check:checked + &,
154161
.btn-check:active + &,
155162
&:active,
156163
&.active,
157164
&.dropdown-toggle.show {
158-
color: color-yiq($active-background);
165+
color: $active-color;
159166
background-color: $active-background;
160-
border-color: $active-border;
167+
border-color: $active-border-color;
161168

162169
&:focus {
163-
// Avoid using mixin so we can pass custom focus shadow properly
164170
@if $enable-shadows {
165171
@include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width $shadow);
166172
} @else {
173+
// Avoid using mixin so we can pass custom focus shadow properly
167174
box-shadow: 0 0 0 $btn-focus-width $shadow;
168175
}
169176
}
177+
}
170178

171-
&.disabled,
172-
&:disabled {
173-
color: $color;
174-
background-color: transparent;
175-
border-color: transparent;
176-
}
179+
&:disabled,
180+
&.disabled {
181+
color: $disabled-color;
182+
background-color: transparent;
177183
}
178184
}
179185

0 commit comments

Comments
 (0)