bootstrap-scss 5.1.3 → 5.2.1

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.
Files changed (61) hide show
  1. package/LICENSE +2 -2
  2. package/README.md +5 -5
  3. package/_accordion.scss +149 -118
  4. package/_alert.scss +18 -4
  5. package/_badge.scss +14 -5
  6. package/_breadcrumb.scss +22 -10
  7. package/_button-group.scss +142 -139
  8. package/_buttons.scss +201 -111
  9. package/_card.scss +55 -37
  10. package/_close.scss +1 -1
  11. package/_containers.scss +1 -1
  12. package/_dropdown.scss +249 -240
  13. package/_functions.scss +302 -302
  14. package/_grid.scss +3 -3
  15. package/_helpers.scss +1 -0
  16. package/_list-group.scss +192 -174
  17. package/_maps.scss +54 -0
  18. package/_modal.scss +237 -209
  19. package/_nav.scss +172 -139
  20. package/_navbar.scss +278 -335
  21. package/_offcanvas.scss +144 -83
  22. package/_pagination.scss +109 -64
  23. package/_placeholders.scss +1 -1
  24. package/_popover.scss +196 -158
  25. package/_progress.scss +20 -9
  26. package/_reboot.scss +25 -40
  27. package/_root.scss +40 -21
  28. package/_spinners.scss +38 -22
  29. package/_tables.scss +32 -23
  30. package/_toasts.scss +71 -51
  31. package/_tooltip.scss +61 -56
  32. package/_type.scss +2 -0
  33. package/_utilities.scss +43 -26
  34. package/_variables.scss +1634 -1641
  35. package/bootstrap-grid.scss +3 -6
  36. package/bootstrap-reboot.scss +3 -7
  37. package/bootstrap-utilities.scss +3 -6
  38. package/bootstrap.scss +4 -6
  39. package/forms/_floating-labels.scss +75 -63
  40. package/forms/_form-check.scss +28 -5
  41. package/forms/_form-control.scss +12 -37
  42. package/forms/_form-select.scss +0 -1
  43. package/forms/_input-group.scss +132 -121
  44. package/helpers/_color-bg.scss +10 -0
  45. package/helpers/_colored-links.scss +2 -2
  46. package/helpers/_position.scss +7 -1
  47. package/helpers/_ratio.scss +2 -2
  48. package/helpers/_vr.scss +1 -1
  49. package/mixins/_alert.scss +7 -3
  50. package/mixins/_banner.scss +9 -0
  51. package/mixins/_breakpoints.scss +8 -8
  52. package/mixins/_buttons.scss +32 -95
  53. package/mixins/_container.scss +4 -2
  54. package/mixins/_forms.scss +152 -144
  55. package/mixins/_gradients.scss +1 -1
  56. package/mixins/_grid.scss +12 -12
  57. package/mixins/_pagination.scss +4 -25
  58. package/mixins/_reset-text.scss +1 -1
  59. package/mixins/_table-variants.scss +12 -9
  60. package/mixins/_utilities.scss +97 -89
  61. package/package.json +1 -1
