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

package/scss/_functions.scss

@@ -218,6 +218,65 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
 }
 // scss-docs-end color-functions
 
+// scss-docs-start button-color-functions
+@function btn-color($color, $shade, $tint) {
+  @return if(color-contrast($color) == $color-contrast-light, shade-color($color, $shade), tint-color($color, $tint));
+}
+
+@function btn-color-map($background, $border-color) {
+  @return (
+    "bg": $background,
+    "border-color": $border-color,
+    "color": color-contrast($background),
+    "hover-bg": btn-color($background, $btn-hover-bg-shade-amount, $btn-hover-bg-tint-amount),
+    "hover-border-color": btn-color($border-color, $btn-hover-border-shade-amount, $btn-hover-border-tint-amount),
+    "hover-color": color-contrast(btn-color($background, $btn-hover-bg-shade-amount, $btn-hover-bg-tint-amount)),
+    "active-bg": btn-color($background, $btn-active-bg-shade-amount, $btn-active-bg-tint-amount),
+    "active-border-color": btn-color($border-color, $btn-active-border-shade-amount, $btn-active-border-tint-amount),
+    "active-color": color-contrast(btn-color($border-color, $btn-active-border-shade-amount, $btn-active-border-tint-amount)),
+    "disabled-bg": $background,
+    "disabled-border-color": $border-color,
+    "disabled-color": color-contrast($background),
+    "shadow": rgba(mix($background, $border-color, 15%), .5)
+  );
+}
+
+@function btn-outline-color-map($background) {
+  @return (
+    "color": $background,
+    "hover-bg": btn-color($background, $btn-hover-bg-shade-amount, $btn-hover-bg-tint-amount),
+    "hover-border-color": btn-color($background, $btn-hover-border-shade-amount, $btn-hover-border-tint-amount),
+    "hover-color": color-contrast(btn-color($background, $btn-hover-bg-shade-amount, $btn-hover-bg-tint-amount)),
+    "active-bg": btn-color($background, $btn-active-bg-shade-amount, $btn-active-bg-tint-amount),
+    "active-border-color": btn-color($background, $btn-active-border-shade-amount, $btn-active-border-tint-amount),
+    "active-color": color-contrast(btn-color($background, $btn-active-border-shade-amount, $btn-active-border-tint-amount)),
+    "disabled-color": $background,
+    "shadow": rgba(mix($background, $background, 15%), .5)
+  );
+}
+// scss-docs-end button-color-functions
+
+// scss-docs-start table-color-functions
+@function table-color-map($background, $body-bg: $body-bg) {
+  $color: color-contrast(opaque($body-bg, $background));
+  $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
+  $active-bg: mix($color, $background, percentage($table-active-bg-factor));
+  $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
+
+  @return (
+    "bg": $background,
+    "color": $color,
+    "border-color": mix($color, $background, percentage($table-border-factor)),
+    "striped-bg": $striped-bg,
+    "striped-color": color-contrast($striped-bg),
+    "active-bg": $active-bg,
+    "active-color": color-contrast($active-bg),
+    "hover-bg": $hover-bg,
+    "hover-color": color-contrast($hover-bg)
+  );
+}
+// scss-docs-end table-color-functions
+
 // Return valid calc
 @function add($value1, $value2, $return-calc: true) {
   @if $value1 == null {

package/scss/_grid.scss

@@ -2,6 +2,14 @@
 //
 // Rows contain your columns.
 
+:root {
+  @each $name, $value in $grid-breakpoints {
+    --#{$prefix}breakpoint-#{$name}: #{$value};
+  }
+
+  --#{$prefix}mobile-breakpoint: #{$mobile-breakpoint};
+}
+
 @if $enable-grid-classes {
   .row {
     @include make-row();

package/scss/_header.scss

@@ -0,0 +1,195 @@
+.header {
+  // scss-docs-start header-css-vars
+  --#{$prefix}header-min-height: #{$header-min-height};
+  --#{$prefix}header-padding-x: #{$header-padding-x};
+  --#{$prefix}header-padding-y: #{$header-padding-y};
+  --#{$prefix}header-bg: #{$header-bg};
+  --#{$prefix}header-color: #{$header-color};
+  --#{$prefix}header-border-color: #{$header-border-color};
+  --#{$prefix}header-border: #{$header-border-width} solid var(--#{$prefix}header-border-color);
+  --#{$prefix}header-hover-color: #{$header-hover-color};
+  --#{$prefix}header-disabled-color: #{$header-disabled-color};
+  --#{$prefix}header-active-color: #{$header-active-color};
+  --#{$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};
+  --#{$prefix}header-toggler-padding-x: #{$header-toggler-padding-x};
+  --#{$prefix}header-toggler-padding-y: #{$header-toggler-padding-y};
+  --#{$prefix}header-toggler-bg: #{$header-toggler-bg};
+  --#{$prefix}header-toggler-color: #{$header-toggler-color};
+  --#{$prefix}header-toggler-border-radius: #{$header-toggler-border-radius};
+  --#{$prefix}header-toggler-hover-color: #{$header-toggler-hover-color};
+  --#{$prefix}header-toggler-icon-bg: #{escape-svg($header-toggler-icon-bg)};
+  --#{$prefix}header-toggler-hover-icon-bg: #{escape-svg($header-toggler-hover-icon-bg)};
+  --#{$prefix}header-nav-link-padding-x: #{$header-nav-link-padding-x};
+  --#{$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;
+  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: 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);
+
+  // 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: 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;
+    z-index: $zindex-fixed - 1;
+  }
+}
+
+.header-divider {
+  flex-basis: calc(100% + (2 * var(--#{$prefix}header-padding-x))); // stylelint-disable-line function-disallowed-list
+  height: 0;
+  margin: var(--#{$prefix}header-padding-y) calc(var(--#{$prefix}header-padding-x) * -1); // stylelint-disable-line function-disallowed-list
+  border-top: var(--#{$prefix}header-divider-border);
+}
+
+// Header brand
+//
+// Used for brand, project, or site names.
+
+.header-brand {
+  padding-top: var(--#{$prefix}header-brand-padding-y);
+  padding-bottom: var(--#{$prefix}header-brand-padding-y);
+  @include ltr-rtl("margin-right", $header-brand-margin-end);
+  @include font-size($header-brand-font-size);
+  color: var(--#{$prefix}header-brand-color);
+  text-decoration: if($link-decoration == none, null, none);
+  white-space: nowrap;
+
+  &:hover,
+  &:focus {
+    color: var(--#{$prefix}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: var(--#{$prefix}header-nav-link-padding-y) var(--#{$prefix}header-nav-link-padding-x);
+    color: var(--#{$prefix}header-color);
+
+    &:hover,
+    &:focus {
+      color: var(--#{$prefix}header-hover-color);
+    }
+
+    &.disabled {
+      color: var(--#{$prefix}header-disabled-color);
+    }
+  }
+
+  .show > .nav-link,
+  .nav-link.active {
+    color: var(--#{$prefix}header-active-color);
+  }
+
+  .dropdown-menu {
+    position: absolute;
+  }
+}
+
+
+// Header text
+//
+//
+
+.header-text {
+  padding-top: var(--#{$prefix}header-nav-link-padding-y);
+  padding-bottom: var(--#{$prefix}header-nav-link-padding-y);
+  color: var(--#{$prefix}header-color);
+
+  a {
+    color: var(--#{$prefix}header-active-color);
+
+    &:hover,
+    &:focus {
+      color: var(--#{$prefix}header-active-color);
+    }
+  }
+}
+
+.header-toggler {
+  padding: var(--#{$prefix}header-toggler-padding-y) var(--#{$prefix}header-toggler-padding-x);
+  @include font-size($header-toggler-font-size);
+  color: var(--#{$prefix}header-toggler-color);
+  background-color: var(--#{$prefix}header-toggler-bg);
+  border: 0; // remove default button style
+  @include border-radius(var(--#{$prefix}header-toggler-border-radius));
+
+  &:hover {
+    color: var(--#{$prefix}header-toggler-hover-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(--#{$prefix}header-toggler-icon-bg);
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: 100% 100%;
+
+  &:hover {
+    background-image: var(--#{$prefix}header-toggler-hover-icon-bg);
+  }
+}

package/scss/_helpers.scss

@@ -1,6 +1,8 @@
 @import "helpers/clearfix";
 @import "helpers/color-bg";
 @import "helpers/colored-links";
+@import "helpers/focus-ring";
+@import "helpers/icon-link";
 @import "helpers/ratio";
 @import "helpers/position";
 @import "helpers/stacks";

package/scss/_images.scss

@@ -13,8 +13,8 @@
 // Image thumbnails
 .img-thumbnail {
   padding: $thumbnail-padding;
-  background-color: $thumbnail-bg;
-  border: $thumbnail-border-width solid $thumbnail-border-color;
+  background-color: var(--#{$prefix}thumbnail-bg, $thumbnail-bg);
+  border: $thumbnail-border-width solid var(--#{$prefix}thumbnail-border-color, $thumbnail-border-color);
   @include border-radius($thumbnail-border-radius);
   @include box-shadow($thumbnail-box-shadow);
 
@@ -38,5 +38,5 @@
 
 .figure-caption {
   @include font-size($figure-caption-font-size);
-  color: $figure-caption-color;
+  color: var(--#{$prefix}figure-caption-color, $figure-caption-color);
 }

package/scss/_list-group.scss

@@ -27,7 +27,7 @@
   flex-direction: column;
 
   // No need to set list-style: none; since .list-group-item is block level
-  padding-left: 0; // reset padding because ul and ol
+  @include ltr-rtl("padding-left", 0); // reset padding because ul and ol
   margin-bottom: 0;
   @include border-radius(var(--#{$prefix}list-group-border-radius));
 }
@@ -143,11 +143,11 @@
 
         + .list-group-item {
           border-top-width: var(--#{$prefix}list-group-border-width);
-          border-left-width: 0;
+          @include ltr-rtl("border-left-width", 0);
 
           &.active {
-            margin-left: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
-            border-left-width: var(--#{$prefix}list-group-border-width);
+            @include ltr-rtl("margin-left", calc(-1 * var(--#{$prefix}list-group-border-width)));
+            @include ltr-rtl("border-left-width", var(--#{$prefix}list-group-border-width));
           }
         }
       }
@@ -182,23 +182,16 @@
 
 @each $state in map-keys($theme-colors) {
   .list-group-item-#{$state} {
-    --#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text);
+    --#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
     --#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
     --#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}-border-subtle);
-
-    &.list-group-item-action {
-      &:hover,
-      &:focus {
-        --#{$prefix}list-group-action-hover-color: var(--#{$prefix}emphasis-color);
-        --#{$prefix}list-group-action-hover-bg: var(--#{$prefix}#{$state}-border-subtle);
-      }
-
-      &:active {
-        --#{$prefix}list-group-active-color: var(--#{$prefix}emphasis-color);
-        --#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text);
-        --#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text);
-      }
-    }
+    --#{$prefix}list-group-action-hover-color: var(--#{$prefix}emphasis-color);
+    --#{$prefix}list-group-action-hover-bg: var(--#{$prefix}#{$state}-border-subtle);
+    --#{$prefix}list-group-action-active-color: var(--#{$prefix}emphasis-color);
+    --#{$prefix}list-group-action-active-bg: var(--#{$prefix}#{$state}-border-subtle);
+    --#{$prefix}list-group-active-color: var(--#{$prefix}#{$state}-bg-subtle);
+    --#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text-emphasis);
+    --#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text-emphasis);
   }
 }
 // scss-docs-end list-group-modifiers

package/scss/_maps.scss

@@ -6,21 +6,20 @@
 $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
 // scss-docs-end theme-colors-rgb
 
-// scss-docs-start theme-colors-dark-rgb
-$theme-colors-dark-rgb: map-loop($theme-colors-dark, to-rgb, "$value") !default;
-// scss-docs-end theme-colors-dark-rgb
-
+// scss-docs-start theme-text-map
 $theme-colors-text: (
-  "primary": $primary-text,
-  "secondary": $secondary-text,
-  "success": $success-text,
-  "info": $info-text,
-  "warning": $warning-text,
-  "danger": $danger-text,
-  "light": $light-text,
-  "dark": $dark-text,
+  "primary": $primary-text-emphasis,
+  "secondary": $secondary-text-emphasis,
+  "success": $success-text-emphasis,
+  "info": $info-text-emphasis,
+  "warning": $warning-text-emphasis,
+  "danger": $danger-text-emphasis,
+  "light": $light-text-emphasis,
+  "dark": $dark-text-emphasis,
 ) !default;
+// scss-docs-end theme-text-map
 
+// scss-docs-start theme-bg-subtle-map
 $theme-colors-bg-subtle: (
   "primary": $primary-bg-subtle,
   "secondary": $secondary-bg-subtle,
@@ -31,7 +30,9 @@ $theme-colors-bg-subtle: (
   "light": $light-bg-subtle,
   "dark": $dark-bg-subtle,
 ) !default;
+// scss-docs-end theme-bg-subtle-map
 
+// scss-docs-start theme-border-subtle-map
 $theme-colors-border-subtle: (
   "primary": $primary-border-subtle,
   "secondary": $secondary-border-subtle,
@@ -42,6 +43,57 @@ $theme-colors-border-subtle: (
   "light": $light-border-subtle,
   "dark": $dark-border-subtle,
 ) !default;
+// scss-docs-end theme-border-subtle-map
+
+$theme-colors-rgb-dark: null !default;
+$theme-colors-text-dark: null !default;
+$theme-colors-bg-subtle-dark: null !default;
+$theme-colors-border-subtle-dark: null !default;
+
+@if $enable-dark-mode {
+  // scss-docs-start theme-colors-rgb-dark
+  $theme-colors-rgb-dark: map-loop($theme-colors-dark, to-rgb, "$value") !default;
+  // scss-docs-end theme-colors-rgb-dark
+
+  // scss-docs-start theme-text-dark-map
+  $theme-colors-text-dark: (
+    "primary": $primary-text-emphasis-dark,
+    "secondary": $secondary-text-emphasis-dark,
+    "success": $success-text-emphasis-dark,
+    "info": $info-text-emphasis-dark,
+    "warning": $warning-text-emphasis-dark,
+    "danger": $danger-text-emphasis-dark,
+    "light": $light-text-emphasis-dark,
+    "dark": $dark-text-emphasis-dark,
+  ) !default;
+  // scss-docs-end theme-text-dark-map
+
+  // scss-docs-start theme-bg-subtle-dark-map
+  $theme-colors-bg-subtle-dark: (
+    "primary": $primary-bg-subtle-dark,
+    "secondary": $secondary-bg-subtle-dark,
+    "success": $success-bg-subtle-dark,
+    "info": $info-bg-subtle-dark,
+    "warning": $warning-bg-subtle-dark,
+    "danger": $danger-bg-subtle-dark,
+    "light": $light-bg-subtle-dark,
+    "dark": $dark-bg-subtle-dark,
+  ) !default;
+  // scss-docs-end theme-bg-subtle-dark-map
+
+  // scss-docs-start theme-border-subtle-dark-map
+  $theme-colors-border-subtle-dark: (
+    "primary": $primary-border-subtle-dark,
+    "secondary": $secondary-border-subtle-dark,
+    "success": $success-border-subtle-dark,
+    "info": $info-border-subtle-dark,
+    "warning": $warning-border-subtle-dark,
+    "danger": $danger-border-subtle-dark,
+    "light": $light-border-subtle-dark,
+    "dark": $dark-border-subtle-dark,
+  ) !default;
+  // scss-docs-end theme-border-subtle-dark-map
+}
 
 // Utilities maps
 //
@@ -64,14 +116,14 @@ $utilities-text: map-merge(
 $utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
 
 $utilities-text-emphasis-colors: (
-  "primary-emphasis": var(--#{$prefix}primary-text),
-  "secondary-emphasis": var(--#{$prefix}secondary-text),
-  "success-emphasis": var(--#{$prefix}success-text),
-  "info-emphasis": var(--#{$prefix}info-text),
-  "warning-emphasis": var(--#{$prefix}warning-text),
-  "danger-emphasis": var(--#{$prefix}danger-text),
-  "light-emphasis": var(--#{$prefix}light-text),
-  "dark-emphasis": var(--#{$prefix}dark-text)
+  "primary-emphasis": var(--#{$prefix}primary-text-emphasis),
+  "secondary-emphasis": var(--#{$prefix}secondary-text-emphasis),
+  "success-emphasis": var(--#{$prefix}success-text-emphasis),
+  "info-emphasis": var(--#{$prefix}info-text-emphasis),
+  "warning-emphasis": var(--#{$prefix}warning-text-emphasis),
+  "danger-emphasis": var(--#{$prefix}danger-text-emphasis),
+  "light-emphasis": var(--#{$prefix}light-text-emphasis),
+  "dark-emphasis": var(--#{$prefix}dark-text-emphasis)
 ) !default;
 // scss-docs-end utilities-text-colors
 
@@ -96,13 +148,13 @@ $utilities-bg-subtle: (
   "light-subtle": var(--#{$prefix}light-bg-subtle),
   "dark-subtle": var(--#{$prefix}dark-bg-subtle)
 ) !default;
-// $utilities-bg-subtle-colors: map-loop($utilities-bg-subtle, rgba-css-var, "$key", "bg") !default;
 // scss-docs-end utilities-bg-colors
 
 // scss-docs-start utilities-border-colors
 $utilities-border: map-merge(
   $utilities-colors,
   (
+    "black": to-rgb($black),
     "white": to-rgb($white)
   )
 ) !default;
@@ -120,6 +172,8 @@ $utilities-border-subtle: (
 ) !default;
 // scss-docs-end utilities-border-colors
 
+$utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$key", "link-underline") !default;
+
 $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
 
 $gutters: $spacers !default;

package/scss/_mixins.scss

@@ -2,6 +2,9 @@
 //
 // Used in conjunction with global variables to enable certain theme features.
 
+// LTR & RTL
+@import "mixins/ltr-rtl";
+
 // Vendor
 @import "vendor/rfs";
 
@@ -22,6 +25,8 @@
 @import "mixins/utilities";
 
 // Components
+@import "mixins/alert";
+@import "mixins/avatar";
 @import "mixins/backdrop";
 @import "mixins/buttons";
 @import "mixins/caret";
@@ -29,6 +34,7 @@
 @import "mixins/lists";
 @import "mixins/forms";
 @import "mixins/table-variants";
+@import "mixins/icon";
 
 // Skins
 @import "mixins/border-radius";
@@ -40,7 +46,3 @@
 @import "mixins/clearfix";
 @import "mixins/container";
 @import "mixins/grid";
-
-// CoreUI Components
-@import "mixins/avatar";
-@import "mixins/icon";

package/scss/_modal.scss

@@ -34,7 +34,7 @@
 
   position: fixed;
   top: 0;
-  left: 0;
+  @include ltr-rtl("left", 0);
   z-index: var(--#{$prefix}modal-zindex);
   display: none;
   width: 100%;
@@ -133,7 +133,7 @@
 
   .btn-close {
     padding: calc(var(--#{$prefix}modal-header-padding-y) * .5) calc(var(--#{$prefix}modal-header-padding-x) * .5);
-    margin: calc(-.5 * var(--#{$prefix}modal-header-padding-y)) calc(-.5 * var(--#{$prefix}modal-header-padding-x)) calc(-.5 * var(--#{$prefix}modal-header-padding-y)) auto;
+    @include ltr-rtl-value-only("margin", calc(-.5 * var(--#{$prefix}modal-header-padding-y)) calc(-.5 * var(--#{$prefix}modal-header-padding-x)) calc(-.5 * var(--#{$prefix}modal-header-padding-y)) auto, calc(-.5 * var(--#{$prefix}modal-header-padding-y)) auto calc(-.5 * var(--#{$prefix}modal-header-padding-y)) calc(-.5 * var(--#{$prefix}modal-header-padding-x)));
   }
 }
 

package/scss/_nav.scss

@@ -16,7 +16,7 @@
 
   display: flex;
   flex-wrap: wrap;
-  padding-left: 0;
+  @include ltr-rtl("padding-left", 0);
   margin-bottom: 0;
   list-style: none;
 }
@@ -38,6 +38,11 @@
     text-decoration: if($link-hover-decoration == underline, none, null);
   }
 
+  &:focus-visible {
+    outline: 0;
+    box-shadow: $nav-link-focus-box-shadow;
+  }
+
   // Disabled state lightens text
   &.disabled {
     color: var(--#{$prefix}nav-link-disabled-color);
@@ -65,6 +70,7 @@
 
   .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));
 
@@ -111,6 +117,8 @@
   // scss-docs-end nav-pills-css-vars
 
   .nav-link {
+    background: none;
+    border: 0;
     @include border-radius(var(--#{$prefix}nav-pills-border-radius));
 
     &:disabled {
@@ -128,44 +136,6 @@
 }
 
 
-//
-// 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-item + .nav-item,
-  // .nav-link + .nav-link {
-  //   margin-left: $nav-link-padding-x;
-  // }
-
-  .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
 //