bootstrap-scss 5.2.1 → 5.2.3
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.
- package/LICENSE +22 -22
- package/README.md +84 -84
- package/_accordion.scss +149 -149
- package/_button-group.scss +142 -142
- package/_buttons.scss +207 -201
- package/_carousel.scss +0 -3
- package/_dropdown.scss +249 -249
- package/_functions.scss +302 -302
- package/_list-group.scss +192 -192
- package/_modal.scss +237 -237
- package/_nav.scss +172 -172
- package/_navbar.scss +278 -278
- package/_offcanvas.scss +144 -144
- package/_pagination.scss +109 -109
- package/_popover.scss +196 -196
- package/_toasts.scss +73 -71
- package/_variables.scss +1634 -1634
- package/bootstrap-utilities.scss +3 -0
- package/forms/_floating-labels.scss +75 -75
- package/forms/_input-group.scss +132 -132
- package/mixins/_banner.scss +9 -9
- package/mixins/_forms.scss +152 -152
- package/mixins/_table-variants.scss +2 -2
- package/mixins/_utilities.scss +97 -97
- package/package.json +26 -26
package/_nav.scss
CHANGED
|
@@ -1,172 +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
|
-
// 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(-1 * var(--#{$prefix}nav-tabs-border-width)); // 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(-1 * var(--#{$prefix}nav-tabs-border-width)); // 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
|
-
}
|
|
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(-1 * var(--#{$prefix}nav-tabs-border-width)); // 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(-1 * var(--#{$prefix}nav-tabs-border-width)); // 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
|
+
}
|