@wwtdev/bsds-css 2.21.1 → 2.23.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.
- package/dist/components/_alert.scss +27 -12
- package/dist/components/_form-text-fields.scss +5 -0
- package/dist/components/_horizontal-navigation-mobile.scss +75 -40
- package/dist/components/_horizontal-navigation.scss +1 -1
- package/dist/components/_inline-tabs.scss +86 -0
- package/dist/components/_modal.scss +120 -27
- package/dist/components/_vertical-navigation.scss +18 -13
- package/dist/components/alert.css +27 -12
- package/dist/components/form-text-fields.css +5 -0
- package/dist/components/horizontal-navigation-mobile.css +75 -40
- package/dist/components/horizontal-navigation.css +1 -1
- package/dist/components/inline-tabs.css +83 -0
- package/dist/components/modal.css +120 -27
- package/dist/components/vertical-navigation.css +18 -13
- package/dist/wwt-bsds.css +297 -88
- package/dist/wwt-bsds.min.css +1 -1
- package/package.json +1 -1
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
border: 2px solid var(--bs-ink-blue);
|
|
7
7
|
column-gap: 0.75rem;
|
|
8
8
|
display: grid;
|
|
9
|
-
grid-template-columns: 1.
|
|
9
|
+
grid-template-columns: 1.125rem 1fr 1rem;
|
|
10
10
|
grid-template-areas: "icon title close"
|
|
11
11
|
". description ."
|
|
12
12
|
". action .";
|
|
@@ -16,43 +16,57 @@
|
|
|
16
16
|
@media (min-width: 752px) {
|
|
17
17
|
.bs-alert {
|
|
18
18
|
padding: 1.5rem;
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
.bs-alert:where([data-horizontal="true"]) {
|
|
23
|
-
grid-template-columns: 1.25rem 1fr 1rem;
|
|
24
|
-
grid-template-areas: "icon title close"
|
|
19
|
+
grid-template-columns: 1.25rem 1fr 1rem;
|
|
20
|
+
grid-template-areas: "icon title close"
|
|
21
|
+
". description ."
|
|
25
22
|
". action .";
|
|
23
|
+
}
|
|
26
24
|
}
|
|
27
25
|
|
|
28
26
|
@media (min-width: 752px) {
|
|
29
27
|
.bs-alert:where([data-horizontal="true"]) {
|
|
28
|
+
padding: 1rem 1.5rem;
|
|
30
29
|
grid-template-areas: "icon title action close";
|
|
31
|
-
grid-template-columns: 1.
|
|
30
|
+
grid-template-columns: 1.125rem max-content 1fr 1rem;
|
|
32
31
|
}
|
|
33
32
|
}
|
|
34
33
|
|
|
35
34
|
.bs-alert :where(.bs-alert-icon) {
|
|
36
|
-
|
|
35
|
+
margin-top: 0.25rem;
|
|
36
|
+
align-self: start;
|
|
37
37
|
color: var(--bs-ink-blue);
|
|
38
38
|
grid-area: icon;
|
|
39
|
-
height: 1.
|
|
40
|
-
width: 1.
|
|
39
|
+
height: 1.125rem;
|
|
40
|
+
width: 1.125rem;
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
.bs-alert :where(.bs-alert-title) {
|
|
44
44
|
font-size: 1.125rem;
|
|
45
|
+
line-height: 1.3;
|
|
46
|
+
color: var(--bs-ink-base);
|
|
45
47
|
grid-area: title;
|
|
46
48
|
}
|
|
47
49
|
|
|
48
50
|
@media (min-width: 752px) {
|
|
49
51
|
.bs-alert :where(.bs-alert-title) {
|
|
50
52
|
font-size: 1.25rem;
|
|
53
|
+
line-height: 1.3;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.bs-alert:where([data-horizontal="true"]) :where(.bs-alert-title) {
|
|
57
|
+
font-size: 1.125rem;
|
|
58
|
+
line-height: 1.5;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.bs-alert:where(:not([data-horizontal="true"])) :where(.bs-alert-icon) {
|
|
62
|
+
height: 1.25rem;
|
|
63
|
+
width: 1.25rem;
|
|
51
64
|
}
|
|
52
65
|
}
|
|
53
66
|
|
|
54
67
|
.bs-alert :where(.bs-alert-description) {
|
|
55
68
|
font-size: 0.875rem;
|
|
69
|
+
color: var(--bs-ink-medium);
|
|
56
70
|
grid-area: description;
|
|
57
71
|
margin-top: 0.5rem;
|
|
58
72
|
}
|
|
@@ -68,7 +82,8 @@
|
|
|
68
82
|
}
|
|
69
83
|
|
|
70
84
|
.bs-alert :where(.bs-alert-close) {
|
|
71
|
-
|
|
85
|
+
margin-top: 0.25rem;
|
|
86
|
+
align-self: start;
|
|
72
87
|
background-color: transparent;
|
|
73
88
|
cursor: pointer;
|
|
74
89
|
grid-area: close;
|
|
@@ -91,6 +91,11 @@ textarea {
|
|
|
91
91
|
outline-width: 0px;
|
|
92
92
|
}
|
|
93
93
|
|
|
94
|
+
/* OPEN state */
|
|
95
|
+
:is(select, .bs-select):where(:open) {
|
|
96
|
+
background: var(--bs-bg-base-to-light);
|
|
97
|
+
}
|
|
98
|
+
|
|
94
99
|
/* DISABLED state */
|
|
95
100
|
:is(input:where(:not([type='checkbox'],[type='radio'])), textarea, select):where(:disabled),
|
|
96
101
|
:is(.bs-input, .bs-select, .bs-textarea):where(:disabled) {
|
|
@@ -2,45 +2,25 @@
|
|
|
2
2
|
.bs-horizontal-nav-mobile {
|
|
3
3
|
--bg-color: var(--bs-bg-light);
|
|
4
4
|
--top-offset: 48px;
|
|
5
|
-
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
|
6
|
-
background-color: var(--bg-color);
|
|
7
5
|
display: flex;
|
|
8
6
|
flex-direction: column;
|
|
9
|
-
height: auto;
|
|
10
7
|
left: 0;
|
|
11
|
-
max-height: calc(100vh - var(--top-offset));
|
|
12
|
-
overflow: scroll;
|
|
13
8
|
position: fixed;
|
|
14
9
|
right: 0;
|
|
15
|
-
scrollbar-width: none; /* Firefox */
|
|
16
10
|
top: var(--top-offset);
|
|
17
11
|
z-index: 1001;
|
|
18
12
|
}
|
|
19
13
|
|
|
20
|
-
|
|
21
|
-
height: 100vh;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
@media (min-width: 752px) {
|
|
14
|
+
@media (min-width: 1166px) {
|
|
25
15
|
.bs-horizontal-nav-mobile {
|
|
26
16
|
display: none;
|
|
27
17
|
}
|
|
28
18
|
}
|
|
29
19
|
|
|
30
|
-
/* ===== Nav List ===== */
|
|
31
|
-
.bs-horizontal-nav-mobile :where(ul) {
|
|
32
|
-
display: none;
|
|
33
|
-
flex-direction: column;
|
|
34
|
-
list-style: none;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
.bs-horizontal-nav-mobile:where([data-shown="true"]) :where(ul) {
|
|
38
|
-
display: flex;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
20
|
/* ===== Toggle ===== */
|
|
42
21
|
.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-toggle) {
|
|
43
22
|
align-items: center;
|
|
23
|
+
background-color: var(--bs-bg-light);
|
|
44
24
|
color: var(--bs-ink-light);
|
|
45
25
|
cursor: pointer;
|
|
46
26
|
display: flex;
|
|
@@ -53,6 +33,10 @@
|
|
|
53
33
|
width: 100%;
|
|
54
34
|
}
|
|
55
35
|
|
|
36
|
+
.bs-horizontal-nav-mobile:where([data-hide-toggle="true"]) :where(.bs-horizontal-nav-mobile-toggle) {
|
|
37
|
+
display: none;
|
|
38
|
+
}
|
|
39
|
+
|
|
56
40
|
.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-toggle-title) {
|
|
57
41
|
align-items: center;
|
|
58
42
|
display: flex;
|
|
@@ -78,16 +62,51 @@
|
|
|
78
62
|
transform: rotate(180deg);
|
|
79
63
|
}
|
|
80
64
|
|
|
65
|
+
/* ===== Nav Menu Container ===== */
|
|
66
|
+
.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-menu) {
|
|
67
|
+
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
|
68
|
+
background-color: var(--bg-color);
|
|
69
|
+
display: flex;
|
|
70
|
+
flex-direction: column;
|
|
71
|
+
height: 100vh;
|
|
72
|
+
/* 100vh - top offset - toggle height */
|
|
73
|
+
max-height: calc(100vh - var(--top-offset) - 48px);
|
|
74
|
+
opacity: 0;
|
|
75
|
+
overflow: scroll;
|
|
76
|
+
scrollbar-width: none; /* Firefox */
|
|
77
|
+
transition-duration: 200ms;
|
|
78
|
+
transition-property: opacity;
|
|
79
|
+
transition-timing-function: ease;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.bs-horizontal-nav-mobile:where([data-hide-toggle="true"]) :where(.bs-horizontal-nav-mobile-menu) {
|
|
83
|
+
max-height: calc(100vh - var(--top-offset));
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.bs-horizontal-nav-mobile:where([data-shown="true"]) :where(.bs-horizontal-nav-mobile-menu) {
|
|
87
|
+
opacity: 1;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
/* ===== Nav List ===== */
|
|
91
|
+
.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-menu > ul) {
|
|
92
|
+
background-color: var(--bg-color);
|
|
93
|
+
display: flex;
|
|
94
|
+
flex-direction: column;
|
|
95
|
+
list-style: none;
|
|
96
|
+
}
|
|
97
|
+
|
|
81
98
|
/* ===== Nav Items ===== */
|
|
82
|
-
.bs-horizontal-nav-mobile :where(ul > li) {
|
|
99
|
+
.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-menu > ul > li) {
|
|
83
100
|
border-top: 1px solid var(--bs-border-base);
|
|
84
101
|
}
|
|
85
102
|
|
|
86
|
-
.bs-horizontal-nav-mobile :where(
|
|
103
|
+
.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-menu > ul > li:last-child) {
|
|
87
104
|
border-bottom: 1px solid var(--bs-border-base);
|
|
88
105
|
}
|
|
89
106
|
|
|
90
|
-
.bs-horizontal-nav-mobile :where(ul > li > a)
|
|
107
|
+
.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-menu > ul > li > a),
|
|
108
|
+
.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-nested-menu > li > a),
|
|
109
|
+
.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-external-links > ul > li > a) {
|
|
91
110
|
color: var(--bs-ink-light);
|
|
92
111
|
cursor: pointer;
|
|
93
112
|
display: flex;
|
|
@@ -98,16 +117,20 @@
|
|
|
98
117
|
padding-top: 0.75rem;
|
|
99
118
|
}
|
|
100
119
|
|
|
101
|
-
.bs-horizontal-nav-mobile :where(ul > li > a:hover)
|
|
120
|
+
.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-menu > ul > li > a:hover),
|
|
121
|
+
.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-nested-menu > li > a:hover),
|
|
122
|
+
.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-external-links > ul > li > a:hover) {
|
|
102
123
|
color: var(--bs-ink-blue);
|
|
103
124
|
}
|
|
104
125
|
|
|
105
|
-
.bs-horizontal-nav-mobile :where(ul > li > a[data-active="true"])
|
|
126
|
+
.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-menu > ul > li > a[data-active="true"]),
|
|
127
|
+
.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-nested-menu > li > a[data-active="true"]) {
|
|
106
128
|
color: var(--bs-ink-base);
|
|
107
129
|
font-weight: 600;
|
|
108
130
|
}
|
|
109
131
|
|
|
110
|
-
.bs-horizontal-nav-mobile :where(ul > li > a[data-active="true"]:hover)
|
|
132
|
+
.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-menu > ul > li > a[data-active="true"]:hover),
|
|
133
|
+
.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-nested-menu > li > a[data-active="true"]:hover) {
|
|
111
134
|
color: var(--bs-ink-blue);
|
|
112
135
|
}
|
|
113
136
|
|
|
@@ -125,11 +148,11 @@
|
|
|
125
148
|
width: 100%;
|
|
126
149
|
}
|
|
127
150
|
|
|
128
|
-
.bs-horizontal-nav-mobile :where(
|
|
151
|
+
.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-nested-toggle[data-active="true"]) {
|
|
129
152
|
font-weight: 600;
|
|
130
153
|
}
|
|
131
154
|
|
|
132
|
-
.bs-horizontal-nav-mobile :where(ul li[data-expanded="true"] .bs-horizontal-nav-mobile-nested-toggle) {
|
|
155
|
+
.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-menu > ul > li[data-expanded="true"] > .bs-horizontal-nav-mobile-nested-toggle) {
|
|
133
156
|
background-color: var(--bs-bg-medium);
|
|
134
157
|
color: var(--bs-ink-blue);
|
|
135
158
|
font-weight: 600;
|
|
@@ -148,7 +171,7 @@
|
|
|
148
171
|
width: 0.75rem;
|
|
149
172
|
}
|
|
150
173
|
|
|
151
|
-
.bs-horizontal-nav-mobile :where(ul li[data-expanded="true"] .bs-horizontal-nav-mobile-nested-toggle-caret) {
|
|
174
|
+
.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-menu > ul > li[data-expanded="true"] .bs-horizontal-nav-mobile-nested-toggle-caret) {
|
|
152
175
|
transform: rotate(180deg);
|
|
153
176
|
}
|
|
154
177
|
|
|
@@ -157,18 +180,19 @@
|
|
|
157
180
|
display: none;
|
|
158
181
|
}
|
|
159
182
|
|
|
160
|
-
.bs-horizontal-nav-mobile :where(ul li[data-expanded="true"] .bs-horizontal-nav-mobile-nested-menu) {
|
|
183
|
+
.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-menu > ul > li[data-expanded="true"] > .bs-horizontal-nav-mobile-nested-menu) {
|
|
161
184
|
display: block;
|
|
162
185
|
}
|
|
163
186
|
|
|
164
|
-
|
|
165
|
-
|
|
187
|
+
/* ===== External Links ===== */
|
|
188
|
+
.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-external-links) {
|
|
189
|
+
margin-top: auto;
|
|
190
|
+
padding-top: 2.25rem;
|
|
166
191
|
}
|
|
167
192
|
|
|
168
|
-
|
|
169
|
-
.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-external-link) {
|
|
170
|
-
align-items: center;
|
|
193
|
+
.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-external-links > ul > li > a) {
|
|
171
194
|
display: flex;
|
|
195
|
+
align-items: center;
|
|
172
196
|
gap: 0.5rem;
|
|
173
197
|
}
|
|
174
198
|
|
|
@@ -179,15 +203,26 @@
|
|
|
179
203
|
|
|
180
204
|
/* ===== Slotted Items ===== */
|
|
181
205
|
.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-slotted-items) {
|
|
182
|
-
display: none;
|
|
183
206
|
padding-bottom: 0.75rem;
|
|
184
207
|
padding-left: 2.25rem;
|
|
185
208
|
padding-right: 2.25rem;
|
|
186
209
|
padding-top: 0.75rem;
|
|
210
|
+
margin-top: auto;
|
|
187
211
|
}
|
|
188
212
|
|
|
189
|
-
.bs-horizontal-nav-mobile:where(
|
|
190
|
-
|
|
213
|
+
.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-external-links ~ .bs-horizontal-nav-mobile-slotted-items) {
|
|
214
|
+
margin-top: 0;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
/* Vue Transition Styles - Only used in Vue component */
|
|
218
|
+
.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-enter-from),
|
|
219
|
+
.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-leave-to) {
|
|
220
|
+
opacity: 0;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-enter-to),
|
|
224
|
+
.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-leave-from) {
|
|
225
|
+
opacity: 1;
|
|
191
226
|
}
|
|
192
227
|
|
|
193
228
|
}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
@mixin inline-tabs() {
|
|
2
|
+
.bs-inline-tabs {
|
|
3
|
+
display: flex;
|
|
4
|
+
gap: var(--bs-space-2);
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.bs-inline-tab {
|
|
8
|
+
display: inline-flex;
|
|
9
|
+
justify-content: center;
|
|
10
|
+
align-items: center;
|
|
11
|
+
padding: var(--bs-space-2) var(--bs-space-3);
|
|
12
|
+
font-size: var(--bs-text-sm);
|
|
13
|
+
font-weight: 600;
|
|
14
|
+
line-height: 1.5;
|
|
15
|
+
color: var(--bs-ink-royal);
|
|
16
|
+
text-align: center; /* needed for "as link" wrap cases */
|
|
17
|
+
text-decoration: none;
|
|
18
|
+
background-color: var(--bs-bg-medium);
|
|
19
|
+
border-radius: var(--bs-space-1);
|
|
20
|
+
border: 1px solid transparent;
|
|
21
|
+
outline: none;
|
|
22
|
+
cursor: pointer;
|
|
23
|
+
transition: all 100ms ease-in-out;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/* Variant */
|
|
27
|
+
.bs-inline-tab:where([data-variant="white"]) {
|
|
28
|
+
background-color: var(--bs-bg-base);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/* Hover */
|
|
32
|
+
.bs-inline-tab:where(:not([data-selected]):hover) {
|
|
33
|
+
border-color: var(--bs-ink-royal); /* "ink-royal" instead of "royal-base", matches Figma design */
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
/* Keyboard Focus */
|
|
37
|
+
.bs-inline-tab:where(:focus-visible) {
|
|
38
|
+
outline: 2px solid var(--bs-ink-royal);
|
|
39
|
+
|
|
40
|
+
&:where([data-selected]) {
|
|
41
|
+
outline-offset: 2px;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/* Selected */
|
|
46
|
+
.bs-inline-tab:where([data-selected]) {
|
|
47
|
+
color: var(--bs-ink-white);
|
|
48
|
+
background-color: var(--bs-royal-400); /* "400" instead of "base", matches Figma design */
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/* Disabled (as button or link) */
|
|
52
|
+
.bs-inline-tab:where(:disabled, [aria-disabled="true"]) {
|
|
53
|
+
color: var(--bs-ink-light);
|
|
54
|
+
background-color: var(--bs-gray-light);
|
|
55
|
+
cursor: default;
|
|
56
|
+
pointer-events: none;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/* Selected & Disabled */
|
|
60
|
+
.bs-inline-tab:where([data-selected]):where(:disabled, [aria-disabled="true"]) {
|
|
61
|
+
color: var(--bs-ink-white);
|
|
62
|
+
background-color: var(--bs-gray-base);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
/* -- Dark Mode Overrides -- */
|
|
66
|
+
|
|
67
|
+
:where(.dark .bs-inline-tab) {
|
|
68
|
+
|
|
69
|
+
/* Ink */
|
|
70
|
+
&:not([data-selected], :disabled, [aria-disabled="true"]) {
|
|
71
|
+
color: var(--bs-ink-medium);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/* Selected & Disabled */
|
|
75
|
+
&[data-selected]:where(:disabled, [aria-disabled="true"]) {
|
|
76
|
+
color: var(--bs-ink-invert-base);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
/* Keyboard Focus */
|
|
80
|
+
&[data-selected]:where(:focus-visible) {
|
|
81
|
+
outline-offset: 0;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
|
|
@@ -1,16 +1,22 @@
|
|
|
1
1
|
@mixin modal() {
|
|
2
2
|
.bs-modal {
|
|
3
|
+
--base-modal-width: 35rem; /* 560px */
|
|
4
|
+
--lg-modal-padding: 2rem; /* 32px */
|
|
5
|
+
--lg-modal-width: 45.3125rem; /* 725px */
|
|
6
|
+
--modal-padding: 1.5rem; /* 24px */
|
|
7
|
+
--sm-modal-width: 21.25rem; /* 340px */
|
|
3
8
|
background-color: var(--bs-bg-base-to-medium);
|
|
4
9
|
border-radius: 4px;
|
|
5
10
|
bottom: 0;
|
|
6
11
|
box-shadow: var(--bs-shadow-contentHigh);
|
|
12
|
+
display: flex;
|
|
13
|
+
flex-direction: column;
|
|
7
14
|
height: fit-content;
|
|
8
15
|
left: 0;
|
|
9
16
|
margin: auto;
|
|
10
17
|
max-height: calc(100% - 3rem);
|
|
11
18
|
opacity: 0;
|
|
12
19
|
overflow: auto;
|
|
13
|
-
padding: 1.5rem;
|
|
14
20
|
position: fixed;
|
|
15
21
|
right: 0;
|
|
16
22
|
top: 0;
|
|
@@ -24,56 +30,143 @@
|
|
|
24
30
|
@media (min-width: 752px) {
|
|
25
31
|
.bs-modal {
|
|
26
32
|
max-height: min(calc(100vh - 3rem), 40.625rem);
|
|
27
|
-
width:
|
|
33
|
+
width: var(--base-modal-width);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.bs-modal:where([data-size="sm"]) {
|
|
37
|
+
width: var(--sm-modal-width);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.bs-modal:where([data-size="lg"]) {
|
|
41
|
+
width: var(--lg-modal-width);
|
|
28
42
|
}
|
|
29
43
|
}
|
|
30
44
|
|
|
31
|
-
.bs-modal:where([data-shown
|
|
45
|
+
.bs-modal:where([data-shown="true"]) {
|
|
32
46
|
opacity: 1;
|
|
33
47
|
}
|
|
34
48
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
padding
|
|
49
|
+
/* Header Container */
|
|
50
|
+
.bs-modal :where(.bs-modal-header-container) {
|
|
51
|
+
padding: var(--modal-padding);
|
|
38
52
|
}
|
|
39
53
|
|
|
40
|
-
.bs-modal:where([data-
|
|
41
|
-
padding
|
|
42
|
-
|
|
54
|
+
.bs-modal:where([data-size="lg"]) :where(.bs-modal-header-container) {
|
|
55
|
+
padding: var(--lg-modal-padding);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.bs-modal:where([data-header-border="true"]) :where(.bs-modal-header-container) {
|
|
59
|
+
border-bottom: 1px solid var(--bs-border-base);
|
|
43
60
|
}
|
|
44
61
|
|
|
45
|
-
.bs-modal :where(.modal-header) {
|
|
46
|
-
|
|
62
|
+
.bs-modal:where([data-full-width="true"]) :where(.bs-modal-header-container) {
|
|
63
|
+
padding-left: 0;
|
|
64
|
+
padding-right: 0;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/* Header Row */
|
|
68
|
+
.bs-modal :where(.bs-modal-header) {
|
|
69
|
+
align-items: center;
|
|
47
70
|
display: flex;
|
|
48
71
|
justify-content: space-between;
|
|
49
|
-
margin-bottom: 2rem;
|
|
50
72
|
}
|
|
51
73
|
|
|
52
|
-
|
|
74
|
+
/* Title */
|
|
75
|
+
.bs-modal :where(.bs-modal-title) {
|
|
53
76
|
flex-grow: 1;
|
|
54
|
-
font-size: var(--bs-text-
|
|
55
|
-
font-weight:
|
|
56
|
-
margin:
|
|
77
|
+
font-size: var(--bs-text-lg);
|
|
78
|
+
font-weight: 400;
|
|
79
|
+
margin-right: 2rem;
|
|
57
80
|
}
|
|
58
81
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
82
|
+
/* Subtitle */
|
|
83
|
+
.bs-modal :where(.bs-modal-subtitle) {
|
|
84
|
+
font-size: var(--bs-text-sm);
|
|
85
|
+
font-weight: 400;
|
|
86
|
+
margin-top: 0.5rem;
|
|
87
|
+
width: 100%;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
/* Close Button */
|
|
91
|
+
.bs-modal :where(.bs-modal-close-button) {
|
|
92
|
+
background-color: transparent;
|
|
93
|
+
cursor: pointer;
|
|
63
94
|
}
|
|
64
95
|
|
|
65
|
-
.bs-modal
|
|
96
|
+
.bs-modal:where(:not(:has(.bs-modal-header-container))) :where(.bs-modal-close-button) {
|
|
66
97
|
position: absolute;
|
|
67
|
-
right:
|
|
68
|
-
top:
|
|
98
|
+
right: 1rem;
|
|
99
|
+
top: 1rem;
|
|
69
100
|
}
|
|
70
101
|
|
|
71
|
-
.bs-modal :where(.close-button) {
|
|
72
|
-
|
|
102
|
+
.bs-modal:where([data-full-width="true"]:has(> .bs-modal-header-container)) :where(.bs-modal-close-button) {
|
|
103
|
+
margin-right: var(--modal-padding);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.bs-modal:where([data-full-width="true"][data-size="lg"]:has(> .bs-modal-header-container)) :where(.bs-modal-close-button) {
|
|
107
|
+
margin-right: var(--lg-modal-padding);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
/* Progress */
|
|
111
|
+
.bs-modal :where(.bs-modal-progress) {
|
|
112
|
+
margin-top: 1.5rem;
|
|
113
|
+
width: 100%;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
/* Body */
|
|
117
|
+
.bs-modal :where(.bs-modal-body) {
|
|
118
|
+
overflow-y: auto;
|
|
119
|
+
padding: var(--modal-padding);
|
|
73
120
|
}
|
|
74
121
|
|
|
75
|
-
.bs-modal :where(.modal-
|
|
76
|
-
|
|
122
|
+
.bs-modal:where([data-full-height="true"]) :where(.bs-modal-body) {
|
|
123
|
+
padding-bottom: 0;
|
|
124
|
+
padding-top: 0;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.bs-modal:where([data-full-width="true"]) :where(.bs-modal-body) {
|
|
128
|
+
padding-left: 0;
|
|
129
|
+
padding-right: 0;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
/* Has header, but no header border */
|
|
133
|
+
.bs-modal:where(:not([data-header-border]):has(> .bs-modal-header-container)) :where(.bs-modal-body),
|
|
134
|
+
.bs-modal:where([data-header-border="false"]:has(> .bs-modal-header-container)) :where(.bs-modal-body) {
|
|
135
|
+
padding-top: 0;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
/* Has footer, but no footer border */
|
|
139
|
+
.bs-modal:where(:not([data-footer-border])) :where(.bs-modal-body:has(~ .bs-modal-footer)),
|
|
140
|
+
.bs-modal:where([data-footer-border="false"]) :where(.bs-modal-body:has(~ .bs-modal-footer)) {
|
|
141
|
+
padding-bottom: 0;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.bs-modal:where([data-body-background-contrast="true"]) :where(.bs-modal-body) {
|
|
145
|
+
background-color: var(--bs-bg-light);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
/* Footer */
|
|
149
|
+
.bs-modal :where(.bs-modal-footer) {
|
|
150
|
+
padding-bottom: 1rem;
|
|
151
|
+
padding-left: var(--modal-padding);
|
|
152
|
+
padding-right: var(--modal-padding);
|
|
153
|
+
padding-top: 1rem;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.bs-modal:where([data-size="lg"]) :where(.bs-modal-footer) {
|
|
157
|
+
padding-bottom: 1.5rem;
|
|
158
|
+
padding-left: var(--lg-modal-padding);
|
|
159
|
+
padding-right: var(--lg-modal-padding);
|
|
160
|
+
padding-top: 1.5rem;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.bs-modal:where([data-footer-border="true"]) :where(.bs-modal-footer) {
|
|
164
|
+
border-top: 1px solid var(--bs-border-base);
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.bs-modal:where([data-full-width="true"]) :where(.bs-modal-footer) {
|
|
168
|
+
padding-left: 0;
|
|
169
|
+
padding-right: 0;
|
|
77
170
|
}
|
|
78
171
|
|
|
79
172
|
/* Vue Transition Styles - Only used in Vue component */
|