@wwtdev/bsds-css 3.0.14 → 3.0.15

package/dist/wwt-bsds-components.css

@@ -5819,7 +5819,37 @@ a.bs-text-button {
   --bs-popover-width: 28.75rem; /* 460px */
 }
 .bs-flyout:where([data-size="lg"]) {
-  --bs-popover-width: 33.4375rem /* 535px */;
+  --bs-popover-width: 33.4375rem; /* 535px */
+}
+/* -- RESIZING -- */
+.bs-flyout:where([data-resize]) {
+  /* using clip instead of hidden, to allow resizer hover target
+  to extend outside of the flyout bounds via overflow-clip-margin  */
+  overflow: clip;
+  transform: translateX(var(--bs-flyout-resize-pushed, 0px));
+}
+.bs-flyout-resizer {
+  cursor: col-resize;
+  inset-block: 0;
+  position: absolute;
+  width: 10px;
+  z-index: 1;
+  /* prevents browser from trying to hijack touch interactions to handle on its own */
+  touch-action: none;
+}
+/* right flyout */
+.bs-flyout:where([data-resize="right"]) {
+  overflow-clip-margin: 5px;
+}
+.bs-flyout:where([data-resize="right"]) :where(.bs-flyout-resizer) {
+  left: -5px;
+}
+/* left flyout - not using same as right flyout, to avoid overlapping potential scrollbar too much */
+.bs-flyout:where([data-resize="left"]) {
+  overflow-clip-margin: 7px;
+}
+.bs-flyout:where([data-resize="left"]) :where(.bs-flyout-resizer) {
+  right: -7px;
 }
 /* -- SHADOWS -- */
 .bs-flyout:where([data-place-self="left"]) {
@@ -5845,11 +5875,11 @@ a.bs-text-button {
 /* The 105% is so the huge shadow on the flyout ends-up off-screen too, otherwise at 100%, you notice it cut out when the panel closes */
 .bs-flyout-enter-from .bs-flyout[data-place-self="left"],
 .bs-flyout-leave-to .bs-flyout[data-place-self="left"] {
-  transform: translateX(-105%);
+  transform: translate(calc(-105% + var(--bs-flyout-resize-pushed, 0px)));
 }
 .bs-flyout-enter-from .bs-flyout[data-place-self="right"],
 .bs-flyout-leave-to .bs-flyout[data-place-self="right"] {
-  transform: translateX(105%);
+  transform: translate(calc(105% + var(--bs-flyout-resize-pushed, 0px)));
 }
 /*
   HEADS-UP: