@coreui/coreui 4.0.2

package/scss/mixins/_icon.scss

@@ -0,0 +1,6 @@
+// Icon sizes
+@mixin icon-size($icon-size) {
+  width: $icon-size;
+  height: $icon-size;
+  font-size: $icon-size;
+}

package/scss/mixins/_image.scss

@@ -0,0 +1,16 @@
+// Image Mixins
+// - Responsive image
+// - Retina image
+
+
+// Responsive image
+//
+// Keep images from scaling beyond the width of their parents.
+
+@mixin img-fluid {
+  // Part 1: Set a maximum relative to the parent
+  max-width: 100%;
+  // Part 2: Override the height to auto, otherwise images will be stretched
+  // when setting a width and height attribute on the img element.
+  height: auto;
+}

package/scss/mixins/_list-group.scss

@@ -0,0 +1,18 @@
+// List Groups
+// scss-docs-start list-group-mixin
+@mixin list-group-item-variant($state, $variant) {
+  $background: map-get($variant, "bg");
+  $background-hover: map-get($variant, "bg-hover");
+  $color: contrast-ratio-correction(map-get($variant, "color"), map-get($variant, "bg"), abs($alert-color-scale), $state);
+
+  .list-group-item-#{$state} {
+    --#{$variable-prefix}list-group-color: #{$color};
+    --#{$variable-prefix}list-group-bg: #{$background};
+    --#{$variable-prefix}list-group-hover-bg: #{$background-hover};
+    --#{$variable-prefix}list-group-action-hover-color: #{$color};
+    --#{$variable-prefix}list-group-action-active-color: #{$white};
+    --#{$variable-prefix}list-group-action-active-bg: #{$color};
+    --#{$variable-prefix}list-group-action-active-border-color: #{$color};
+  }
+}
+// scss-docs-end list-group-mixin

package/scss/mixins/_lists.scss

@@ -0,0 +1,7 @@
+// Lists
+
+// Unstyled keeps list items block level, just removes default browser padding and list-style
+@mixin list-unstyled {
+  @include ltr-rtl("padding-left", 0);
+  list-style: none;
+}

package/scss/mixins/_ltr-rtl.scss

@@ -0,0 +1,60 @@
+@mixin ltr {
+  @if $enable-ltr {
+    html:not([dir="rtl"]) & {
+      @content;
+    }
+  }
+}
+
+@mixin rtl {
+  @if $enable-rtl {
+    *[dir="rtl"] & {
+      @content;
+    }
+  }
+}
+
+@function reflect($element) {
+  @if type-of($element) == string {
+    @if str-index($element, "left") {
+      @return str-replace($element, "left", "right");
+    }
+    @if str-index($element, "right") {
+      @return str-replace($element, "right", "left");
+    }
+  }
+
+  @return $element;
+}
+
+@mixin ltr-rtl($property, $value, $property-rtl: null, $value-rtl: null, $important: null) {
+  $property-reflected: reflect($property);
+  $value-reflected: reflect($value);
+
+  @if $enable-ltr and $enable-rtl {
+    @include ltr() {
+      #{$property}: $value $important;
+    }
+    @include rtl() {
+      @if $value-rtl {
+        #{$property-reflected}: $value-rtl $important;
+      }
+      @else {
+        #{$property-reflected}: $value-reflected $important;
+      }
+    }
+  }
+  @else {
+    @if $enable-rtl {
+      @if $value-rtl {
+        #{$property-reflected}: $value-rtl $important;
+      }
+      @else {
+        #{$property-reflected}: $value-reflected $important;
+      }
+    }
+    @else {
+      #{$property}: $value $important;
+    }
+  }
+}

package/scss/mixins/_pagination.scss

@@ -0,0 +1,31 @@
+// Pagination
+
+// scss-docs-start pagination-mixin
+@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
+  .page-link {
+    padding: $padding-y $padding-x;
+    @include font-size($font-size);
+  }
+
+  .page-item {
+    @if $pagination-margin-start == (-$pagination-border-width) {
+      &:first-child {
+        .page-link {
+          @include border-start-radius($border-radius);
+        }
+      }
+
+      &:last-child {
+        .page-link {
+          @include border-end-radius($border-radius);
+        }
+      }
+    } @else {
+      //Add border-radius to all pageLinks in case they have left margin
+      .page-link {
+        @include border-radius($border-radius);
+      }
+    }
+  }
+}
+// scss-docs-end pagination-mixin

package/scss/mixins/_reset-text.scss

@@ -0,0 +1,17 @@
+@mixin reset-text {
+  font-family: $font-family-base;
+  // We deliberately do NOT reset font-size or overflow-wrap / word-wrap.
+  font-style: normal;
+  font-weight: $font-weight-normal;
+  line-height: $line-height-base;
+  text-align: left; // Fallback for where `start` is not supported
+  text-align: start;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  letter-spacing: normal;
+  word-break: normal;
+  word-spacing: normal;
+  white-space: normal;
+  line-break: auto;
+}

