@wwtdev/bsds-css 2.22.0 → 2.24.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 (11) hide show
  1. package/dist/components/_form-container.scss +111 -0
  2. package/dist/components/_form-text-fields.scss +5 -0
  3. package/dist/components/_modal.scss +67 -89
  4. package/dist/components/_table.scss +4 -1
  5. package/dist/components/form-container.css +108 -0
  6. package/dist/components/form-text-fields.css +5 -0
  7. package/dist/components/modal.css +67 -89
  8. package/dist/components/table.css +4 -1
  9. package/dist/wwt-bsds.css +165 -78
  10. package/dist/wwt-bsds.min.css +1 -1
  11. package/package.json +1 -1
package/dist/components/_form-container.scss ADDED
@@ -0,0 +1,111 @@
1
+ @mixin form-container() {
2
+ .bs-form-container {
3
+ background: var(--bs-bg-base-to-light);
4
+ border-radius: 0;
5
+ }
6
+
7
+ @media (min-width: 752px) {
8
+ .bs-form-container {
9
+ border-radius: 8px;
10
+ }
11
+ }
12
+
13
+ .bs-form-container :where(.bs-form-container-header-wrapper) {
14
+ padding: var(--bs-space-3) var(--bs-space-4);
15
+ display: flex;
16
+ }
17
+
18
+ .bs-form-container :where(.bs-form-container-header) {
19
+ padding-right: var(--bs-space-6);
20
+ display: flex;
21
+ flex: 1;
22
+ flex-direction: column;
23
+ flex-wrap: wrap;
24
+ justify-content: center;
25
+ }
26
+
27
+ .bs-form-container :where(.bs-form-container-title-wrapper) {
28
+ margin-right: auto;
29
+ display: flex;
30
+ align-items: center;
31
+ }
32
+
33
+ .bs-form-container :where(.bs-form-container-title) {
34
+ color: var(--bs-ink-medium);
35
+ font-size: var(--bs-text-base);
36
+ }
37
+
38
+ .bs-form-container :where(.bs-form-container-title-addon) {
39
+ margin-left: var(--bs-space-2);
40
+ display: flex;
41
+ align-items: center;
42
+ gap: var(--bs-space-2);
43
+ }
44
+
45
+ .bs-form-container :where(.bs-form-container-header-icon) {
46
+ margin-right: var(--bs-space-2);
47
+ color: var(--bs-ink-base);
48
+ height: 1rem;
49
+ width: 1rem;
50
+ }
51
+
52
+ .bs-form-container :where(.bs-form-container-subtitle) {
53
+ margin-top: var(--bs-space-1);
54
+ color: var(--bs-ink-light);
55
+ font-size: var(--bs-text-sm);
56
+ }
57
+
58
+ .bs-form-container :where(.bs-form-container-header-actions) {
59
+ display: flex;
60
+ align-items: center;
61
+ gap: var(--bs-space-4);
62
+ }
63
+
64
+ .bs-form-container :where(.bs-form-container-content) {
65
+ display: none;
66
+ padding: var(--bs-space-6);
67
+ border-top: 1px solid var(--bs-border-light);
68
+ }
69
+
70
+ .bs-form-container :where(.bs-form-container-content):where([data-open="true"]) {
71
+ display: flex;
72
+ }
73
+
74
+ /* adds styling utilities for icons in header actions slot */
75
+ .bs-form-container :where(.bs-form-container-header-actions) :where(.bs-icon) {
76
+ color: var(--bs-ink-medium);
77
+ cursor: pointer;
78
+ transition: transform 200ms ease-in-out, color 100ms ease-in-out;
79
+
80
+ /* color utilities for specified icons */
81
+ &:where([data-component="bs-icon-caret-down"]) {
82
+ color: var(--bs-ink-base);
83
+ }
84
+
85
+ &:where([data-component="bs-icon-edit"]):hover {
86
+ color: var(--bs-ink-blue);
87
+ }
88
+
89
+ &:where([data-component="bs-icon-delete"]):hover {
90
+ color: var(--bs-ink-red);
91
+ }
92
+ }
93
+
94
+ .bs-form-container :where(.bs-form-container-header-actions):where([data-open="true"]) {
95
+ /* transition utilities for specified icons */
96
+ :where([data-component="bs-icon-caret-down"]) {
97
+ transform: rotate(180deg);
98
+ }
99
+ }
100
+
101
+ /* inactive state styles */
102
+ .bs-form-container:where([data-inactive="true"]) {
103
+ background: rgba(255, 255, 255, 0.5);
104
+ }
105
+
106
+ .bs-form-container :where(.bs-form-container-title:where([data-inactive="true"])),
107
+ .bs-form-container :where(.bs-form-container-subtitle:where([data-inactive="true"])) {
108
+ color: var(--bs-ink-disabled);
109
+ }
110
+ }
111
+
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/_table.scss CHANGED
@@ -62,7 +62,7 @@
62
62
  .bs-table-header-rowgroup-freeze {
63
63
  position: sticky;
64
64
  top: 0;
65
- z-index: 1;
65
+ z-index: 2;
66
66
 
67
67
  .bs-table:not(.bs-table-border-none) & {
68
68
  box-shadow: 0 3px 0 rgba(0, 0, 0, .03);
@@ -94,6 +94,7 @@
94
94
  .bs-table-footer-rowgroup-freeze {
95
95
  position: sticky;
96
96
  bottom: 0;
97
+ z-index: 2;
97
98
 
98
99
  .bs-table:not(.bs-table-border-none) & {
99
100
  box-shadow: 0 -3px 0 rgba(0, 0, 0, .03);
@@ -130,6 +131,7 @@
130
131
  grid-template-columns: subgrid;
131
132
  background: inherit;
132
133
  border-color: inherit;
134
+ z-index: 1;
133
135
 
134
136
  .bs-table:not(.bs-table-border-none) & {
135
137
  box-shadow: 3px 0 0 rgba(0, 0, 0, .03);
@@ -144,6 +146,7 @@
144
146
  grid-template-columns: subgrid;
145
147
  background: inherit;
146
148
  border-color: inherit;
149
+ z-index: 1;
147
150
 
148
151
  .bs-table:not(.bs-table-border-none) & {
149
152
  box-shadow: -3px 0 0 rgba(0, 0, 0, .03);
package/dist/components/form-container.css ADDED
@@ -0,0 +1,108 @@
1
+ .bs-form-container {
2
+ background: var(--bs-bg-base-to-light);
3
+ border-radius: 0;
4
+ }
5
+
6
+ @media (min-width: 752px) {
7
+ .bs-form-container {
8
+ border-radius: 8px;
9
+ }
10
+ }
11
+
12
+ .bs-form-container :where(.bs-form-container-header-wrapper) {
13
+ padding: var(--bs-space-3) var(--bs-space-4);
14
+ display: flex;
15
+ }
16
+
17
+ .bs-form-container :where(.bs-form-container-header) {
18
+ padding-right: var(--bs-space-6);
19
+ display: flex;
20
+ flex: 1;
21
+ flex-direction: column;
22
+ flex-wrap: wrap;
23
+ justify-content: center;
24
+ }
25
+
26
+ .bs-form-container :where(.bs-form-container-title-wrapper) {
27
+ margin-right: auto;
28
+ display: flex;
29
+ align-items: center;
30
+ }
31
+
32
+ .bs-form-container :where(.bs-form-container-title) {
33
+ color: var(--bs-ink-medium);
34
+ font-size: var(--bs-text-base);
35
+ }
36
+
37
+ .bs-form-container :where(.bs-form-container-title-addon) {
38
+ margin-left: var(--bs-space-2);
39
+ display: flex;
40
+ align-items: center;
41
+ gap: var(--bs-space-2);
42
+ }
43
+
44
+ .bs-form-container :where(.bs-form-container-header-icon) {
45
+ margin-right: var(--bs-space-2);
46
+ color: var(--bs-ink-base);
47
+ height: 1rem;
48
+ width: 1rem;
49
+ }
50
+
51
+ .bs-form-container :where(.bs-form-container-subtitle) {
52
+ margin-top: var(--bs-space-1);
53
+ color: var(--bs-ink-light);
54
+ font-size: var(--bs-text-sm);
55
+ }
56
+
57
+ .bs-form-container :where(.bs-form-container-header-actions) {
58
+ display: flex;
59
+ align-items: center;
60
+ gap: var(--bs-space-4);
61
+ }
62
+
63
+ .bs-form-container :where(.bs-form-container-content) {
64
+ display: none;
65
+ padding: var(--bs-space-6);
66
+ border-top: 1px solid var(--bs-border-light);
67
+ }
68
+
69
+ .bs-form-container :where(.bs-form-container-content):where([data-open="true"]) {
70
+ display: flex;
71
+ }
72
+
73
+ /* adds styling utilities for icons in header actions slot */
74
+ .bs-form-container :where(.bs-form-container-header-actions) :where(.bs-icon) {
75
+ color: var(--bs-ink-medium);
76
+ cursor: pointer;
77
+ transition: transform 200ms ease-in-out, color 100ms ease-in-out;
78
+
79
+ /* color utilities for specified icons */
80
+ &:where([data-component="bs-icon-caret-down"]) {
81
+ color: var(--bs-ink-base);
82
+ }
83
+
84
+ &:where([data-component="bs-icon-edit"]):hover {
85
+ color: var(--bs-ink-blue);
86
+ }
87
+
88
+ &:where([data-component="bs-icon-delete"]):hover {
89
+ color: var(--bs-ink-red);
90
+ }
91
+ }
92
+
93
+ .bs-form-container :where(.bs-form-container-header-actions):where([data-open="true"]) {
94
+ /* transition utilities for specified icons */
95
+ :where([data-component="bs-icon-caret-down"]) {
96
+ transform: rotate(180deg);
97
+ }
98
+ }
99
+
100
+ /* inactive state styles */
101
+ .bs-form-container:where([data-inactive="true"]) {
102
+ background: rgba(255, 255, 255, 0.5);
103
+ }
104
+
105
+ .bs-form-container :where(.bs-form-container-title:where([data-inactive="true"])),
106
+ .bs-form-container :where(.bs-form-container-subtitle:where([data-inactive="true"])) {
107
+ color: var(--bs-ink-disabled);
108
+ }
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) {