feat(Nav): add the enclosed variant

mrholek · mrholek · commit f5a1772be5e8 · 2025-05-10T16:43:57.000+02:00
diff --git a/scss/_nav.scss b/scss/_nav.scss
@@ -202,6 +202,55 @@
 }
 
 
+//
+// 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-color: #{$nav-enclosed-link-color};
+  --#{$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 {
+    color: var(--#{$prefix}nav-enclosed-link-color);
+    border: 1px 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
 //
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1281,6 +1281,16 @@ $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:                   .25rem !default;
+$nav-enclosed-bg:                        var(--#{$prefix}tertiary-bg) !default;
+$nav-enclosed-border-radius:             $border-radius-lg !default;
+$nav-enclosed-link-color:                var(--#{$prefix}body-color) !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
 
 
