@wwtdev/bsds-css 2.29.0 → 3.0.0-rc.21

package/dist/components/_tables.scss

@@ -1,84 +0,0 @@
-@mixin tables() {
-  table {
-  border-collapse: collapse;
-  border-spacing: 0;
-  overflow-x: auto;
-  max-width: 100%;
-  width: 100%;
-}
-thead {
-  color: var(--bs-ink-base);
-  font-size: var(--bs-font-base);
-  font-weight: 600;
-}
-tbody {
-  color: var(--bs-ink-light);
-}
-th {
-  background: var(--bs-bg-base);
-}
-th, td {
-  border-bottom: 1px solid var(--bs-border);
-  min-width: fit-content;
-  padding: var(--bs-space-2);
-  text-align: left;
-}
-
-/* Table Borders */
-table[data-borders^="none"] {
-  border: 0;
-}
-table[data-borders^="all"] :where(th, td) {
-  border-left: 1px solid var(--bs-border);
-}
-table[data-borders^="all"] :where(th, td):last-child {
-  border-right: 1px solid var(--bs-border);
-}
-table[data-borders^="all"] th {
-  border-top: 1px solid var(--bs-border);
-}
-
-/* Table Rows */
-table:where([data-rows^="striped"]) tbody > tr:nth-child(even) {
-  background-color: var(--bs-bg-medium);
-}
-
-/* Table Cells */
-table[data-cells^="fixed"] {
-  table-layout: fixed;
-}
-table:where([data-cells^="height"]) td {
-  height: 4.5rem;
-  vertical-align: middle;
-}
-
-/* Sticky Header */
-table:where([data-sticky]) {
-  isolation: isolate;
-}
-table:where([data-sticky^="top"]) td {
-  z-index: 1;
-}
-table:where([data-sticky^="top"]) {
-  border-collapse: separate;
-  overflow-y: unset; /* Will break sticky headers if removed */
-  position: relative;
-}
-table:where([data-sticky^="left"]) {
-  border-collapse: separate;
-  overflow-x: unset; /* Will break sticky headers if removed */
-  position: relative;
-}
-table:where([data-sticky^="top"]) th {
-  position: sticky;
-  top: var(--bs-content-top);
-  z-index: 2;
-}
-table:where([data-sticky^="left"]) :is(td:first-child, th:first-child) {
-  position: sticky;
-  left: 0;
-  z-index: 2;
-}
-
-  }
-  

package/dist/components/_timeline.scss