package/_offcanvas.scss CHANGED
@@ -1,83 +1,144 @@
1
- .offcanvas {
2
- position: fixed;
3
- bottom: 0;
4
- z-index: $zindex-offcanvas;
5
- display: flex;
6
- flex-direction: column;
7
- max-width: 100%;
8
- color: $offcanvas-color;
9
- visibility: hidden;
10
- background-color: $offcanvas-bg-color;
11
- background-clip: padding-box;
12
- outline: 0;
13
- @include box-shadow($offcanvas-box-shadow);
14
- @include transition(transform $offcanvas-transition-duration ease-in-out);
15
- }
16
-
17
- .offcanvas-backdrop {
18
- @include overlay-backdrop($zindex-offcanvas-backdrop, $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);
19
- }
20
-
21
- .offcanvas-header {
22
- display: flex;
23
- align-items: center;
24
- justify-content: space-between;
25
- padding: $offcanvas-padding-y $offcanvas-padding-x;
26
-
27
- .btn-close {
28
- padding: ($offcanvas-padding-y * .5) ($offcanvas-padding-x * .5);
29
- margin-top: $offcanvas-padding-y * -.5;
30
- margin-right: $offcanvas-padding-x * -.5;
31
- margin-bottom: $offcanvas-padding-y * -.5;
32
- }
33
- }
34
-
35
- .offcanvas-title {
36
- margin-bottom: 0;
37
- line-height: $offcanvas-title-line-height;
38
- }
39
-
40
- .offcanvas-body {
41
- flex-grow: 1;
42
- padding: $offcanvas-padding-y $offcanvas-padding-x;
43
- overflow-y: auto;
44
- }
45
-
46
- .offcanvas-start {
47
- top: 0;
48
- left: 0;
49
- width: $offcanvas-horizontal-width;
50
- border-right: $offcanvas-border-width solid $offcanvas-border-color;
51
- transform: translateX(-100%);
52
- }
53
-
54
- .offcanvas-end {
55
- top: 0;
56
- right: 0;
57
- width: $offcanvas-horizontal-width;
58
- border-left: $offcanvas-border-width solid $offcanvas-border-color;
59
- transform: translateX(100%);
60
- }
61
-
62
- .offcanvas-top {
63
- top: 0;
64
- right: 0;
65
- left: 0;
66
- height: $offcanvas-vertical-height;
67
- max-height: 100%;
68
- border-bottom: $offcanvas-border-width solid $offcanvas-border-color;
69
- transform: translateY(-100%);
70
- }
71
-
72
- .offcanvas-bottom {
73
- right: 0;
74
- left: 0;
75
- height: $offcanvas-vertical-height;
76
- max-height: 100%;
77
- border-top: $offcanvas-border-width solid $offcanvas-border-color;
78
- transform: translateY(100%);
79
- }
80
-
81
- .offcanvas.show {
82
- transform: none;
83
- }
1
+ // stylelint-disable function-disallowed-list
2
+
3
+ %offcanvas-css-vars {
4
+ // scss-docs-start offcanvas-css-vars
5
+ --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
6
+ --#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
7
+ --#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
8
+ --#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
9
+ --#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
10
+ --#{$prefix}offcanvas-color: #{$offcanvas-color};
11
+ --#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
12
+ --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
13
+ --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
14
+ --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};
15
+ // scss-docs-end offcanvas-css-vars
16
+ }
17
+
18
+ @each $breakpoint in map-keys($grid-breakpoints) {
19
+ $next: breakpoint-next($breakpoint, $grid-breakpoints);
20
+ $infix: breakpoint-infix($next, $grid-breakpoints);
21
+
22
+ .offcanvas#{$infix} {
23
+ @extend %offcanvas-css-vars;
24
+ }
25
+ }
26
+
27
+ @each $breakpoint in map-keys($grid-breakpoints) {
28
+ $next: breakpoint-next($breakpoint, $grid-breakpoints);
29
+ $infix: breakpoint-infix($next, $grid-breakpoints);
30
+
31
+ .offcanvas#{$infix} {
32
+ @include media-breakpoint-down($next) {
33
+ position: fixed;
34
+ bottom: 0;
35
+ z-index: var(--#{$prefix}offcanvas-zindex);
36
+ display: flex;
37
+ flex-direction: column;
38
+ max-width: 100%;
39
+ color: var(--#{$prefix}offcanvas-color);
40
+ visibility: hidden;
41
+ background-color: var(--#{$prefix}offcanvas-bg);
42
+ background-clip: padding-box;
43
+ outline: 0;
44
+ @include box-shadow(var(--#{$prefix}offcanvas-box-shadow));
45
+ @include transition(transform $offcanvas-transition-duration ease-in-out);
46
+
47
+ &.offcanvas-start {
48
+ top: 0;
49
+ left: 0;
50
+ width: var(--#{$prefix}offcanvas-width);
51
+ border-right: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
52
+ transform: translateX(-100%);
53
+ }
54
+
55
+ &.offcanvas-end {
56
+ top: 0;
57
+ right: 0;
58
+ width: var(--#{$prefix}offcanvas-width);
59
+ border-left: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
60
+ transform: translateX(100%);
61
+ }
62
+
63
+ &.offcanvas-top {
64
+ top: 0;
65
+ right: 0;
66
+ left: 0;
67
+ height: var(--#{$prefix}offcanvas-height);
68
+ max-height: 100%;
69
+ border-bottom: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
70
+ transform: translateY(-100%);
71
+ }
72
+
73
+ &.offcanvas-bottom {
74
+ right: 0;
75
+ left: 0;
76
+ height: var(--#{$prefix}offcanvas-height);
77
+ max-height: 100%;
78
+ border-top: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
79
+ transform: translateY(100%);
80
+ }
81
+
82
+ &.showing,
83
+ &.show:not(.hiding) {
84
+ transform: none;
85
+ }
86
+
87
+ &.showing,
88
+ &.hiding,
89
+ &.show {
90
+ visibility: visible;
91
+ }
92
+ }
93
+
94
+ @if not ($infix == "") {
95
+ @include media-breakpoint-up($next) {
96
+ --#{$prefix}offcanvas-height: auto;
97
+ --#{$prefix}offcanvas-border-width: 0;
98
+ background-color: transparent !important; // stylelint-disable-line declaration-no-important
99
+
100
+ .offcanvas-header {
101
+ display: none;
102
+ }
103
+
104
+ .offcanvas-body {
105
+ display: flex;
106
+ flex-grow: 0;
107
+ padding: 0;
108
+ overflow-y: visible;
109
+ // Reset `background-color` in case `.bg-*` classes are used in offcanvas
110
+ background-color: transparent !important; // stylelint-disable-line declaration-no-important
111
+ }
112
+ }
113
+ }
114
+ }
115
+ }
116
+
117
+ .offcanvas-backdrop {
118
+ @include overlay-backdrop($zindex-offcanvas-backdrop, $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);
119
+ }
120
+
121
+ .offcanvas-header {
122
+ display: flex;
123
+ align-items: center;
124
+ justify-content: space-between;
125
+ padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
126
+
127
+ .btn-close {
128
+ padding: calc(var(--#{$prefix}offcanvas-padding-y) * .5) calc(var(--#{$prefix}offcanvas-padding-x) * .5);
129
+ margin-top: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
130
+ margin-right: calc(-.5 * var(--#{$prefix}offcanvas-padding-x));
131
+ margin-bottom: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
132
+ }
133
+ }
134
+
135
+ .offcanvas-title {
136
+ margin-bottom: 0;
137
+ line-height: $offcanvas-title-line-height;
138
+ }
139
+
140
+ .offcanvas-body {
141
+ flex-grow: 1;
142
+ padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
143
+ overflow-y: auto;
144
+ }
package/_pagination.scss CHANGED
@@ -1,64 +1,109 @@
1
- .pagination {
2
- display: flex;
3
- @include list-unstyled();
4
- }
5
-
6
- .page-link {
7
- position: relative;
8
- display: block;
9
- color: $pagination-color;
10
- text-decoration: if($link-decoration == none, null, none);
11
- background-color: $pagination-bg;
12
- border: $pagination-border-width solid $pagination-border-color;
13
- @include transition($pagination-transition);
14
-
15
- &:hover {
16
- z-index: 2;
17
- color: $pagination-hover-color;
18
- text-decoration: if($link-hover-decoration == underline, none, null);
19
- background-color: $pagination-hover-bg;
20
- border-color: $pagination-hover-border-color;
21
- }
22
-
23
- &:focus {
24
- z-index: 3;
25
- color: $pagination-focus-color;
26
- background-color: $pagination-focus-bg;
27
- outline: $pagination-focus-outline;
28
- box-shadow: $pagination-focus-box-shadow;
29
- }
30
- }
31
-
32
- .page-item {
33
- &:not(:first-child) .page-link {
34
- margin-left: $pagination-margin-start;
35
- }
36
-
37
- &.active .page-link {
38
- z-index: 3;
39
- color: $pagination-active-color;
40
- @include gradient-bg($pagination-active-bg);
41
- border-color: $pagination-active-border-color;
42
- }
43
-
44
- &.disabled .page-link {
45
- color: $pagination-disabled-color;
46
- pointer-events: none;
47
- background-color: $pagination-disabled-bg;
48
- border-color: $pagination-disabled-border-color;
49
- }
50
- }
51
-
52
-
53
- //
54
- // Sizing
55
- //
56
- @include pagination-size($pagination-padding-y, $pagination-padding-x, null, $pagination-border-radius);
57
-
58
- .pagination-lg {
59
- @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $pagination-border-radius-lg);
60
- }
61
-
62
- .pagination-sm {
63
- @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $pagination-border-radius-sm);
64
- }
1
+ .pagination {
2
+ // scss-docs-start pagination-css-vars
3
+ --#{$prefix}pagination-padding-x: #{$pagination-padding-x};
4
+ --#{$prefix}pagination-padding-y: #{$pagination-padding-y};
5
+ @include rfs($pagination-font-size, --#{$prefix}pagination-font-size);
6
+ --#{$prefix}pagination-color: #{$pagination-color};
7
+ --#{$prefix}pagination-bg: #{$pagination-bg};
8
+ --#{$prefix}pagination-border-width: #{$pagination-border-width};
9
+ --#{$prefix}pagination-border-color: #{$pagination-border-color};
10
+ --#{$prefix}pagination-border-radius: #{$pagination-border-radius};
11
+ --#{$prefix}pagination-hover-color: #{$pagination-hover-color};
12
+ --#{$prefix}pagination-hover-bg: #{$pagination-hover-bg};
13
+ --#{$prefix}pagination-hover-border-color: #{$pagination-hover-border-color};
14
+ --#{$prefix}pagination-focus-color: #{$pagination-focus-color};
15
+ --#{$prefix}pagination-focus-bg: #{$pagination-focus-bg};
16
+ --#{$prefix}pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
17
+ --#{$prefix}pagination-active-color: #{$pagination-active-color};
18
+ --#{$prefix}pagination-active-bg: #{$pagination-active-bg};
19
+ --#{$prefix}pagination-active-border-color: #{$pagination-active-border-color};
20
+ --#{$prefix}pagination-disabled-color: #{$pagination-disabled-color};
21
+ --#{$prefix}pagination-disabled-bg: #{$pagination-disabled-bg};
22
+ --#{$prefix}pagination-disabled-border-color: #{$pagination-disabled-border-color};
23
+ // scss-docs-end pagination-css-vars
24
+
25
+ display: flex;
26
+ @include list-unstyled();
27
+ }
28
+
29
+ .page-link {
30
+ position: relative;
31
+ display: block;
32
+ padding: var(--#{$prefix}pagination-padding-y) var(--#{$prefix}pagination-padding-x);
33
+ @include font-size(var(--#{$prefix}pagination-font-size));
34
+ color: var(--#{$prefix}pagination-color);
35
+ text-decoration: if($link-decoration == none, null, none);
36
+ background-color: var(--#{$prefix}pagination-bg);
37
+ border: var(--#{$prefix}pagination-border-width) solid var(--#{$prefix}pagination-border-color);
38
+ @include transition($pagination-transition);
39
+
40
+ &:hover {
41
+ z-index: 2;
42
+ color: var(--#{$prefix}pagination-hover-color);
43
+ text-decoration: if($link-hover-decoration == underline, none, null);
44
+ background-color: var(--#{$prefix}pagination-hover-bg);
45
+ border-color: var(--#{$prefix}pagination-hover-border-color);
46
+ }
47
+
48
+ &:focus {
49
+ z-index: 3;
50
+ color: var(--#{$prefix}pagination-focus-color);
51
+ background-color: var(--#{$prefix}pagination-focus-bg);
52
+ outline: $pagination-focus-outline;
53
+ box-shadow: var(--#{$prefix}pagination-focus-box-shadow);
54
+ }
55
+
56
+ &.active,
57
+ .active > & {
58
+ z-index: 3;
59
+ color: var(--#{$prefix}pagination-active-color);
60
+ @include gradient-bg(var(--#{$prefix}pagination-active-bg));
61
+ border-color: var(--#{$prefix}pagination-active-border-color);
62
+ }
63
+
64
+ &.disabled,
65
+ .disabled > & {
66
+ color: var(--#{$prefix}pagination-disabled-color);
67
+ pointer-events: none;
68
+ background-color: var(--#{$prefix}pagination-disabled-bg);
69
+ border-color: var(--#{$prefix}pagination-disabled-border-color);
70
+ }
71
+ }
72
+
73
+ .page-item {
74
+ &:not(:first-child) .page-link {
75
+ margin-left: $pagination-margin-start;
76
+ }
77
+
78
+ @if $pagination-margin-start == ($pagination-border-width * -1) {
79
+ &:first-child {
80
+ .page-link {
81
+ @include border-start-radius(var(--#{$prefix}pagination-border-radius));
82
+ }
83
+ }
84
+
85
+ &:last-child {
86
+ .page-link {
87
+ @include border-end-radius(var(--#{$prefix}pagination-border-radius));
88
+ }
89
+ }
90
+ } @else {
91
+ // Add border-radius to all pageLinks in case they have left margin
92
+ .page-link {
93
+ @include border-radius(var(--#{$prefix}pagination-border-radius));
94
+ }
95
+ }
96
+ }
97
+
98
+
99
+ //
100
+ // Sizing
101
+ //
102
+
103
+ .pagination-lg {
104
+ @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $pagination-border-radius-lg);
105
+ }
106
+
107
+ .pagination-sm {
108
+ @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $pagination-border-radius-sm);
109
+ }
@@ -3,7 +3,7 @@
3
3
  min-height: 1em;
4
4
  vertical-align: middle;
5
5
  cursor: wait;
6
- background-color: currentColor;
6
+ background-color: currentcolor;
7
7
  opacity: $placeholder-opacity-max;
8
8
 
9
9
  &.btn::before {