@wwtdev/bsds-css 1.0.2 → 1.2.0

package/dist/components/toast.css

@@ -0,0 +1,200 @@
+/* Base Toast Styles */
+.bs-toast {
+    background-color: var(--bs-white);
+    border-top: 4px solid var(--bs-blue-400);
+    bottom: 1.5rem;
+    box-shadow: var(--bs-shadow-contentMedium);
+    left: 0;
+    margin-left: 1.5rem;
+    margin-right: 1.5rem;
+    opacity: 0;
+    position: fixed;
+    right: 0;
+    transform: translateY(calc(100% + 1.5rem));
+    /* Clamp width for mobile -> full screen */
+    width: clamp(17rem, calc(100vw - 3rem), 25rem);
+    z-index: 999;
+}
+
+.bs-toast[data-stacked] {
+    bottom: auto;
+    left: auto;
+    position: static;
+    right: auto;
+    z-index: auto;
+}
+
+/* Mobile - Toast comes up from bottom */
+@keyframes slideDown {
+    0% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+    100% {
+        opacity: 0;
+        transform: translateY(calc(100% + 1.5rem));
+    }
+}
+
+@keyframes slideUp {
+    0% {
+        opacity: 0;
+        transform: translateY(calc(100% + 1.5rem));
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Dark mode toast */
+:where(.dark) .bs-toast {
+    background-color: var(--bs-navy-400);
+}
+
+.bs-toast:where([data-shown]) {
+    /* Small delay on load to alow for HTML element to exist */
+    animation-delay: 10ms;
+    animation-duration: 200ms;
+    animation-fill-mode: forwards;
+    animation-name: slideUp;
+    animation-timing-function: ease;
+}
+
+.bs-toast:where([data-dismissed]) {
+    animation-duration: 200ms; 
+    animation-fill-mode: forwards;
+    animation-name: slideDown;
+    animation-timing-function: ease;
+}
+
+.bs-toast :where(.bs-toast-header) {
+    align-items: center;
+    color: var(--bs-ink-base);
+    display: flex;
+    gap: 0.5rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: 1rem;
+}
+
+.bs-toast :where(.bs-toast-header .bs-toast-header-icon) {
+    color: var(--bs-blue-400);
+}
+
+.bs-toast :where(h5) {
+    font-weight: 400;
+}
+
+.bs-toast :where(.bs-toast-content) {
+    border-bottom: 1px solid var(--bs-border);
+    color: var(--bs-ink-light);
+    padding-bottom: 1rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: 0.25rem;
+}
+
+.bs-toast :where(.bs-toast-actions) {
+    /* Mobile - Buttons will be stacked */
+    display: flex;
+    flex-direction: column-reverse;
+    gap: 1rem;
+    padding-bottom: 0.5rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: 0.5rem;
+}
+
+/* Warning Toast Styles */
+.bs-toast:where([data-variant^='warning']) {
+    border-top: 4px solid var(--bs-orange-warning);
+}
+
+.bs-toast:where([data-variant^='warning']) :where(.bs-toast-header .bs-toast-header-icon) {
+    color: var(--bs-orange-warning);
+}
+
+/* Positive Toast Styles */
+.bs-toast:where([data-variant^='positive']) {
+    border-top: 4px solid var(--bs-purple-400);
+}
+
+.bs-toast:where([data-variant^='positive']) :where(.bs-toast-header .bs-toast-header-icon) {
+    color: var(--bs-purple-400);
+}
+
+:where(.dark) .bs-toast:where([data-variant^='positive']) {
+    border-top: 4px solid var(--bs-purple-200);
+}
+
+:where(.dark) .bs-toast:where([data-variant^='positive']) :where(.bs-toast-header .bs-toast-header-icon) {
+    color: var(--bs-purple-200);
+}
+
+/* Negative Toast Styles */
+.bs-toast:where([data-variant^='negative']) {
+    border-top: 4px solid var(--bs-red-400);
+}
+
+.bs-toast:where([data-variant^='negative']) :where(.bs-toast-header .bs-toast-header-icon) {
+    color: var(--bs-red-400);
+}
+
+@media (min-width: 440px) {
+
+    .bs-toast {
+        left: auto;
+        margin-left: 0;
+        margin-right: 0;
+        opacity: 0;
+        right: 1.5rem;
+        transform: translateX(calc(100% + 1.5rem));
+    }
+
+    .bs-toast:where([data-shown]) {
+        /* Small delay on load to alow for HTML element to exist */
+        animation-delay: 10ms;
+        animation-duration: 200ms;
+        animation-fill-mode: forwards;
+        animation-name: slideLeft;
+        animation-timing-function: ease;
+    }
+
+    .bs-toast:where([data-dismissed]) {
+        animation-duration: 200ms; 
+        animation-fill-mode: forwards;
+        animation-name: slideRight;
+        animation-timing-function: ease;
+    }
+
+    /* Non-mobile toasts come in from the right */
+    @keyframes slideRight {
+        0% {
+            opacity: 1;
+            transform: translateX(0);
+        }
+        100% {
+            opacity: 0;
+            transform: translateX(calc(100% + 1.5rem));
+        }
+    }
+    
+    @keyframes slideLeft {
+        0% {
+            opacity: 0;
+            transform: translateX(calc(100% + 1.5rem));
+        }
+        100% {
+            opacity: 1;
+            transform: translateX(0);
+        }
+    }
+
+    .bs-toast :where(.bs-toast-actions) {
+        /* Non-mobile - Buttons will be side-by-side */
+        flex-direction: row;
+        justify-content: flex-end;
+    }
+
+}

package/dist/components/toaster.css

@@ -0,0 +1,23 @@
+/* Container for holding all toasts that will be visible */
+.bs-toaster {
+    /* Mobile - Center the toasts on the screen */
+    align-items: center;
+    bottom: 1.5rem;
+    display: flex;
+    flex-direction: column-reverse;
+    gap: 0.5rem;
+    left: 0;
+    position: fixed;
+    right: 0;
+    z-index: 999;
+}
+
+@media (min-width: 440px) {
+
+    .bs-toaster {
+        /* Non-mobile - Toasts will live on right side of the screen */
+        left: auto;
+        right: 1.5rem;
+    }
+
+}

package/dist/components/tooltip.css

@@ -0,0 +1,154 @@
+/* -------------------- BASE STYLES -------------------- */
+.bs-tooltip {
+    display: inline-block;
+    position: relative;
+}
+
+.bs-tooltip :where(.bs-tooltip-text) {
+  align-items: center;
+  background-color: var(--bs-bg-base);
+  border-radius: 4px;
+  box-shadow: var(--bs-shadow-contentLowCenter);
+  color: var(--bs-violet-400);
+  display: flex;
+  font-size: var(--bs-text-sm);
+  justify-content: center;
+  max-width: 16rem;
+  min-width: 4rem;
+  opacity: 0;
+  padding-bottom: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.25rem;
+  position: absolute;
+  transform: scale(0);
+  transition-duration: 75ms;
+  transition-property: opacity, transform;
+  transition-timing-function: ease-in-out;
+  width: max-content;
+  z-index: 999;
+}
+
+/* -------------------- POSITION: UNDEFINED / TOP -------------------- */
+.bs-tooltip:where(:not([data-position])) :where(.bs-tooltip-text),
+.bs-tooltip:where([data-position="top"]) :where(.bs-tooltip-text) {
+  bottom: calc(100% + 0.5rem);
+  left: 50%;
+  transform-origin: bottom center;
+  transform: translateX(-50%) scale(0);
+}
+
+/* Active States */
+:where(.bs-tooltip:not([data-position])):hover :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="top"]):hover :where(.bs-tooltip-text),
+:where(.bs-tooltip:not([data-position])):focus-within :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="top"]):focus-within :where(.bs-tooltip-text),
+:where(.bs-tooltip:not([data-position]))[data-shown] :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="top"])[data-shown] :where(.bs-tooltip-text) {
+  opacity: 1;
+  transform: translateX(-50%) scale(1);
+}
+
+/* -------------------- POSITION: BOTTOM -------------------- */
+.bs-tooltip:where([data-position="bottom"]) :where(.bs-tooltip-text) {
+  left: 50%;
+  top: calc(100% + 0.5rem);
+  transform-origin: top center;
+  transform: translateX(-50%) scale(0);
+}
+
+/* Active States */
+:where(.bs-tooltip[data-position="bottom"]):hover :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="bottom"]):focus-within :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="bottom"])[data-shown] :where(.bs-tooltip-text) {
+  opacity: 1;
+  transform: translateX(-50%) scale(1);
+}
+
+/* -------------------- POSITION: LEFT -------------------- */
+.bs-tooltip:where([data-position="left"]) :where(.bs-tooltip-text) {
+  right: calc(100% + 0.5rem);
+  top: 50%;
+  transform-origin: center right;
+  transform: translateY(-50%) scale(0);
+}
+
+/* Active States */
+:where(.bs-tooltip[data-position="left"]):hover :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="left"]):focus-within :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="left"])[data-shown] :where(.bs-tooltip-text) {
+  opacity: 1;
+  transform: translateY(-50%) scale(1);
+}
+
+/* -------------------- POSITION: RIGHT -------------------- */
+.bs-tooltip:where([data-position="right"]) :where(.bs-tooltip-text) {
+  left: calc(100% + 0.5rem);
+  top: 50%;
+  transform-origin: center left;
+  transform: translateY(-50%) scale(0);
+}
+
+:where(.bs-tooltip[data-position="right"]):hover :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="right"]):focus-within :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="right"])[data-shown] :where(.bs-tooltip-text) {
+  opacity: 1;
+  transform: translateY(-50%) scale(1);
+}
+
+/* -------------------- POSITION: CORNERS -------------------- */
+/* top-left */
+.bs-tooltip:where([data-position="top-left"]) :where(.bs-tooltip-text) {
+  bottom: calc(100% + 0.5rem);
+  right: calc(100% + 0.5rem);
+  transform-origin: bottom right;
+}
+
+/* top-right */
+.bs-tooltip:where([data-position="top-right"]) :where(.bs-tooltip-text) {
+  bottom: calc(100% + 0.5rem);
+  left: calc(100% + 0.5rem);
+  transform-origin: bottom left;
+}
+
+/* bottom-left */
+.bs-tooltip:where([data-position="bottom-left"]) :where(.bs-tooltip-text) {
+  right: calc(100% + 0.5rem);
+  top: calc(100% + 0.5rem);
+  transform-origin: top right;
+}
+
+/* bottom-right */
+.bs-tooltip:where([data-position="bottom-right"]) :where(.bs-tooltip-text) {
+  left: calc(100% + 0.5rem);
+  top: calc(100% + 0.5rem);
+  transform-origin: top left;
+}
+
+/* Active States */
+:where(.bs-tooltip[data-position="top-left"]):hover :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="top-right"]):hover :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="bottom-left"]):hover :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="bottom-right"]):hover :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="top-left"]):focus-within :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="top-right"]):focus-within :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="bottom-left"]):focus-within :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="bottom-right"]):focus-within :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="top-left"])[data-shown] :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="top-right"])[data-shown] :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="bottom-left"])[data-shown] :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="bottom-right"])[data-shown] :where(.bs-tooltip-text) {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* -------------------- DISABLED -------------------- */
+/*
+Don't display unless data-shown is present
+This must go last to properly override the other classes
+*/
+:where(.bs-tooltip[data-disabled]:not([data-shown])):hover :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-disabled]:not([data-shown])):focus-within :where(.bs-tooltip-text) {
+  opacity: 0;
+  transform: scale(0);
+}