administrate-bootstrap-theme 1.0.6 → 1.1.0
Sign up to get free protection for your applications and to get access to all the features.
- 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
|