@coreui/coreui 4.0.2

package/scss/_grid.scss

@@ -0,0 +1,56 @@
+// Row
+//
+// Rows contain your columns.
+
+@if $enable-grid-classes {
+  .row {
+    @include make-row();
+
+    > * {
+      @include make-col-ready();
+    }
+  }
+}
+
+@mixin make-cssgrid($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
+  @each $breakpoint in map-keys($breakpoints) {
+    $infix: breakpoint-infix($breakpoint, $breakpoints);
+
+    @include media-breakpoint-up($breakpoint, $breakpoints) {
+      @if $columns > 0 {
+        @for $i from 1 through $columns {
+          .g-col#{$infix}-#{$i} {
+            grid-column: auto / span $i;
+          }
+        }
+
+        // `$columns - 1` because offsetting by the width of an entire row isn't possible
+        @for $i from 0 through ($columns - 1) {
+          .g-start#{$infix}-#{$i} {
+            grid-column-start: $i;
+          }
+        }
+      }
+    }
+  }
+}
+
+@if $enable-cssgrid {
+  .grid {
+    display: grid;
+    grid-template-rows: repeat(var(--#{$variable-prefix}rows, 1), 1fr);
+    grid-template-columns: repeat(var(--#{$variable-prefix}columns, #{$grid-columns}), 1fr);
+    gap: var(--#{$variable-prefix}gap, #{$grid-gutter-width});
+
+    @include make-cssgrid();
+  }
+}
+
+
+// Columns
+//
+// Common styles for small and large grid columns
+
+@if $enable-grid-classes {
+  @include make-grid-columns();
+}

package/scss/_header.scss

@@ -0,0 +1,170 @@
+.header {
+  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: $header-min-height;
+  padding: $header-padding-y $header-padding-x;
+  background: var(--#{$variable-prefix}header-bg, $header-bg);
+  border-bottom: var(--#{$variable-prefix}header-border-width, $header-border-width) solid var(--#{$variable-prefix}header-border-color, $header-border-color);
+
+  // Because flex properties aren't inherited, we need to redeclare these first
+  // few properties so that content nested within behave properly.
+  // The `flex-wrap` property is inherited to simplify the expanded navbars
+  %container-flex-properties {
+    display: flex;
+    flex-wrap: inherit;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  > .container,
+  > .container-fluid {
+    @extend %container-flex-properties;
+  }
+
+  @each $breakpoint, $container-max-width in $container-max-widths {
+    > .container#{breakpoint-infix($breakpoint, $container-max-widths)} {
+      @extend %container-flex-properties;
+    }
+  }
+
+  .container:first-child,
+  .container-fluid:first-child {
+    min-height: $header-min-height - (2 * $header-padding-y);
+  }
+
+  .container:nth-child(n+2),
+  .container-fluid:nth-child(n+2) {
+    min-height: $subheader-min-height - (2 * $header-padding-y);
+  }
+
+  &.header-sticky {
+    position: sticky;
+    top: 0;
+    z-index: $zindex-fixed - 1;
+  }
+}
+
+.header-divider {
+  flex-basis: calc(100% + #{2 * $header-padding-x}); // stylelint-disable-line function-disallowed-list
+  height: 0;
+  margin: $header-padding-y (- $header-padding-x);
+  border-top: var(--#{$variable-prefix}header-divider-border-width, $header-divider-border-width) solid var(--#{$variable-prefix}header-divider-border-color, $header-divider-border-color);
+}
+
+// Header brand
+//
+// Used for brand, project, or site names.
+
+.header-brand {
+  padding-top: $header-brand-padding-y;
+  padding-bottom: $header-brand-padding-y;
+  @include ltr-rtl("margin-right", $header-brand-margin-end);
+  @include font-size($header-brand-font-size);
+  color: var(--#{$variable-prefix}header-brand-color, $header-brand-color);
+  text-decoration: if($link-decoration == none, null, none);
+  white-space: nowrap;
+
+  &:hover,
+  &:focus {
+    color: var(--#{$variable-prefix}header-brand-hover-color, $header-brand-hover-color);
+    text-decoration: if($link-hover-decoration == underline, none, null);
+  }
+}
+
+// Header nav
+//
+// Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
+
+.header-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: $header-nav-link-padding-x;
+    padding-left: $header-nav-link-padding-x;
+    color: var(--#{$variable-prefix}header-color, $header-color);
+
+    &:hover,
+    &:focus {
+      color: var(--#{$variable-prefix}header-hover-color, $header-hover-color);
+    }
+
+    &.disabled {
+      color: var(--#{$variable-prefix}header-disabled-color, $header-disabled-color);
+    }
+  }
+
+  .show > .nav-link,
+  .nav-link.active {
+    color: var(--#{$variable-prefix}header-active-color, $header-active-color);
+  }
+
+  .dropdown-menu {
+    position: absolute;
+  }
+}
+
+
+// Header text
+//
+//
+
+.header-text {
+  padding-top: $nav-link-padding-y;
+  padding-bottom: $nav-link-padding-y;
+  color: var(--#{$variable-prefix}header-color, $header-color);
+
+  a {
+    color: var(--#{$variable-prefix}header-active-color, $header-active-color);
+
+    &:hover,
+    &:focus {
+      color: var(--#{$variable-prefix}header-active-color, $header-active-color);
+    }
+  }
+}
+
+.header-toggler {
+  // min-width: 50px;
+  padding: $header-toggler-padding-y $header-toggler-padding-x;
+  @include font-size($header-toggler-font-size);
+  color: var(--#{$variable-prefix}header-color, $header-color);
+  background-color: var(--#{$variable-prefix}header-toggler-bg, $header-toggler-bg);
+  border: 0; // remove default button style
+  // @include borders($header-toggler-border);
+  @include border-radius($header-toggler-border-radius);
+  // border-color: var(--#{$variable-prefix}header-toggler-border-color, $header-toggler-border-color);
+
+  &:hover {
+    color: $body-color;
+    text-decoration: none;
+  }
+
+  &:focus {
+    outline: 0;
+  }
+
+  // Opinionated: add "hand" cursor to non-disabled .navbar-toggler elements
+  &:not(:disabled) {
+    cursor: pointer;
+  }
+}
+
+.header-toggler-icon {
+  display: block;
+  height: $header-toggler-font-size * 1.25;
+  background-image: var(--#{$variable-prefix}header-toggler-icon-bg, escape-svg($header-toggler-icon-bg));
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: 100% 100%;
+
+  &:hover {
+    background-image: var(--#{$variable-prefix}header-toggler-hover-icon-bg, escape-svg($header-toggler-hover-icon-bg));
+  }
+}

package/scss/_helpers.scss

@@ -0,0 +1,7 @@
+@import "helpers/clearfix";
+@import "helpers/colored-links";
+@import "helpers/ratio";
+@import "helpers/position";
+@import "helpers/visually-hidden";
+@import "helpers/stretched-link";
+@import "helpers/text-truncation";

package/scss/_icon.scss

@@ -0,0 +1,32 @@
+.icon {
+  display: inline-block;
+  color: inherit;
+  text-align: center;
+  vertical-align: -.125rem; // Fix the position of icon
+  fill: currentColor;
+  &:not(.icon-c-s):not(.icon-custom-size) {
+    @include icon-size($icon-size-base);
+
+    &.icon-xxl {
+      @include icon-size($icon-size-xxl);
+    }
+
+    &.icon-xl {
+      @include icon-size($icon-size-xl);
+    }
+
+    &.icon-lg {
+      @include icon-size($icon-size-lg);
+    }
+
+    &.icon-sm {
+      @include icon-size($icon-size-sm);
+    }
+
+    @for $i from 3 through 9 {
+      &.icon-#{$i}xl {
+        @include icon-size($i * $icon-size-base);
+      }
+    }
+  }
+}

package/scss/_images.scss

@@ -0,0 +1,42 @@
+// Responsive images (ensure images don't scale beyond their parents)
+//
+// This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
+// We previously tried the "images are responsive by default" approach in Bootstrap v2,
+// and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps)
+// which weren't expecting the images within themselves to be involuntarily resized.
+// See also https://github.com/twbs/bootstrap/issues/18178
+.img-fluid {
+  @include img-fluid();
+}
+
+
+// Image thumbnails
+.img-thumbnail {
+  padding: $thumbnail-padding;
+  background-color: var(--#{$variable-prefix}thumbnail-bg, $thumbnail-bg);
+  border: $thumbnail-border-width solid var(--#{$variable-prefix}thumbnail-border-color, $thumbnail-border-color);
+  @include border-radius($thumbnail-border-radius);
+  @include box-shadow($thumbnail-box-shadow);
+
+  // Keep them at most 100% wide
+  @include img-fluid();
+}
+
+//
+// Figures
+//
+
+.figure {
+  // Ensures the caption's text aligns with the image.
+  display: inline-block;
+}
+
+.figure-img {
+  margin-bottom: $spacer * .5;
+  line-height: 1;
+}
+
+.figure-caption {
+  @include font-size($figure-caption-font-size);
+  color: var(--#{$variable-prefix}figure-caption-color, $figure-caption-color);
+}

package/scss/_list-group.scss

@@ -0,0 +1,169 @@
+// Base class
+//
+// Easily usable on <ul>, <ol>, or <div>.
+
+.list-group {
+  display: flex;
+  flex-direction: column;
+
+  // No need to set list-style: none; since .list-group-item is block level
+  @include ltr-rtl("padding-left", 0); // reset padding because ul and ol
+  margin-bottom: 0;
+  @include border-radius($list-group-border-radius);
+}
+
+.list-group-numbered {
+  list-style-type: none;
+  counter-reset: section;
+
+  > li::before {
+    // Increments only this instance of the section counter
+    content: counters(section, ".") ". ";
+    counter-increment: section;
+  }
+}
+
+
+// Interactive list items
+//
+// Use anchor or button elements instead of `li`s or `div`s to create interactive
+// list items. Includes an extra `.active` modifier class for selected items.
+
+.list-group-item-action {
+  width: 100%; // For `<button>`s (anchors become 100% by default though)
+  color: var(--#{$variable-prefix}list-group-action-color, $list-group-action-color);
+  text-align: inherit; // For `<button>`s (anchors inherit)
+
+  // Hover state
+  &:hover,
+  &:focus {
+    z-index: 1; // Place hover/focus items above their siblings for proper border styling
+    color: var(--#{$variable-prefix}list-group-action-hover-color, $list-group-action-hover-color);
+    text-decoration: none;
+    background-color: var(--#{$variable-prefix}list-group-hover-bg, $list-group-hover-bg);
+  }
+
+  &:active {
+    color: var(--#{$variable-prefix}list-group-action-active-color, $list-group-action-active-color);
+    background-color: var(--#{$variable-prefix}list-group-action-active-bg, $list-group-action-active-bg);
+    border-color: var(--#{$variable-prefix}list-group-action-active-border-color);
+  }
+}
+
+
+// Individual list items
+//
+// Use on `li`s or `div`s within the `.list-group` parent.
+
+.list-group-item {
+  position: relative;
+  display: block;
+  padding: $list-group-item-padding-y $list-group-item-padding-x;
+  color: var(--#{$variable-prefix}list-group-color, $list-group-color);
+  text-decoration: if($link-decoration == none, null, none);
+  background-color: var(--#{$variable-prefix}list-group-bg, $list-group-bg);
+  border: $list-group-border-width solid var(--#{$variable-prefix}list-group-border-color, $list-group-border-color);
+
+  &:first-child {
+    @include border-top-radius(inherit);
+  }
+
+  &:last-child {
+    @include border-bottom-radius(inherit);
+  }
+
+  &.disabled,
+  &:disabled {
+    color: var(--#{$variable-prefix}list-group-disabled-color, $list-group-disabled-color);
+    pointer-events: none;
+    background-color: var(--#{$variable-prefix}list-group-disabled-bg, $list-group-disabled-bg);
+  }
+
+  // Include both here for `<a>`s and `<button>`s
+  &.active {
+    z-index: 2; // Place active items above their siblings for proper border styling
+    color: var(--#{$variable-prefix}list-group-active-color, $list-group-active-color);
+    background-color: var(--#{$variable-prefix}list-group-active-bg, $list-group-active-bg);
+    border-color: var(--#{$variable-prefix}list-group-active-border-color, $list-group-active-border-color);
+  }
+
+  & + & {
+    border-top-width: 0;
+
+    &.active {
+      margin-top: -$list-group-border-width;
+      border-top-width: $list-group-border-width;
+    }
+  }
+}
+
+
+// Horizontal
+//
+// Change the layout of list group items from vertical (default) to horizontal.
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .list-group-horizontal#{$infix} {
+      flex-direction: row;
+
+      > .list-group-item {
+        &:first-child {
+          @include border-bottom-start-radius($list-group-border-radius);
+          @include border-top-end-radius(0);
+        }
+
+        &:last-child {
+          @include border-top-end-radius($list-group-border-radius);
+          @include border-bottom-start-radius(0);
+        }
+
+        &.active {
+          margin-top: 0;
+        }
+
+        + .list-group-item {
+          border-top-width: $list-group-border-width;
+          @include ltr-rtl("border-left-width", 0);
+
+          &.active {
+            @include ltr-rtl("margin-left", -$list-group-border-width);
+            @include ltr-rtl("border-left-width", $list-group-border-width);
+          }
+        }
+      }
+    }
+  }
+}
+
+
+// Flush list items
+//
+// Remove borders and border-radius to keep list group items edge-to-edge. Most
+// useful within other components (e.g., cards).
+
+.list-group-flush {
+  @include border-radius(0);
+
+  > .list-group-item {
+    border-width: 0 0 $list-group-border-width;
+
+    &:last-child {
+      border-bottom-width: 0;
+    }
+  }
+}
+
+
+// scss-docs-start list-group-modifiers
+// List group contextual variants
+//
+// Add modifier classes to change text and background color on individual items.
+// Organizationally, this must come after the `:hover` states.
+
+@each $state, $variant in $list-group-variants {
+  @include list-group-item-variant($state, $variant);
+}
+// scss-docs-end list-group-modifiers