Skip to content

Commit c8aa3dd

Browse files
mrholekmrholek
committed
refactor: update variables and improve syntax
1 parent 5f02a9b commit c8aa3dd

24 files changed

+533
-357
lines changed

‎scss/_accordion.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@
1313
--#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
1414
--#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x};
1515
--#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
16-
--#{$prefix}accordion-btn-color: #{$accordion-color};
1716
--#{$prefix}accordion-btn-color: #{$accordion-button-color};
1817
--#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
1918
--#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};

‎scss/_alert.scss

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
--#{$prefix}alert-border-color: transparent;
1313
--#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
1414
--#{$prefix}alert-border-radius: #{$alert-border-radius};
15+
--#{$prefix}alert-link-color: inherit;
1516
// scss-docs-end alert-css-vars
1617

1718
position: relative;
@@ -56,17 +57,12 @@
5657

5758
// scss-docs-start alert-modifiers
5859
// Generate contextual modifier classes for colorizing the alert.
59-
6060
@each $state, $value in $alert-variants {
61-
$alert-background: map-get($value, "alert-bg");
62-
$alert-border: map-get($value, "alert-border");
63-
$alert-color: map-get($value, "alert-color");
64-
65-
@if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
66-
$alert-color: mix(map-get($value, "base-color"), color-contrast($alert-background), abs($alert-color-scale));
67-
}
6861
.alert-#{$state} {
69-
@include alert-variant($alert-background, $alert-border, $alert-color);
62+
--#{$prefix}alert-color: #{map-get($value, "alert-color")};
63+
--#{$prefix}alert-bg: #{map-get($value, "alert-bg")};
64+
--#{$prefix}alert-border-color: #{map-get($value, "alert-border")};
65+
--#{$prefix}alert-link-color: #{shade-color(map-get($value, "alert-color"), 20%)};
7066
}
7167
}
7268
// scss-docs-end alert-modifiers

