@coreui/coreui 5.0.0-alpha.1 → 5.0.0-alpha.2

package/scss/_header.scss

@@ -10,6 +10,7 @@
   --#{$prefix}header-hover-color: #{$header-hover-color};
   --#{$prefix}header-disabled-color: #{$header-disabled-color};
   --#{$prefix}header-active-color: #{$header-active-color};
+  --#{$prefix}header-transition: #{$header-transition};
   --#{$prefix}header-brand-padding-y: #{$header-brand-padding-y};
   --#{$prefix}header-brand-color: #{$header-brand-color};
   --#{$prefix}header-brand-hover-color: #{$header-brand-hover-color};
@@ -25,7 +26,6 @@
   --#{$prefix}header-nav-link-padding-y: #{$header-nav-link-padding-y};
   --#{$prefix}header-divider-border-color: #{$header-divider-border-color};
   --#{$prefix}header-divider-border: #{$header-divider-border-width} solid var(--#{$prefix}header-divider-border-color);
-  --#{$prefix}subheader-min-height: #{$subheader-min-height};
   // scss-docs-end header-css-vars
 
   position: relative;
@@ -33,10 +33,11 @@
   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: var(--#{$prefix}header-min-height);
+  // min-height: var(--#{$prefix}header-min-height);
   padding: var(--#{$prefix}header-padding-y) var(--#{$prefix}header-padding-x);
   background: var(--#{$prefix}header-bg);
   border-bottom: var(--#{$prefix}header-border);
+  @include transition(var(--#{$prefix}header-transition));
 
   // Because flex properties aren't inherited, we need to redeclare these first
   // few properties so that content nested within behave properly.
@@ -59,16 +60,6 @@
     }
   }
 
-  .container:first-child,
-  .container-fluid:first-child {
-    min-height: calc(var(--#{$prefix}header-min-height) - (2 * var(--#{$prefix}header-padding-y))); // stylelint-disable-line function-disallowed-list
-  }
-
-  .container:nth-child(n+2),
-  .container-fluid:nth-child(n+2) {
-    min-height: calc(var(--#{$prefix}subheader-min-height) - (2 * var(--#{$prefix}header-padding-y))); // stylelint-disable-line function-disallowed-list
-  }
-
   &.header-sticky {
     position: sticky;
     top: 0;

package/scss/_nav.scss

@@ -44,7 +44,8 @@
   }
 
   // Disabled state lightens text
-  &.disabled {
+  &.disabled,
+  &:disabled {
     color: var(--#{$prefix}nav-link-disabled-color);
     pointer-events: none;
     cursor: default;
@@ -70,7 +71,6 @@
 
   .nav-link {
     margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
-    background: none;
     border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
     @include border-top-radius(var(--#{$prefix}nav-tabs-border-radius));
 
@@ -80,13 +80,6 @@
       isolation: isolate;
       border-color: var(--#{$prefix}nav-tabs-link-hover-border-color);
     }
-
-    &.disabled,
-    &:disabled {
-      color: var(--#{$prefix}nav-link-disabled-color);
-      background-color: transparent;
-      border-color: transparent;
-    }
   }
 
   .nav-link.active,
@@ -117,15 +110,7 @@
   // scss-docs-end nav-pills-css-vars
 
   .nav-link {
-    background: none;
-    border: 0;
     @include border-radius(var(--#{$prefix}nav-pills-border-radius));
-
-    &:disabled {
-      color: var(--#{$prefix}nav-link-disabled-color);
-      background-color: transparent;
-      border-color: transparent;
-    }
   }
 
   .nav-link.active,
@@ -136,6 +121,39 @@
 }
 
 
+//
+// Underline
+//
+
+.nav-underline {
+  // scss-docs-start nav-underline-css-vars
+  --#{$prefix}nav-underline-gap: #{$nav-underline-gap};
+  --#{$prefix}nav-underline-border-width: #{$nav-underline-border-width};
+  --#{$prefix}nav-underline-link-active-color: #{$nav-underline-link-active-color};
+  // scss-docs-end nav-underline-css-vars
+
+  gap: var(--#{$prefix}nav-underline-gap);
+
+  .nav-link {
+    padding-right: 0;
+    padding-left: 0;
+    border-bottom: var(--#{$prefix}nav-underline-border-width) solid transparent;
+
+    &:hover,
+    &:focus {
+      border-bottom-color: currentcolor;
+    }
+  }
+
+  .nav-link.active,
+  .show > .nav-link {
+    font-weight: $font-weight-bold;
+    color: var(--#{$prefix}nav-underline-link-active-color);
+    border-bottom-color: currentcolor;
+  }
+}
+
+
 //
 // Justified variants
 //

package/scss/_reboot.scss

@@ -523,15 +523,15 @@ legend {
   height: auto;
 }
 
-// 1. Correct the outline style in Safari.
-// 2. This overrides the extra rounded corners on search inputs in iOS so that our
+// 1. This overrides the extra rounded corners on search inputs in iOS so that our
 //    `.form-control` class can properly style them. Note that this cannot simply
 //    be added to `.form-control` as it's not specific enough. For details, see
 //    https://github.com/twbs/bootstrap/issues/11586.
+// 2. Correct the outline style in Safari.
 
 [type="search"] {
-  outline-offset: -2px; // 1
-  -webkit-appearance: textfield; // 2
+  -webkit-appearance: textfield; // 1
+  outline-offset: -2px; // 2
 }
 
 // 1. A few input types should stay LTR

package/scss/_root.scss

@@ -75,15 +75,25 @@
   --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
   --#{$prefix}tertiary-bg: #{$body-tertiary-bg};
   --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
-  // scss-docs-end root-body-variables
 
-  --#{$prefix}high-emphasis: #{$body-color};
-  --#{$prefix}medium-emphasis: #{$body-secondary-color};
-  --#{$prefix}disabled: #{$body-tertiary-color};
+  --#{$prefix}body-color-dark: #{$body-color-dark};
+  --#{$prefix}body-color-rgb-dark: #{to-rgb($body-color-dark)};
+  --#{$prefix}body-bg-dark: #{$body-bg-dark};
+  --#{$prefix}body-bg-rgb-dark: #{to-rgb($body-bg-dark)};
+
+  --#{$prefix}emphasis-color-dark: #{$body-emphasis-color-dark};
+  --#{$prefix}emphasis-color-rgb-dark: #{to-rgb($body-emphasis-color-dark)};
 
-  --#{$prefix}high-emphasis-inverse: #{$high-emphasis-inverse};
-  --#{$prefix}medium-emphasis-inverse: #{$medium-emphasis-inverse};
-  --#{$prefix}disabled-inverse: #{$disabled-inverse};
+  --#{$prefix}secondary-color-dark: #{$body-secondary-color-dark};
+  --#{$prefix}secondary-color-rgb-dark: #{to-rgb($body-secondary-color-dark)};
+  --#{$prefix}secondary-bg-dark: #{$body-secondary-bg-dark};
+  --#{$prefix}secondary-bg-rgb-dark: #{to-rgb($body-secondary-bg-dark)};
+
+  --#{$prefix}tertiary-color-dark: #{$body-tertiary-color-dark};
+  --#{$prefix}tertiary-color-rgb-dark: #{to-rgb($body-tertiary-color-dark)};
+  --#{$prefix}tertiary-bg-dark: #{$body-tertiary-bg-dark};
+  --#{$prefix}tertiary-bg-rgb-dark: #{to-rgb($body-tertiary-bg-dark)};
+  // scss-docs-end root-body-variables
 
   --#{$prefix}heading-color: #{$headings-color};
 
@@ -112,7 +122,7 @@
   --#{$prefix}border-radius-lg: #{$border-radius-lg};
   --#{$prefix}border-radius-xl: #{$border-radius-xl};
   --#{$prefix}border-radius-xxl: #{$border-radius-xxl};
-  --#{$prefix}border-radius-2xl: var(--#{$prefix}border-radius-xxl); // Deprecated in v4.3.0 for consistency
+  --#{$prefix}border-radius-2xl: var(--#{$prefix}border-radius-xxl); // Deprecated in v5.0.0 for consistency
   --#{$prefix}border-radius-pill: #{$border-radius-pill};
   // scss-docs-end root-border-var
 
@@ -159,10 +169,6 @@
     --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
     --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
 
-    --#{$prefix}high-emphasis: #{$body-color-dark};
-    --#{$prefix}medium-emphasis: #{$body-secondary-color-dark};
-    --#{$prefix}disabled: #{$body-tertiary-color-dark};
-
     @each $color, $value in $theme-colors-dark {
       --#{$prefix}#{$color}: #{$value};
     }

package/scss/_tooltip.scss

@@ -18,7 +18,7 @@
   z-index: var(--#{$prefix}tooltip-zindex);
   display: block;
   margin: var(--#{$prefix}tooltip-margin);
-  @include deprecate("`$tooltip-margin`", "v5", "v5.x", true);
+  @include deprecate("`$tooltip-margin`", "v4", "v4.x", true);
   // 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();

package/scss/_type.scss

@@ -69,7 +69,7 @@
   display: inline-block;
 
   &:not(:last-child) {
-    margin-right: $list-inline-padding;
+    @include ltr-rtl("margin-right", $list-inline-padding);
   }
 }
 

package/scss/_variables-dark.scss

@@ -36,7 +36,7 @@ $grays-dark: (
 // fusv-enable
 
 // scss-docs-start theme-color-dark-variables
-$primary-dark:       tint-color(desaturate($primary, 20%), 20%) !default;
+$primary-dark:       desaturate($primary, 10%) !default;
 $secondary-dark:     desaturate($secondary, 10%) !default;
 $success-dark:       desaturate($success, 10%) !default;
 $info-dark:          desaturate($info, 10%) !default;
@@ -92,17 +92,17 @@ $light-border-subtle-dark:          $gray-700-dark !default;
 $dark-border-subtle-dark:           $gray-800-dark !default;
 // scss-docs-end theme-border-subtle-dark-variables
 
-$body-color-dark:                   $gray-500-dark !default;
+$body-color-dark:                   rgba($white, .87) !default;
 $body-bg-dark:                      $gray-900-dark !default;
-$body-secondary-color-dark:         rgba($body-color-dark, .75) !default;
+$body-secondary-color-dark:         rgba($white, .6) !default;
 $body-secondary-bg-dark:            $gray-800-dark !default;
-$body-tertiary-color-dark:          rgba($body-color-dark, .5) !default;
-$body-tertiary-bg-dark:             mix($gray-800-dark, #181924, 50%) !default;
+$body-tertiary-color-dark:          rgba($white, .38) !default;
+$body-tertiary-bg-dark:             mix($gray-800-dark, #212631, 50%) !default;
 $body-emphasis-color-dark:          $white !default;
-$border-color-dark:                 $gray-700-dark !default;
-$border-color-translucent-dark:     rgba($white, .15) !default;
+$border-color-dark:                 $gray-800-dark !default;
+$border-color-translucent-dark:     rgba($white, .1) !default;
 $headings-color-dark:               inherit !default;
-$link-color-dark:                   tint-color($primary, 40%) !default;
+$link-color-dark:                   $primary-dark !default;
 $link-hover-color-dark:             shift-color($link-color-dark, -$link-shade-percentage) !default;
 $code-color-dark:                   tint-color($code-color, 40%) !default;
 
@@ -157,13 +157,4 @@ $button-outline-ghost-variants-dark: (
   "warning":    btn-outline-color-map($warning-dark),
   "info":       btn-outline-color-map($info-dark)
 ) !default;
-
-
-//
-// Sidebar
-//
-
-$sidebar-bg-dark:            $body-bg-dark !default;
-$sidebar-border-width-dark:  var(--#{$prefix}border-width) !default;
-$sidebar-border-color-dark:  var(--#{$prefix}border-color) !default;
 // scss-docs-end sass-dark-mode-vars