@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
|
@@ -1,15 +1,21 @@
|
|
|
1
1
|
.bs-modal {
|
|
2
|
+
--base-modal-width: 35rem; /* 560px */
|
|
3
|
+
--lg-modal-padding: 2rem; /* 32px */
|
|
4
|
+
--lg-modal-width: 45.3125rem; /* 725px */
|
|
5
|
+
--modal-padding: 1.5rem; /* 24px */
|
|
6
|
+
--sm-modal-width: 21.25rem; /* 340px */
|
|
2
7
|
background-color: var(--bs-bg-base-to-medium);
|
|
3
8
|
border-radius: 4px;
|
|
4
9
|
bottom: 0;
|
|
5
10
|
box-shadow: var(--bs-shadow-contentHigh);
|
|
11
|
+
display: flex;
|
|
12
|
+
flex-direction: column;
|
|
6
13
|
height: fit-content;
|
|
7
14
|
left: 0;
|
|
8
15
|
margin: auto;
|
|
9
16
|
max-height: calc(100% - 3rem);
|
|
10
17
|
opacity: 0;
|
|
11
18
|
overflow: auto;
|
|
12
|
-
padding: 1.5rem;
|
|
13
19
|
position: fixed;
|
|
14
20
|
right: 0;
|
|
15
21
|
top: 0;
|
|
@@ -23,56 +29,143 @@
|
|
|
23
29
|
@media (min-width: 752px) {
|
|
24
30
|
.bs-modal {
|
|
25
31
|
max-height: min(calc(100vh - 3rem), 40.625rem);
|
|
26
|
-
width:
|
|
32
|
+
width: var(--base-modal-width);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.bs-modal:where([data-size="sm"]) {
|
|
36
|
+
width: var(--sm-modal-width);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.bs-modal:where([data-size="lg"]) {
|
|
40
|
+
width: var(--lg-modal-width);
|
|
27
41
|
}
|
|
28
42
|
}
|
|
29
43
|
|
|
30
|
-
.bs-modal:where([data-shown
|
|
44
|
+
.bs-modal:where([data-shown="true"]) {
|
|
31
45
|
opacity: 1;
|
|
32
46
|
}
|
|
33
47
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
padding
|
|
48
|
+
/* Header Container */
|
|
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
|
-
|
|
53
|
+
.bs-modal:where([data-size="lg"]) :where(.bs-modal-header-container) {
|
|
54
|
+
padding: var(--lg-modal-padding);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.bs-modal:where([data-header-border="true"]) :where(.bs-modal-header-container) {
|
|
58
|
+
border-bottom: 1px solid var(--bs-border-base);
|
|
42
59
|
}
|
|
43
60
|
|
|
44
|
-
.bs-modal :where(.modal-header) {
|
|
45
|
-
|
|
61
|
+
.bs-modal:where([data-full-width="true"]) :where(.bs-modal-header-container) {
|
|
62
|
+
padding-left: 0;
|
|
63
|
+
padding-right: 0;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
/* Header Row */
|
|
67
|
+
.bs-modal :where(.bs-modal-header) {
|
|
68
|
+
align-items: center;
|
|
46
69
|
display: flex;
|
|
47
70
|
justify-content: space-between;
|
|
48
|
-
margin-bottom: 2rem;
|
|
49
71
|
}
|
|
50
72
|
|
|
51
|
-
|
|
73
|
+
/* Title */
|
|
74
|
+
.bs-modal :where(.bs-modal-title) {
|
|
52
75
|
flex-grow: 1;
|
|
53
|
-
font-size: var(--bs-text-
|
|
54
|
-
font-weight:
|
|
55
|
-
margin:
|
|
76
|
+
font-size: var(--bs-text-lg);
|
|
77
|
+
font-weight: 400;
|
|
78
|
+
margin-right: 2rem;
|
|
56
79
|
}
|
|
57
80
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
81
|
+
/* Subtitle */
|
|
82
|
+
.bs-modal :where(.bs-modal-subtitle) {
|
|
83
|
+
font-size: var(--bs-text-sm);
|
|
84
|
+
font-weight: 400;
|
|
85
|
+
margin-top: 0.5rem;
|
|
86
|
+
width: 100%;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
/* Close Button */
|
|
90
|
+
.bs-modal :where(.bs-modal-close-button) {
|
|
91
|
+
background-color: transparent;
|
|
92
|
+
cursor: pointer;
|
|
62
93
|
}
|
|
63
94
|
|
|
64
|
-
.bs-modal
|
|
95
|
+
.bs-modal:where(:not(:has(.bs-modal-header-container))) :where(.bs-modal-close-button) {
|
|
65
96
|
position: absolute;
|
|
66
|
-
right:
|
|
67
|
-
top:
|
|
97
|
+
right: 1rem;
|
|
98
|
+
top: 1rem;
|
|
68
99
|
}
|
|
69
100
|
|
|
70
|
-
.bs-modal :where(.close-button) {
|
|
71
|
-
|
|
101
|
+
.bs-modal:where([data-full-width="true"]:has(> .bs-modal-header-container)) :where(.bs-modal-close-button) {
|
|
102
|
+
margin-right: var(--modal-padding);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.bs-modal:where([data-full-width="true"][data-size="lg"]:has(> .bs-modal-header-container)) :where(.bs-modal-close-button) {
|
|
106
|
+
margin-right: var(--lg-modal-padding);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
/* Progress */
|
|
110
|
+
.bs-modal :where(.bs-modal-progress) {
|
|
111
|
+
margin-top: 1.5rem;
|
|
112
|
+
width: 100%;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
/* Body */
|
|
116
|
+
.bs-modal :where(.bs-modal-body) {
|
|
117
|
+
overflow-y: auto;
|
|
118
|
+
padding: var(--modal-padding);
|
|
72
119
|
}
|
|
73
120
|
|
|
74
|
-
.bs-modal :where(.modal-
|
|
75
|
-
|
|
121
|
+
.bs-modal:where([data-full-height="true"]) :where(.bs-modal-body) {
|
|
122
|
+
padding-bottom: 0;
|
|
123
|
+
padding-top: 0;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.bs-modal:where([data-full-width="true"]) :where(.bs-modal-body) {
|
|
127
|
+
padding-left: 0;
|
|
128
|
+
padding-right: 0;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
/* Has header, but no header border */
|
|
132
|
+
.bs-modal:where(:not([data-header-border]):has(> .bs-modal-header-container)) :where(.bs-modal-body),
|
|
133
|
+
.bs-modal:where([data-header-border="false"]:has(> .bs-modal-header-container)) :where(.bs-modal-body) {
|
|
134
|
+
padding-top: 0;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
/* Has footer, but no footer border */
|
|
138
|
+
.bs-modal:where(:not([data-footer-border])) :where(.bs-modal-body:has(~ .bs-modal-footer)),
|
|
139
|
+
.bs-modal:where([data-footer-border="false"]) :where(.bs-modal-body:has(~ .bs-modal-footer)) {
|
|
140
|
+
padding-bottom: 0;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.bs-modal:where([data-body-background-contrast="true"]) :where(.bs-modal-body) {
|
|
144
|
+
background-color: var(--bs-bg-light);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
/* Footer */
|
|
148
|
+
.bs-modal :where(.bs-modal-footer) {
|
|
149
|
+
padding-bottom: 1rem;
|
|
150
|
+
padding-left: var(--modal-padding);
|
|
151
|
+
padding-right: var(--modal-padding);
|
|
152
|
+
padding-top: 1rem;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.bs-modal:where([data-size="lg"]) :where(.bs-modal-footer) {
|
|
156
|
+
padding-bottom: 1.5rem;
|
|
157
|
+
padding-left: var(--lg-modal-padding);
|
|
158
|
+
padding-right: var(--lg-modal-padding);
|
|
159
|
+
padding-top: 1.5rem;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.bs-modal:where([data-footer-border="true"]) :where(.bs-modal-footer) {
|
|
163
|
+
border-top: 1px solid var(--bs-border-base);
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.bs-modal:where([data-full-width="true"]) :where(.bs-modal-footer) {
|
|
167
|
+
padding-left: 0;
|
|
168
|
+
padding-right: 0;
|
|
76
169
|
}
|
|
77
170
|
|
|
78
171
|
/* 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;
|