8000 feat(Nav): add the enclosed variant · coreui/coreui@f5a1772 · GitHub
[go: up one dir, main page]
Skip to content

Commit f5a1772

Browse files
mrholekmrholek
committed
feat(Nav): add the enclosed variant
1 parent b87761e commit f5a1772

File tree

2 files changed

+59
-0
lines changed

2 files changed

+59
-0
lines changed

‎scss/_nav.scss

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -202,6 +202,55 @@
202202
}
203203

204204

205+
//
206+
// Enclosed
207+
//
208+
209+
.nav-enclosed {
210+
--#{$prefix}nav-enclosed-padding: #{$nav-enclosed-padding};
211+
--#{$prefix}nav-enclosed-bg: #{$nav-enclosed-bg};
212+
--#{$prefix}nav-enclosed-border-radius: #{$nav-enclosed-border-radius};
213+
--#{$prefix}nav-enclosed-link-color: #{$nav-enclosed-link-color};
214+
--#{$prefix}nav-enclosed-link-active-color: #{$nav-enclosed-link-active-color};
215+
--#{$prefix}nav-enclosed-link-active-bg: #{$nav-enclosed-link-active-bg};
216+
--#{$prefix}nav-enclosed-link-active-border-color: #{$nav-enclosed-link-active-border-color};
217+
--#{$prefix}nav-enclosed-link-hover-box-shadow: #{$nav-enclosed-link-hover-box-shadow};
218+
--#{$prefix}nav-enclosed-link-disabled-color: #{$nav-enclosed-link-disabled-color};
219+
220+
display: inline-flex;
221+
padding: var(--#{$prefix}nav-enclosed-padding);
222+
background-color: var(--#{$prefix}nav-enclosed-bg);
223+
@include border-radius(var(--#{$prefix}nav-enclosed-border-radius));
224+
225+
.nav-link {
226+
color: var(--#{$prefix}nav-enclosed-link-color);
227+
border: 1px solid transparent;
228+
@include border-radius(calc(var(--#{$prefix}nav-enclosed-border-radius) - var(--#{$prefix}nav-enclosed-padding)));
229+
230+
&.disabled {
231+
color: var(--#{$prefix}nav-enclosed-link-disabled-color);
232+
}
233+
}
234+
235+
.nav-link.active,
236+
.show > .nav-link {
237+
color: var(--#{$prefix}nav-enclosed-link-active-color);
238+
background-color: var(--#{$prefix}nav-enclosed-link-active-bg);
239+
border: 1px solid var(--#{$prefix}nav-enclosed-link-active-border-color);
240+
241+
&:not(:focus-visible) {
242+
box-shadow: var(--#{$prefix}nav-enclosed-link-hover-box-shadow);
243+
}
244+
}
245+
}
246+
247+
// Enclosed pills
248+
249+
.nav-enclosed-pills {
250+
--#{$prefix}nav-enclosed-border-radius: #{$border-radius-pill};
251+
}
252+
253+
205254
//
206255
// Justified variants
207256
//

‎scss/_variables.scss

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1281,6 +1281,16 @@ $nav-underline-border-link-padding-x: .5rem !default;
12811281
$nav-underline-border-link-color: var(--#{$prefix}secondary-color) !default;
12821282
$nav-underline-border-link-active-color: var(--#{$prefix}primary) !default;
12831283
$nav-underline-border-link-disabled-color: var(--#{$prefix}tertiary-color) !default;
1284+
1285+
$nav-enclosed-padding: .25rem !default;
1286+
$nav-enclosed-bg: var(--#{$prefix}tertiary-bg) !default;
1287+
$nav-enclosed-border-radius: $border-radius-lg !default;
1288+
$nav-enclosed-link-color: var(--#{$prefix}body-color) !default;
1289+
$nav-enclosed-link-active-color: var(--#{$prefix}body-color) !default;
1290+
$nav-enclosed-link-active-bg: var(--#{$prefix}body-bg) !default;
1291+
$nav-enclosed-link-active-border-color: var(--#{$prefix}border-color) !default;
1292+
$nav-enclosed-link-hover-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
1293+
$nav-enclosed-link-disabled-color: var(--#{$prefix}secondary-color) !default;
12841294
// scss-docs-end nav-variables
12851295

12861296

0 commit comments

Comments
 (0)
0