@wwtdev/bsds-css 2.22.0 → 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.
Files changed (7) hide show
  1. package/dist/components/_form-text-fields.scss +5 -0
  2. package/dist/components/_modal.scss +67 -89
  3. package/dist/components/form-text-fields.css +5 -0
  4. package/dist/components/modal.css +67 -89
  5. package/dist/wwt-bsds.css +68 -77
  6. package/dist/wwt-bsds.min.css +1 -1
  7. package/package.json +1 -1
package/dist/components/_form-text-fields.scss CHANGED
@@ -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) {
package/dist/components/_modal.scss CHANGED
@@ -1,21 +1,22 @@
1
1
  @mixin modal() {
2
2
  .bs-modal {
3
- --base-modal-width: 35rem;
4
- --modal-padding: 1.5rem;
5
- --sm-modal-width: 21.25rem;
6
- --lg-modal-width: 45.3125rem;
7
- --lg-modal-padding: 2rem;
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 */
8
8
  background-color: var(--bs-bg-base-to-medium);
9
9
  border-radius: 4px;
10
10
  bottom: 0;
11
11
  box-shadow: var(--bs-shadow-contentHigh);
12
+ display: flex;
13
+ flex-direction: column;
12
14
  height: fit-content;
13
15
  left: 0;
14
16
  margin: auto;
15
17
  max-height: calc(100% - 3rem);
16
18
  opacity: 0;
17
19
  overflow: auto;
18
- padding: var(--modal-padding);
19
20
  position: fixed;
20
21
  right: 0;
21
22
  top: 0;
@@ -26,27 +27,26 @@
26
27
  z-index: 9999;
27
28
  }
28
29
 
29
- .bs-modal:where([data-has-header-or-footer="true"]) {
30
- padding: 0;
31
- }
32
-
33
30
  @media (min-width: 752px) {
34
31
  .bs-modal {
35
32
  max-height: min(calc(100vh - 3rem), 40.625rem);
36
33
  width: var(--base-modal-width);
37
34
  }
35
+
38
36
  .bs-modal:where([data-size="sm"]) {
39
37
  width: var(--sm-modal-width);
40
38
  }
39
+
41
40
  .bs-modal:where([data-size="lg"]) {
42
41
  width: var(--lg-modal-width);
43
42
  }
44
43
  }
45
44
 
46
- .bs-modal:where([data-shown]:not([data-shown="false"])) {
45
+ .bs-modal:where([data-shown="true"]) {
47
46
  opacity: 1;
48
47
  }
49
48
 
49
+ /* Header Container */
50
50
  .bs-modal :where(.bs-modal-header-container) {
51
51
  padding: var(--modal-padding);
52
52
  }
@@ -55,13 +55,23 @@
55
55
  padding: var(--lg-modal-padding);
56
56
  }
57
57
 
58
+ .bs-modal:where([data-header-border="true"]) :where(.bs-modal-header-container) {
59
+ border-bottom: 1px solid var(--bs-border-base);
60
+ }
61
+
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 */
58
68
  .bs-modal :where(.bs-modal-header) {
59
69
  align-items: center;
60
70
  display: flex;
61
71
  justify-content: space-between;
62
- margin-bottom: 0.5rem;
63
72
  }
64
73
 
74
+ /* Title */
65
75
  .bs-modal :where(.bs-modal-title) {
66
76
  flex-grow: 1;
67
77
  font-size: var(--bs-text-lg);
@@ -69,128 +79,96 @@
69
79
  margin-right: 2rem;
70
80
  }
71
81
 
82
+ /* Subtitle */
72
83
  .bs-modal :where(.bs-modal-subtitle) {
73
84
  font-size: var(--bs-text-sm);
74
85
  font-weight: 400;
75
- margin: 0;
86
+ margin-top: 0.5rem;
76
87
  width: 100%;
77
- margin-bottom: 1.5rem;
78
88
  }
79
89
 
80
- .bs-modal :where(.bs-modal-only-close-button-modal-header) {
81
- display: flex;
82
- justify-content: flex-end;
90
+ /* Close Button */
91
+ .bs-modal :where(.bs-modal-close-button) {
92
+ background-color: transparent;
93
+ cursor: pointer;
83
94
  }
84
95
 
85
- .bs-modal :where(.bs-modal-header-container):where(:has(.bs-modal-only-close-button-modal-header)) {
86
- margin-bottom: 0;
87
- padding-bottom: 0;
96
+ .bs-modal:where(:not(:has(.bs-modal-header-container))) :where(.bs-modal-close-button) {
97
+ position: absolute;
98
+ right: 1rem;
99
+ top: 1rem;
88
100
  }
89
101
 
90
- .bs-modal :where(.bs-modal-full-width-header-close-button) {
91
- position: absolute;
92
- right: 0.75rem;
93
- top: 0.75rem;
102
+ .bs-modal:where([data-full-width="true"]:has(> .bs-modal-header-container)) :where(.bs-modal-close-button) {
103
+ margin-right: var(--modal-padding);
94
104
  }
95
105
 
96
- .bs-modal :where(.bs-modal-close-button) {
97
- cursor: pointer;
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);
98
108
  }
99
109
 
110
+ /* Progress */
100
111
  .bs-modal :where(.bs-modal-progress) {
112
+ margin-top: 1.5rem;
101
113
  width: 100%;
102
114
  }
103
115
 
116
+ /* Body */
104
117
  .bs-modal :where(.bs-modal-body) {
105
- padding: 0 var(--modal-padding);
106
- }
107
-
108
- .bs-modal:where([data-header-border="true"]) :where(.bs-modal-body) {
109
- padding-top: var(--modal-padding);
110
- }
111
-
112
- .bs-modal:where([data-footer-border="true"]) :where(.bs-modal-body) {
113
- padding-bottom: var(--modal-padding);
114
- }
115
-
116
- .bs-modal:where([data-size="lg"]) :where(.bs-modal-body) {
117
- padding: 0 var(--lg-modal-padding);
118
- }
119
-
120
- .bs-modal:where([data-body-background-contrast="true"]) :where(.bs-modal-body) {
121
- background-color: var(--bs-bg-light);
118
+ overflow-y: auto;
119
+ padding: var(--modal-padding);
122
120
  }
123
121
 
124
- .bs-modal:where([data-no-header-container="true"]):where([data-size="lg"]) :where(.bs-modal-body) {
125
- padding-top: var(--lg-modal-padding);
122
+ .bs-modal:where([data-full-height="true"]) :where(.bs-modal-body) {
123
+ padding-bottom: 0;
124
+ padding-top: 0;
126
125
  }
127
126
 
128
- .bs-modal:where([data-no-header-container="true"]) :where(.bs-modal-body) {
129
- padding-top: var(--modal-padding);
127
+ .bs-modal:where([data-full-width="true"]) :where(.bs-modal-body) {
128
+ padding-left: 0;
129
+ padding-right: 0;
130
130
  }
131
131
 
132
- .bs-modal:where([data-no-footer="true"]):where([data-size="lg"]) :where(.bs-modal-body) {
133
- padding-bottom: var(--lg-modal-padding);
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;
134
136
  }
135
137
 
136
- .bs-modal:where([data-no-footer="true"]) :where(.bs-modal-body) {
137
- padding-bottom: var(--modal-padding);
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;
138
142
  }
139
143
 
140
- .bs-modal:where([data-no-footer="true"]):where([data-full-height="true"]) :where(.bs-modal-body) {
141
- padding-bottom: 0;
144
+ .bs-modal:where([data-body-background-contrast="true"]) :where(.bs-modal-body) {
145
+ background-color: var(--bs-bg-light);
142
146
  }
143
147
 
148
+ /* Footer */
144
149
  .bs-modal :where(.bs-modal-footer) {
145
- padding: var(--modal-padding);
150
+ padding-bottom: 1rem;
151
+ padding-left: var(--modal-padding);
152
+ padding-right: var(--modal-padding);
153
+ padding-top: 1rem;
146
154
  }
147
155
 
148
156
  .bs-modal:where([data-size="lg"]) :where(.bs-modal-footer) {
149
- padding: var(--lg-modal-padding);
150
- }
151
-
152
- .bs-modal:where([data-sticky-header="true"]) :where(.bs-modal-header-container) {
153
- position: sticky;
154
- top: 0;
155
- z-index: 1;
156
- background: inherit;
157
- }
158
-
159
- .bs-modal:where([data-sticky-footer="true"]) :where(.bs-modal-footer) {
160
- position: sticky;
161
- bottom: 0;
162
- z-index: 1;
163
- background: inherit;
164
- }
165
-
166
- .bs-modal:where([data-header-border="true"]) :where(.bs-modal-header-container) {
167
- border-bottom: 1px solid var(--bs-border-base);
157
+ padding-bottom: 1.5rem;
158
+ padding-left: var(--lg-modal-padding);
159
+ padding-right: var(--lg-modal-padding);
160
+ padding-top: 1.5rem;
168
161
  }
169
162
 
170
163
  .bs-modal:where([data-footer-border="true"]) :where(.bs-modal-footer) {
171
164
  border-top: 1px solid var(--bs-border-base);
172
165
  }
173
166
 
174
- .bs-modal:where([data-full-width="true"]) :where(.bs-modal-section) {
175
- padding-left: 0;
176
- padding-right: 0;
177
- }
178
-
179
- .bs-modal:where([data-full-height="true"]) :where(.bs-modal-section) {
180
- padding-top: 0;
181
- padding-bottom: 0;
182
- }
183
-
184
- .bs-modal:where([data-full-width="true"]) {
167
+ .bs-modal:where([data-full-width="true"]) :where(.bs-modal-footer) {
185
168
  padding-left: 0;
186
169
  padding-right: 0;
187
170
  }
188
171
 
189
- .bs-modal:where([data-full-height="true"]) {
190
- padding-top: 0;
191
- padding-bottom: 0;
192
- }
193
-
194
172
  /* Vue Transition Styles - Only used in Vue component */
195
173
  .bs-modal:where(.bs-modal-enter-from),
196
174
  .bs-modal:where(.bs-modal-leave-to) {
package/dist/components/form-text-fields.css CHANGED
@@ -90,6 +90,11 @@ textarea {
90
90
  outline-width: 0px;
91
91
  }
92
92
 
93
+ /* OPEN state */
94
+ :is(select, .bs-select):where(:open) {
95
+ background: var(--bs-bg-base-to-light);
96
+ }
97
+
93
98
  /* DISABLED state */
94
99
  :is(input:where(:not([type='checkbox'],[type='radio'])), textarea, select):where(:disabled),
95
100
  :is(.bs-input, .bs-select, .bs-textarea):where(:disabled) {
package/dist/components/modal.css CHANGED
@@ -1,20 +1,21 @@
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
+ --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 */
7
7
  background-color: var(--bs-bg-base-to-medium);
8
8
  border-radius: 4px;
9
9
  bottom: 0;
10
10
  box-shadow: var(--bs-shadow-contentHigh);
11
+ display: flex;
12
+ flex-direction: column;
11
13
  height: fit-content;
12
14
  left: 0;
13
15
  margin: auto;
14
16
  max-height: calc(100% - 3rem);
15
17
  opacity: 0;
16
18
  overflow: auto;
17
- padding: var(--modal-padding);
18
19
  position: fixed;
19
20
  right: 0;
20
21
  top: 0;
@@ -25,27 +26,26 @@
25
26
  z-index: 9999;
26
27
  }
27
28
 
28
- .bs-modal:where([data-has-header-or-footer="true"]) {
29
- padding: 0;
30
- }
31
-
32
29
  @media (min-width: 752px) {
33
30
  .bs-modal {
34
31
  max-height: min(calc(100vh - 3rem), 40.625rem);
35
32
  width: var(--base-modal-width);
36
33
  }
34
+
37
35
  .bs-modal:where([data-size="sm"]) {
38
36
  width: var(--sm-modal-width);
39
37
  }
38
+
40
39
  .bs-modal:where([data-size="lg"]) {
41
40
  width: var(--lg-modal-width);
42
41
  }
43
42
  }
44
43
 
45
- .bs-modal:where([data-shown]:not([data-shown="false"])) {
44
+ .bs-modal:where([data-shown="true"]) {
46
45
  opacity: 1;
47
46
  }
48
47
 
48
+ /* Header Container */
49
49
  .bs-modal :where(.bs-modal-header-container) {
50
50
  padding: var(--modal-padding);
51
51
  }
@@ -54,13 +54,23 @@
54
54
  padding: var(--lg-modal-padding);
55
55
  }
56
56
 
57
+ .bs-modal:where([data-header-border="true"]) :where(.bs-modal-header-container) {
58
+ border-bottom: 1px solid var(--bs-border-base);
59
+ }
60
+
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 */
57
67
  .bs-modal :where(.bs-modal-header) {
58
68
  align-items: center;
59
69
  display: flex;
60
70
  justify-content: space-between;
61
- margin-bottom: 0.5rem;
62
71
  }
63
72
 
73
+ /* Title */
64
74
  .bs-modal :where(.bs-modal-title) {
65
75
  flex-grow: 1;
66
76
  font-size: var(--bs-text-lg);
@@ -68,128 +78,96 @@
68
78
  margin-right: 2rem;
69
79
  }
70
80
 
81
+ /* Subtitle */
71
82
  .bs-modal :where(.bs-modal-subtitle) {
72
83
  font-size: var(--bs-text-sm);
73
84
  font-weight: 400;
74
- margin: 0;
85
+ margin-top: 0.5rem;
75
86
  width: 100%;
76
- margin-bottom: 1.5rem;
77
87
  }
78
88
 
79
- .bs-modal :where(.bs-modal-only-close-button-modal-header) {
80
- display: flex;
81
- justify-content: flex-end;
89
+ /* Close Button */
90
+ .bs-modal :where(.bs-modal-close-button) {
91
+ background-color: transparent;
92
+ cursor: pointer;
82
93
  }
83
94
 
84
- .bs-modal :where(.bs-modal-header-container):where(:has(.bs-modal-only-close-button-modal-header)) {
85
- margin-bottom: 0;
86
- padding-bottom: 0;
95
+ .bs-modal:where(:not(:has(.bs-modal-header-container))) :where(.bs-modal-close-button) {
96
+ position: absolute;
97
+ right: 1rem;
98
+ top: 1rem;
87
99
  }
88
100
 
89
- .bs-modal :where(.bs-modal-full-width-header-close-button) {
90
- position: absolute;
91
- right: 0.75rem;
92
- top: 0.75rem;
101
+ .bs-modal:where([data-full-width="true"]:has(> .bs-modal-header-container)) :where(.bs-modal-close-button) {
102
+ margin-right: var(--modal-padding);
93
103
  }
94
104
 
95
- .bs-modal :where(.bs-modal-close-button) {
96
- cursor: pointer;
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);
97
107
  }
98
108
 
109
+ /* Progress */
99
110
  .bs-modal :where(.bs-modal-progress) {
111
+ margin-top: 1.5rem;
100
112
  width: 100%;
101
113
  }
102
114
 
115
+ /* Body */
103
116
  .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);
117
+ overflow-y: auto;
118
+ padding: var(--modal-padding);
121
119
  }
122
120
 
123
- .bs-modal:where([data-no-header-container="true"]):where([data-size="lg"]) :where(.bs-modal-body) {
124
- padding-top: var(--lg-modal-padding);
121
+ .bs-modal:where([data-full-height="true"]) :where(.bs-modal-body) {
122
+ padding-bottom: 0;
123
+ padding-top: 0;
125
124
  }
126
125
 
127
- .bs-modal:where([data-no-header-container="true"]) :where(.bs-modal-body) {
128
- padding-top: var(--modal-padding);
126
+ .bs-modal:where([data-full-width="true"]) :where(.bs-modal-body) {
127
+ padding-left: 0;
128
+ padding-right: 0;
129
129
  }
130
130
 
131
- .bs-modal:where([data-no-footer="true"]):where([data-size="lg"]) :where(.bs-modal-body) {
132
- padding-bottom: var(--lg-modal-padding);
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;
133
135
  }
134
136
 
135
- .bs-modal:where([data-no-footer="true"]) :where(.bs-modal-body) {
136
- padding-bottom: var(--modal-padding);
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;
137
141
  }
138
142
 
139
- .bs-modal:where([data-no-footer="true"]):where([data-full-height="true"]) :where(.bs-modal-body) {
140
- padding-bottom: 0;
143
+ .bs-modal:where([data-body-background-contrast="true"]) :where(.bs-modal-body) {
144
+ background-color: var(--bs-bg-light);
141
145
  }
142
146
 
147
+ /* Footer */
143
148
  .bs-modal :where(.bs-modal-footer) {
144
- padding: var(--modal-padding);
149
+ padding-bottom: 1rem;
150
+ padding-left: var(--modal-padding);
151
+ padding-right: var(--modal-padding);
152
+ padding-top: 1rem;
145
153
  }
146
154
 
147
155
  .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);
156
+ padding-bottom: 1.5rem;
157
+ padding-left: var(--lg-modal-padding);
158
+ padding-right: var(--lg-modal-padding);
159
+ padding-top: 1.5rem;
167
160
  }
168
161
 
169
162
  .bs-modal:where([data-footer-border="true"]) :where(.bs-modal-footer) {
170
163
  border-top: 1px solid var(--bs-border-base);
171
164
  }
172
165
 
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"]) {
166
+ .bs-modal:where([data-full-width="true"]) :where(.bs-modal-footer) {
184
167
  padding-left: 0;
185
168
  padding-right: 0;
186
169
  }
187
170
 
188
- .bs-modal:where([data-full-height="true"]) {
189
- padding-top: 0;
190
- padding-bottom: 0;
191
- }
192
-
193
171
  /* Vue Transition Styles - Only used in Vue component */
194
172
  .bs-modal:where(.bs-modal-enter-from),
195
173
  .bs-modal:where(.bs-modal-leave-to) {