@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/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) {
package/dist/components/table.css CHANGED
@@ -61,7 +61,7 @@
61
61
  .bs-table-header-rowgroup-freeze {
62
62
  position: sticky;
63
63
  top: 0;
64
- z-index: 1;
64
+ z-index: 2;
65
65
 
66
66
  .bs-table:not(.bs-table-border-none) & {
67
67
  box-shadow: 0 3px 0 rgba(0, 0, 0, .03);
@@ -93,6 +93,7 @@
93
93
  .bs-table-footer-rowgroup-freeze {
94
94
  position: sticky;
95
95
  bottom: 0;
96
+ z-index: 2;
96
97
 
97
98
  .bs-table:not(.bs-table-border-none) & {
98
99
  box-shadow: 0 -3px 0 rgba(0, 0, 0, .03);
@@ -129,6 +130,7 @@
129
130
  grid-template-columns: subgrid;
130
131
  background: inherit;
131
132
  border-color: inherit;
133
+ z-index: 1;
132
134
 
133
135
  .bs-table:not(.bs-table-border-none) & {
134
136
  box-shadow: 3px 0 0 rgba(0, 0, 0, .03);
@@ -143,6 +145,7 @@
143
145
  grid-template-columns: subgrid;
144
146
  background: inherit;
145
147
  border-color: inherit;
148
+ z-index: 1;
146
149
 
147
150
  .bs-table:not(.bs-table-border-none) & {
148
151
  box-shadow: -3px 0 0 rgba(0, 0, 0, .03);
package/dist/wwt-bsds.css CHANGED
@@ -3113,6 +3113,99 @@ input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-erro
3113
3113
  .bs-character-count:where([data-error="true"]) {
3114
3114
  color: var(--bs-ink-red);
3115
3115
  }
3116
+ .bs-form-container {
3117
+ background: var(--bs-bg-base-to-light);
3118
+ border-radius: 0;
3119
+ }
3120
+ @media (min-width: 752px) {
3121
+ .bs-form-container {
3122
+ border-radius: 8px;
3123
+ }
3124
+ }
3125
+ .bs-form-container :where(.bs-form-container-header-wrapper) {
3126
+ padding: var(--bs-space-3) var(--bs-space-4);
3127
+ display: flex;
3128
+ }
3129
+ .bs-form-container :where(.bs-form-container-header) {
3130
+ padding-right: var(--bs-space-6);
3131
+ display: flex;
3132
+ flex: 1;
3133
+ flex-direction: column;
3134
+ flex-wrap: wrap;
3135
+ justify-content: center;
3136
+ }
3137
+ .bs-form-container :where(.bs-form-container-title-wrapper) {
3138
+ margin-right: auto;
3139
+ display: flex;
3140
+ align-items: center;
3141
+ }
3142
+ .bs-form-container :where(.bs-form-container-title) {
3143
+ color: var(--bs-ink-medium);
3144
+ font-size: var(--bs-text-base);
3145
+ }
3146
+ .bs-form-container :where(.bs-form-container-title-addon) {
3147
+ margin-left: var(--bs-space-2);
3148
+ display: flex;
3149
+ align-items: center;
3150
+ gap: var(--bs-space-2);
3151
+ }
3152
+ .bs-form-container :where(.bs-form-container-header-icon) {
3153
+ margin-right: var(--bs-space-2);
3154
+ color: var(--bs-ink-base);
3155
+ height: 1rem;
3156
+ width: 1rem;
3157
+ }
3158
+ .bs-form-container :where(.bs-form-container-subtitle) {
3159
+ margin-top: var(--bs-space-1);
3160
+ color: var(--bs-ink-light);
3161
+ font-size: var(--bs-text-sm);
3162
+ }
3163
+ .bs-form-container :where(.bs-form-container-header-actions) {
3164
+ display: flex;
3165
+ align-items: center;
3166
+ gap: var(--bs-space-4);
3167
+ }
3168
+ .bs-form-container :where(.bs-form-container-content) {
3169
+ display: none;
3170
+ padding: var(--bs-space-6);
3171
+ border-top: 1px solid var(--bs-border-light);
3172
+ }
3173
+ .bs-form-container :where(.bs-form-container-content):where([data-open="true"]) {
3174
+ display: flex;
3175
+ }
3176
+ /* adds styling utilities for icons in header actions slot */
3177
+ .bs-form-container :where(.bs-form-container-header-actions) :where(.bs-icon) {
3178
+ color: var(--bs-ink-medium);
3179
+ cursor: pointer;
3180
+ transition: transform 200ms ease-in-out, color 100ms ease-in-out;
3181
+
3182
+ /* color utilities for specified icons */
3183
+ &:where([data-component="bs-icon-caret-down"]) {
3184
+ color: var(--bs-ink-base);
3185
+ }
3186
+
3187
+ &:where([data-component="bs-icon-edit"]):hover {
3188
+ color: var(--bs-ink-blue);
3189
+ }
3190
+
3191
+ &:where([data-component="bs-icon-delete"]):hover {
3192
+ color: var(--bs-ink-red);
3193
+ }
3194
+ }
3195
+ .bs-form-container :where(.bs-form-container-header-actions):where([data-open="true"]) {
3196
+ /* transition utilities for specified icons */
3197
+ :where([data-component="bs-icon-caret-down"]) {
3198
+ transform: rotate(180deg);
3199
+ }
3200
+ }
3201
+ /* inactive state styles */
3202
+ .bs-form-container:where([data-inactive="true"]) {
3203
+ background: rgba(255, 255, 255, 0.5);
3204
+ }
3205
+ .bs-form-container :where(.bs-form-container-title:where([data-inactive="true"])),
3206
+ .bs-form-container :where(.bs-form-container-subtitle:where([data-inactive="true"])) {
3207
+ color: var(--bs-ink-disabled);
3208
+ }
3116
3209
  /* Generally applicable (all input types) */
3117
3210
  :where([data-required]:not([data-required="false"])) {
3118
3211
  color: var(--bs-ink-red);
@@ -3772,6 +3865,10 @@ textarea {
3772
3865
  outline-style: none;
3773
3866
  outline-width: 0px;
3774
3867
  }
3868
+ /* OPEN state */
3869
+ :is(select, .bs-select):where(:open) {
3870
+ background: var(--bs-bg-base-to-light);
3871
+ }
3775
3872
  /* DISABLED state */
3776
3873
  :is(input:where(:not([type='checkbox'],[type='radio'])), textarea, select):where(:disabled),
3777
3874
  :is(.bs-input, .bs-select, .bs-textarea):where(:disabled) {
@@ -4407,15 +4504,17 @@ select[multiple],
4407
4504
  }
4408
4505
  }
4409
4506
  .bs-modal {
4410
- --base-modal-width: 35rem;
4411
- --modal-padding: 1.5rem;
4412
- --sm-modal-width: 21.25rem;
4413
- --lg-modal-width: 45.3125rem;
4414
- --lg-modal-padding: 2rem;
4507
+ --base-modal-width: 35rem; /* 560px */
4508
+ --lg-modal-padding: 2rem; /* 32px */
4509
+ --lg-modal-width: 45.3125rem; /* 725px */
4510
+ --modal-padding: 1.5rem; /* 24px */
4511
+ --sm-modal-width: 21.25rem; /* 340px */
4415
4512
  background-color: var(--bs-bg-base-to-medium);
4416
4513
  border-radius: 4px;
4417
4514
  bottom: 0;
4418
4515
  box-shadow: var(--bs-shadow-contentHigh);
4516
+ display: flex;
4517
+ flex-direction: column;
4419
4518
  height: -moz-fit-content;
4420
4519
  height: fit-content;
4421
4520
  left: 0;
@@ -4423,7 +4522,6 @@ select[multiple],
4423
4522
  max-height: calc(100% - 3rem);
4424
4523
  opacity: 0;
4425
4524
  overflow: auto;
4426
- padding: var(--modal-padding);
4427
4525
  position: fixed;
4428
4526
  right: 0;
4429
4527
  top: 0;
@@ -4433,138 +4531,124 @@ select[multiple],
4433
4531
  width: calc(100% - 3rem);
4434
4532
  z-index: 9999;
4435
4533
  }
4436
- .bs-modal:where([data-has-header-or-footer="true"]) {
4437
- padding: 0;
4438
- }
4439
4534
  @media (min-width: 752px) {
4440
4535
  .bs-modal {
4441
4536
  max-height: min(calc(100vh - 3rem), 40.625rem);
4442
4537
  width: var(--base-modal-width);
4443
4538
  }
4539
+
4444
4540
  .bs-modal:where([data-size="sm"]) {
4445
4541
  width: var(--sm-modal-width);
4446
4542
  }
4543
+
4447
4544
  .bs-modal:where([data-size="lg"]) {
4448
4545
  width: var(--lg-modal-width);
4449
4546
  }
4450
4547
  }
4451
- .bs-modal:where([data-shown]:not([data-shown="false"])) {
4548
+ .bs-modal:where([data-shown="true"]) {
4452
4549
  opacity: 1;
4453
4550
  }
4551
+ /* Header Container */
4454
4552
  .bs-modal :where(.bs-modal-header-container) {
4455
4553
  padding: var(--modal-padding);
4456
4554
  }
4457
4555
  .bs-modal:where([data-size="lg"]) :where(.bs-modal-header-container) {
4458
4556
  padding: var(--lg-modal-padding);
4459
4557
  }
4558
+ .bs-modal:where([data-header-border="true"]) :where(.bs-modal-header-container) {
4559
+ border-bottom: 1px solid var(--bs-border-base);
4560
+ }
4561
+ .bs-modal:where([data-full-width="true"]) :where(.bs-modal-header-container) {
4562
+ padding-left: 0;
4563
+ padding-right: 0;
4564
+ }
4565
+ /* Header Row */
4460
4566
  .bs-modal :where(.bs-modal-header) {
4461
4567
  align-items: center;
4462
4568
  display: flex;
4463
4569
  justify-content: space-between;
4464
- margin-bottom: 0.5rem;
4465
4570
  }
4571
+ /* Title */
4466
4572
  .bs-modal :where(.bs-modal-title) {
4467
4573
  flex-grow: 1;
4468
4574
  font-size: var(--bs-text-lg);
4469
4575
  font-weight: 400;
4470
4576
  margin-right: 2rem;
4471
4577
  }
4578
+ /* Subtitle */
4472
4579
  .bs-modal :where(.bs-modal-subtitle) {
4473
4580
  font-size: var(--bs-text-sm);
4474
4581
  font-weight: 400;
4475
- margin: 0;
4582
+ margin-top: 0.5rem;
4476
4583
  width: 100%;
4477
- margin-bottom: 1.5rem;
4478
- }
4479
- .bs-modal :where(.bs-modal-only-close-button-modal-header) {
4480
- display: flex;
4481
- justify-content: flex-end;
4482
4584
  }
4483
- .bs-modal :where(.bs-modal-header-container):where(:has(.bs-modal-only-close-button-modal-header)) {
4484
- margin-bottom: 0;
4485
- padding-bottom: 0;
4585
+ /* Close Button */
4586
+ .bs-modal :where(.bs-modal-close-button) {
4587
+ background-color: transparent;
4588
+ cursor: pointer;
4486
4589
  }
4487
- .bs-modal :where(.bs-modal-full-width-header-close-button) {
4590
+ .bs-modal:where(:not(:has(.bs-modal-header-container))) :where(.bs-modal-close-button) {
4488
4591
  position: absolute;
4489
- right: 0.75rem;
4490
- top: 0.75rem;
4592
+ right: 1rem;
4593
+ top: 1rem;
4491
4594
  }
4492
- .bs-modal :where(.bs-modal-close-button) {
4493
- cursor: pointer;
4595
+ .bs-modal:where([data-full-width="true"]:has(> .bs-modal-header-container)) :where(.bs-modal-close-button) {
4596
+ margin-right: var(--modal-padding);
4494
4597
  }
4598
+ .bs-modal:where([data-full-width="true"][data-size="lg"]:has(> .bs-modal-header-container)) :where(.bs-modal-close-button) {
4599
+ margin-right: var(--lg-modal-padding);
4600
+ }
4601
+ /* Progress */
4495
4602
  .bs-modal :where(.bs-modal-progress) {
4603
+ margin-top: 1.5rem;
4496
4604
  width: 100%;
4497
4605
  }
4606
+ /* Body */
4498
4607
  .bs-modal :where(.bs-modal-body) {
4499
- padding: 0 var(--modal-padding);
4608
+ overflow-y: auto;
4609
+ padding: var(--modal-padding);
4610
+ }
4611
+ .bs-modal:where([data-full-height="true"]) :where(.bs-modal-body) {
4612
+ padding-bottom: 0;
4613
+ padding-top: 0;
4500
4614
  }
4501
- .bs-modal:where([data-header-border="true"]) :where(.bs-modal-body) {
4502
- padding-top: var(--modal-padding);
4615
+ .bs-modal:where([data-full-width="true"]) :where(.bs-modal-body) {
4616
+ padding-left: 0;
4617
+ padding-right: 0;
4503
4618
  }
4504
- .bs-modal:where([data-footer-border="true"]) :where(.bs-modal-body) {
4505
- padding-bottom: var(--modal-padding);
4619
+ /* Has header, but no header border */
4620
+ .bs-modal:where(:not([data-header-border]):has(> .bs-modal-header-container)) :where(.bs-modal-body),
4621
+ .bs-modal:where([data-header-border="false"]:has(> .bs-modal-header-container)) :where(.bs-modal-body) {
4622
+ padding-top: 0;
4506
4623
  }
4507
- .bs-modal:where([data-size="lg"]) :where(.bs-modal-body) {
4508
- padding: 0 var(--lg-modal-padding);
4624
+ /* Has footer, but no footer border */
4625
+ .bs-modal:where(:not([data-footer-border])) :where(.bs-modal-body:has(~ .bs-modal-footer)),
4626
+ .bs-modal:where([data-footer-border="false"]) :where(.bs-modal-body:has(~ .bs-modal-footer)) {
4627
+ padding-bottom: 0;
4509
4628
  }
4510
4629
  .bs-modal:where([data-body-background-contrast="true"]) :where(.bs-modal-body) {
4511
4630
  background-color: var(--bs-bg-light);
4512
4631
  }
4513
- .bs-modal:where([data-no-header-container="true"]):where([data-size="lg"]) :where(.bs-modal-body) {
4514
- padding-top: var(--lg-modal-padding);
4515
- }
4516
- .bs-modal:where([data-no-header-container="true"]) :where(.bs-modal-body) {
4517
- padding-top: var(--modal-padding);
4518
- }
4519
- .bs-modal:where([data-no-footer="true"]):where([data-size="lg"]) :where(.bs-modal-body) {
4520
- padding-bottom: var(--lg-modal-padding);
4521
- }
4522
- .bs-modal:where([data-no-footer="true"]) :where(.bs-modal-body) {
4523
- padding-bottom: var(--modal-padding);
4524
- }
4525
- .bs-modal:where([data-no-footer="true"]):where([data-full-height="true"]) :where(.bs-modal-body) {
4526
- padding-bottom: 0;
4527
- }
4632
+ /* Footer */
4528
4633
  .bs-modal :where(.bs-modal-footer) {
4529
- padding: var(--modal-padding);
4634
+ padding-bottom: 1rem;
4635
+ padding-left: var(--modal-padding);
4636
+ padding-right: var(--modal-padding);
4637
+ padding-top: 1rem;
4530
4638
  }
4531
4639
  .bs-modal:where([data-size="lg"]) :where(.bs-modal-footer) {
4532
- padding: var(--lg-modal-padding);
4533
- }
4534
- .bs-modal:where([data-sticky-header="true"]) :where(.bs-modal-header-container) {
4535
- position: sticky;
4536
- top: 0;
4537
- z-index: 1;
4538
- background: inherit;
4539
- }
4540
- .bs-modal:where([data-sticky-footer="true"]) :where(.bs-modal-footer) {
4541
- position: sticky;
4542
- bottom: 0;
4543
- z-index: 1;
4544
- background: inherit;
4545
- }
4546
- .bs-modal:where([data-header-border="true"]) :where(.bs-modal-header-container) {
4547
- border-bottom: 1px solid var(--bs-border-base);
4640
+ padding-bottom: 1.5rem;
4641
+ padding-left: var(--lg-modal-padding);
4642
+ padding-right: var(--lg-modal-padding);
4643
+ padding-top: 1.5rem;
4548
4644
  }
4549
4645
  .bs-modal:where([data-footer-border="true"]) :where(.bs-modal-footer) {
4550
4646
  border-top: 1px solid var(--bs-border-base);
4551
4647
  }
4552
- .bs-modal:where([data-full-width="true"]) :where(.bs-modal-section) {
4553
- padding-left: 0;
4554
- padding-right: 0;
4555
- }
4556
- .bs-modal:where([data-full-height="true"]) :where(.bs-modal-section) {
4557
- padding-top: 0;
4558
- padding-bottom: 0;
4559
- }
4560
- .bs-modal:where([data-full-width="true"]) {
4648
+ .bs-modal:where([data-full-width="true"]) :where(.bs-modal-footer) {
4561
4649
  padding-left: 0;
4562
4650
  padding-right: 0;
4563
4651
  }
4564
- .bs-modal:where([data-full-height="true"]) {
4565
- padding-top: 0;
4566
- padding-bottom: 0;
4567
- }
4568
4652
  /* Vue Transition Styles - Only used in Vue component */
4569
4653
  .bs-modal:where(.bs-modal-enter-from),
4570
4654
  .bs-modal:where(.bs-modal-leave-to) {
@@ -5228,7 +5312,7 @@ a.bs-profile:where([data-layout]):hover {
5228
5312
  .bs-table-header-rowgroup-freeze {
5229
5313
  position: sticky;
5230
5314
  top: 0;
5231
- z-index: 1;
5315
+ z-index: 2;
5232
5316
 
5233
5317
  .bs-table:not(.bs-table-border-none) & {
5234
5318
  box-shadow: 0 3px 0 rgba(0, 0, 0, .03);
@@ -5255,6 +5339,7 @@ a.bs-profile:where([data-layout]):hover {
5255
5339
  .bs-table-footer-rowgroup-freeze {
5256
5340
  position: sticky;
5257
5341
  bottom: 0;
5342
+ z-index: 2;
5258
5343
 
5259
5344
  .bs-table:not(.bs-table-border-none) & {
5260
5345
  box-shadow: 0 -3px 0 rgba(0, 0, 0, .03);
@@ -5284,6 +5369,7 @@ a.bs-profile:where([data-layout]):hover {
5284
5369
  grid-template-columns: subgrid;
5285
5370
  background: inherit;
5286
5371
  border-color: inherit;
5372
+ z-index: 1;
5287
5373
 
5288
5374
  .bs-table:not(.bs-table-border-none) & {
5289
5375
  box-shadow: 3px 0 0 rgba(0, 0, 0, .03);
@@ -5297,6 +5383,7 @@ a.bs-profile:where([data-layout]):hover {
5297
5383
  grid-template-columns: subgrid;
5298
5384
  background: inherit;
5299
5385
  border-color: inherit;
5386
+ z-index: 1;
5300
5387
 
5301
5388
  .bs-table:not(.bs-table-border-none) & {
5302
5389
  box-shadow: -3px 0 0 rgba(0, 0, 0, .03);