Skip to content

Commit 654005e

Browse files
mrholekmrholek
committed
refactor: move all variables to mixin
1 parent 6c32a05 commit 654005e

File tree

7 files changed

+103
-137
lines changed

7 files changed

+103
-137
lines changed

‎scss/_alert.scss

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -46,14 +46,7 @@
4646
// scss-docs-start alert-modifiers
4747
// Generate contextual modifier classes for colorizing the alert.
4848

49-
@each $state, $map in $alert-variants {
50-
$background: map-get($map, "bg");
51-
$border-color: map-get($map, "border-color");
52-
$color: contrast-ratio-correction(map-get($map, "color"), map-get($map, "bg"), abs($alert-color-scale), $state);
53-
$link-color: map-get($map, "link-color");
54-
55-
.alert-#{$state} {
56-
@include alert-variant($background, $border-color, $color, $link-color);
57-
}
49+
@each $state, $variant in $alert-variants {
50+
@include alert-variant($state, $variant);
5851
}
5952
// scss-docs-end alert-modifiers

‎scss/_buttons.scss

Lines changed: 6 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -85,60 +85,20 @@
8585
//
8686
// scss-docs-start btn-variant-loops
8787
// scss-docs-start button-modifiers
88-
@each $state, $map in $button-variants {
89-
.btn-#{$state} {
90-
@include button-variant(
91-
$background: map-get($map, "bg"),
92-
$border-color: map-get($map, "border-color"),
93-
$color: map-get($map, "color"),
94-
$hover-background: map-get($map, "hover-bg"),
95-
$hover-border-color: map-get($map, "hover-border-color"),
96-
$hover-color: map-get($map, "hover-color"),
97-
$active-background: map-get($map, "active-bg"),
98-
$active-border-color: map-get($map, "active-border-color"),
99-
$active-color: map-get($map, "active-color"),
100-
$disabled-background: map-get($map, "disabled-bg"),
101-
$disabled-border-color: map-get($map, "disabled-border-color"),
102-
$disabled-color: map-get($map, "disabled-color"),
103-
$shadow: map-get($map, "shadow")
104-
);
105-
}
88+
@each $state, $variant in $button-variants {
89+
@include button-variant($state, $variant);
10690
}
10791
// scss-docs-end button-modifiers
10892

10993
// scss-docs-start button-outline-modifiers
110-
@each $state, $map in $button-outline-ghost-variants {
111-
.btn-outline-#{$state} {
112-
@include button-outline-variant(
113-
$color: map-get($map, "color"),
114-
$hover-background: map-get($map, "hover-bg"),
115-
$hover-border-color: map-get($map, "hover-border-color"),
116-
$hover-color: map-get($map, "hover-color"),
117-
$active-background: map-get($map, "active-bg"),
118-
$active-border-color: map-get($map, "active-border-color"),
119-
$active-color: map-get($map, "active-color"),
120-
$disabled-color: map-get($map, "disabled-color"),
121-
$shadow: map-get($map, "shadow")
122-
);
123-
}
94+
@each $state, $variant in $button-outline-ghost-variants {
95+
@include button-outline-variant($state, $variant);
12496
}
12597
// scss-docs-end button-outline-modifiers
12698

12799
// scss-docs-start button-ghost-modifiers
128-
@each $state, $map in $button-outline-ghost-variants {
129-
.btn-ghost-#{$state} {
130-
@include button-ghost-variant(
131-
$color: map-get($map, "color"),
132-
$hover-background: map-get($map, "hover-bg"),
133-
$hover-border-color: map-get($map, "hover-border-color"),
134-
$hover-color: map-get($map, "hover-color"),
135-
$active-background: map-get($map, "active-bg"),
136-
$active-border-color: map-get($map, "active-border-color"),
137-
$active-color: map-get($map, "active-color"),
138-
$disabled-color: map-get($map, "disabled-color"),
139-
$shadow: map-get($map, "shadow")
140-
);
141-
}
100+
@each $state, $variant in $button-outline-ghost-variants {
101+
@include button-ghost-variant($state, $variant);
142102
}
143103
// scss-docs-end button-ghost-modifiers
144104
// scss-docs-end btn-variant-loops

