feat(clay-css): Menubar added `.menubar-vertical-expand-md.menubar-de…

…corated` and `.menubar-vertical-expand-lg.menubar-decorated` feat(clay-css): Menubar added Sass maps `$menubar-vertical-decorated-md-nav`, `$menubar-vertical-decorated-md-nav-item-nav`, `$menubar-vertical-decorated-md-nav-link`, `$menubar-vertical-decorated-md-nav-link-after-active`, `$menubar-vertical-decorated-lg-nav`, `$menubar-vertical-decorated-lg-nav-item-nav`, `$menubar-vertical-decorated-lg-nav-link`, `$menubar-vertical-decorated-lg-nav-link-after-active` feat(clay-css): Mixins added `mixins/_globals.scss` file and mixin `clay-css` for outputting any css property fixes #2822
liferay · Jan 16, 2020 · e46b52c · e46b52c
1 parent af0da9f
commit e46b52c
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 2 deletions.
diff --git a/packages/clay-css/src/scss/components/_menubar.scss b/packages/clay-css/src/scss/components/_menubar.scss
@@ -16,6 +16,26 @@
 	&.menubar-transparent {
 		@include clay-menubar-vertical-variant($menubar-vertical-transparent-md);
 	}
+
+	&.menubar-decorated {
+		@include media-breakpoint-up(md) {
+			.nav {
+				@include clay-css($menubar-vertical-decorated-md-nav);
+
+				> .nav-item .nav {
+					@include clay-css($menubar-vertical-decorated-md-nav-item-nav);
+				}
+			}
+
+			.nav-link {
+				@include clay-css($menubar-vertical-decorated-md-nav-link);
+
+				&.active::after {
+					@include clay-css($menubar-vertical-decorated-md-nav-link-after-active);
+				}
+			}
+		}
+	}
 }
 
 // Menubar Vertical LG
@@ -26,4 +46,24 @@
 	&.menubar-transparent {
 		@include clay-menubar-vertical-variant($menubar-vertical-transparent-lg);
 	}
-}
+
+	&.menubar-decorated {
+		@include media-breakpoint-up(lg) {
+			.nav {
+				@include clay-css($menubar-vertical-decorated-lg-nav);
+
+				> .nav-item .nav {
+					@include clay-css($menubar-vertical-decorated-lg-nav-item-nav);
+				}
+			}
+
+			.nav-link {
+				@include clay-css($menubar-vertical-decorated-lg-nav-link);
+
+				&.active::after {
+					@include clay-css($menubar-vertical-decorated-lg-nav-link-after-active);
+				}
+			}
+		}
+	}
+}
diff --git a/packages/clay-css/src/scss/variables/_menubar.scss b/packages/clay-css/src/scss/variables/_menubar.scss
@@ -16,6 +16,39 @@ $menubar-vertical-transparent-md: map-deep-merge((
 	bg-mobile: $gray-100,
 ), $menubar-vertical-transparent-md);
 
+$menubar-vertical-decorated-md-nav: () !default;
+$menubar-vertical-decorated-md-nav: map-deep-merge((
+	border-left-color: $gray-300,
+	border-left-style: solid,
+	border-left-width: 0.125rem,
+	display: block,
+	padding-left: 0.5rem,
+), $menubar-vertical-decorated-md-nav);
+
+$menubar-vertical-decorated-md-nav-item-nav: () !default;
+$menubar-vertical-decorated-md-nav-item-nav: map-deep-merge((
+	margin-bottom: 0.25rem,
+	margin-left: 1rem,
+	margin-top: 0.25rem,
+), $menubar-vertical-decorated-md-nav-item-nav);
+
+$menubar-vertical-decorated-md-nav-link: () !default;
+$menubar-vertical-decorated-md-nav-link: map-deep-merge((
+	padding-left: 1rem !important,
+), $menubar-vertical-decorated-md-nav-link);
+
+$menubar-vertical-decorated-md-nav-link-after-active: () !default;
+$menubar-vertical-decorated-md-nav-link-after-active: map-deep-merge((
+	background-color: $primary-l2,
+	bottom: 0,
+	content: '',
+	display: block,
+	left: math-sign(map-get($menubar-vertical-decorated-md-nav, padding-left)) - map-get($menubar-vertical-decorated-md-nav, border-left-width),
+	position: absolute,
+	top: 0,
+	width: map-get($menubar-vertical-decorated-md-nav, border-left-width),
+), $menubar-vertical-decorated-md-nav-link-after-active);
+
 // Menubar Vertical LG
 
 $menubar-vertical-expand-lg: () !default;
@@ -34,4 +67,16 @@ $menubar-vertical-transparent-lg: map-deep-merge((
 	link-hover-color: darken($gray-600, 15),
 	link-active-color: $gray-900,
 	bg-mobile: $gray-100,
-), $menubar-vertical-transparent-lg);
+), $menubar-vertical-transparent-lg);
+
+$menubar-vertical-decorated-lg-nav: () !default;
+$menubar-vertical-decorated-lg-nav: map-deep-merge($menubar-vertical-decorated-md-nav, $menubar-vertical-decorated-lg-nav);
+
+$menubar-vertical-decorated-lg-nav-item-nav: () !default;
+$menubar-vertical-decorated-lg-nav-item-nav: map-deep-merge($menubar-vertical-decorated-md-nav-item-nav, $menubar-vertical-decorated-lg-nav-item-nav);
+
+$menubar-vertical-decorated-lg-nav-link: () !default;
+$menubar-vertical-decorated-lg-nav-link: map-deep-merge($menubar-vertical-decorated-md-nav-link, $menubar-vertical-decorated-lg-nav-link);
+
+$menubar-vertical-decorated-lg-nav-link-after-active: () !default;
+$menubar-vertical-decorated-lg-nav-link-after-active: map-deep-merge($menubar-vertical-decorated-md-nav-link-after-active, $menubar-vertical-decorated-lg-nav-link-after-active);