@wwtdev/bsds-css 2.21.1 → 2.22.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/_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 +134 -19
- package/dist/components/_vertical-navigation.scss +18 -13
- package/dist/components/alert.css +27 -12
- 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 +134 -19
- package/dist/components/vertical-navigation.css +18 -13
- package/dist/wwt-bsds.css +299 -81
- package/dist/wwt-bsds.min.css +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
.bs-modal {
|
|
2
|
+
--base-modal-width: 35rem;
|
|
3
|
+
--modal-padding: 1.5rem;
|
|
4
|
+
--sm-modal-width: 21.25rem;
|
|
5
|
+
--lg-modal-width: 45.3125rem;
|
|
6
|
+
--lg-modal-padding: 2rem;
|
|
2
7
|
background-color: var(--bs-bg-base-to-medium);
|
|
3
8
|
border-radius: 4px;
|
|
4
9
|
bottom: 0;
|
|
@@ -9,7 +14,7 @@
|
|
|
9
14
|
max-height: calc(100% - 3rem);
|
|
10
15
|
opacity: 0;
|
|
11
16
|
overflow: auto;
|
|
12
|
-
padding:
|
|
17
|
+
padding: var(--modal-padding);
|
|
13
18
|
position: fixed;
|
|
14
19
|
right: 0;
|
|
15
20
|
top: 0;
|
|
@@ -20,10 +25,20 @@
|
|
|
20
25
|
z-index: 9999;
|
|
21
26
|
}
|
|
22
27
|
|
|
28
|
+
.bs-modal:where([data-has-header-or-footer="true"]) {
|
|
29
|
+
padding: 0;
|
|
30
|
+
}
|
|
31
|
+
|
|
23
32
|
@media (min-width: 752px) {
|
|
24
33
|
.bs-modal {
|
|
25
34
|
max-height: min(calc(100vh - 3rem), 40.625rem);
|
|
26
|
-
width:
|
|
35
|
+
width: var(--base-modal-width);
|
|
36
|
+
}
|
|
37
|
+
.bs-modal:where([data-size="sm"]) {
|
|
38
|
+
width: var(--sm-modal-width);
|
|
39
|
+
}
|
|
40
|
+
.bs-modal:where([data-size="lg"]) {
|
|
41
|
+
width: var(--lg-modal-width);
|
|
27
42
|
}
|
|
28
43
|
}
|
|
29
44
|
|
|
@@ -31,48 +46,148 @@
|
|
|
31
46
|
opacity: 1;
|
|
32
47
|
}
|
|
33
48
|
|
|
34
|
-
.bs-modal:where(
|
|
35
|
-
padding
|
|
36
|
-
padding-right: 0;
|
|
49
|
+
.bs-modal :where(.bs-modal-header-container) {
|
|
50
|
+
padding: var(--modal-padding);
|
|
37
51
|
}
|
|
38
52
|
|
|
39
|
-
.bs-modal:where([data-
|
|
40
|
-
padding
|
|
41
|
-
padding-bottom: 0;
|
|
53
|
+
.bs-modal:where([data-size="lg"]) :where(.bs-modal-header-container) {
|
|
54
|
+
padding: var(--lg-modal-padding);
|
|
42
55
|
}
|
|
43
56
|
|
|
44
|
-
.bs-modal :where(.modal-header) {
|
|
45
|
-
align-items:
|
|
57
|
+
.bs-modal :where(.bs-modal-header) {
|
|
58
|
+
align-items: center;
|
|
46
59
|
display: flex;
|
|
47
60
|
justify-content: space-between;
|
|
48
|
-
margin-bottom:
|
|
61
|
+
margin-bottom: 0.5rem;
|
|
49
62
|
}
|
|
50
63
|
|
|
51
|
-
.bs-modal :where(.modal-title) {
|
|
64
|
+
.bs-modal :where(.bs-modal-title) {
|
|
52
65
|
flex-grow: 1;
|
|
53
|
-
font-size: var(--bs-text-
|
|
54
|
-
font-weight:
|
|
66
|
+
font-size: var(--bs-text-lg);
|
|
67
|
+
font-weight: 400;
|
|
68
|
+
margin-right: 2rem;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.bs-modal :where(.bs-modal-subtitle) {
|
|
72
|
+
font-size: var(--bs-text-sm);
|
|
73
|
+
font-weight: 400;
|
|
55
74
|
margin: 0;
|
|
75
|
+
width: 100%;
|
|
76
|
+
margin-bottom: 1.5rem;
|
|
56
77
|
}
|
|
57
78
|
|
|
58
|
-
.bs-modal :where(.only-close-button-modal-header) {
|
|
79
|
+
.bs-modal :where(.bs-modal-only-close-button-modal-header) {
|
|
59
80
|
display: flex;
|
|
60
81
|
justify-content: flex-end;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.bs-modal :where(.bs-modal-header-container):where(:has(.bs-modal-only-close-button-modal-header)) {
|
|
61
85
|
margin-bottom: 0;
|
|
86
|
+
padding-bottom: 0;
|
|
62
87
|
}
|
|
63
88
|
|
|
64
|
-
.bs-modal :where(.full-width-header-close-button) {
|
|
89
|
+
.bs-modal :where(.bs-modal-full-width-header-close-button) {
|
|
65
90
|
position: absolute;
|
|
66
91
|
right: 0.75rem;
|
|
67
92
|
top: 0.75rem;
|
|
68
93
|
}
|
|
69
94
|
|
|
70
|
-
.bs-modal :where(.close-button) {
|
|
95
|
+
.bs-modal :where(.bs-modal-close-button) {
|
|
71
96
|
cursor: pointer;
|
|
72
97
|
}
|
|
73
98
|
|
|
74
|
-
.bs-modal :where(.modal-
|
|
75
|
-
|
|
99
|
+
.bs-modal :where(.bs-modal-progress) {
|
|
100
|
+
width: 100%;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.bs-modal :where(.bs-modal-body) {
|
|
104
|
+
padding: 0 var(--modal-padding);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.bs-modal:where([data-header-border="true"]) :where(.bs-modal-body) {
|
|
108
|
+
padding-top: var(--modal-padding);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.bs-modal:where([data-footer-border="true"]) :where(.bs-modal-body) {
|
|
112
|
+
padding-bottom: var(--modal-padding);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.bs-modal:where([data-size="lg"]) :where(.bs-modal-body) {
|
|
116
|
+
padding: 0 var(--lg-modal-padding);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.bs-modal:where([data-body-background-contrast="true"]) :where(.bs-modal-body) {
|
|
120
|
+
background-color: var(--bs-bg-light);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.bs-modal:where([data-no-header-container="true"]):where([data-size="lg"]) :where(.bs-modal-body) {
|
|
124
|
+
padding-top: var(--lg-modal-padding);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.bs-modal:where([data-no-header-container="true"]) :where(.bs-modal-body) {
|
|
128
|
+
padding-top: var(--modal-padding);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.bs-modal:where([data-no-footer="true"]):where([data-size="lg"]) :where(.bs-modal-body) {
|
|
132
|
+
padding-bottom: var(--lg-modal-padding);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.bs-modal:where([data-no-footer="true"]) :where(.bs-modal-body) {
|
|
136
|
+
padding-bottom: var(--modal-padding);
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.bs-modal:where([data-no-footer="true"]):where([data-full-height="true"]) :where(.bs-modal-body) {
|
|
140
|
+
padding-bottom: 0;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.bs-modal :where(.bs-modal-footer) {
|
|
144
|
+
padding: var(--modal-padding);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.bs-modal:where([data-size="lg"]) :where(.bs-modal-footer) {
|
|
148
|
+
padding: var(--lg-modal-padding);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.bs-modal:where([data-sticky-header="true"]) :where(.bs-modal-header-container) {
|
|
152
|
+
position: sticky;
|
|
153
|
+
top: 0;
|
|
154
|
+
z-index: 1;
|
|
155
|
+
background: inherit;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.bs-modal:where([data-sticky-footer="true"]) :where(.bs-modal-footer) {
|
|
159
|
+
position: sticky;
|
|
160
|
+
bottom: 0;
|
|
161
|
+
z-index: 1;
|
|
162
|
+
background: inherit;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.bs-modal:where([data-header-border="true"]) :where(.bs-modal-header-container) {
|
|
166
|
+
border-bottom: 1px solid var(--bs-border-base);
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.bs-modal:where([data-footer-border="true"]) :where(.bs-modal-footer) {
|
|
170
|
+
border-top: 1px solid var(--bs-border-base);
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.bs-modal:where([data-full-width="true"]) :where(.bs-modal-section) {
|
|
174
|
+
padding-left: 0;
|
|
175
|
+
padding-right: 0;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.bs-modal:where([data-full-height="true"]) :where(.bs-modal-section) {
|
|
179
|
+
padding-top: 0;
|
|
180
|
+
padding-bottom: 0;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.bs-modal:where([data-full-width="true"]) {
|
|
184
|
+
padding-left: 0;
|
|
185
|
+
padding-right: 0;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.bs-modal:where([data-full-height="true"]) {
|
|
189
|
+
padding-top: 0;
|
|
190
|
+
padding-bottom: 0;
|
|
76
191
|
}
|
|
77
192
|
|
|
78
193
|
/* Vue Transition Styles - Only used in Vue component */
|
|
@@ -2,16 +2,18 @@
|
|
|
2
2
|
--active-color: rgba(255, 255, 255, 0.25);
|
|
3
3
|
--bg-color: var(--bs-navy-base);
|
|
4
4
|
--border-color: var(--bs-border-dark);
|
|
5
|
+
--expand-y-transform: translateY(calc(-1 * var(--top-offset)));
|
|
5
6
|
--top-offset: 48px;
|
|
6
7
|
--width: auto;
|
|
7
8
|
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
|
8
9
|
background-color: var(--bg-color);
|
|
9
10
|
color: var(--bs-white);
|
|
10
|
-
display:
|
|
11
|
+
display: flex;
|
|
11
12
|
flex-direction: column;
|
|
12
13
|
height: 100vh;
|
|
13
14
|
left: 0;
|
|
14
15
|
max-height: calc(100vh - var(--top-offset));
|
|
16
|
+
opacity: 0;
|
|
15
17
|
overflow: scroll;
|
|
16
18
|
padding-bottom: 1.5rem;
|
|
17
19
|
padding-left: 1.5rem;
|
|
@@ -21,15 +23,16 @@
|
|
|
21
23
|
right: 0;
|
|
22
24
|
scrollbar-width: none; /* Firefox */
|
|
23
25
|
top: var(--top-offset);
|
|
24
|
-
|
|
25
|
-
transition
|
|
26
|
-
|
|
26
|
+
/* Slight delay for visibility to change prior to opacity */
|
|
27
|
+
transition: opacity 200ms ease 10ms;
|
|
28
|
+
visibility: hidden;
|
|
27
29
|
width: var(--width);
|
|
28
30
|
z-index: 1001;
|
|
29
31
|
}
|
|
30
32
|
|
|
31
33
|
.bs-vertical-nav:where([data-mobile-shown="true"]) {
|
|
32
|
-
|
|
34
|
+
opacity: 1;
|
|
35
|
+
visibility: visible;
|
|
33
36
|
}
|
|
34
37
|
|
|
35
38
|
.dark .bs-vertical-nav {
|
|
@@ -39,16 +42,18 @@
|
|
|
39
42
|
border-right: 1px solid var(--bs-border-medium);
|
|
40
43
|
}
|
|
41
44
|
|
|
42
|
-
@media (min-width:
|
|
45
|
+
@media (min-width: 1166px) {
|
|
43
46
|
.bs-vertical-nav {
|
|
44
47
|
--width: 9.875rem;
|
|
45
48
|
border-right: 1px solid var(--bg-color);
|
|
46
|
-
|
|
49
|
+
opacity: 1;
|
|
47
50
|
padding-bottom: 1rem;
|
|
48
51
|
padding-left: 0.5rem;
|
|
49
52
|
padding-right: 0.5rem;
|
|
50
53
|
padding-top: 1rem;
|
|
51
54
|
right: auto;
|
|
55
|
+
transition: max-height 200ms ease, transform 200ms ease;
|
|
56
|
+
visibility: visible;
|
|
52
57
|
}
|
|
53
58
|
|
|
54
59
|
.bs-vertical-nav:where([data-narrow="true"]) {
|
|
@@ -61,7 +66,7 @@
|
|
|
61
66
|
}
|
|
62
67
|
|
|
63
68
|
.bs-vertical-nav:where([data-y-expand="true"]) {
|
|
64
|
-
transform:
|
|
69
|
+
transform: var(--expand-y-transform);
|
|
65
70
|
max-height: 100vh;
|
|
66
71
|
}
|
|
67
72
|
|
|
@@ -72,7 +77,7 @@
|
|
|
72
77
|
padding-top: 0.5rem;
|
|
73
78
|
}
|
|
74
79
|
|
|
75
|
-
@media (min-width:
|
|
80
|
+
@media (min-width: 1166px) {
|
|
76
81
|
.bs-vertical-nav :where(.bs-vertical-nav-section) {
|
|
77
82
|
margin-top: 0.25rem;
|
|
78
83
|
}
|
|
@@ -122,7 +127,7 @@
|
|
|
122
127
|
padding-left: 0;
|
|
123
128
|
}
|
|
124
129
|
|
|
125
|
-
@media (min-width:
|
|
130
|
+
@media (min-width: 1166px) {
|
|
126
131
|
.bs-vertical-nav :where(ul) {
|
|
127
132
|
gap: 0.25rem;
|
|
128
133
|
}
|
|
@@ -145,7 +150,7 @@
|
|
|
145
150
|
width: 100%;
|
|
146
151
|
}
|
|
147
152
|
|
|
148
|
-
@media (min-width:
|
|
153
|
+
@media (min-width: 1166px) {
|
|
149
154
|
.bs-vertical-nav :where(ul li a) {
|
|
150
155
|
font-size: 0.875rem;
|
|
151
156
|
padding-bottom: 0.5rem;
|
|
@@ -179,7 +184,7 @@
|
|
|
179
184
|
width: 1rem;
|
|
180
185
|
}
|
|
181
186
|
|
|
182
|
-
@media (min-width:
|
|
187
|
+
@media (min-width: 1166px) {
|
|
183
188
|
.bs-vertical-nav :where(.bs-vertical-nav-link-icon) {
|
|
184
189
|
height: 0.875rem;
|
|
185
190
|
width: 0.875rem;
|
|
@@ -206,7 +211,7 @@
|
|
|
206
211
|
width: 1rem;
|
|
207
212
|
}
|
|
208
213
|
|
|
209
|
-
@media (min-width:
|
|
214
|
+
@media (min-width: 1166px) {
|
|
210
215
|
.bs-vertical-nav :where(.bs-vertical-nav-external-links .bs-vertical-nav-external-link-icon) {
|
|
211
216
|
height: 0.875rem;
|
|
212
217
|
width: 0.875rem;
|