@coreui/coreui 5.3.2 → 5.4.1

package/scss/_nav.scss

@@ -202,6 +202,60 @@
 }
 
 
+//
+// Enclosed
+//
+
+.nav-enclosed {
+  --#{$prefix}nav-enclosed-padding: #{$nav-enclosed-padding};
+  --#{$prefix}nav-enclosed-bg: #{$nav-enclosed-bg};
+  --#{$prefix}nav-enclosed-border-radius: #{$nav-enclosed-border-radius};
+  --#{$prefix}nav-enclosed-link-padding-x: #{$nav-enclosed-link-padding-x};
+  --#{$prefix}nav-enclosed-link-padding-y: #{$nav-enclosed-link-padding-y};
+  --#{$prefix}nav-enclosed-link-color: #{$nav-enclosed-link-color};
+  --#{$prefix}nav-enclosed-link-border-width: #{$nav-enclosed-link-border-width};
+  --#{$prefix}nav-enclosed-link-active-color: #{$nav-enclosed-link-active-color};
+  --#{$prefix}nav-enclosed-link-active-bg: #{$nav-enclosed-link-active-bg};
+  --#{$prefix}nav-enclosed-link-active-border-color: #{$nav-enclosed-link-active-border-color};
+  --#{$prefix}nav-enclosed-link-hover-box-shadow: #{$nav-enclosed-link-hover-box-shadow};
+  --#{$prefix}nav-enclosed-link-disabled-color: #{$nav-enclosed-link-disabled-color};
+
+  display: inline-flex;
+  padding: var(--#{$prefix}nav-enclosed-padding);
+  background-color: var(--#{$prefix}nav-enclosed-bg);
+  @include border-radius(var(--#{$prefix}nav-enclosed-border-radius));
+
+  .nav-link {
+    padding: calc(var(--#{$prefix}nav-enclosed-link-padding-y) - var(--#{$prefix}nav-enclosed-link-border-width)) calc(var(--#{$prefix}nav-enclosed-link-padding-x) - var(--#{$prefix}nav-enclosed-link-border-width)); // stylelint-disable-line function-disallowed-list
+    color: var(--#{$prefix}nav-enclosed-link-color);
+    border: var(--#{$prefix}nav-enclosed-link-border-width) solid transparent;
+    @include border-radius(calc(var(--#{$prefix}nav-enclosed-border-radius) - var(--#{$prefix}nav-enclosed-padding)));
+
+    &.disabled,
+    &:disabled {
+      color: var(--#{$prefix}nav-enclosed-link-disabled-color);
+    }
+  }
+
+  .nav-link.active,
+  .show > .nav-link {
+    color: var(--#{$prefix}nav-enclosed-link-active-color);
+    background-color: var(--#{$prefix}nav-enclosed-link-active-bg);
+    border: 1px solid var(--#{$prefix}nav-enclosed-link-active-border-color);
+
+    &:not(:focus-visible) {
+      box-shadow: var(--#{$prefix}nav-enclosed-link-hover-box-shadow);
+    }
+  }
+}
+
+// Enclosed pills
+
+.nav-enclosed-pills {
+  --#{$prefix}nav-enclosed-border-radius: #{$border-radius-pill};
+}
+
+
 //
 // Justified variants
 //

package/scss/_variables.scss

@@ -915,6 +915,29 @@ $btn-active-border-shade-amount:  25% !default;
 $btn-active-border-tint-amount:   10% !default;
 // scss-docs-end btn-variables
 
+// scss-docs-start btn-outline-variables
+$btn-outline-color: var(--#{$prefix}secondary-color) !default;
+$btn-outline-border-color: var(--#{$prefix}border-color) !default;
+$btn-outline-active-color: var(--#{$prefix}body-color) !default;
+$btn-outline-active-bg: var(--#{$prefix}tertiary-bg) !default;
+$btn-outline-active-border-color: var(--#{$prefix}border-color) !default;
+$btn-outline-disabled-color: var(--#{$prefix}secondary-color) !default;
+$btn-outline-disabled-border-color: var(--#{$prefix}border-color) !default;
+$btn-outline-hover-color: var(--#{$prefix}body-color) !default;
+$btn-outline-hover-bg: var(--#{$prefix}tertiary-bg) !default;
+$btn-outline-hover-border-color: var(--#{$prefix}border-color) !default;
+$btn-outline-focus-shadow-rgb: var(--#{$prefix}tertiary-bg-rgb) !default;
+// scss-docs-end btn-outline-variables
+
+// scss-docs-start btn-ghost-variables
+$btn-ghost-color: var(--#{$prefix}secondary-color) !default;
+$btn-ghost-active-color: var(--#{$prefix}body-color) !default;
+$btn-ghost-active-bg: var(--#{$prefix}tertiary-bg) !default;
+$btn-ghost-disabled-color: var(--#{$prefix}secondary-color) !default;
+$btn-ghost-hover-color: var(--#{$prefix}body-color) !default;
+$btn-ghost-hover-bg: var(--#{$prefix}tertiary-bg) !default;
+$btn-ghost-focus-shadow-rgb: var(--#{$prefix}tertiary-bg-rgb) !default;
+// scss-docs-end btn-ghost-variables
 
 // Forms
 
@@ -1258,6 +1281,19 @@ $nav-underline-border-link-padding-x:       .5rem !default;
 $nav-underline-border-link-color:           var(--#{$prefix}secondary-color) !default;
 $nav-underline-border-link-active-color:    var(--#{$prefix}primary) !default;
 $nav-underline-border-link-disabled-color:  var(--#{$prefix}tertiary-color) !default;
+
+$nav-enclosed-padding:                   .125rem !default;
+$nav-enclosed-bg:                        var(--#{$prefix}tertiary-bg) !default;
+$nav-enclosed-border-radius:             $border-radius-lg !default;
+$nav-enclosed-link-padding-y:            .375rem !default;
+$nav-enclosed-link-padding-x:            .875rem !default;
+$nav-enclosed-link-color:                var(--#{$prefix}body-color) !default;
+$nav-enclosed-link-border-width:         1px !default;
+$nav-enclosed-link-active-color:         var(--#{$prefix}body-color) !default;
+$nav-enclosed-link-active-bg:            var(--#{$prefix}body-bg) !default;
+$nav-enclosed-link-active-border-color:  var(--#{$prefix}border-color) !default;
+$nav-enclosed-link-hover-box-shadow:     var(--#{$prefix}box-shadow-sm) !default;
+$nav-enclosed-link-disabled-color:       var(--#{$prefix}secondary-color) !default;
 // scss-docs-end nav-variables
 
 

package/scss/mixins/_visually-hidden.scss

@@ -19,6 +19,11 @@
   &:not(caption) {
     position: absolute !important;
   }
+
+  // Fix to prevent overflowing children to become focusable
+  * {
+    overflow: hidden !important;
+  }
 }
 
 // Use to only display content when it's focused, or one of its child elements is focused