@coreui/coreui 5.3.2 → 5.4.0

package/scss/_buttons.scss

@@ -138,6 +138,38 @@
 // Alternate buttons
 //
 
+.btn-ghost {
+  // scss-docs-start btn-ghost-css-vars
+  --#{$prefix}btn-color: #{$btn-ghost-color};
+  --#{$prefix}btn-border-color: #{transparent};
+  --#{$prefix}btn-active-color: #{$btn-ghost-active-color};
+  --#{$prefix}btn-active-bg: #{$btn-ghost-active-bg};
+  --#{$prefix}btn-active-border-color: #{$btn-ghost-active-bg};
+  --#{$prefix}btn-disabled-color: #{$btn-ghost-disabled-color};
+  --#{$prefix}btn-disabled-border-color: #{transparent};
+  --#{$prefix}btn-hover-color: #{$btn-ghost-hover-color};
+  --#{$prefix}btn-hover-bg: #{$btn-ghost-hover-bg};
+  --#{$prefix}btn-hover-border-color: #{$btn-ghost-hover-bg};
+  --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(#{$btn-outline-focus-shadow-rgb}, .5);
+  // scss-docs-end btn-ghost-css-vars
+}
+
+.btn-outline {
+  // scss-docs-start btn-outline-css-vars
+  --#{$prefix}btn-color: #{$btn-outline-color};
+  --#{$prefix}btn-border-color: #{$btn-outline-border-color};
+  --#{$prefix}btn-active-color: #{$btn-outline-active-color};
+  --#{$prefix}btn-active-bg: #{$btn-outline-active-bg};
+  --#{$prefix}btn-active-border-color: #{$btn-outline-active-border-color};
+  --#{$prefix}btn-disabled-color: #{$btn-outline-disabled-color};
+  --#{$prefix}btn-disabled-border-color: #{$btn-outline-disabled-border-color};
+  --#{$prefix}btn-hover-color: #{$btn-outline-hover-color};
+  --#{$prefix}btn-hover-bg: #{$btn-outline-hover-bg};
+  --#{$prefix}btn-hover-border-color: #{$btn-outline-hover-border-color};
+  --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(#{$btn-ghost-focus-shadow-rgb}, .5);
+  // scss-docs-end btn-outline-css-vars
+}
+
 .btn-transparent {
   --#{$prefix}btn-active-border-color: transparent;
   --#{$prefix}btn-disabled-border-color: transparent;

package/scss/_card.scss

@@ -211,13 +211,13 @@
         &:not(:last-child) {
           @include border-end-radius(0);
 
-          .card-img-top,
-          .card-header {
+          > .card-img-top,
+          > .card-header {
             // stylelint-disable-next-line property-disallowed-list
             border-top-right-radius: 0;
           }
-          .card-img-bottom,
-          .card-footer {
+          > .card-img-bottom,
+          > .card-footer {
             // stylelint-disable-next-line property-disallowed-list
             border-bottom-right-radius: 0;
           }
@@ -226,13 +226,13 @@
         &:not(:first-child) {
           @include border-start-radius(0);
 
-          .card-img-top,
-          .card-header {
+          > .card-img-top,
+          > .card-header {
             // stylelint-disable-next-line property-disallowed-list
             border-top-left-radius: 0;
           }
-          .card-img-bottom,
-          .card-footer {
+          > .card-img-bottom,
+          > card-footer {
             // stylelint-disable-next-line property-disallowed-list
             border-bottom-left-radius: 0;
           }

package/scss/_nav.scss

@@ -202,6 +202,59 @@
 }
 
 
+//
+// 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 {
+      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