@@ -1,122 +0,0 @@
-@mixin timeline() {
-  .bs-progress-bar, .bs-timeline {
-  background-color: var(--bs-bg-base);
-  display: flex;
-  position: relative;
-}
-
-.bs-progress-bar {
-  gap: .25rem;
-}
-
-/* ------------ Step Item ------------ */
-
-:is(.bs-progress-bar, .bs-timeline) :where(.bs-step-item) {
-  background-color: var(--step-bg, inherit);
-  flex-grow: 1;
-  flex-shrink: 0;
-  position: relative;
-}
-
-/* -- Step Items in Timeline -- */
-
-.bs-timeline :where(.bs-step-item) {
-  align-items: center;
-  color: var(--step-color, var(--bs-ink-light));
-  display: flex;
-  flex-direction: column;
-  padding-inline: 1rem;
-  row-gap: 0.5rem;
-}
-
-.bs-timeline :where(.bs-step-item *) {
-  text-wrap: nowrap;
-}
-
-.bs-timeline :where(.bs-step-item .bs-step-icon) {
-  background-color: inherit;
-  height: 1.5rem;
-  text-align: center;
-  width: 1.5rem;
-  z-index: 10;
-}
-
-.bs-timeline :where(.bs-step-item)::after {
-  border-top: 0.125rem solid var(--bs-border-base);
-  content: '';
-  display: block;
-  position: absolute;
-  top: 0.75rem;
-  width: 100%;
-}
-
-/* -- Step Items in Progress Bar -- */
-
-.bs-progress-bar :where(.bs-step-item) {
-  --step-bg: var(--progress-step-bg, var(--bs-bg-disabled));
-  height: .25rem;
-}
-
-.bs-progress-bar :where(.bs-step-item > *) {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: 0;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-
-
-
-/* ------------ Status colors ------------ */
-.bs-timeline :where(.bs-step-item[data-status="in-progress"]) {
-  --step-color: var(--bs-ink-base);
-  --progress-step-bg: var(--bs-purple-light);
-}
-
-.bs-progress-bar :where(.bs-step-item[data-status="not-started"]) {
-  --step-color: var(--bs-ink-light);
-  --progress-step-bg: var(--bs-gray-light);
-}
-
-.bs-progress-bar :where(.bs-step-item[data-status="in-progress"]),
-.bs-progress-bar :where(.bs-step-item[data-status="complete"]),
-.bs-progress-bar :where(.bs-step-item[data-status="paused"]),
-.bs-progress-bar :where(.bs-step-item[data-status="ongoing"]) {
-  --step-color: var(--bs-ink-plum);
-  --progress-step-bg: var(--bs-plum-medium);
-}
-
-.bs-timeline :where(.bs-step-item[data-status="complete"]),
-.bs-timeline :where(.bs-step-item[data-status="paused"]),
-.bs-timeline :where(.bs-step-item[data-status="ongoing"]) {
-  --step-color: var(--bs-ink-purple);
-  --progress-step-bg: var(--bs-purple-medium);
-}
-
-:is(.bs-progress-bar, .bs-timeline) :where(.bs-step-item[data-status="base"]) {
-  --progress-step-bg: var(--bs-purple-base);
-}
-
-.bs-timeline :where(.bs-step-item[data-status="warning"]) {
-  --step-color: var(--bs-ink-orange);
-  --progress-step-bg: var(--bs-orange-base);
-}
-
-.bs-progress-bar :where(.bs-step-item[data-status="warning"]) {
-  --step-color: var(--bs-warning);
-  --progress-step-bg: var(--bs-warning);
-}
-
-:is(.bs-progress-bar, .bs-timeline) :where(.bs-step-item[data-status="error"]),
-:is(.bs-progress-bar, .bs-timeline) :where(.bs-step-item[data-status="cancelled"]) {
-  --step-color: var(--bs-ink-red);
-  --progress-step-bg: var(--bs-red-base);
-}
-
-
-  }
-  

package/dist/components/_toast.scss

@@ -1,149 +0,0 @@
-@mixin toast() {
-  /* Base Toast Styles */
-.bs-toast {
-    --toast-transform: translate(0, calc(100% + 1.5rem));
-
-    background-color: var(--bs-bg-base-elevated);
-    border-top: 4px solid var(--bs-blue-base);
-    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: var(--toast-transform);
-    transition-duration: 200ms;
-    transition-property: transform, opacity;
-    transition-timing-function: ease;
-    /* Clamp width for mobile -> full screen */
-    width: clamp(17rem, calc(100vw - 3rem), 25rem);
-    z-index: 999;
-}
-
-.bs-toast:where([data-stacked]:not([data-stacked="false"])) {
-    bottom: auto;
-    left: auto;
-    position: static;
-    right: auto;
-    z-index: auto;
-}
-
-/* Mobile - Toast comes up from bottom */
-.bs-toast:where([data-shown]:not([data-shown="false"])) {
-    opacity: 1;
-    transform: translate(0, 0);
-}
-
-.bs-toast-header {
-    align-items: center;
-    color: var(--bs-ink-base);
-    display: flex;
-    gap: 0.5rem;
-    padding: 1rem;
-}
-
-.bs-toast-header :where(.bs-toast-header-icon) {
-    color: var(--bs-blue-base);
-}
-
-.bs-toast-header :where(h5) {
-    font-weight: 400;
-}
-
-.bs-toast-body {
-    border-bottom: 1px solid var(--bs-border);
-    color: var(--bs-ink-light);
-    padding-bottom: 1rem;
-    padding-left: 1rem;
-    padding-right: 1rem;
-}
-
-.bs-toast-actions {
-    /* Mobile - Buttons will be stacked */
-    display: flex;
-    flex-direction: row;
-    gap: 1rem;
-    justify-content: flex-end;
-    padding-bottom: 0.5rem;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    padding-top: 0.5rem;
-}
-
-.bs-toast-actions:where([data-stacked]:not([data-stacked="false"])) {
-    flex-direction: column-reverse;
-}
-
-/* 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 {
-        --toast-transform: translate(calc(100% + 1.5rem), 0);
-
-        left: auto;
-        margin-left: 0;
-        margin-right: 0;
-        opacity: 0;
-        right: 1.5rem;
-    }
-
-    .bs-toast:where([data-shown]:not([data-shown="false"])) {
-        opacity: 1;
-        transform: translate(0, 0);
-    }
-
-    .bs-toast-actions:where([data-stacked]:not([data-stacked="false"])) {
-        flex-direction: row;
-    }
-}
-
-/* Vue Transition Styles - Only used in Vue component */
-.bs-toast:where(.bs-toast-enter-from),
-.bs-toast:where(.bs-toast-leave-to) {
-    opacity: 0;
-    transform: var(--toast-transform);
-}
-
-.bs-toast:where(.bs-toast-enter-to),
-.bs-toast:where(.bs-toast-leave-from) {
-    opacity: 1;
-    transform: translate(0, 0);
-}
-
-  }
-  

package/dist/components/_toaster.scss

@@ -1,27 +0,0 @@
-@mixin toaster() {
-  /* 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.scss

@@ -1,183 +0,0 @@
-@mixin tooltip() {
-  /* -------------------- BASE STYLES -------------------- */
-.bs-tooltip {
-    display: inline-block;
-    position: relative;
-}
-
-.bs-tooltip :where(.bs-tooltip-text) {
-  align-items: center;
-  background-color: var(--bs-bg-base-elevated);
-  border-radius: 4px;
-  box-shadow: var(--bs-shadow-contentLowCenter);
-  color: var(--bs-ink-violet);
-  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;
-}
-
-:where(.dark) .bs-tooltip :where(.bs-tooltip-text) {
-  color: var(--bs-ink-base);
-}
-
-/* -------------------- 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])):has(:focus-visible) :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="top"]):has(:focus-visible) :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"]):has(:focus-visible) :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"]):has(:focus-visible) :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"]):has(:focus-visible) :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"]):has(:focus-visible) :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="top-right"]):has(:focus-visible) :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="bottom-left"]):has(:focus-visible) :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="bottom-right"]):has(:focus-visible) :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="top-left"]:not([data-shown="false"]))[data-shown] :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="top-right"]:not([data-shown="false"]))[data-shown] :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="bottom-left"]:not([data-shown="false"]))[data-shown] :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="bottom-right"]:not([data-shown="false"]))[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-disabled="false"]):not([data-shown])):hover :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-disabled]:not([data-disabled="false"]):not([data-shown])):has(:focus-visible) :where(.bs-tooltip-text) {
-  opacity: 0;
-  transform: scale(0);
-}
-:where(.bs-tooltip[data-shown="false"][data-disabled]:not([data-disabled="false"])):hover :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-shown="false"][data-disabled]:not([data-disabled="false"])):has(:focus-visible) :where(.bs-tooltip-text) {
-  opacity: 0;
-  transform: scale(0);
-}
-
-/* -------------------- COMPONENT-SPECIFIC STYLES -------------------- */
-.bs-tooltip :where(.bs-tooltip-text.escaped) {
-  opacity: 0;
-  transform: scale(0.5);
-}
-
-.bs-tooltip :where(.bs-tooltip-text.escaped-x) {
-  opacity: 0;
-  transform: translateX(-50%) scale(0.5);
-}
-
-.bs-tooltip :where(.bs-tooltip-text.escaped-y) {
-  opacity: 0;
-  transform: translateY(-50%) scale(0.5);
-}
-
-  }
-