‎scss/_list-group.scss

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -152,11 +152,7 @@
152152
// Add modifier classes to change text and background color on individual items.
153153
// Organizationally, this must come after the `:hover` states.
154154

155-
@each $state, $map in $list-group-variants {
156-
$background: map-get($map, "bg");
157-
$background-hover: map-get($map, "bg-hover");
158-
$color: contrast-ratio-correction(map-get($map, "color"), map-get($map, "bg"), abs($alert-color-scale), $state);
159-
160-
@include list-group-item-variant($state, $background, $background-hover, $color);
155+
@each $state, $variant in $list-group-variants {
156+
@include list-group-item-variant($state, $variant);
161157
}
162158
// scss-docs-end list-group-modifiers

‎scss/_popover.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@
144144
@include font-size($font-size-base);
145145
color: var(--#{$variable-prefix}popover-header-color, $popover-header-color);
146146
background-color: var(--#{$variable-prefix}popover-header-bg, $popover-header-bg);
147-
border-bottom: $popover-border-width solid shade-color($popover-header-bg, 10%); // TODO: vars
147+
border-bottom: $popover-border-width solid var(--#{$variable-prefix}popover-header-border-color, shade-color($popover-header-bg, 10%));
148148
@include border-top-radius($popover-inner-border-radius);
149149

150150
&:empty {

‎scss/mixins/_alert.scss

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,15 @@
11
// scss-docs-start alert-variant-mixin
2-
@mixin alert-variant($background, $border-color, $color, $link-color) {
3-
--#{$variable-prefix}alert-color: #{$color};
4-
--#{$variable-prefix}alert-bg: #{$background};
5-
--#{$variable-prefix}alert-border-color: #{$border-color};
6-
--#{$variable-prefix}alert-link-color: #{$link-color};
2+
@mixin alert-variant($state, $variant) {
3+
$background: map-get($variant, "bg");
4+
$border-color: map-get($variant, "border-color");
5+
$color: contrast-ratio-correction(map-get($variant, "color"), map-get($variant, "bg"), abs($alert-color-scale), $state);
6+
$link-color: map-get($variant, "link-color");
7+
8+
.alert-#{$state} {
9+
--#{$variable-prefix}alert-color: #{$color};
10+
--#{$variable-prefix}alert-bg: #{$background};
11+
--#{$variable-prefix}alert-border-color: #{$border-color};
12+
--#{$variable-prefix}alert-link-color: #{$link-color};
13+
}
714
}
815
// scss-docs-end alert-variant-mixin

‎scss/mixins/_buttons.scss

Lines changed: 75 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -4,84 +4,90 @@
44
// and disabled options for all buttons
55

66
// scss-docs-start btn-variant-mixin
7-
@mixin button-variant(
8-
$background,
9-
$border-color,
10-
$color,
11-
$hover-background,
12-
$hover-border-color,
13-
$hover-color,
14-
$active-background,
15-
$active-border-color,
16-
$active-color,
17-
$disabled-background,
18-
$disabled-border-color,
19-
$disabled-color,
20-
$shadow
21-
) {
22-
--#{$variable-prefix}btn-bg: #{$background};
23-
--#{$variable-prefix}btn-border-color: #{$border-color};
24-
--#{$variable-prefix}btn-color: #{$color};
25-
--#{$variable-prefix}btn-hover-bg: #{$hover-background};
26-
--#{$variable-prefix}btn-hover-border-color: #{$hover-border-color};
27-
--#{$variable-prefix}btn-hover-color: #{$hover-color};
28-
--#{$variable-prefix}btn-active-bg: #{$active-background};
29-
--#{$variable-prefix}btn-active-border-color: #{$active-border-color};
30-
--#{$variable-prefix}btn-active-color: #{$active-color};
31-
--#{$variable-prefix}btn-disabled-bg: #{$disabled-background};
32-
--#{$variable-prefix}btn-disabled-border-color: #{$disabled-border-color};
33-
--#{$variable-prefix}btn-disabled-color: #{$disabled-color};
34-
--#{$variable-prefix}btn-shadow: #{$shadow};
7+
@mixin button-variant($state, $variant) {
8+
$background: map-get($variant, "bg");
9+
$border-color: map-get($variant, "border-color");
10+
$color: map-get($variant, "color");
11+
$hover-background: map-get($variant, "hover-bg");
12+
$hover-border-color: map-get($variant, "hover-border-color");
13+
$hover-color: map-get($variant, "hover-color");
14+
$active-background: map-get($variant, "active-bg");
15+
$active-border-color: map-get($variant, "active-border-color");
16+
$active-color: map-get($variant, "active-color");
17+
$disabled-background: map-get($variant, "disabled-bg");
18+
$disabled-border-color: map-get($variant, "disabled-border-color");
19+
$disabled-color: map-get($variant, "disabled-color");
20+
$shadow: map-get($variant, "shadow");
21+
22+
.btn-#{$state} {
23+
--#{$variable-prefix}btn-bg: #{$background};
24+
--#{$variable-prefix}btn-border-color: #{$border-color};
25+
--#{$variable-prefix}btn-color: #{$color};
26+
--#{$variable-prefix}btn-hover-bg: #{$hover-background};
27+
--#{$variable-prefix}btn-hover-border-color: #{$hover-border-color};
28+
--#{$variable-prefix}btn-hover-color: #{$hover-color};
29+
--#{$variable-prefix}btn-active-bg: #{$active-background};
30+
--#{$variable-prefix}btn-active-border-color: #{$active-border-color};
31+
--#{$variable-prefix}btn-active-color: #{$active-color};
32+
--#{$variable-prefix}btn-disabled-bg: #{$disabled-background};
33+
--#{$variable-prefix}btn-disabled-border-color: #{$disabled-border-color};
34+
--#{$variable-prefix}btn-disabled-color: #{$disabled-color};
35+
--#{$variable-prefix}btn-shadow: #{$shadow};
36+
}
3537
}
3638
// scss-docs-end btn-variant-mixin
3739

3840
// scss-docs-start btn-outline-variant-mixin
39-
@mixin button-outline-variant(
40-
$color,
41-
$hover-background,
42-
$hover-border-color,
43-
$hover-color,
44-
$active-background,
45-
$active-border-color,
46-
$active-color,
47-
$disabled-color,
48-
$shadow
49-
) {
50-
--#{$variable-prefix}btn-border-color: #{$color};
51-
--#{$variable-prefix}btn-color: #{$color};
52-
--#{$variable-prefix}btn-hover-bg: #{$hover-background};
53-
--#{$variable-prefix}btn-hover-border-color: #{$hover-border-color};
54-
--#{$variable-prefix}btn-hover-color: #{$hover-color};
55-
--#{$variable-prefix}btn-active-bg: #{$active-background};
56-
--#{$variable-prefix}btn-active-border-color: #{$active-border-color};
57-
--#{$variable-prefix}btn-active-color: #{$active-color};
58-
--#{$variable-prefix}btn-disabled-color: #{$disabled-color};
59-
--#{$variable-prefix}btn-shadow: #{$shadow};
41+
@mixin button-outline-variant($state, $variant) {
42+
$color: map-get($variant, "color");
43+
$hover-background: map-get($variant, "hover-bg");
44+
$hover-border-color: map-get($variant, "hover-border-color");
45+
$hover-color: map-get($variant, "hover-color");
46+
$active-background: map-get($variant, "active-bg");
47+
$active-border-color: map-get($variant, "active-border-color");
48+
$active-color: map-get($variant, "active-color");
49+
$disabled-color: map-get($variant, "disabled-color");
50+
$shadow: map-get($variant, "shadow");
51+
52+
.btn-outline-#{$state} {
53+
--#{$variable-prefix}btn-border-color: #{$color};
54+
--#{$variable-prefix}btn-color: #{$color};
55+
--#{$variable-prefix}btn-hover-bg: #{$hover-background};
56+
--#{$variable-prefix}btn-hover-border-color: #{$hover-border-color};
57+
--#{$variable-prefix}btn-hover-color: #{$hover-color};
58+
--#{$variable-prefix}btn-active-bg: #{$active-background};
59+
--#{$variable-prefix}btn-active-border-color: #{$active-border-color};
60+
--#{$variable-prefix}btn-active-color: #{$active-color};
61+
--#{$variable-prefix}btn-disabled-color: #{$disabled-color};
62+
--#{$variable-prefix}btn-shadow: #{$shadow};
63+
}
6064
}
6165
// scss-docs-end btn-outline-variant-mixin
6266

6367
// Button Ghost
6468

65-
@mixin button-ghost-variant(
66-
$color,
67-
$hover-background,
68-
$hover-border-color,
69-
$hover-color,
70-
$active-background,
71-
$active-border-color,
72-
$active-color,
73-
$disabled-color,
74-
$shadow
75-
) {
76-
--#{$variable-prefix}btn-color: #{$color};
77-
--#{$variable-prefix}btn-hover-bg: #{$hover-background};
78-
--#{$variable-prefix}btn-hover-border-color: #{$hover-border-color};
79-
--#{$variable-prefix}btn-hover-color: #{$hover-color};
80-
--#{$variable-prefix}btn-active-bg: #{$active-background};
81-
--#{$variable-prefix}btn-active-border-color: #{$active-border-color};
82-
--#{$variable-prefix}btn-active-color: #{$active-color};
83-
--#{$variable-prefix}btn-disabled-color: #{$disabled-color};
84-
--#{$variable-prefix}btn-shadow: #{$shadow};
69+
@mixin button-ghost-variant($state, $variant) {
70+
$color: map-get($variant, "color");
71+
$hover-background: map-get($variant, "hover-bg");
72+
$hover-border-color: map-get($variant, "hover-border-color");
73+
$hover-color: map-get($variant, "hover-color");
74+
$active-background: map-get($variant, "active-bg");
75+
$active-border-color: map-get($variant, "active-border-color");
76+
$active-color: map-get($variant, "active-color");
77+
$disabled-color: map-get($variant, "disabled-color");
78+
$shadow: map-get($variant, "shadow");
79+
80+
.btn-ghost-#{$state} {
81+
--#{$variable-prefix}btn-color: #{$color};
82+
--#{$variable-prefix}btn-hover-bg: #{$hover-background};
83+
--#{$variable-prefix}btn-hover-border-color: #{$hover-border-color};
84+
--#{$variable-prefix}btn-hover-color: #{$hover-color};
85+
--#{$variable-prefix}btn-active-bg: #{$active-background};
86+
--#{$variable-prefix}btn-active-border-color: #{$active-border-color};
87+
--#{$variable-prefix}btn-active-color: #{$active-color};
88+
--#{$variable-prefix}btn-disabled-color: #{$disabled-color};
89+
--#{$variable-prefix}btn-shadow: #{$shadow};
90+
}
8591
}
8692

8793
// Button sizes

‎scss/mixins/_list-group.scss

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
// List Groups
22
// scss-docs-start list-group-mixin
3-
@mixin list-group-item-variant($state, $background, $background-hover, $color) {
3+
@mixin list-group-item-variant($state, $variant) {
4+
$background: map-get($variant, "bg");
5+
$background-hover: map-get($variant, "bg-hover");
6+
$color: contrast-ratio-correction(map-get($variant, "color"), map-get($variant, "bg"), abs($alert-color-scale), $state);
7+
48
.list-group-item-#{$state} {
59
--#{$variable-prefix}list-group-color: #{$color};
610
--#{$variable-prefix}list-group-bg: #{$background};

0 commit comments

Comments
 (0)