‎scss/_button-group.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
// Prevent double borders when buttons are next to each other
4040
> :not(.btn-check:first-child) + .btn,
4141
> .btn-group:not(:first-child) {
42-
@include ltr-rtl("margin-left", -$btn-border-width);
42+
@include ltr-rtl("margin-left", calc(#{$btn-border-width} * -1));
4343
}
4444

4545
// Reset rounded corners
@@ -126,7 +126,7 @@
126126

127127
> .btn:not(:first-child),
128128
> .btn-group:not(:first-child) {
129-
margin-top: -$btn-border-width;
129+
margin-top: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
130130
}
131131

132132
// Reset rounded corners

‎scss/_buttons.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
@include rfs($btn-font-size, --#{$prefix}btn-font-size);
1111
--#{$prefix}btn-font-weight: #{$btn-font-weight};
1212
--#{$prefix}btn-line-height: #{$btn-line-height};
13-
--#{$prefix}btn-color: #{$body-color};
13+
--#{$prefix}btn-color: #{$btn-color};
1414
--#{$prefix}btn-bg: transparent;
1515
--#{$prefix}btn-border-width: #{$btn-border-width};
1616
--#{$prefix}btn-border-color: transparent;

‎scss/_card.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77
--#{$prefix}card-spacer-y: #{$card-spacer-y};
88
--#{$prefix}card-spacer-x: #{$card-spacer-x};
99
--#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
10+
--#{$prefix}card-title-color: #{$card-title-color};
11+
--#{$prefix}card-subtitle-color: #{$card-subtitle-color};
1012
--#{$prefix}card-border-width: #{$card-border-width};
1113
--#{$prefix}card-border-color: #{$card-border-color};
1214
--#{$prefix}card-border-radius: #{$card-border-radius};
@@ -28,6 +30,7 @@
2830
flex-direction: column;
2931
min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
3032
height: var(--#{$prefix}card-height);
33+
color: var(--#{$prefix}body-color);
3134
word-wrap: break-word;
3235
background-color: var(--#{$prefix}card-bg);
3336
background-clip: border-box;
@@ -73,11 +76,13 @@
7376

7477
.card-title {
7578
margin-bottom: var(--#{$prefix}card-title-spacer-y);
79+
color: var(--#{$prefix}card-title-color);
7680
}
7781

7882
.card-subtitle {
7983
margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list
8084
margin-bottom: 0;
85+
color: var(--#{$prefix}card-subtitle-color);
8186
}
8287

8388
.card-text:last-child {

‎scss/_close.scss

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,37 +4,48 @@
44
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
55

66
.btn-close {
7+
// scss-docs-start close-css-vars
8+
--#{$prefix}btn-close-color: #{$btn-close-color};
9+
--#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) };
10+
--#{$prefix}btn-close-opacity: #{$btn-close-opacity};
11+
--#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity};
12+
--#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow};
13+
--#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity};
14+
--#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
15+
--#{$prefix}btn-close-white-filter: #{$btn-close-white-filter};
16+
// scss-docs-end close-css-vars
17+
718
box-sizing: content-box;
819
width: $btn-close-width;
920
height: $btn-close-height;
1021
padding: $btn-close-padding-y $btn-close-padding-x;
11-
color: var(--#{$prefix}btn-close-color, $btn-close-color);
12-
background: transparent var(--#{$prefix}btn-close-bg, escape-svg($btn-close-bg)) center / $btn-close-width auto no-repeat; // include transparent for button elements
22+
color: var(--#{$prefix}btn-close-color);
23+
background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
1324
border: 0; // for button elements
1425
@include border-radius();
15-
opacity: $btn-close-opacity;
26+
opacity: var(--#{$prefix}btn-close-opacity);
1627

1728
// Override <a>'s hover style
1829
&:hover {
19-
color: var(--#{$prefix}btn-close-color, $btn-close-color);
30+
color: var(--#{$prefix}btn-close-color);
2031
text-decoration: none;
21-
opacity: $btn-close-hover-opacity;
32+
opacity: var(--#{$prefix}btn-close-hover-opacity);
2233
}
2334

2435
&:focus {
2536
outline: 0;
26-
box-shadow: $btn-close-focus-shadow;
27-
opacity: $btn-close-focus-opacity;
37+
box-shadow: var(--#{$prefix}btn-close-focus-shadow);
38+
opacity: var(--#{$prefix}btn-close-focus-opacity);
2839
}
2940

3041
&:disabled,
3142
&.disabled {
3243
pointer-events: none;
3344
user-select: none;
34-
opacity: $btn-close-disabled-opacity;
45+
opacity: var(--#{$prefix}btn-close-disabled-opacity);
3546
}
3647
}
3748

3849
.btn-close-white {
39-
filter: $btn-close-white-filter;
50+
filter: var(--#{$prefix}btn-close-white-filter);
4051
}

‎scss/_dropdown.scss

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -90,20 +90,20 @@
9090
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
9191

9292
.dropdown-menu#{$infix}-start {
93-
--#{$prefix}position: start;
93+
--cui-position: start;
9494

9595
&[data-coreui-popper] {
96-
right: auto;
97-
left: 0;
96+
@include ltr-rtl("right", auto);
97+
@include ltr-rtl("left", 0);
9898
}
9999
}
100100

101101
.dropdown-menu#{$infix}-end {
102-
--#{$prefix}position: end;
102+
--cui-position: end;
103103

104104
&[data-coreui-popper] {
105-
right: 0;
106-
left: auto;
105+
@include ltr-rtl("right", 0);
106+
@include ltr-rtl("left", auto);
107107
}
108108
}
109109
}
@@ -185,6 +185,7 @@
185185
white-space: nowrap; // prevent links from randomly breaking onto new lines
186186
background-color: transparent; // For `<button>`s
187187
border: 0; // For `<button>`s
188+
@include border-radius(var(--#{$prefix}dropdown-item-border-radius, 0));
188189

189190
&:hover,
190191
&:focus {

‎scss/_maps.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,8 @@ $utilities-border: map-merge(
4949
$utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border") !default;
5050
// scss-docs-end utilities-border-colors
5151

52+
$utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$key", "link-underline") !default;
53+
5254
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
5355

5456
$gutters: $spacers !default;

‎scss/_nav.scss

Lines changed: 9 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@
2828
font-weight: var(--#{$prefix}nav-link-font-weight);
2929
color: var(--#{$prefix}nav-link-color);
3030
text-decoration: if($link-decoration == none, null, none);
31+
background: none;
32+
border: 0;
3133
@include transition($nav-link-transition);
3234

3335
&:hover,
@@ -36,8 +38,14 @@
3638
text-decoration: if($link-hover-decoration == underline, none, null);
3739
}
3840

41+
&:focus-visible {
42+
outline: 0;
43+
box-shadow: $nav-link-focus-box-shadow;
44+
}
45+
3946
// Disabled state lightens text
40-
&.disabled {
47+
&.disabled,
48+
&:disabled {
4149
color: var(--#{$prefix}nav-link-disabled-color);
4250
pointer-events: none;
4351
cursor: default;
@@ -63,7 +71,6 @@
6371

6472
.nav-link {
6573
margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
66-
background: none;
6774
border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
6875
@include border-top-radius(var(--#{$prefix}nav-tabs-border-radius));
6976

@@ -73,13 +80,6 @@
7380
isolation: isolate;
7481
border-color: var(--#{$prefix}nav-tabs-link-hover-border-color);
7582
}
76-
77-
&.disabled,
78-
&:disabled {
79-
color: var(--#{$prefix}nav-link-disabled-color);
80-
background-color: transparent;
81-
border-color: transparent;
82-
}
8383
}
8484

8585
.nav-link.active,
@@ -110,15 +110,7 @@
110110
// scss-docs-end nav-pills-css-vars
111111

112112
.nav-link {
113-
background: none;
114-
border: 0;
115113
@include border-radius(var(--#{$prefix}nav-pills-border-radius));
116-
117-
&:disabled {
118-
color: var(--#{$prefix}nav-link-disabled-color);
119-
background-color: transparent;
120-
border-color: transparent;
121-
}
122114
}
123115

124116
.nav-link.active,

‎scss/_navbar.scss

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@
8787
// scss-docs-start navbar-nav-css-vars
8888
--#{$prefix}nav-link-padding-x: 0;
8989
--#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
90+
@include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
9091
--#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
9192
--#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
9293
--#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);
@@ -98,9 +99,11 @@
9899
margin-bottom: 0;
99100
list-style: none;
100101

101-
.show > .nav-link,
102-
.nav-link.active {
103-
color: var(--#{$prefix}navbar-active-color);
102+
.nav-link {
103+
&.active,
104+
&.show {
105+
color: var(--#{$prefix}navbar-active-color);
106+
}
104107
}
105108

106109
.dropdown-menu {

0 commit comments

Comments
 (0)