@coreui/coreui 4.0.2

package/scss/_root.scss

@@ -0,0 +1,25 @@
+:root {
+  // Custom variable values only support SassScript inside `#{}`.
+  @each $color, $value in $colors {
+    --#{$variable-prefix}#{$color}: #{$value};
+  }
+
+  @each $color, $value in $theme-colors {
+    --#{$variable-prefix}#{$color}: #{$value};
+  }
+
+  // breakpoints custom properties
+  @each $bp, $value in $grid-breakpoints {
+    --#{$variable-prefix}breakpoint-#{$bp}: #{$value};
+  }
+
+  // mobile breakpoint custom property
+  --#{$variable-prefix}mobile-breakpoint: #{$mobile-breakpoint};
+
+  // Use `inspect` for lists so that quoted items keep the quotes.
+  // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
+  --#{$variable-prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
+  --#{$variable-prefix}font-monospace: #{inspect($font-family-monospace)};
+  --#{$variable-prefix}gradient: #{$gradient};
+  --#{$variable-prefix}body-color: #{$body-color};
+}

package/scss/_sidebar.scss

@@ -0,0 +1,3 @@
+@import "sidebar/sidebar";
+@import "sidebar/sidebar-nav";
+@import "sidebar/sidebar-narrow";

package/scss/_spinners.scss

@@ -0,0 +1,69 @@
+//
+// Rotating border
+//
+
+// scss-docs-start spinner-border-keyframes
+@keyframes spinner-border {
+  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
+}
+// scss-docs-end spinner-border-keyframes
+
+.spinner-border {
+  display: inline-block;
+  width: $spinner-width;
+  height: $spinner-height;
+  vertical-align: $spinner-vertical-align;
+  border: $spinner-border-width solid currentColor;
+  border-right-color: transparent;
+  // stylelint-disable-next-line property-disallowed-list
+  border-radius: 50%;
+  animation: $spinner-animation-speed linear infinite spinner-border;
+}
+
+.spinner-border-sm {
+  width: $spinner-width-sm;
+  height: $spinner-height-sm;
+  border-width: $spinner-border-width-sm;
+}
+
+//
+// Growing circle
+//
+
+// scss-docs-start spinner-grow-keyframes
+@keyframes spinner-grow {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    opacity: 1;
+    transform: none;
+  }
+}
+// scss-docs-end spinner-grow-keyframes
+
+.spinner-grow {
+  display: inline-block;
+  width: $spinner-width;
+  height: $spinner-height;
+  vertical-align: $spinner-vertical-align;
+  background-color: currentColor;
+  // stylelint-disable-next-line property-disallowed-list
+  border-radius: 50%;
+  opacity: 0;
+  animation: $spinner-animation-speed linear infinite spinner-grow;
+}
+
+.spinner-grow-sm {
+  width: $spinner-width-sm;
+  height: $spinner-height-sm;
+}
+
+@if $enable-reduced-motion {
+  @media (prefers-reduced-motion: reduce) {
+    .spinner-border,
+    .spinner-grow {
+      animation-duration: $spinner-animation-speed * 2;
+    }
+  }
+}

package/scss/_subheader.scss

