Merge pull request #5690 from pat270/LPS-198267

feat(@clayui/css): Sidebar adds sidebar-sm
liferay · Oct 13, 2023 · 10eb0df · 10eb0df
2 parents 7636c27 + 43ec7ec
commit 10eb0df
Show file tree

Hide file tree

Showing 8 changed files with 577 additions and 2 deletions.
diff --git a/clayui.com/content/docs/components/markup-sidebar.md b/clayui.com/content/docs/components/markup-sidebar.md
diff --git a/packages/clay-css/src/scss/cadmin/components/_panels.scss b/packages/clay-css/src/scss/cadmin/components/_panels.scss
@@ -278,7 +278,7 @@
 
 // Panel Group Sizes
 
-.panel-group-sm {
+%clay-panel-group-sm {
 	.panel {
 		@include clay-panel-variant($cadmin-panel-group-sm);
 	}
@@ -288,6 +288,10 @@
 	}
 }
 
+.panel-group-sm {
+	@extend %clay-panel-group-sm;
+}
+
 // Panel Variants
 
 .panel-secondary {

diff --git a/packages/clay-css/src/scss/cadmin/variables/_buttons.scss b/packages/clay-css/src/scss/cadmin/variables/_buttons.scss
@@ -201,6 +201,7 @@ $cadmin-btn-sizes: map-deep-merge(
 	(
 		btn-xs: (
 			font-size: 0.75rem,
+			line-height: 1.5,
 			padding-bottom: 0.125rem,
 			padding-left: 0.5rem,
 			padding-right: 0.5rem,
@@ -218,6 +219,9 @@ $cadmin-btn-sizes: map-deep-merge(
 			btn-section: (
 				font-size: 0.375rem,
 			),
+			lexicon-icon: (
+				font-size: inherit,
+			),
 		),
 		btn-lg: $cadmin-btn-lg,
 		btn-sm: $cadmin-btn-sm,

diff --git a/packages/clay-css/src/scss/cadmin/variables/_sidebar.scss b/packages/clay-css/src/scss/cadmin/variables/_sidebar.scss
@@ -129,6 +129,43 @@ $cadmin-sidebar: map-deep-merge(
 	$cadmin-sidebar
 );
 
+// Sidebar Sm
+
+$cadmin-sidebar-sm: () !default;
+$cadmin-sidebar-sm: map-deep-merge(
+	(
+		font-size: 0.875rem,
+		panel-group: (
+			extend: '%clay-panel-group-sm',
+		),
+		btn: (
+			extend: '%clay-btn-sm',
+			'&.btn-xs': (
+				extend: '%clay-btn-xs',
+			),
+			'&.btn-monospaced': (
+				extend: '%clay-btn-monospaced-sm',
+			),
+			'&.btn-monospaced.btn-xs': (
+				extend: '%clay-btn-monospaced-xs',
+			),
+		),
+		form-control: (
+			extend: '%clay-form-control-sm',
+		),
+		form-control-select: (
+			extend: '%clay-select-form-control-sm',
+		),
+		form-control-tag-group: (
+			extend: '%clay-form-control-tag-group-sm',
+		),
+		input-group: (
+			extend: '%clay-input-group-sm',
+		),
+	),
+	$cadmin-sidebar-sm
+);
+
 // Sidebar Light
 
 $cadmin-sidebar-light-navigation-bar: () !default;
@@ -260,6 +297,7 @@ $cadmin-sidebar-dark: map-deep-merge(
 $cadmin-sidebar-palette: () !default;
 $cadmin-sidebar-palette: map-deep-merge(
 	(
+		sidebar-sm: $cadmin-sidebar-sm,
 		sidebar-light: $cadmin-sidebar-light,
 		sidebar-dark: $cadmin-sidebar-dark,
 		sidebar-dark-l2: (

diff --git a/packages/clay-css/src/scss/components/_panels.scss b/packages/clay-css/src/scss/components/_panels.scss
@@ -319,7 +319,7 @@
 
 // Panel Group Sizes
 
-.panel-group-sm {
+%clay-panel-group-sm {
 	.panel {
 		@include clay-panel-variant($panel-group-sm);
 	}
@@ -329,6 +329,10 @@
 	}
 }
 
+.panel-group-sm {
+	@extend %clay-panel-group-sm;
+}
+
 // Panel Variants
 
 .panel-secondary {

diff --git a/packages/clay-css/src/scss/mixins/_sidebar.scss b/packages/clay-css/src/scss/mixins/_sidebar.scss
@@ -384,6 +384,31 @@
 					map-get($map, component-navigation-bar)
 				);
 			}
+
+			.panel-group {
+				@include clay-map-to-css(map-get($map, panel-group));
+			}
+
+			.btn {
+				@include clay-map-to-css(map-get($map, btn));
+			}
+
+			.form-control {
+				@include clay-map-to-css(map-get($map, form-control));
+			}
+
+			select.form-control,
+			.form-control-select {
+				@include clay-map-to-css(map-get($map, form-control-select));
+			}
+
+			.form-control-tag-group {
+				@include clay-map-to-css(map-get($map, form-control-tag-group));
+			}
+
+			.input-group {
+				@include clay-map-to-css(map-get($map, input-group));
+			}
 		}
 	}
 }
diff --git a/packages/clay-css/src/scss/variables/_buttons.scss b/packages/clay-css/src/scss/variables/_buttons.scss
@@ -198,6 +198,7 @@ $btn-sizes: map-deep-merge(
 	(
 		btn-xs: (
 			font-size: 0.75rem,
+			line-height: 1.5,
 			padding-bottom: 0.125rem,
 			padding-left: 0.5rem,
 			padding-right: 0.5rem,
@@ -215,6 +216,9 @@ $btn-sizes: map-deep-merge(
 			btn-section: (
 				font-size: 0.375rem,
 			),
+			lexicon-icon: (
+				font-size: inherit,
+			),
 		),
 		btn-lg: $btn-lg,
 		btn-sm: $btn-sm,

diff --git a/packages/clay-css/src/scss/variables/_sidebar.scss b/packages/clay-css/src/scss/variables/_sidebar.scss
@@ -179,6 +179,41 @@ $sidebar-light-navigation-bar: map-deep-merge(
 	$sidebar-light-navigation-bar
 );
 
+$sidebar-sm: () !default;
+$sidebar-sm: map-deep-merge(
+	(
+		font-size: 0.875rem,
+		panel-group: (
+			extend: '%clay-panel-group-sm',
+		),
+		btn: (
+			extend: '%clay-btn-sm',
+			'&.btn-xs': (
+				extend: '%clay-btn-xs',
+			),
+			'&.btn-monospaced': (
+				extend: '%clay-btn-monospaced-sm',
+			),
+			'&.btn-monospaced.btn-xs': (
+				extend: '%clay-btn-monospaced-xs',
+			),
+		),
+		form-control: (
+			extend: '%clay-form-control-sm',
+		),
+		form-control-select: (
+			extend: '%clay-select-form-control-sm',
+		),
+		form-control-tag-group: (
+			extend: '%clay-form-control-tag-group-sm',
+		),
+		input-group: (
+			extend: '%clay-input-group-sm',
+		),
+	),
+	$sidebar-sm
+);
+
 $sidebar-light: () !default;
 $sidebar-light: map-deep-merge(
 	(
@@ -266,6 +301,7 @@ $sidebar-dark: map-deep-merge(
 $sidebar-palette: () !default;
 $sidebar-palette: map-deep-merge(
 	(
+		sidebar-sm: $sidebar-sm,
 		sidebar-light: $sidebar-light,
 		sidebar-dark: $sidebar-dark,
 		sidebar-dark-l2: (