bootstrap-scss 5.1.1 → 5.2.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.
Files changed (87) hide show
  1. package/LICENSE +2 -2
  2. package/README.md +5 -5
  3. package/_accordion.scss +146 -118
  4. package/_alert.scss +71 -57
  5. package/_badge.scss +38 -29
  6. package/_breadcrumb.scss +40 -28
  7. package/_button-group.scss +142 -139
  8. package/_buttons.scss +186 -111
  9. package/_card.scss +234 -216
  10. package/_carousel.scss +229 -229
  11. package/_close.scss +40 -40
  12. package/_containers.scss +41 -41
  13. package/_dropdown.scss +248 -240
  14. package/_forms.scss +9 -9
  15. package/_functions.scss +302 -302
  16. package/_grid.scss +33 -33
  17. package/_helpers.scss +10 -9
  18. package/_list-group.scss +191 -174
  19. package/_maps.scss +54 -0
  20. package/_mixins.scss +43 -43
  21. package/_modal.scss +237 -209
  22. package/_nav.scss +172 -139
  23. package/_navbar.scss +276 -335
  24. package/_offcanvas.scss +143 -83
  25. package/_pagination.scss +109 -64
  26. package/_placeholders.scss +51 -51
  27. package/_popover.scss +196 -158
  28. package/_progress.scss +59 -48
  29. package/_reboot.scss +610 -625
  30. package/_root.scss +73 -54
  31. package/_spinners.scss +85 -69
  32. package/_tables.scss +164 -151
  33. package/_toasts.scss +70 -51
  34. package/_tooltip.scss +120 -115
  35. package/_transitions.scss +27 -27
  36. package/_type.scss +106 -104
  37. package/_utilities.scss +647 -630
  38. package/_variables.scss +1633 -1639
  39. package/bootstrap-grid.scss +64 -67
  40. package/bootstrap-reboot.scss +9 -13
  41. package/bootstrap-utilities.scss +15 -18
  42. package/bootstrap.scss +51 -53
  43. package/forms/_floating-labels.scss +74 -63
  44. package/forms/_form-check.scss +175 -152
  45. package/forms/_form-control.scss +194 -219
  46. package/forms/_form-range.scss +91 -91
  47. package/forms/_form-select.scss +71 -70
  48. package/forms/_form-text.scss +11 -11
  49. package/forms/_input-group.scss +129 -121
  50. package/forms/_labels.scss +36 -36
  51. package/forms/_validation.scss +12 -12
  52. package/helpers/_clearfix.scss +3 -3
  53. package/helpers/_color-bg.scss +10 -0
  54. package/helpers/_colored-links.scss +12 -12
  55. package/helpers/_position.scss +36 -30
  56. package/helpers/_ratio.scss +26 -26
  57. package/helpers/_stacks.scss +15 -15
  58. package/helpers/_stretched-link.scss +15 -15
  59. package/helpers/_text-truncation.scss +7 -7
  60. package/helpers/_visually-hidden.scss +8 -8
  61. package/helpers/_vr.scss +8 -8
  62. package/mixins/_alert.scss +15 -11
  63. package/mixins/_backdrop.scss +14 -14
  64. package/mixins/_banner.scss +9 -0
  65. package/mixins/_border-radius.scss +78 -78
  66. package/mixins/_box-shadow.scss +18 -18
  67. package/mixins/_breakpoints.scss +127 -127
  68. package/mixins/_buttons.scss +70 -133
  69. package/mixins/_caret.scss +64 -64
  70. package/mixins/_clearfix.scss +9 -9
  71. package/mixins/_color-scheme.scss +7 -7
  72. package/mixins/_container.scss +11 -9
  73. package/mixins/_forms.scss +152 -144
  74. package/mixins/_gradients.scss +47 -47
  75. package/mixins/_grid.scss +151 -150
  76. package/mixins/_image.scss +16 -16
  77. package/mixins/_list-group.scss +24 -24
  78. package/mixins/_lists.scss +7 -7
  79. package/mixins/_pagination.scss +10 -31
  80. package/mixins/_reset-text.scss +17 -17
  81. package/mixins/_table-variants.scss +24 -21
  82. package/mixins/_transition.scss +26 -26
  83. package/mixins/_utilities.scss +97 -89
  84. package/mixins/_visually-hidden.scss +29 -29
  85. package/package.json +1 -1
  86. package/utilities/_api.scss +47 -47
  87. package/vendor/_rfs.scss +354 -354
