@wwtdev/bsds-css 2.22.0 → 2.23.0

package/dist/wwt-bsds.css

@@ -3772,6 +3772,10 @@ textarea {
   outline-style: none;
   outline-width: 0px;
 }
+/* OPEN state */
+:is(select, .bs-select):where(:open) {
+  background: var(--bs-bg-base-to-light);
+}
 /* DISABLED state */
 :is(input:where(:not([type='checkbox'],[type='radio'])), textarea, select):where(:disabled),
 :is(.bs-input, .bs-select, .bs-textarea):where(:disabled) {
@@ -4407,15 +4411,17 @@ select[multiple],
   }
 }
 .bs-modal {
-  --base-modal-width: 35rem;
-  --modal-padding: 1.5rem;
-  --sm-modal-width: 21.25rem;
-  --lg-modal-width: 45.3125rem;
-  --lg-modal-padding: 2rem;
+  --base-modal-width: 35rem; /* 560px */
+  --lg-modal-padding: 2rem; /* 32px */
+  --lg-modal-width: 45.3125rem; /* 725px */
+  --modal-padding: 1.5rem; /* 24px */
+  --sm-modal-width: 21.25rem; /* 340px */
   background-color: var(--bs-bg-base-to-medium);
   border-radius: 4px;
   bottom: 0;
   box-shadow: var(--bs-shadow-contentHigh);
+  display: flex;
+  flex-direction: column;
   height: -moz-fit-content;
   height: fit-content;
   left: 0;
@@ -4423,7 +4429,6 @@ select[multiple],
   max-height: calc(100% - 3rem);
   opacity: 0;
   overflow: auto;
-  padding: var(--modal-padding);
   position: fixed;
   right: 0;
   top: 0;
@@ -4433,138 +4438,124 @@ select[multiple],
   width: calc(100% - 3rem);
   z-index: 9999;
 }
-.bs-modal:where([data-has-header-or-footer="true"]) {
-  padding: 0;
-}
 @media (min-width: 752px) {
   .bs-modal {
     max-height: min(calc(100vh - 3rem), 40.625rem);
     width: var(--base-modal-width);
   }
+
   .bs-modal:where([data-size="sm"]) {
     width: var(--sm-modal-width);
   }
+
   .bs-modal:where([data-size="lg"]) {
     width: var(--lg-modal-width);
   }
 }