@@ -0,0 +1,72 @@
+.subheader {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap; // allow us to do the line break for collapsing content
+  align-items: center;
+  justify-content: space-between; // space out brand from logo
+  min-height: $subheader-min-height;
+  padding: $subheader-padding-y $subheader-padding-x;
+  background: var(--#{$variable-prefix}subheader-bg, $subheader-bg);
+  border-bottom: var(--#{$variable-prefix}subheader-border-width, $subheader-border-width) solid var(--#{$variable-prefix}subheader-border-color, $subheader-border-color);
+}
+
+.subheader-sticky {
+  position: sticky;
+  top: 0;
+  z-index: $zindex-fixed - 1;
+}
+
+// Subheader nav
+//
+// Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
+
+.subheader-nav {
+  display: flex;
+  flex-direction: row; // cannot use `inherit` to get the `.header`s value
+  @include ltr-rtl("padding-left", 0);
+  margin-bottom: 0;
+  list-style: none;
+
+  .nav-link {
+    padding-right: $subheader-nav-link-padding-x;
+    padding-left: $subheader-nav-link-padding-x;
+    color: var(--#{$variable-prefix}subheader-color, $subheader-color);
+
+    &:hover,
+    &:focus {
+      color: var(--#{$variable-prefix}subheader-hover-color, $subheader-hover-color);
+    }
+
+    &.disabled {
+      color: var(--#{$variable-prefix}subheader-disabled-color, $subheader-disabled-color);
+    }
+  }
+
+  .show > .nav-link,
+  .nav-link.active {
+    color: var(--#{$variable-prefix}subheader-active-color, $subheader-active-color);
+  }
+
+  .dropdown-menu {
+    position: absolute;
+  }
+}
+
+// Subheader text
+//
+//
+
+.subheader-text {
+  padding-top: $nav-link-padding-y;
+  padding-bottom: $nav-link-padding-y;
+  color: var(--#{$variable-prefix}subheader-color, $subheader-color);
+
+  a {
+    color: var(--#{$variable-prefix}subheader-active-color, $subheader-active-color);
+
+    &:hover,
+    &:focus {
+      color: var(--#{$variable-prefix}subheader-active-color, $subheader-active-color);
+    }
+  }
+}

package/scss/_tables.scss

@@ -0,0 +1,166 @@
+//
+// Basic Bootstrap table
+//
+
+.table {
+  --#{$variable-prefix}table-color: #{$table-color};
+  --#{$variable-prefix}table-bg: #{$table-bg};
+  --#{$variable-prefix}table-border-color: #{$table-border-color};
+  --#{$variable-prefix}table-accent-bg: #{$table-accent-bg};
+  --#{$variable-prefix}table-striped-color: #{$table-striped-color};
+  --#{$variable-prefix}table-striped-bg: #{$table-striped-bg};
+  --#{$variable-prefix}table-active-color: #{$table-active-color};
+  --#{$variable-prefix}table-active-bg: #{$table-active-bg};
+  --#{$variable-prefix}table-hover-color: #{$table-hover-color};
+  --#{$variable-prefix}table-hover-bg: #{$table-hover-bg};
+
+  width: 100%;
+  margin-bottom: $spacer;
+  color: var(--#{$variable-prefix}table-color);
+  vertical-align: $table-cell-vertical-align;
+  border-color: var(--#{$variable-prefix}table-border-color);
+
+  // Target th & td
+  // We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.
+  // We use the universal selectors here to simplify the selector (else we would need 6 different selectors).
+  // Another advantage is that this generates less code and makes the selector less specific making it easier to override.
+  // stylelint-disable-next-line selector-max-universal
+  > :not(caption) > * > * {
+    padding: $table-cell-padding-y $table-cell-padding-x;
+    color: var(--#{$variable-prefix}table-color);
+    background-color: var(--#{$variable-prefix}table-bg);
+    border-bottom-color: var(--#{$variable-prefix}table-border-color);
+    border-bottom-width: $table-border-width;
+    box-shadow: inset 0 0 0 9999px var(--#{$variable-prefix}table-accent-bg);
+  }
+
+  > tbody {
+    vertical-align: inherit;
+  }
+
+  > thead {
+    vertical-align: bottom;
+  }
+
+  // Highlight border color between thead, tbody and tfoot.
+  > :not(:last-child) > :last-child > * {
+    // border-bottom-color: $table-group-separator-color;
+  }
+}
+
+
+//
+// Change placement of captions with a class
+//
+
+.caption-top {
+  caption-side: top;
+}
+
+
+//
+// Condensed table w/ half padding
+//
+
+.table-sm {
+  // stylelint-disable-next-line selector-max-universal
+  > :not(caption) > * > * {
+    padding: $table-cell-padding-y-sm $table-cell-padding-x-sm;
+  }
+}
+
+
+// Border versions
+//
+// Add or remove borders all around the table and between all the columns.
+//
+// When borders are added on all sides of the cells, the corners can render odd when
+// these borders do not have the same color or if they are semi-transparent.
+// Therefor we add top and border bottoms to the `tr`s and left and right borders
+// to the `td`s or `th`s
+
+.table-bordered {
+  > :not(caption) > * {
+    border-width: $table-border-width 0;
+
+    // stylelint-disable-next-line selector-max-universal
+    > * {
+      border-width: 0 $table-border-width;
+    }
+  }
+}
+
+.table-borderless {
+  // stylelint-disable-next-line selector-max-universal
+  > :not(caption) > * > * {
+    border-bottom-width: 0;
+  }
+}
+
+// Zebra-striping
+//
+// Default zebra-stripe styles (alternating gray and transparent backgrounds)
+
+.table-striped {
+  > tbody > tr:nth-of-type(#{$table-striped-order}) {
+    --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg);
+    color: var(--#{$variable-prefix}table-striped-color);
+  }
+}
+
+// Active table
+//
+// The `.table-active` class can be added to highlight rows or cells
+
+.table-active {
+  --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-active-bg);
+  color: var(--#{$variable-prefix}table-active-color);
+}
+
+// Hover effect
+//
+// Placed here since it has to come after the potential zebra striping
+
+.table-hover {
+  > tbody > tr:hover {
+    --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-hover-bg);
+    color: var(--#{$variable-prefix}table-hover-color);
+  }
+}
+
+
+// Table variants
+//
+// Table variants set the table cell backgrounds, border colors
+// and the colors of the striped, hovered & active tables
+
+// @each $color, $value in $table-variants {
+//   @include table-variant($color, $value);
+// }
+
+@each $color, $map in $table-variants {
+  // @include table-variant($color, $value);
+  .table-#{$color} {
+    @include table-variant($map);
+  }
+}
+
+// @each $state, $map in $list-group-variants {
+
+// }
+
+// Responsive tables
+//
+// Generate series of `.table-responsive-*` classes for configuring the screen
+// size of where your table will overflow.
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+  @include media-breakpoint-down($breakpoint) {
+    .table-responsive#{$infix} {
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+  }
+}

package/scss/_toasts.scss

@@ -0,0 +1,52 @@
+.toast {
+  width: $toast-max-width;
+  max-width: 100%;
+  @include font-size($toast-font-size);
+  color: var(--#{$variable-prefix}toast-color, $toast-color);
+  pointer-events: auto;
+  background-color: var(--#{$variable-prefix}toast-background-color, $toast-background-color);
+  background-clip: padding-box;
+  border: $toast-border-width solid var(--#{$variable-prefix}toast-border-color, $toast-border-color);
+  box-shadow: $toast-box-shadow;
+  @include border-radius($toast-border-radius);
+
+  &:not(.showing):not(.show) {
+    opacity: 0;
+  }
+
+  &.hide {
+    display: none;
+  }
+}
+
+.toast-container {
+  z-index: $zindex-toaster;
+  width: max-content;
+  max-width: 100%;
+  pointer-events: none;
+
+  > :not(:last-child) {
+    margin-bottom: $toast-spacing;
+  }
+}
+
+.toast-header {
+  display: flex;
+  align-items: center;
+  padding: $toast-padding-y $toast-padding-x;
+  color: var(--#{$variable-prefix}toast-header-color, $toast-header-color);
+  background-color: var(--#{$variable-prefix}toast-header-background-color, $toast-header-background-color);
+  background-clip: padding-box;
+  border-bottom: $toast-border-width solid var(--#{$variable-prefix}toast-header-border-color, $toast-header-border-color);
+  @include border-top-radius(subtract($toast-border-radius, $toast-border-width));
+
+  .btn-close {
+    margin-right: $toast-padding-x * -.5;
+    margin-left: $toast-padding-x;
+  }
+}
+
+.toast-body {
+  padding: $toast-padding-x; // apply to both vertical and horizontal
+  word-wrap: break-word;
+}

package/scss/_tooltip.scss

@@ -0,0 +1,115 @@
+// Base class
+.tooltip {
+  position: absolute;
+  z-index: $zindex-tooltip;
+  display: block;
+  margin: $tooltip-margin;
+  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
+  // So reset our font and text properties to avoid inheriting weird values.
+  @include reset-text();
+  @include font-size($tooltip-font-size);
+  // Allow breaking very long words so they don't overflow the tooltip's bounds
+  word-wrap: break-word;
+  opacity: 0;
+
+  &.show { opacity: $tooltip-opacity; }
+
+  .tooltip-arrow {
+    position: absolute;
+    display: block;
+    width: $tooltip-arrow-width;
+    height: $tooltip-arrow-height;
+
+    &::before {
+      position: absolute;
+      content: "";
+      border-color: transparent;
+      border-style: solid;
+    }
+  }
+}
+
+.bs-tooltip-top {
+  padding: $tooltip-arrow-height 0;
+
+  .tooltip-arrow {
+    bottom: 0;
+
+    &::before {
+      top: -1px;
+      border-width: $tooltip-arrow-height ($tooltip-arrow-width * .5) 0;
+      border-top-color: var(--#{$variable-prefix}tooltip-arrow-color, $tooltip-arrow-color);
+    }
+  }
+}
+
+.bs-tooltip-end {
+  padding: 0 $tooltip-arrow-height;
+
+  .tooltip-arrow {
+    left: 0;
+    width: $tooltip-arrow-height;
+    height: $tooltip-arrow-width;
+
+    &::before {
+      right: -1px;
+      border-width: ($tooltip-arrow-width * .5) $tooltip-arrow-height ($tooltip-arrow-width * .5) 0;
+      border-right-color: var(--#{$variable-prefix}tooltip-arrow-color, $tooltip-arrow-color);
+    }
+  }
+}
+
+.bs-tooltip-bottom {
+  padding: $tooltip-arrow-height 0;
+
+  .tooltip-arrow {
+    top: 0;
+
+    &::before {
+      bottom: -1px;
+      border-width: 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height;
+      border-bottom-color: var(--#{$variable-prefix}tooltip-arrow-color, $tooltip-arrow-color);
+    }
+  }
+}
+
+.bs-tooltip-start {
+  padding: 0 $tooltip-arrow-height;
+
+  .tooltip-arrow {
+    right: 0;
+    width: $tooltip-arrow-height;
+    height: $tooltip-arrow-width;
+
+    &::before {
+      left: -1px;
+      border-width: ($tooltip-arrow-width * .5) 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height;
+      border-left-color: var(--#{$variable-prefix}tooltip-arrow-color, $tooltip-arrow-color);
+    }
+  }
+}
+
+.bs-tooltip-auto {
+  &[data-popper-placement^="top"] {
+    @extend .bs-tooltip-top;
+  }
+  &[data-popper-placement^="right"] {
+    @extend .bs-tooltip-end;
+  }
+  &[data-popper-placement^="bottom"] {
+    @extend .bs-tooltip-bottom;
+  }
+  &[data-popper-placement^="left"] {
+    @extend .bs-tooltip-start;
+  }
+}
+
+// Wrapper for the tooltip content
+.tooltip-inner {
+  max-width: $tooltip-max-width;
+  padding: $tooltip-padding-y $tooltip-padding-x;
+  color: var(--#{$variable-prefix}tooltip-color, $tooltip-color);
+  text-align: center;
+  background-color: var(--#{$variable-prefix}tooltip-bg, $tooltip-bg);
+  @include border-radius($tooltip-border-radius);
+}