package/_nav.scss CHANGED
@@ -1,139 +1,172 @@
1
- // Base class
2
- //
3
- // Kickstart any navigation component with a set of style resets. Works with
4
- // `<nav>`s, `<ul>`s or `<ol>`s.
5
-
6
- .nav {
7
- display: flex;
8
- flex-wrap: wrap;
9
- padding-left: 0;
10
- margin-bottom: 0;
11
- list-style: none;
12
- }
13
-
14
- .nav-link {
15
- display: block;
16
- padding: $nav-link-padding-y $nav-link-padding-x;
17
- @include font-size($nav-link-font-size);
18
- font-weight: $nav-link-font-weight;
19
- color: $nav-link-color;
20
- text-decoration: if($link-decoration == none, null, none);
21
- @include transition($nav-link-transition);
22
-
23
- &:hover,
24
- &:focus {
25
- color: $nav-link-hover-color;
26
- text-decoration: if($link-hover-decoration == underline, none, null);
27
- }
28
-
29
- // Disabled state lightens text
30
- &.disabled {
31
- color: $nav-link-disabled-color;
32
- pointer-events: none;
33
- cursor: default;
34
- }
35
- }
36
-
37
- //
38
- // Tabs
39
- //
40
-
41
- .nav-tabs {
42
- border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
43
-
44
- .nav-link {
45
- margin-bottom: -$nav-tabs-border-width;
46
- background: none;
47
- border: $nav-tabs-border-width solid transparent;
48
- @include border-top-radius($nav-tabs-border-radius);
49
-
50
- &:hover,
51
- &:focus {
52
- border-color: $nav-tabs-link-hover-border-color;
53
- // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
54
- isolation: isolate;
55
- }
56
-
57
- &.disabled {
58
- color: $nav-link-disabled-color;
59
- background-color: transparent;
60
- border-color: transparent;
61
- }
62
- }
63
-
64
- .nav-link.active,
65
- .nav-item.show .nav-link {
66
- color: $nav-tabs-link-active-color;
67
- background-color: $nav-tabs-link-active-bg;
68
- border-color: $nav-tabs-link-active-border-color;
69
- }
70
-
71
- .dropdown-menu {
72
- // Make dropdown border overlap tab border
73
- margin-top: -$nav-tabs-border-width;
74
- // Remove the top rounded corners here since there is a hard edge above the menu
75
- @include border-top-radius(0);
76
- }
77
- }
78
-
79
-
80
- //
81
- // Pills
82
- //
83
-
84
- .nav-pills {
85
- .nav-link {
86
- background: none;
87
- border: 0;
88
- @include border-radius($nav-pills-border-radius);
89
- }
90
-
91
- .nav-link.active,
92
- .show > .nav-link {
93
- color: $nav-pills-link-active-color;
94
- @include gradient-bg($nav-pills-link-active-bg);
95
- }
96
- }
97
-
98
-
99
- //
100
- // Justified variants
101
- //
102
-
103
- .nav-fill {
104
- > .nav-link,
105
- .nav-item {
106
- flex: 1 1 auto;
107
- text-align: center;
108
- }
109
- }
110
-
111
- .nav-justified {
112
- > .nav-link,
113
- .nav-item {
114
- flex-basis: 0;
115
- flex-grow: 1;
116
- text-align: center;
117
- }
118
- }
119
-
120
- .nav-fill,
121
- .nav-justified {
122
- .nav-item .nav-link {
123
- width: 100%; // Make sure button will grow
124
- }
125
- }
126
-
127
-
128
- // Tabbable tabs
129
- //
130
- // Hide tabbable panes to start, show them when `.active`
131
-
132
- .tab-content {
133
- > .tab-pane {
134
- display: none;
135
- }
136
- > .active {
137
- display: block;
138
- }
139
- }
1
+ // Base class
2
+ //
3
+ // Kickstart any navigation component with a set of style resets. Works with
4
+ // `<nav>`s, `<ul>`s or `<ol>`s.
5
+
6
+ .nav {
7
+ // scss-docs-start nav-css-vars
8
+ --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
9
+ --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
10
+ @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
11
+ --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
12
+ --#{$prefix}nav-link-color: #{$nav-link-color};
13
+ --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
14
+ --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};
15
+ // scss-docs-end nav-css-vars
16
+
17
+ display: flex;
18
+ flex-wrap: wrap;
19
+ padding-left: 0;
20
+ margin-bottom: 0;
21
+ list-style: none;
22
+ }
23
+
24
+ .nav-link {
25
+ display: block;
26
+ padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x);
27
+ @include font-size(var(--#{$prefix}nav-link-font-size));
28
+ font-weight: var(--#{$prefix}nav-link-font-weight);
29
+ color: var(--#{$prefix}nav-link-color);
30
+ text-decoration: if($link-decoration == none, null, none);
31
+ @include transition($nav-link-transition);
32
+
33
+ &:hover,
34
+ &:focus {
35
+ color: var(--#{$prefix}nav-link-hover-color);
36
+ text-decoration: if($link-hover-decoration == underline, none, null);
37
+ }
38
+
39
+ // Disabled state lightens text
40
+ &.disabled {
41
+ color: var(--#{$prefix}nav-link-disabled-color);
42
+ pointer-events: none;
43
+ cursor: default;
44
+ }
45
+ }
46
+
47
+ //
48
+ // Tabs
49
+ //
50
+
51
+ .nav-tabs {
52
+ // scss-docs-start nav-tabs-css-vars
53
+ --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
54
+ --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
55
+ --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
56
+ --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
57
+ --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
58
+ --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
59
+ --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};
60
+ // scss-docs-end nav-tabs-css-vars
61
+
62
+ border-bottom: var(--#{$prefix}nav-tabs-border-width) solid var(--#{$prefix}nav-tabs-border-color);
63
+
64
+ .nav-link {
65
+ margin-bottom: calc(var(--#{$prefix}nav-tabs-border-width) * -1); // stylelint-disable-line function-disallowed-list
66
+ background: none;
67
+ border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
68
+ @include border-top-radius(var(--#{$prefix}nav-tabs-border-radius));
69
+
70
+ &:hover,
71
+ &:focus {
72
+ // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
73
+ isolation: isolate;
74
+ border-color: var(--#{$prefix}nav-tabs-link-hover-border-color);
75
+ }
76
+
77
+ &.disabled,
78
+ &:disabled {
79
+ color: var(--#{$prefix}nav-link-disabled-color);
80
+ background-color: transparent;
81
+ border-color: transparent;
82
+ }
83
+ }
84
+
85
+ .nav-link.active,
86
+ .nav-item.show .nav-link {
87
+ color: var(--#{$prefix}nav-tabs-link-active-color);
88
+ background-color: var(--#{$prefix}nav-tabs-link-active-bg);
89
+ border-color: var(--#{$prefix}nav-tabs-link-active-border-color);
90
+ }
91
+
92
+ .dropdown-menu {
93
+ // Make dropdown border overlap tab border
94
+ margin-top: calc(var(--#{$prefix}nav-tabs-border-width) * -1); // stylelint-disable-line function-disallowed-list
95
+ // Remove the top rounded corners here since there is a hard edge above the menu
96
+ @include border-top-radius(0);
97
+ }
98
+ }
99
+
100
+
101
+ //
102
+ // Pills
103
+ //
104
+
105
+ .nav-pills {
106
+ // scss-docs-start nav-pills-css-vars
107
+ --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
108
+ --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
109
+ --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};
110
+ // scss-docs-end nav-pills-css-vars
111
+
112
+ .nav-link {
113
+ background: none;
114
+ border: 0;
115
+ @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
+ }
122
+ }
123
+
124
+ .nav-link.active,
125
+ .show > .nav-link {
126
+ color: var(--#{$prefix}nav-pills-link-active-color);
127
+ @include gradient-bg(var(--#{$prefix}nav-pills-link-active-bg));
128
+ }
129
+ }
130
+
131
+
132
+ //
133
+ // Justified variants
134
+ //
135
+
136
+ .nav-fill {
137
+ > .nav-link,
138
+ .nav-item {
139
+ flex: 1 1 auto;
140
+ text-align: center;
141
+ }
142
+ }
143
+
144
+ .nav-justified {
145
+ > .nav-link,
146
+ .nav-item {
147
+ flex-basis: 0;
148
+ flex-grow: 1;
149
+ text-align: center;
150
+ }
151
+ }
152
+
153
+ .nav-fill,
154
+ .nav-justified {
155
+ .nav-item .nav-link {
156
+ width: 100%; // Make sure button will grow
157
+ }
158
+ }
159
+
160
+
161
+ // Tabbable tabs
162
+ //
163
+ // Hide tabbable panes to start, show them when `.active`
164
+
165
+ .tab-content {
166
+ > .tab-pane {
167
+ display: none;
168
+ }
169
+ > .active {
170
+ display: block;
171
+ }
172
+ }