-.bs-modal:where([data-shown]:not([data-shown="false"])) {
+.bs-modal:where([data-shown="true"]) {
   opacity: 1;
 }
+/* Header Container */
 .bs-modal :where(.bs-modal-header-container) {
   padding: var(--modal-padding);
 }
 .bs-modal:where([data-size="lg"]) :where(.bs-modal-header-container) {
   padding: var(--lg-modal-padding);
 }
+.bs-modal:where([data-header-border="true"]) :where(.bs-modal-header-container) {
+  border-bottom: 1px solid var(--bs-border-base);
+}
+.bs-modal:where([data-full-width="true"]) :where(.bs-modal-header-container) {
+  padding-left: 0;
+  padding-right: 0;
+}
+/* Header Row */
 .bs-modal :where(.bs-modal-header) {
   align-items: center;
   display: flex;
   justify-content: space-between;
-  margin-bottom: 0.5rem;
 }
+/* Title */
 .bs-modal :where(.bs-modal-title) {
   flex-grow: 1;
   font-size: var(--bs-text-lg);
   font-weight: 400;
   margin-right: 2rem;
 }
+/* Subtitle */
 .bs-modal :where(.bs-modal-subtitle) {
   font-size: var(--bs-text-sm);
   font-weight: 400;
-  margin: 0;
+  margin-top: 0.5rem;
   width: 100%;
-  margin-bottom: 1.5rem;
-}
-.bs-modal :where(.bs-modal-only-close-button-modal-header) {
-  display: flex;
-  justify-content: flex-end;
 }
-.bs-modal :where(.bs-modal-header-container):where(:has(.bs-modal-only-close-button-modal-header)) {
-  margin-bottom: 0;
-  padding-bottom: 0;
+/* Close Button */
+.bs-modal :where(.bs-modal-close-button) {
+  background-color: transparent;
+  cursor: pointer;
 }
-.bs-modal :where(.bs-modal-full-width-header-close-button) {
+.bs-modal:where(:not(:has(.bs-modal-header-container))) :where(.bs-modal-close-button) {
   position: absolute;
-  right: 0.75rem;
-  top: 0.75rem;
+  right: 1rem;
+  top: 1rem;
 }
-.bs-modal :where(.bs-modal-close-button) {
-  cursor: pointer;
+.bs-modal:where([data-full-width="true"]:has(> .bs-modal-header-container)) :where(.bs-modal-close-button) {
+  margin-right: var(--modal-padding);
 }
+.bs-modal:where([data-full-width="true"][data-size="lg"]:has(> .bs-modal-header-container)) :where(.bs-modal-close-button) {
+  margin-right: var(--lg-modal-padding);
+}
+/* Progress */
 .bs-modal :where(.bs-modal-progress) {
+  margin-top: 1.5rem;
   width: 100%;
 }
+/* Body */
 .bs-modal :where(.bs-modal-body) {
-  padding: 0 var(--modal-padding);
+  overflow-y: auto;
+  padding: var(--modal-padding);
+}
+.bs-modal:where([data-full-height="true"]) :where(.bs-modal-body) {
+  padding-bottom: 0;
+  padding-top: 0;
 }
-.bs-modal:where([data-header-border="true"]) :where(.bs-modal-body) {
-  padding-top: var(--modal-padding);
+.bs-modal:where([data-full-width="true"]) :where(.bs-modal-body) {
+  padding-left: 0;
+  padding-right: 0;
 }
-.bs-modal:where([data-footer-border="true"]) :where(.bs-modal-body) {
-  padding-bottom: var(--modal-padding);
+/* Has header, but no header border */
+.bs-modal:where(:not([data-header-border]):has(> .bs-modal-header-container)) :where(.bs-modal-body),
+.bs-modal:where([data-header-border="false"]:has(> .bs-modal-header-container)) :where(.bs-modal-body) {
+  padding-top: 0;
 }
-.bs-modal:where([data-size="lg"]) :where(.bs-modal-body) {
-  padding: 0 var(--lg-modal-padding);
+/* Has footer, but no footer border */
+.bs-modal:where(:not([data-footer-border])) :where(.bs-modal-body:has(~ .bs-modal-footer)),
+.bs-modal:where([data-footer-border="false"]) :where(.bs-modal-body:has(~ .bs-modal-footer)) {
+  padding-bottom: 0;
 }
 .bs-modal:where([data-body-background-contrast="true"]) :where(.bs-modal-body) {
   background-color: var(--bs-bg-light);
 }
-.bs-modal:where([data-no-header-container="true"]):where([data-size="lg"]) :where(.bs-modal-body) {
-  padding-top: var(--lg-modal-padding);
-}
-.bs-modal:where([data-no-header-container="true"]) :where(.bs-modal-body) {
-  padding-top: var(--modal-padding);
-}
-.bs-modal:where([data-no-footer="true"]):where([data-size="lg"]) :where(.bs-modal-body) {
-  padding-bottom: var(--lg-modal-padding);
-}
-.bs-modal:where([data-no-footer="true"]) :where(.bs-modal-body) {
-  padding-bottom: var(--modal-padding);
-}
-.bs-modal:where([data-no-footer="true"]):where([data-full-height="true"]) :where(.bs-modal-body) {
-  padding-bottom: 0;
-}
+/* Footer */
 .bs-modal :where(.bs-modal-footer) {
-  padding: var(--modal-padding);
+  padding-bottom: 1rem;
+  padding-left: var(--modal-padding);
+  padding-right: var(--modal-padding);
+  padding-top: 1rem;
 }
 .bs-modal:where([data-size="lg"]) :where(.bs-modal-footer) {
-  padding: var(--lg-modal-padding);
-}
-.bs-modal:where([data-sticky-header="true"]) :where(.bs-modal-header-container) {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  background: inherit;
-}
-.bs-modal:where([data-sticky-footer="true"]) :where(.bs-modal-footer) {
-  position: sticky;
-  bottom: 0;
-  z-index: 1;
-  background: inherit;
-}
-.bs-modal:where([data-header-border="true"]) :where(.bs-modal-header-container) {
-  border-bottom: 1px solid var(--bs-border-base);
+  padding-bottom: 1.5rem;
+  padding-left: var(--lg-modal-padding);
+  padding-right: var(--lg-modal-padding);
+  padding-top: 1.5rem;
 }
 .bs-modal:where([data-footer-border="true"]) :where(.bs-modal-footer) {
   border-top: 1px solid var(--bs-border-base);
 }
-.bs-modal:where([data-full-width="true"]) :where(.bs-modal-section) {
+.bs-modal:where([data-full-width="true"]) :where(.bs-modal-footer) {
   padding-left: 0;
   padding-right: 0;
 }
-.bs-modal:where([data-full-height="true"]) :where(.bs-modal-section) {
-  padding-top: 0;
-  padding-bottom: 0;
-}
-.bs-modal:where([data-full-width="true"]) {
-  padding-left: 0;
-  padding-right: 0;
-}
-.bs-modal:where([data-full-height="true"]) {
-  padding-top: 0;
-  padding-bottom: 0;
-}
 /* Vue Transition Styles - Only used in Vue component */
 .bs-modal:where(.bs-modal-enter-from),
 .bs-modal:where(.bs-modal-leave-to) {