administrate-bootstrap-theme 1.0.6 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/assets/javascripts/administrate-bootstrap-theme/bootstrap.bundle.js +2503 -3001
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_accordion.scss +73 -33
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_alert.scss +25 -14
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_badge.scss +14 -5
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_breadcrumb.scss +22 -10
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_button-group.scss +6 -3
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_buttons.scss +133 -28
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_card.scss +60 -37
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_carousel.scss +22 -15
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_close.scss +33 -10
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_containers.scss +1 -1
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_dropdown.scss +86 -76
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_functions.scss +10 -10
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_grid.scss +9 -3
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_helpers.scss +3 -0
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_list-group.scss +60 -37
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_maps.scss +174 -0
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_mixins.scss +1 -2
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_modal.scss +71 -44
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_nav.scss +86 -28
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_navbar.scss +101 -147
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_offcanvas.scss +121 -61
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_pagination.scss +66 -21
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_placeholders.scss +1 -1
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_popover.scss +90 -52
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_progress.scss +30 -10
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_reboot.scss +31 -45
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_root.scss +155 -22
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_spinners.scss +38 -22
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_tables.scss +40 -24
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_toasts.scss +38 -16
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_tooltip.scss +60 -56
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_type.scss +2 -0
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_utilities.scss +209 -33
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_variables-dark.scss +87 -0
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_variables.scss +404 -294
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/bootstrap-grid.scss +4 -9
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/bootstrap-reboot.scss +4 -7
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/bootstrap-utilities.scss +7 -6
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/bootstrap.scss +5 -6
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_floating-labels.scss +37 -5
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_form-check.scss +51 -14
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_form-control.scss +36 -41
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_form-range.scss +3 -3
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_form-select.scss +12 -4
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_input-group.scss +20 -9
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_color-bg.scss +7 -0
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_colored-links.scss +20 -2
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_focus-ring.scss +5 -0
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_icon-link.scss +25 -0
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_position.scss +7 -1
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_ratio.scss +2 -2
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_vr.scss +2 -2
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_alert.scss +11 -4
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_banner.scss +7 -0
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_breakpoints.scss +8 -8
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_buttons.scss +32 -95
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_caret.scss +30 -25
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_color-mode.scss +21 -0
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_container.scss +4 -2
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_forms.scss +38 -19
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_gradients.scss +1 -1
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_grid.scss +14 -14
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_list-group.scss +2 -0
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_pagination.scss +4 -25
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_reset-text.scss +1 -1
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_table-variants.scss +12 -9
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_utilities.scss +14 -6
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_visually-hidden.scss +5 -1
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/vendor/_rfs.scss +23 -29
- data/app/assets/stylesheets/administrate-bootstrap-theme/components/_content_body.scss +21 -7
- data/app/assets/stylesheets/administrate-bootstrap-theme/components/_navigation.scss +4 -0
- data/app/assets/stylesheets/administrate-bootstrap-theme/components/_pagination.scss +11 -3
- data/lib/administrate-bootstrap-theme/version.rb +2 -2
- data/package.json +2 -2
- metadata +24 -3
@@ -0,0 +1,25 @@
|
|
1
|
+
.icon-link {
|
2
|
+
display: inline-flex;
|
3
|
+
gap: $icon-link-gap;
|
4
|
+
align-items: center;
|
5
|
+
text-decoration-color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, .5));
|
6
|
+
text-underline-offset: $icon-link-underline-offset;
|
7
|
+
backface-visibility: hidden;
|
8
|
+
|
9
|
+
> .bi {
|
10
|
+
flex-shrink: 0;
|
11
|
+
width: $icon-link-icon-size;
|
12
|
+
height: $icon-link-icon-size;
|
13
|
+
fill: currentcolor;
|
14
|
+
@include transition($icon-link-icon-transition);
|
15
|
+
}
|
16
|
+
}
|
17
|
+
|
18
|
+
.icon-link-hover {
|
19
|
+
&:hover,
|
20
|
+
&:focus-visible {
|
21
|
+
> .bi {
|
22
|
+
transform: var(--#{$prefix}icon-link-transform, $icon-link-icon-transform);
|
23
|
+
}
|
24
|
+
}
|
25
|
+
}
|
@@ -16,7 +16,7 @@
|
|
16
16
|
z-index: $zindex-fixed;
|
17
17
|
}
|
18
18
|
|
19
|
-
// Responsive sticky top
|
19
|
+
// Responsive sticky top and bottom
|
20
20
|
@each $breakpoint in map-keys($grid-breakpoints) {
|
21
21
|
@include media-breakpoint-up($breakpoint) {
|
22
22
|
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
@@ -26,5 +26,11 @@
|
|
26
26
|
top: 0;
|
27
27
|
z-index: $zindex-sticky;
|
28
28
|
}
|
29
|
+
|
30
|
+
.sticky#{$infix}-bottom {
|
31
|
+
position: sticky;
|
32
|
+
bottom: 0;
|
33
|
+
z-index: $zindex-sticky;
|
34
|
+
}
|
29
35
|
}
|
30
36
|
}
|
@@ -6,7 +6,7 @@
|
|
6
6
|
|
7
7
|
&::before {
|
8
8
|
display: block;
|
9
|
-
padding-top: var(--#{$
|
9
|
+
padding-top: var(--#{$prefix}aspect-ratio);
|
10
10
|
content: "";
|
11
11
|
}
|
12
12
|
|
@@ -21,6 +21,6 @@
|
|
21
21
|
|
22
22
|
@each $key, $ratio in $aspect-ratios {
|
23
23
|
.ratio-#{$key} {
|
24
|
-
--#{$
|
24
|
+
--#{$prefix}aspect-ratio: #{$ratio};
|
25
25
|
}
|
26
26
|
}
|
@@ -1,11 +1,18 @@
|
|
1
|
+
@include deprecate("`alert-variant()`", "v5.3.0", "v6.0.0");
|
2
|
+
|
1
3
|
// scss-docs-start alert-variant-mixin
|
2
4
|
@mixin alert-variant($background, $border, $color) {
|
3
|
-
color: $color;
|
4
|
-
|
5
|
-
border-color: $border;
|
5
|
+
--#{$prefix}alert-color: #{$color};
|
6
|
+
--#{$prefix}alert-bg: #{$background};
|
7
|
+
--#{$prefix}alert-border-color: #{$border};
|
8
|
+
--#{$prefix}alert-link-color: #{shade-color($color, 20%)};
|
9
|
+
|
10
|
+
@if $enable-gradients {
|
11
|
+
background-image: var(--#{$prefix}gradient);
|
12
|
+
}
|
6
13
|
|
7
14
|
.alert-link {
|
8
|
-
color:
|
15
|
+
color: var(--#{$prefix}alert-link-color);
|
9
16
|
}
|
10
17
|
}
|
11
18
|
// scss-docs-end alert-variant-mixin
|
@@ -2,7 +2,7 @@
|
|
2
2
|
//
|
3
3
|
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
|
4
4
|
//
|
5
|
-
// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
|
5
|
+
// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)
|
6
6
|
//
|
7
7
|
// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
|
8
8
|
|
@@ -10,9 +10,9 @@
|
|
10
10
|
//
|
11
11
|
// >> breakpoint-next(sm)
|
12
12
|
// md
|
13
|
-
// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
13
|
+
// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
|
14
14
|
// md
|
15
|
-
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
|
15
|
+
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl))
|
16
16
|
// md
|
17
17
|
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
|
18
18
|
$n: index($breakpoint-names, $name);
|
@@ -24,7 +24,7 @@
|
|
24
24
|
|
25
25
|
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
|
26
26
|
//
|
27
|
-
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
27
|
+
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
|
28
28
|
// 576px
|
29
29
|
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
|
30
30
|
$min: map-get($breakpoints, $name);
|
@@ -38,7 +38,7 @@
|
|
38
38
|
// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
|
39
39
|
// See https://bugs.webkit.org/show_bug.cgi?id=178261
|
40
40
|
//
|
41
|
-
// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
41
|
+
// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
|
42
42
|
// 767.98px
|
43
43
|
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
|
44
44
|
$max: map-get($breakpoints, $name);
|
@@ -48,9 +48,9 @@
|
|
48
48
|
// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
|
49
49
|
// Useful for making responsive utilities.
|
50
50
|
//
|
51
|
-
// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
51
|
+
// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
|
52
52
|
// "" (Returns a blank string)
|
53
|
-
// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
53
|
+
// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
|
54
54
|
// "-sm"
|
55
55
|
@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
|
56
56
|
@return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
|
@@ -109,7 +109,7 @@
|
|
109
109
|
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
|
110
110
|
$min: breakpoint-min($name, $breakpoints);
|
111
111
|
$next: breakpoint-next($name, $breakpoints);
|
112
|
-
$max: breakpoint-max($next);
|
112
|
+
$max: breakpoint-max($next, $breakpoints);
|
113
113
|
|
114
114
|
@if $min != null and $max != null {
|
115
115
|
@media (min-width: $min) and (max-width: $max) {
|
@@ -18,59 +18,20 @@
|
|
18
18
|
$disabled-border: $border,
|
19
19
|
$disabled-color: color-contrast($disabled-background)
|
20
20
|
) {
|
21
|
-
color: $color;
|
22
|
-
|
23
|
-
border-color: $border;
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
}
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
@include gradient-bg($hover-background);
|
36
|
-
border-color: $hover-border;
|
37
|
-
@if $enable-shadows {
|
38
|
-
@include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
|
39
|
-
} @else {
|
40
|
-
// Avoid using mixin so we can pass custom focus shadow properly
|
41
|
-
box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
|
42
|
-
}
|
43
|
-
}
|
44
|
-
|
45
|
-
.btn-check:checked + &,
|
46
|
-
.btn-check:active + &,
|
47
|
-
&:active,
|
48
|
-
&.active,
|
49
|
-
.show > &.dropdown-toggle {
|
50
|
-
color: $active-color;
|
51
|
-
background-color: $active-background;
|
52
|
-
// Remove CSS gradients if they're enabled
|
53
|
-
background-image: if($enable-gradients, none, null);
|
54
|
-
border-color: $active-border;
|
55
|
-
|
56
|
-
&:focus {
|
57
|
-
@if $enable-shadows {
|
58
|
-
@include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
|
59
|
-
} @else {
|
60
|
-
// Avoid using mixin so we can pass custom focus shadow properly
|
61
|
-
box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
|
62
|
-
}
|
63
|
-
}
|
64
|
-
}
|
65
|
-
|
66
|
-
&:disabled,
|
67
|
-
&.disabled {
|
68
|
-
color: $disabled-color;
|
69
|
-
background-color: $disabled-background;
|
70
|
-
// Remove CSS gradients if they're enabled
|
71
|
-
background-image: if($enable-gradients, none, null);
|
72
|
-
border-color: $disabled-border;
|
73
|
-
}
|
21
|
+
--#{$prefix}btn-color: #{$color};
|
22
|
+
--#{$prefix}btn-bg: #{$background};
|
23
|
+
--#{$prefix}btn-border-color: #{$border};
|
24
|
+
--#{$prefix}btn-hover-color: #{$hover-color};
|
25
|
+
--#{$prefix}btn-hover-bg: #{$hover-background};
|
26
|
+
--#{$prefix}btn-hover-border-color: #{$hover-border};
|
27
|
+
--#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
|
28
|
+
--#{$prefix}btn-active-color: #{$active-color};
|
29
|
+
--#{$prefix}btn-active-bg: #{$active-background};
|
30
|
+
--#{$prefix}btn-active-border-color: #{$active-border};
|
31
|
+
--#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
|
32
|
+
--#{$prefix}btn-disabled-color: #{$disabled-color};
|
33
|
+
--#{$prefix}btn-disabled-bg: #{$disabled-background};
|
34
|
+
--#{$prefix}btn-disabled-border-color: #{$disabled-border};
|
74
35
|
}
|
75
36
|
// scss-docs-end btn-variant-mixin
|
76
37
|
|
@@ -82,52 +43,28 @@
|
|
82
43
|
$active-border: $color,
|
83
44
|
$active-color: color-contrast($active-background)
|
84
45
|
) {
|
85
|
-
color: $color;
|
86
|
-
border-color: $color;
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
}
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
}
|
98
|
-
|
99
|
-
.btn-check:checked + &,
|
100
|
-
.btn-check:active + &,
|
101
|
-
&:active,
|
102
|
-
&.active,
|
103
|
-
&.dropdown-toggle.show {
|
104
|
-
color: $active-color;
|
105
|
-
background-color: $active-background;
|
106
|
-
border-color: $active-border;
|
107
|
-
|
108
|
-
&:focus {
|
109
|
-
@if $enable-shadows {
|
110
|
-
@include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
|
111
|
-
} @else {
|
112
|
-
// Avoid using mixin so we can pass custom focus shadow properly
|
113
|
-
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
|
114
|
-
}
|
115
|
-
}
|
116
|
-
}
|
117
|
-
|
118
|
-
&:disabled,
|
119
|
-
&.disabled {
|
120
|
-
color: $color;
|
121
|
-
background-color: transparent;
|
122
|
-
}
|
46
|
+
--#{$prefix}btn-color: #{$color};
|
47
|
+
--#{$prefix}btn-border-color: #{$color};
|
48
|
+
--#{$prefix}btn-hover-color: #{$color-hover};
|
49
|
+
--#{$prefix}btn-hover-bg: #{$active-background};
|
50
|
+
--#{$prefix}btn-hover-border-color: #{$active-border};
|
51
|
+
--#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
|
52
|
+
--#{$prefix}btn-active-color: #{$active-color};
|
53
|
+
--#{$prefix}btn-active-bg: #{$active-background};
|
54
|
+
--#{$prefix}btn-active-border-color: #{$active-border};
|
55
|
+
--#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
|
56
|
+
--#{$prefix}btn-disabled-color: #{$color};
|
57
|
+
--#{$prefix}btn-disabled-bg: transparent;
|
58
|
+
--#{$prefix}btn-disabled-border-color: #{$color};
|
59
|
+
--#{$prefix}gradient: none;
|
123
60
|
}
|
124
61
|
// scss-docs-end btn-outline-variant-mixin
|
125
62
|
|
126
63
|
// scss-docs-start btn-size-mixin
|
127
64
|
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
65
|
+
--#{$prefix}btn-padding-y: #{$padding-y};
|
66
|
+
--#{$prefix}btn-padding-x: #{$padding-x};
|
67
|
+
@include rfs($font-size, --#{$prefix}btn-font-size);
|
68
|
+
--#{$prefix}btn-border-radius: #{$border-radius};
|
132
69
|
}
|
133
70
|
// scss-docs-end btn-size-mixin
|
@@ -1,44 +1,49 @@
|
|
1
1
|
// scss-docs-start caret-mixins
|
2
|
-
@mixin caret-down {
|
3
|
-
border-top: $
|
4
|
-
border-right: $
|
2
|
+
@mixin caret-down($width: $caret-width) {
|
3
|
+
border-top: $width solid;
|
4
|
+
border-right: $width solid transparent;
|
5
5
|
border-bottom: 0;
|
6
|
-
border-left: $
|
6
|
+
border-left: $width solid transparent;
|
7
7
|
}
|
8
8
|
|
9
|
-
@mixin caret-up {
|
9
|
+
@mixin caret-up($width: $caret-width) {
|
10
10
|
border-top: 0;
|
11
|
-
border-right: $
|
12
|
-
border-bottom: $
|
13
|
-
border-left: $
|
11
|
+
border-right: $width solid transparent;
|
12
|
+
border-bottom: $width solid;
|
13
|
+
border-left: $width solid transparent;
|
14
14
|
}
|
15
15
|
|
16
|
-
@mixin caret-end {
|
17
|
-
border-top: $
|
16
|
+
@mixin caret-end($width: $caret-width) {
|
17
|
+
border-top: $width solid transparent;
|
18
18
|
border-right: 0;
|
19
|
-
border-bottom: $
|
20
|
-
border-left: $
|
19
|
+
border-bottom: $width solid transparent;
|
20
|
+
border-left: $width solid;
|
21
21
|
}
|
22
22
|
|
23
|
-
@mixin caret-start {
|
24
|
-
border-top: $
|
25
|
-
border-right: $
|
26
|
-
border-bottom: $
|
23
|
+
@mixin caret-start($width: $caret-width) {
|
24
|
+
border-top: $width solid transparent;
|
25
|
+
border-right: $width solid;
|
26
|
+
border-bottom: $width solid transparent;
|
27
27
|
}
|
28
28
|
|
29
|
-
@mixin caret(
|
29
|
+
@mixin caret(
|
30
|
+
$direction: down,
|
31
|
+
$width: $caret-width,
|
32
|
+
$spacing: $caret-spacing,
|
33
|
+
$vertical-align: $caret-vertical-align
|
34
|
+
) {
|
30
35
|
@if $enable-caret {
|
31
36
|
&::after {
|
32
37
|
display: inline-block;
|
33
|
-
margin-left: $
|
34
|
-
vertical-align: $
|
38
|
+
margin-left: $spacing;
|
39
|
+
vertical-align: $vertical-align;
|
35
40
|
content: "";
|
36
41
|
@if $direction == down {
|
37
|
-
@include caret-down();
|
42
|
+
@include caret-down($width);
|
38
43
|
} @else if $direction == up {
|
39
|
-
@include caret-up();
|
44
|
+
@include caret-up($width);
|
40
45
|
} @else if $direction == end {
|
41
|
-
@include caret-end();
|
46
|
+
@include caret-end($width);
|
42
47
|
}
|
43
48
|
}
|
44
49
|
|
@@ -49,10 +54,10 @@
|
|
49
54
|
|
50
55
|
&::before {
|
51
56
|
display: inline-block;
|
52
|
-
margin-right: $
|
53
|
-
vertical-align: $
|
57
|
+
margin-right: $spacing;
|
58
|
+
vertical-align: $vertical-align;
|
54
59
|
content: "";
|
55
|
-
@include caret-start();
|
60
|
+
@include caret-start($width);
|
56
61
|
}
|
57
62
|
}
|
58
63
|
|
@@ -0,0 +1,21 @@
|
|
1
|
+
// scss-docs-start color-mode-mixin
|
2
|
+
@mixin color-mode($mode: light, $root: false) {
|
3
|
+
@if $color-mode-type == "media-query" {
|
4
|
+
@if $root == true {
|
5
|
+
@media (prefers-color-scheme: $mode) {
|
6
|
+
:root {
|
7
|
+
@content;
|
8
|
+
}
|
9
|
+
}
|
10
|
+
} @else {
|
11
|
+
@media (prefers-color-scheme: $mode) {
|
12
|
+
@content;
|
13
|
+
}
|
14
|
+
}
|
15
|
+
} @else {
|
16
|
+
[data-bs-theme="#{$mode}"] {
|
17
|
+
@content;
|
18
|
+
}
|
19
|
+
}
|
20
|
+
}
|
21
|
+
// scss-docs-end color-mode-mixin
|
@@ -1,9 +1,11 @@
|
|
1
1
|
// Container mixins
|
2
2
|
|
3
3
|
@mixin make-container($gutter: $container-padding-x) {
|
4
|
+
--#{$prefix}gutter-x: #{$gutter};
|
5
|
+
--#{$prefix}gutter-y: 0;
|
4
6
|
width: 100%;
|
5
|
-
padding-right: var(--#{$
|
6
|
-
padding-left: var(--#{$
|
7
|
+
padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
|
8
|
+
padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
|
7
9
|
margin-right: auto;
|
8
10
|
margin-left: auto;
|
9
11
|
}
|
@@ -21,7 +21,8 @@
|
|
21
21
|
$icon,
|
22
22
|
$tooltip-color: color-contrast($color),
|
23
23
|
$tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
|
24
|
-
$focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity)
|
24
|
+
$focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity),
|
25
|
+
$border-color: $color
|
25
26
|
) {
|
26
27
|
.#{$state}-feedback {
|
27
28
|
display: none;
|
@@ -56,7 +57,7 @@
|
|
56
57
|
|
57
58
|
.form-control {
|
58
59
|
@include form-validation-state-selector($state) {
|
59
|
-
border-color: $color;
|
60
|
+
border-color: $border-color;
|
60
61
|
|
61
62
|
@if $enable-validation-icons {
|
62
63
|
padding-right: $input-height-inner;
|
@@ -67,8 +68,13 @@
|
|
67
68
|
}
|
68
69
|
|
69
70
|
&:focus {
|
70
|
-
border-color: $color;
|
71
|
-
|
71
|
+
border-color: $border-color;
|
72
|
+
@if $enable-shadows {
|
73
|
+
@include box-shadow($input-box-shadow, $focus-box-shadow);
|
74
|
+
} @else {
|
75
|
+
// Avoid using mixin so we can pass custom focus shadow properly
|
76
|
+
box-shadow: $focus-box-shadow;
|
77
|
+
}
|
72
78
|
}
|
73
79
|
}
|
74
80
|
}
|
@@ -85,28 +91,41 @@
|
|
85
91
|
|
86
92
|
.form-select {
|
87
93
|
@include form-validation-state-selector($state) {
|
88
|
-
border-color: $color;
|
94
|
+
border-color: $border-color;
|
89
95
|
|
90
96
|
@if $enable-validation-icons {
|
91
97
|
&:not([multiple]):not([size]),
|
92
98
|
&:not([multiple])[size="1"] {
|
99
|
+
--#{$prefix}form-select-bg-icon: #{escape-svg($icon)};
|
93
100
|
padding-right: $form-select-feedback-icon-padding-end;
|
94
|
-
background-image: escape-svg($form-select-indicator), escape-svg($icon);
|
95
101
|
background-position: $form-select-bg-position, $form-select-feedback-icon-position;
|
96
102
|
background-size: $form-select-bg-size, $form-select-feedback-icon-size;
|
97
103
|
}
|
98
104
|
}
|
99
105
|
|
100
106
|
&:focus {
|
101
|
-
border-color: $color;
|
102
|
-
|
107
|
+
border-color: $border-color;
|
108
|
+
@if $enable-shadows {
|
109
|
+
@include box-shadow($form-select-box-shadow, $focus-box-shadow);
|
110
|
+
} @else {
|
111
|
+
// Avoid using mixin so we can pass custom focus shadow properly
|
112
|
+
box-shadow: $focus-box-shadow;
|
113
|
+
}
|
114
|
+
}
|
115
|
+
}
|
116
|
+
}
|
117
|
+
|
118
|
+
.form-control-color {
|
119
|
+
@include form-validation-state-selector($state) {
|
120
|
+
@if $enable-validation-icons {
|
121
|
+
width: add($form-color-width, $input-height-inner);
|
103
122
|
}
|
104
123
|
}
|
105
124
|
}
|
106
125
|
|
107
126
|
.form-check-input {
|
108
127
|
@include form-validation-state-selector($state) {
|
109
|
-
border-color: $color;
|
128
|
+
border-color: $border-color;
|
110
129
|
|
111
130
|
&:checked {
|
112
131
|
background-color: $color;
|
@@ -127,16 +146,16 @@
|
|
127
146
|
}
|
128
147
|
}
|
129
148
|
|
130
|
-
.input-group
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
149
|
+
.input-group {
|
150
|
+
> .form-control:not(:focus),
|
151
|
+
> .form-select:not(:focus),
|
152
|
+
> .form-floating:not(:focus-within) {
|
153
|
+
@include form-validation-state-selector($state) {
|
154
|
+
@if $state == "valid" {
|
155
|
+
z-index: 3;
|
156
|
+
} @else if $state == "invalid" {
|
157
|
+
z-index: 4;
|
158
|
+
}
|
140
159
|
}
|
141
160
|
}
|
142
161
|
}
|
@@ -3,17 +3,17 @@
|
|
3
3
|
// Generate semantic grid columns with these mixins.
|
4
4
|
|
5
5
|
@mixin make-row($gutter: $grid-gutter-width) {
|
6
|
-
--#{$
|
7
|
-
--#{$
|
6
|
+
--#{$prefix}gutter-x: #{$gutter};
|
7
|
+
--#{$prefix}gutter-y: 0;
|
8
8
|
display: flex;
|
9
9
|
flex-wrap: wrap;
|
10
10
|
// TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed
|
11
|
-
margin-top: calc(-1 * var(--#{$
|
12
|
-
margin-right: calc(-.5 * var(--#{$
|
13
|
-
margin-left: calc(-.5 * var(--#{$
|
11
|
+
margin-top: calc(-1 * var(--#{$prefix}gutter-y)); // stylelint-disable-line function-disallowed-list
|
12
|
+
margin-right: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
|
13
|
+
margin-left: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
|
14
14
|
}
|
15
15
|
|
16
|
-
@mixin make-col-ready(
|
16
|
+
@mixin make-col-ready() {
|
17
17
|
// Add box sizing if only the grid is loaded
|
18
18
|
box-sizing: if(variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null);
|
19
19
|
// Prevent columns from becoming too narrow when at smaller grid tiers by
|
@@ -22,9 +22,9 @@
|
|
22
22
|
flex-shrink: 0;
|
23
23
|
width: 100%;
|
24
24
|
max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
|
25
|
-
padding-right: calc(var(--#{$
|
26
|
-
padding-left: calc(var(--#{$
|
27
|
-
margin-top: var(--#{$
|
25
|
+
padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
|
26
|
+
padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
|
27
|
+
margin-top: var(--#{$prefix}gutter-y);
|
28
28
|
}
|
29
29
|
|
30
30
|
@mixin make-col($size: false, $columns: $grid-columns) {
|
@@ -51,12 +51,12 @@
|
|
51
51
|
// Row columns
|
52
52
|
//
|
53
53
|
// Specify on a parent element(e.g., .row) to force immediate children into NN
|
54
|
-
//
|
54
|
+
// number of columns. Supports wrapping to new lines, but does not do a Masonry
|
55
55
|
// style grid.
|
56
56
|
@mixin row-cols($count) {
|
57
57
|
> * {
|
58
58
|
flex: 0 0 auto;
|
59
|
-
width: divide(
|
59
|
+
width: percentage(divide(1, $count));
|
60
60
|
}
|
61
61
|
}
|
62
62
|
|
@@ -114,12 +114,12 @@
|
|
114
114
|
@each $key, $value in $gutters {
|
115
115
|
.g#{$infix}-#{$key},
|
116
116
|
.gx#{$infix}-#{$key} {
|
117
|
-
--#{$
|
117
|
+
--#{$prefix}gutter-x: #{$value};
|
118
118
|
}
|
119
119
|
|
120
120
|
.g#{$infix}-#{$key},
|
121
121
|
.gy#{$infix}-#{$key} {
|
122
|
-
--#{$
|
122
|
+
--#{$prefix}gutter-y: #{$value};
|
123
123
|
}
|
124
124
|
}
|
125
125
|
}
|
@@ -138,7 +138,7 @@
|
|
138
138
|
}
|
139
139
|
}
|
140
140
|
|
141
|
-
// Start with `1` because `0` is
|
141
|
+
// Start with `1` because `0` is an invalid value.
|
142
142
|
// Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
|
143
143
|
@for $i from 1 through ($columns - 1) {
|
144
144
|
.g-start#{$infix}-#{$i} {
|
@@ -2,30 +2,9 @@
|
|
2
2
|
|
3
3
|
// scss-docs-start pagination-mixin
|
4
4
|
@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
}
|
9
|
-
|
10
|
-
.page-item {
|
11
|
-
@if $pagination-margin-start == (-$pagination-border-width) {
|
12
|
-
&:first-child {
|
13
|
-
.page-link {
|
14
|
-
@include border-start-radius($border-radius);
|
15
|
-
}
|
16
|
-
}
|
17
|
-
|
18
|
-
&:last-child {
|
19
|
-
.page-link {
|
20
|
-
@include border-end-radius($border-radius);
|
21
|
-
}
|
22
|
-
}
|
23
|
-
} @else {
|
24
|
-
//Add border-radius to all pageLinks in case they have left margin
|
25
|
-
.page-link {
|
26
|
-
@include border-radius($border-radius);
|
27
|
-
}
|
28
|
-
}
|
29
|
-
}
|
5
|
+
--#{$prefix}pagination-padding-x: #{$padding-x};
|
6
|
+
--#{$prefix}pagination-padding-y: #{$padding-y};
|
7
|
+
@include rfs($font-size, --#{$prefix}pagination-font-size);
|
8
|
+
--#{$prefix}pagination-border-radius: #{$border-radius};
|
30
9
|
}
|
31
10
|
// scss-docs-end pagination-mixin
|