package/scss/mixins/_resize.scss

@@ -0,0 +1,6 @@
+// Resize anything
+
+@mixin resizable($direction) {
+  overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
+  resize: $direction; // Options: horizontal, vertical, both
+}

package/scss/mixins/_table-variants.scss

@@ -0,0 +1,16 @@
+// scss-docs-start table-variant
+@mixin table-variant($map) {
+  --#{$variable-prefix}table-bg: #{map-get($map, "bg")};
+  --#{$variable-prefix}table-color: #{map-get($map, "color")};
+  --#{$variable-prefix}table-border-color: #{map-get($map, "border-color")};
+  --#{$variable-prefix}table-striped-bg: #{map-get($map, "striped-bg")};
+  --#{$variable-prefix}table-striped-color: #{map-get($map, "striped-color")};
+  --#{$variable-prefix}table-active-bg: #{map-get($map, "active-bg")};
+  --#{$variable-prefix}table-active-color: #{map-get($map, "active-color")};
+  --#{$variable-prefix}table-hover-bg: #{map-get($map, "hover-bg")};
+  --#{$variable-prefix}table-hover-color: #{map-get($map, "hover-color")};
+
+  color: var(--#{$variable-prefix}table-color);
+  border-color: var(--#{$variable-prefix}table-border-color);
+}
+// scss-docs-end table-variant

package/scss/mixins/_text-truncate.scss

@@ -0,0 +1,8 @@
+// Text truncate
+// Requires inline-block or block for proper styling
+
+@mixin text-truncate() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/scss/mixins/_transition.scss

@@ -0,0 +1,26 @@
+// stylelint-disable property-disallowed-list
+@mixin transition($transition...) {
+  @if length($transition) == 0 {
+    $transition: $transition-base;
+  }
+
+  @if length($transition) > 1 {
+    @each $value in $transition {
+      @if $value == null or $value == none {
+        @warn "The keyword 'none' or 'null' must be used as a single argument.";
+      }
+    }
+  }
+
+  @if $enable-transitions {
+    @if nth($transition, 1) != null {
+      transition: $transition;
+    }
+
+    @if $enable-reduced-motion and nth($transition, 1) != null and nth($transition, 1) != none {
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+    }
+  }
+}

package/scss/mixins/_utilities.scss

@@ -0,0 +1,104 @@
+// Utility generator
+// Used to generate utilities & print utilities
+@mixin generate-utility($utility, $infix, $is-rfs-media-query: false) {
+  $values: map-get($utility, values);
+
+  // If the values are a list or string, convert it into a map
+  @if type-of($values) == "string" or type-of(nth($values, 1)) != "list" {
+    $values: zip($values, $values);
+  }
+
+  @each $key, $value in $values {
+    $properties: map-get($utility, property);
+
+    // Multiple properties are possible, for example with vertical or horizontal margins or paddings
+    @if type-of($properties) == "string" {
+      $properties: append((), $properties);
+    }
+
+    // Use custom class if present
+    $property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
+    $property-class: if($property-class == null, "", $property-class);
+
+    // State params to generate pseudo-classes
+    $state: if(map-has-key($utility, state), map-get($utility, state), ());
+
+    $infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix);
+
+    // Don't prefix if value key is null (eg. with shadow class)
+    $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
+
+    // Generate CSS Variable
+    $generate-vars: if(map-has-key($utility, vars), map-get($utility, vars), false);
+    $generate-only-vars: if(map-has-key($utility, only-vars), map-get($utility, only-vars), false);
+
+    // Generate RTL version
+    $generate-rtl: if(map-has-key($utility, rtl), map-get($utility, rtl), false);
+
+    // // Add theme prefix
+    // $theme-prefix: if(map-has-key($utility, theme-prefix), map-get($utility, theme-prefix), false);
+
+    @if map-get($utility, rfs) {
+      // Inside the media query
+      @if $is-rfs-media-query {
+        $val: rfs-value($value);
+
+        // Do not render anything if fluid and non fluid values are the same
+        $value: if($val == rfs-fluid-value($value), null, $val);
+      }
+      @else {
+        $value: rfs-fluid-value($value);
+      }
+    }
+
+    $is-rtl: map-get($utility, rtl);
+
+    @if $value != null {
+      @if $is-rtl == false {
+        /* rtl:begin:remove */
+      }
+
+      .#{$property-class + $infix + $property-class-modifier} {
+        @each $property in $properties {
+          @if $generate-vars == true or $generate-only-vars == true {
+            @if $generate-only-vars {
+              @if $generate-rtl == true {
+                @include ltr-rtl($property, var(--#{$variable-prefix}#{$key}), null, null, if($enable-important-utilities, !important, null));
+              }
+              @else {
+                #{$property}: var(--#{$variable-prefix}#{$key}) if($enable-important-utilities, !important, null);
+              }
+            }
+            @else {
+              @if $generate-rtl == true {
+                @include ltr-rtl($property, var(--#{$variable-prefix}#{$key}, $value), null, null, if($enable-important-utilities, !important, null));
+              }
+              @else {
+                #{$property}: var(--#{$variable-prefix}#{$key}, $value) if($enable-important-utilities, !important, null);
+              }
+            }
+          }
+          @else {
+            @if $generate-rtl == true {
+              @include ltr-rtl($property, $value, null, null, if($enable-important-utilities, !important, null));
+            }
+            @else {
+              #{$property}: $value if($enable-important-utilities, !important, null);
+            }
+          }
+        }
+      }
+
+      @each $pseudo in $state {
+        .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
+          @each $property in $properties {
+            #{$property}: $value if($enable-important-utilities, !important, null);
+          }
+        }
+      }
+      @if $is-rtl == false {
+        /* rtl:end:remove */
+      }
+    }
+  }
+}

package/scss/mixins/_visually-hidden.scss

@@ -0,0 +1,29 @@
+// stylelint-disable declaration-no-important
+
+// Hide content visually while keeping it accessible to assistive technologies
+//
+// See: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
+// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
+
+@mixin visually-hidden() {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+// Use to only display content when it's focused, or one of its child elements is focused
+// (i.e. when focus is within the element/container that the class was applied to)
+//
+// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
+
+@mixin visually-hidden-focusable() {
+  &:not(:focus):not(:focus-within) {
+    @include visually-hidden();
+  }
+}

package/scss/sidebar/_sidebar-narrow.scss

@@ -0,0 +1,106 @@
+%sidebar-narrow {
+  @include media-breakpoint-up($mobile-breakpoint) {
+    z-index: $zindex-fixed + 1;
+    flex: 0 0 $sidebar-narrow-width;
+    width: $sidebar-narrow-width;
+    padding-bottom: $sidebar-toggler-height;
+    overflow: visible;
+
+    &.sidebar-fixed {
+      z-index: $zindex-fixed + 1;
+      width: $sidebar-narrow-width;
+    }
+
+    .sidebar-brand-full {
+      display: none;
+    }
+
+    .sidebar-brand-narrow {
+      display: block;
+    }
+
+    .d-narrow-none,
+    .nav-label,
+    .nav-title,
+    .nav-group-items,
+    .nav-group.show .nav-group-items,
+    .sidebar-footer,
+    .sidebar-form,
+    .sidebar-header {
+      height: 0 !important; // stylelint-disable-line declaration-no-important
+      padding: 0;
+      margin: 0;
+      visibility: hidden;
+      opacity: 0;
+    }
+
+    .sidebar-toggler {
+      position: fixed;
+      bottom: 0;
+
+      &::before {
+        @include ltr-rtl("transform", rotate(-180deg), null, rotate(0deg));
+      }
+    }
+
+    &.sidebar-end .sidebar-toggler::before {
+      transform: rotate(0deg);
+    }
+  }
+}
+
+.sidebar-narrow {
+  @extend %sidebar-narrow;
+  &:not(.sidebar-end) ~ * {
+    --#{$variable-prefix}sidebar-occupy-start: #{$sidebar-narrow-width};
+  }
+  &.sidebar-end ~ * {
+    --#{$variable-prefix}sidebar-occupy-end: #{$sidebar-narrow-width};
+  }
+}
+
+.sidebar-narrow-unfoldable {
+  position: fixed;
+  z-index: $zindex-fixed + 1;
+
+  &:not(.sidebar-end) ~ * {
+    --#{$variable-prefix}sidebar-occupy-start: #{$sidebar-narrow-width};
+  }
+  &.sidebar-end ~ * {
+    --#{$variable-prefix}sidebar-occupy-end: #{$sidebar-narrow-width};
+  }
+
+  &:not(:hover) {
+    @extend %sidebar-narrow;
+  }
+
+  &:hover {
+    .sidebar-toggler {
+      &::before {
+        @include ltr-rtl("transform", rotate(-180deg), null, rotate(0deg));
+      }
+    }
+
+    &.sidebar-end .sidebar-toggler::before {
+      transform: rotate(0deg);
+    }
+  }
+}
+
+// Responsive behavior
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-down($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+    .sidebar:not(.show).sidebar-self-hiding#{$infix} {
+      &.sidebar-narrow,
+      &.sidebar-narrow-unfoldable {
+        &:not(.sidebar-end) {
+          @include ltr-rtl("margin-left", - $sidebar-narrow-width);
+        }
+        &.sidebar-end {
+          @include ltr-rtl("margin-right", - $sidebar-narrow-width);
+        }
+      }
+    }
+  }
+}