@coreui/coreui 4.0.2

package/scss/sidebar/_sidebar-nav.scss

@@ -0,0 +1,165 @@
+// Sidebar navigation
+
+.sidebar-nav {
+  position: relative;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  padding: 0;
+  margin-bottom: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  list-style: none;
+
+  .nav-title {
+    padding: $sidebar-nav-title-padding-y $sidebar-nav-title-padding-x;
+    margin-top: $sidebar-nav-title-margin-top;
+    font-size: 80%;
+    font-weight: 700;
+    color: var(--#{$variable-prefix}sidebar-nav-title-color, $sidebar-nav-title-color);
+    text-transform: uppercase;
+    @include transition($sidebar-nav-title-transition);
+  }
+
+  .nav-link {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    padding: $sidebar-nav-link-padding-y $sidebar-nav-link-padding-x;
+    color: var(--#{$variable-prefix}sidebar-nav-link-color, $sidebar-nav-link-color);
+    text-decoration: none;
+    white-space: nowrap;
+    background: var(--#{$variable-prefix}sidebar-nav-link-bg, $sidebar-nav-link-bg);
+    @include transition($sidebar-nav-link-transition);
+
+    &.active {
+      color: var(--#{$variable-prefix}sidebar-nav-link-active-color, $sidebar-nav-link-active-color);
+      background: var(--#{$variable-prefix}sidebar-nav-link-active-bg, $sidebar-nav-link-active-bg);
+
+      .nav-icon {
+        color: var(--#{$variable-prefix}sidebar-nav-link-active-icon-color, $sidebar-nav-link-active-icon-color);
+      }
+    }
+
+    &.disabled {
+      color: var(--#{$variable-prefix}sidebar-nav-link-disabled-color, $sidebar-nav-link-disabled-color);
+      pointer-events: none;
+      cursor: not-allowed;
+      background: transparent;
+
+      .nav-icon {
+        color: var(--#{$variable-prefix}sidebar-nav-link-disabled-icon-color, $sidebar-nav-link-disabled-icon-color);
+      }
+
+      &:hover {
+        color: var(--#{$variable-prefix}sidebar-nav-link-disabled-color, $sidebar-nav-link-disabled-color);
+
+        .nav-icon {
+          color: var(--#{$variable-prefix}sidebar-nav-link-disabled-icon-color, $sidebar-nav-link-disabled-icon-color);
+        }
+
+        &.nav-dropdown-toggle::after {
+          background-image: var(--#{$variable-prefix}sidebar-nav-group-indicator-hover, escape-svg($sidebar-nav-group-indicator-hover-icon));
+        }
+      }
+    }
+
+    @media (hover: hover), (-ms-high-contrast: none) {
+      &:hover {
+        color: var(--#{$variable-prefix}sidebar-nav-link-hover-color, $sidebar-nav-link-hover-color);
+        text-decoration: none;
+        background: var(--#{$variable-prefix}sidebar-nav-link-hover-bg, $sidebar-nav-link-hover-bg);
+
+        .nav-icon {
+          color: var(--#{$variable-prefix}sidebar-nav-link-hover-icon-color, $sidebar-nav-link-hover-icon-color);
+        }
+
+        &.nav-group-toggle::after {
+          background-image: var(--#{$variable-prefix}sidebar-nav-group-indicator-hover, escape-svg($sidebar-nav-group-indicator-hover-icon));
+        }
+      }
+    }
+  }
+
+  .nav-icon {
+    flex: 0 0 $sidebar-nav-icon-width;
+    height: $sidebar-nav-icon-height;
+    font-size: $sidebar-nav-icon-font-size;
+    color: var(--#{$variable-prefix}sidebar-nav-link-icon-color, $sidebar-nav-link-icon-color);
+    text-align: center;
+    fill: currentColor;
+    @include transition(inherit);
+
+    &:first-child {
+      @include ltr-rtl("margin-left", - $sidebar-nav-link-padding-x);
+    }
+  }
+
+  .nav-group {
+    position: relative;
+    @include transition($sidebar-nav-group-transition);
+
+    .nav-group-items {
+      overflow: hidden;
+      @include transition($sidebar-nav-group-items-transition);
+    }
+
+    &:not(.show) .nav-group-items {
+      display: none;
+    }
+
+    &.show {
+      background: var(--#{$variable-prefix}sidebar-nav-group-bg, $sidebar-nav-group-bg);
+
+      .nav-group-toggle {
+        color: var(--#{$variable-prefix}sidebar-nav-group-toggle-show-color, $sidebar-nav-group-toggle-show-color);
+      }
+
+      > .nav-group-toggle::after {
+        transform: rotate(180deg);
+      }
+
+      + .show {
+        margin-top: 1px;
+      }
+    }
+  }
+
+  .nav-group-toggle {
+    cursor: pointer;
+
+    &::after {
+      display: block;
+      flex: 0 12px;
+      height: 12px;
+      @include ltr-rtl("margin-left", auto);
+      content: "";
+      background-image: var(--#{$variable-prefix}sidebar-nav-group-indicator, escape-svg($sidebar-nav-group-indicator-icon));
+      background-repeat: no-repeat;
+      background-position: center;
+      @include transition($sidebar-nav-group-indicator-transition);
+    }
+  }
+
+  .nav-group-items {
+    padding: 0;
+    // overflow-y: hidden;
+    list-style: none;
+
+    .nav-link {
+      @include ltr-rtl("padding-left", $sidebar-nav-icon-width);
+
+      .nav-icon {
+        @include ltr-rtl("margin-left", - $sidebar-nav-icon-width);
+      }
+    }
+  }
+
+  &.compact,
+  .compact {
+    .nav-link {
+      padding-top: $sidebar-nav-link-padding-y * .5;
+      padding-bottom: $sidebar-nav-link-padding-y * .5;
+    }
+  }
+}

package/scss/sidebar/_sidebar.scss

@@ -0,0 +1,261 @@
+.sidebar {
+  --#{$variable-prefix}sidebar-width: #{$sidebar-width};
+
+  position: relative;
+  display: flex;
+  // $sidebar-width is the width of the columns
+  flex: 0 0 var(--#{$variable-prefix}sidebar-width);
+  flex-direction: column;
+  // put the nav on the left
+  order: -1;
+  width: var(--#{$variable-prefix}sidebar-width);
+  padding: $sidebar-padding-y $sidebar-padding-x;
+  color: var(--#{$variable-prefix}sidebar-color, $sidebar-color);
+  background: var(--#{$variable-prefix}sidebar-bg, $sidebar-bg);
+  @include ltr-rtl("border-right", var(--#{$variable-prefix}sidebar-border-width, $sidebar-border-width) solid var(--#{$variable-prefix}sidebar-border-color, $sidebar-border-color));
+  box-shadow: none;
+  @include transition($sidebar-transition);
+
+  &:not(.sidebar-end){
+    @include ltr-rtl("margin-left", 0);
+    ~ * {
+      --#{$variable-prefix}sidebar-occupy-start: #{$sidebar-width};
+    }
+  }
+
+  &.sidebar-end {
+    order: 99;
+    @include ltr-rtl("margin-right", 0);
+    ~ * {
+      --#{$variable-prefix}sidebar-occupy-end: #{$sidebar-width};
+    }
+  }
+
+  @include media-breakpoint-up($mobile-breakpoint) {
+    &.hide {
+      &:not(.sidebar-end){
+        @include ltr-rtl("margin-left", calc(-1 * var(--#{$variable-prefix}sidebar-width)));
+        ~ * {
+          --#{$variable-prefix}sidebar-occupy-start: 0;
+        }
+      }
+      &.sidebar-end {
+        @include ltr-rtl("margin-right", calc(-1 * var(--#{$variable-prefix}sidebar-width)));
+        ~ * {
+          --#{$variable-prefix}sidebar-occupy-end: 0;
+        }
+      }
+    }
+  }
+
+  &[class*="bg-"]  {
+    border-color: rgba($black, .1);
+  }
+
+  @each $width, $value in $sidebar-widths {
+    &.sidebar-#{$width} {
+      --#{$variable-prefix}sidebar-width: #{$value};
+      --#{$variable-prefix}sidebar-occupy-start: #{$value};
+
+      ~ * {
+        --#{$variable-prefix}sidebar-width: #{$value};
+        --#{$variable-prefix}sidebar-occupy-end: #{$value};
+      }
+    }
+  }
+
+  &.sidebar-fixed {
+    @include media-breakpoint-up($mobile-breakpoint) {
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      z-index: $zindex-fixed;
+
+      &:not(.sidebar-end) {
+        @include ltr-rtl("left", 0);
+      }
+
+      &.sidebar-end {
+        @include ltr-rtl("right", 0);
+      }
+    }
+  }
+
+  &.sidebar-sticky {
+    @include media-breakpoint-up($mobile-breakpoint) {
+      position: sticky;
+      top: 0;
+      height: 100vh;
+    }
+  }
+
+  &.sidebar-overlaid {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    z-index: $zindex-fixed + 2;
+
+    &:not(.sidebar-end) {
+      @include ltr-rtl("left", 0);
+      ~ * {
+        --#{$variable-prefix}sidebar-occupy-start: 0;
+      }
+    }
+
+    &.sidebar-end {
+      @include ltr-rtl("right", 0);
+      ~ * {
+        --#{$variable-prefix}sidebar-occupy-end: 0;
+      }
+    }
+  }
+
+  @include media-breakpoint-down($mobile-breakpoint) {
+    // Some of our components use this property to detect if the sidebar has mobile behavior.
+    --#{$variable-prefix}is-mobile: true;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    z-index: $zindex-fixed + 1;
+
+    &:not(.sidebar-end) {
+      @include ltr-rtl("left", 0);
+      ~ * {
+        --#{$variable-prefix}sidebar-occupy-start: 0 !important; // stylelint-disable-line
+      }
+
+      &:not(.show) {
+        @include ltr-rtl("margin-left", calc(-1 * var(--#{$variable-prefix}sidebar-width)));
+      }
+    }
+    &.sidebar-end {
+      @include ltr-rtl("right", 0);
+      ~ * {
+        --#{$variable-prefix}sidebar-occupy-end: 0 !important; // stylelint-disable-line
+      }
+
+      &:not(.show) {
+        @include ltr-rtl("margin-right", calc(-1 * var(--#{$variable-prefix}sidebar-width)));
+      }
+    }
+  }
+}
+
+.sidebar-close {
+  position: absolute;
+  top: 0;
+  @include ltr-rtl("right", 0);
+  width: $sidebar-brand-height;
+  height: $sidebar-header-height;
+  color: var(--#{$variable-prefix}sidebar-color, $sidebar-color);
+  background: transparent;
+  border: 0;
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  &:focus {
+    outline: 0;
+  }
+}
+
+.sidebar-brand {
+  display: flex;
+  flex: 0 0 $sidebar-brand-height;
+  align-items: center;
+  justify-content: center;
+  color: var(--#{$variable-prefix}sidebar-brand-color, $sidebar-brand-color);
+  background: var(--#{$variable-prefix}sidebar-brand-bg, $sidebar-brand-bg);
+
+  .sidebar-brand-narrow {
+    display: none;
+  }
+}
+
+.sidebar-header {
+  flex: 0 0 $sidebar-header-height;
+  padding: $sidebar-header-padding-y $sidebar-header-padding-x;
+  text-align: center;
+  background: var(--#{$variable-prefix}sidebar-header-bg, $sidebar-header-bg);
+  @include transition($sidebar-header-height-transition);
+
+  .nav-link {
+    display: flex;
+    align-items: center;
+    min-height: $sidebar-header-height;
+  }
+}
+
+.sidebar-footer {
+  flex: 0 0 $sidebar-footer-height;
+  padding: $sidebar-footer-padding-y $sidebar-footer-padding-x;
+  background: var(--#{$variable-prefix}sidebar-footer-bg, $sidebar-footer-bg);
+  @include transition($sidebar-footer-height-transition);
+}
+
+.sidebar-toggler {
+  display: flex;
+  flex: 0 0 $sidebar-toggler-height;
+  justify-content: flex-end;
+  width: inherit;
+  padding: 0;
+  cursor: pointer;
+  background-color: var(--#{$variable-prefix}sidebar-toggler-bg, $sidebar-toggler-bg);
+  border: 0;
+
+  @include media-breakpoint-down($mobile-breakpoint) {
+    display: none;
+  }
+
+  &::before {
+    display: block;
+    width: $sidebar-toggler-indicator-width;
+    height: $sidebar-toggler-indicator-height;
+    content: "";
+    background-image: var(--#{$variable-prefix}sidebar-toggler-indicator, escape-svg($sidebar-toggler-indicator-icon));
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: $sidebar-toggler-indicator-height * .25;
+    @include transition($sidebar-toggler-transition);
+    @include rtl() {
+      transform: rotate(-180deg);
+    }
+  }
+
+  &:focus {
+    outline: 0;
+  }
+
+  &:hover {
+    background-color: var(--#{$variable-prefix}sidebar-toggler-hover-bg, $sidebar-toggler-hover-bg);
+    &::before {
+      background-image: var(--#{$variable-prefix}sidebar-toggler-indicator-hover, escape-svg($sidebar-toggler-indicator-hover-icon));
+    }
+  }
+
+  .sidebar-end & {
+    justify-content: flex-start;
+    &::before {
+      transform: rotate(-180deg);
+    }
+  }
+}
+
+// Backdrop background
+.sidebar-backdrop {
+  @include media-breakpoint-down($mobile-breakpoint) {
+    position: fixed;
+    top: 0;
+    @include ltr-rtl("left", 0);
+    z-index: $zindex-fixed;
+    width: 100vw;
+    height: 100vh;
+    background-color: $sidebar-backdrop-bg;
+    @include transition($sidebar-backdrop-transition);
+
+    // Fade for backdrop
+    &.fade { opacity: 0; }
+    &.show { opacity: $sidebar-backdrop-opacity; }
+  }
+}

package/scss/utilities/_api.scss

@@ -0,0 +1,47 @@
+// Loop over each breakpoint
+@each $breakpoint in map-keys($grid-breakpoints) {
+
+  // Generate media query if needed
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    // Loop over each utility property
+    @each $key, $utility in $utilities {
+      // The utility can be disabled with `false`, thus check if the utility is a map first
+      // Only proceed if responsive media queries are enabled or if it's the base media query
+      @if type-of($utility) == "map" and (map-get($utility, responsive) or $infix == "") {
+        @include generate-utility($utility, $infix);
+      }
+    }
+  }
+}
+
+// RFS rescaling
+@media (min-width: $rfs-mq-value) {
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    @if (map-get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {
+      // Loop over each utility property
+      @each $key, $utility in $utilities {
+        // The utility can be disabled with `false`, thus check if the utility is a map first
+        // Only proceed if responsive media queries are enabled or if it's the base media query
+        @if type-of($utility) == "map" and map-get($utility, rfs) and (map-get($utility, responsive) or $infix == "") {
+          @include generate-utility($utility, $infix, true);
+        }
+      }
+    }
+  }
+}
+
+
+// Print utilities
+@media print {
+  @each $key, $utility in $utilities {
+    // The utility can be disabled with `false`, thus check if the utility is a map first
+    // Then check if the utility needs print styles
+    @if type-of($utility) == "map" and map-get($utility, print) == true {
+      @include generate-utility($utility, "-print");
+    }
+  }
+}