Skip to content

Commit 90c00cb

Browse files
arnolangladearnolanglade
committed
refactor: update bootstrap
1 parent a1c3505 commit 90c00cb

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

78 files changed

+3439
-1511
lines changed

‎assets/scss/_bootstrap.scss

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,14 @@ $secondary: #002dff;
1313
$danger: #FF87B0;
1414
$light: #FFFFFF;
1515

16+
1617
// scss-docs-start import-stack
1718
// Configuration
19+
@import "bootstrap/scss/mixins";
1820
@import "bootstrap/scss/functions";
1921
@import "bootstrap/scss/variables";
20-
@import "bootstrap/scss/mixins";
22+
@import "bootstrap/scss/variables-dark";
23+
@import "bootstrap/scss/maps";
2124
@import "bootstrap/scss/utilities";
2225

2326
// Layout & components

‎assets/scss/bootstrap/scss/_accordion.scss

Lines changed: 73 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -2,43 +2,69 @@
22
// Base styles
33
//
44

5+
.accordion {
6+
// scss-docs-start accordion-css-vars
7+
--#{$prefix}accordion-color: #{$accordion-color};
8+
--#{$prefix}accordion-bg: #{$accordion-bg};
9+
--#{$prefix}accordion-transition: #{$accordion-transition};
10+
--#{$prefix}accordion-border-color: #{$accordion-border-color};
11+
--#{$prefix}accordion-border-width: #{$accordion-border-width};
12+
--#{$prefix}accordion-border-radius: #{$accordion-border-radius};
13+
--#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
14+
--#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x};
15+
--#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
16+
--#{$prefix}accordion-btn-color: #{$accordion-button-color};
17+
--#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
18+
--#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
19+
--#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width};
20+
--#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
21+
--#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};
22+
--#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
23+
--#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
24+
--#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
25+
--#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
26+
--#{$prefix}accordion-active-color: #{$accordion-button-active-color};
27+
--#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};
28+
// scss-docs-end accordion-css-vars
29+
}
30+
531
.accordion-button {
632
position: relative;
733
display: flex;
834
align-items: center;
935
width: 100%;
10-
padding: $accordion-button-padding-y $accordion-button-padding-x;
36+
padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x);
1137
@include font-size($font-size-base);
12-
color: $accordion-button-color;
38+
color: var(--#{$prefix}accordion-btn-color);
1339
text-align: left; // Reset button style
14-
background-color: $accordion-button-bg;
40+
background-color: var(--#{$prefix}accordion-btn-bg);
1541
border: 0;
1642
@include border-radius(0);
1743
overflow-anchor: none;
18-
@include transition($accordion-transition);
44+
@include transition(var(--#{$prefix}accordion-transition));
1945

2046
&:not(.collapsed) {
21-
color: $accordion-button-active-color;
22-
background-color: $accordion-button-active-bg;
23-
box-shadow: inset 0 ($accordion-border-width * -1) 0 $accordion-border-color;
47+
color: var(--#{$prefix}accordion-active-color);
48+
background-color: var(--#{$prefix}accordion-active-bg);
49+
box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list
2450

2551
&::after {
26-
background-image: escape-svg($accordion-button-active-icon);
27-
transform: $accordion-icon-transform;
52+
background-image: var(--#{$prefix}accordion-btn-active-icon);
53+
transform: var(--#{$prefix}accordion-btn-icon-transform);
2854
}
2955
}
3056

3157
// Accordion icon
3258
&::after {
3359
flex-shrink: 0;
34-
width: $accordion-icon-width;
35-
height: $accordion-icon-width;
60+
width: var(--#{$prefix}accordion-btn-icon-width);
61+
height: var(--#{$prefix}accordion-btn-icon-width);
3662
margin-left: auto;
3763
content: "";
38-
background-image: escape-svg($accordion-button-icon);
64+
background-image: var(--#{$prefix}accordion-btn-icon);
3965
background-repeat: no-repeat;
40-
background-size: $accordion-icon-width;
41-
@include transition($accordion-icon-transition);
66+
background-size: var(--#{$prefix}accordion-btn-icon-width);
67+
@include transition(var(--#{$prefix}accordion-btn-icon-transition));
4268
}
4369

4470
&:hover {
@@ -47,9 +73,8 @@
4773

4874
&:focus {
4975
z-index: 3;
50-
border-color: $accordion-button-focus-border-color;
5176
outline: 0;
52-
box-shadow: $accordion-button-focus-box-shadow;
77+
box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
5378
}
5479
}
5580

@@ -58,14 +83,15 @@
5883
}
5984

6085
.accordion-item {
61-
background-color: $accordion-bg;
62-
border: $accordion-border-width solid $accordion-border-color;
86+
color: var(--#{$prefix}accordion-color);
87+
background-color: var(--#{$prefix}accordion-bg);
88+
border: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color);
6389

6490
&:first-of-type {
65-
@include border-top-radius($accordion-border-radius);
91+
@include border-top-radius(var(--#{$prefix}accordion-border-radius));
6692

67-
.accordion-button {
68-
@include border-top-radius($accordion-inner-border-radius);
93+
> .accordion-header .accordion-button {
94+
@include border-top-radius(var(--#{$prefix}accordion-inner-border-radius));
6995
}
7096
}
7197

@@ -75,22 +101,22 @@
75101

76102
// Only set a border-radius on the last item if the accordion is collapsed
77103
&:last-of-type {
78-
@include border-bottom-radius($accordion-border-radius);
104+
@include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
79105

80-
.accordion-button {
106+
> .accordion-header .accordion-button {
81107
&.collapsed {
82-
@include border-bottom-radius($accordion-inner-border-radius);
108+
@include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius));
83109
}
84110
}
85111

86-
.accordion-collapse {
87-
@include border-bottom-radius($accordion-border-radius);
112+
> .accordion-collapse {
113+
@include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
88114
}
89115
}
90116
}
91117

92118
.accordion-body {
93-
padding: $accordion-body-padding-y $accordion-body-padding-x;
119+
padding: var(--#{$prefix}accordion-body-padding-y) var(--#{$prefix}accordion-body-padding-x);
94120
}
95121

96122

@@ -99,20 +125,34 @@
99125
// Remove borders and border-radius to keep accordion items edge-to-edge.
100126

101127
.accordion-flush {
102-
.accordion-collapse {
103-
border-width: 0;
104-
}
105-
106-
.accordion-item {
128+
> .accordion-item {
107129
border-right: 0;
108130
border-left: 0;
109131
@include border-radius(0);
110132

111133
&:first-child { border-top: 0; }
112134
&:last-child { border-bottom: 0; }
113135

114-
.accordion-button {
136+
// stylelint-disable selector-max-class
137+
> .accordion-header .accordion-button {
138+
&,
139+
&.collapsed {
140+
@include border-radius(0);
141+
}
142+
}
143+
// stylelint-enable selector-max-class
144+
145+
> .accordion-collapse {
115146
@include border-radius(0);
116147
}
117148
}
118149
}
150+
151+
@if $enable-dark-mode {
152+
@include color-mode(dark) {
153+
.accordion-button::after {
154+
--#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
155+
--#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
156+
}
157+
}
158+
}

‎assets/scss/bootstrap/scss/_alert.scss

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,25 @@
33
//
44

55
.alert {
6+
// scss-docs-start alert-css-vars
7+
--#{$prefix}alert-bg: transparent;
8+
--#{$prefix}alert-padding-x: #{$alert-padding-x};
9+
--#{$prefix}alert-padding-y: #{$alert-padding-y};
10+
--#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
11+
--#{$prefix}alert-color: inherit;
12+
--#{$prefix}alert-border-color: transparent;
13+
--#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
14+
--#{$prefix}alert-border-radius: #{$alert-border-radius};
15+
--#{$prefix}alert-link-color: inherit;
16+
// scss-docs-end alert-css-vars
17+
618
position: relative;
7-
padding: $alert-padding-y $alert-padding-x;
8-
margin-bottom: $alert-margin-bottom;
9-
border: $alert-border-width solid transparent;
10-
@include border-radius($alert-border-radius);
19+
padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
20+
margin-bottom: var(--#{$prefix}alert-margin-bottom);
21+
color: var(--#{$prefix}alert-color);
22+
background-color: var(--#{$prefix}alert-bg);
23+
border: var(--#{$prefix}alert-border);
24+
@include border-radius(var(--#{$prefix}alert-border-radius));
1125
}
1226

1327
// Headings for larger alerts
@@ -19,6 +33,7 @@
1933
// Provide class for links that match alerts
2034
.alert-link {
2135
font-weight: $alert-link-font-weight;
36+
color: var(--#{$prefix}alert-link-color);
2237
}
2338

2439

@@ -41,17 +56,13 @@
4156

4257

4358
// scss-docs-start alert-modifiers
44-
// Generate contextual modifier classes for colorizing the alert.
45-
46-
@each $state, $value in $theme-colors {
47-
$alert-background: shift-color($value, $alert-bg-scale);
48-
$alert-border: shift-color($value, $alert-border-scale);
49-
$alert-color: shift-color($value, $alert-color-scale);
50-
@if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
51-
$alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
52-
}
59+
// Generate contextual modifier classes for colorizing the alert
60+
@each $state in map-keys($theme-colors) {
5361
.alert-#{$state} {
54-
@include alert-variant($alert-background, $alert-border, $alert-color);
62+
--#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
63+
--#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
64+
--#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
65+
--#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis);
5566
}
5667
}
5768
// scss-docs-end alert-modifiers

‎assets/scss/bootstrap/scss/_badge.scss

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,25 @@
44
// `background-color`.
55

66
.badge {
7+
// scss-docs-start badge-css-vars
8+
--#{$prefix}badge-padding-x: #{$badge-padding-x};
9+
--#{$prefix}badge-padding-y: #{$badge-padding-y};
10+
@include rfs($badge-font-size, --#{$prefix}badge-font-size);
11+
--#{$prefix}badge-font-weight: #{$badge-font-weight};
12+
--#{$prefix}badge-color: #{$badge-color};
13+
--#{$prefix}badge-border-radius: #{$badge-border-radius};
14+
// scss-docs-end badge-css-vars
15+
716
display: inline-block;
8-
padding: $badge-padding-y $badge-padding-x;
9-
@include font-size($badge-font-size);
10-
font-weight: $badge-font-weight;
17+
padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x);
18+
@include font-size(var(--#{$prefix}badge-font-size));
19+
font-weight: var(--#{$prefix}badge-font-weight);
1120
line-height: 1;
12-
color: $badge-color;
21+
color: var(--#{$prefix}badge-color);
1322
text-align: center;
1423
white-space: nowrap;
1524
vertical-align: baseline;
16-
@include border-radius($badge-border-radius);
25+
@include border-radius(var(--#{$prefix}badge-border-radius));
1726
@include gradient-bg();
1827

1928
// Empty badges collapse automatically

‎assets/scss/bootstrap/scss/_breadcrumb.scss

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,40 @@
11
.breadcrumb {
2+
// scss-docs-start breadcrumb-css-vars
3+
--#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
4+
--#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
5+
--#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
6+
@include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
7+
--#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
8+
--#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
9+
--#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
10+
--#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
11+
--#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};
12+
// scss-docs-end breadcrumb-css-vars
13+
214
display: flex;
315
flex-wrap: wrap;
4-
padding: $breadcrumb-padding-y $breadcrumb-padding-x;
5-
margin-bottom: $breadcrumb-margin-bottom;
6-
@include font-size($breadcrumb-font-size);
16+
padding: var(--#{$prefix}breadcrumb-padding-y) var(--#{$prefix}breadcrumb-padding-x);
17+
margin-bottom: var(--#{$prefix}breadcrumb-margin-bottom);
18+
@include font-size(var(--#{$prefix}breadcrumb-font-size));
719
list-style: none;
8-
background-color: $breadcrumb-bg;
9-
@include border-radius($breadcrumb-border-radius);
20+
background-color: var(--#{$prefix}breadcrumb-bg);
21+
@include border-radius(var(--#{$prefix}breadcrumb-border-radius));
1022
}
1123

1224
.breadcrumb-item {
1325
// The separator between breadcrumbs (by default, a forward-slash: "/")
1426
+ .breadcrumb-item {
15-
padding-left: $breadcrumb-item-padding-x;
27+
padding-left: var(--#{$prefix}breadcrumb-item-padding-x);
1628

1729
&::before {
1830
float: left; // Suppress inline spacings and underlining of the separator
19-
padding-right: $breadcrumb-item-padding-x;
20-
color: $breadcrumb-divider-color;
21-
content: var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
31+
padding-right: var(--#{$prefix}breadcrumb-item-padding-x);
32+
color: var(--#{$prefix}breadcrumb-divider-color);
33+
content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
2234
}
2335
}
2436

2537
&.active {
26-
color: $breadcrumb-active-color;
38+
color: var(--#{$prefix}breadcrumb-item-active-color);
2739
}
2840
}

‎assets/scss/bootstrap/scss/_button-group.scss

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,14 +34,17 @@
3434
}
3535

3636
.btn-group {
37+
@include border-radius($btn-border-radius);
38+
3739
// Prevent double borders when buttons are next to each other
38-
> .btn:not(:first-child),
40+
> :not(.btn-check:first-child) + .btn,
3941
> .btn-group:not(:first-child) {
40-
margin-left: -$btn-border-width;
42+
margin-left: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
4143
}
4244

4345
// Reset rounded corners
4446
> .btn:not(:last-child):not(.dropdown-toggle),
47+
> .btn.dropdown-toggle-split:first-child,
4548
> .btn-group:not(:last-child) > .btn {
4649
@include border-end-radius(0);
4750
}
@@ -123,7 +126,7 @@
123126

124127
> .btn:not(:first-child),
125128
> .btn-group:not(:first-child) {
126-
margin-top: -$btn-border-width;
129+
margin-top: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
127130
}
128131

129132
// Reset rounded corners

0 commit comments

Comments
 (0)