@clayui/css 3.158.0 → 3.160.0

package/src/scss/variables/_sidebar.scss

@@ -10,6 +10,7 @@ $sidebar-header-component-title: map-deep-merge(
 	(
 		font-size: 1.5rem,
 		overflow-wrap: break-word,
+
 		href: (
 			color: $gray-900,
 		),
@@ -24,7 +25,7 @@ $sidebar-header-component-subtitle: map-deep-merge(
 	(
 		font-size: 1.125rem,
 		font-weight: $font-weight-semi-bold,
-		margin-bottom: 0,
+		margin-bottom: 0rem,
 		overflow-wrap: break-word,
 	),
 	$sidebar-header-component-subtitle
@@ -65,7 +66,7 @@ $sidebar-list-group-border-color: $gray-300 !default;
 $sidebar-list-group-font-size: 0.875rem !default; // 14px
 $sidebar-list-group-type: list-group-flush !default;
 
-$sidebar-list-group-item-padding: 0 !default;
+$sidebar-list-group-item-padding: 0rem !default;
 
 $sidebar-list-group-autofit-col-padding-x: 0.5rem !default; // 8px
 $sidebar-list-group-autofit-col-padding-y: 1rem !default; // 16px
@@ -81,56 +82,72 @@ $sidebar: map-deep-merge(
 	(
 		height: 100%,
 		overflow: auto,
+
 		-webkit-overflow-scrolling: touch,
+
 		sidebar-header: (
 			padding-bottom: $sidebar-padding-bottom,
 			padding-left: $sidebar-padding-left,
 			padding-right: 1rem,
 			padding-top: $sidebar-padding-top,
+
 			component-title: $sidebar-header-component-title,
+
 			component-subtitle: $sidebar-header-component-subtitle,
+
 			autofit-row: (
 				margin-left: -0.25rem,
 				margin-right: -0.25rem,
 				width: auto,
+
 				autofit-col: (
 					padding-left: 0.25rem,
 					padding-right: 0.25rem,
 				),
 			),
 		),
+
 		sidebar-footer: (
 			padding-bottom: $sidebar-padding-bottom,
 			padding-left: $sidebar-padding-left,
 			padding-right: $sidebar-padding-right,
 			padding-top: $sidebar-padding-top,
 		),
+
 		sidebar-body: (
 			overflow: auto,
+
 			-webkit-overflow-scrolling: touch,
+
 			padding-bottom: $sidebar-padding-bottom,
 			padding-left: $sidebar-padding-left,
 			padding-right: $sidebar-padding-right,
 			padding-top: $sidebar-padding-top,
 		),
+
 		sidebar-list-group: (
 			display: flex,
 			flex-direction: column,
 			font-size: $sidebar-list-group-font-size,
-			margin-bottom: 0,
-			padding-left: 0,
+			margin-bottom: 0rem,
+			padding-left: 0rem,
+
 			list-group-item: (
 				background-color: $sidebar-list-group-bg,
 				border-color: $sidebar-list-group-border-color,
 				padding: $sidebar-list-group-item-padding,
 			),
+
 			sticker: $sidebar-list-group-sticker-size,
 		),
+
 		sidebar-panel: (
 			margin-bottom: $sidebar-panel-margin-bottom,
 			position: relative,
 		),
+
 		sidebar-dt: $sidebar-dt,
+
 		sidebar-dd: $sidebar-dd,
 	),
 	$sidebar
@@ -143,6 +160,7 @@ $sidebar-light-navigation-bar: map-deep-merge(
 	(
 		background-color: $light,
 		border-color: $gray-300,
+
 		navbar-nav: (
 			nav-link: (
 				color:
@@ -159,6 +177,7 @@ $sidebar-light-navigation-bar: map-deep-merge(
 							rgba($black, 0.7)
 						),
 				),
+
 				active: (
 					color:
 						if(
@@ -167,6 +186,7 @@ $sidebar-light-navigation-bar: map-deep-merge(
 							rgba($black, 0.9)
 						),
 				),
+
 				disabled: (
 					color:
 						if(
@@ -177,6 +197,7 @@ $sidebar-light-navigation-bar: map-deep-merge(
 				),
 			),
 		),
+
 		media-breakpoint-down: (),
 		media-breakpoint-up: (),
 	),
@@ -187,30 +208,39 @@ $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',
 		),
@@ -225,50 +255,61 @@ $sidebar-light: map-deep-merge(
 		border-color: $gray-300,
 		border-left-width: 1px,
 		color: $gray-900,
+
 		close: (
 			hover: (
 				background-color: $secondary,
 				color: $white,
 			),
+
 			active: (
 				background-color: $secondary,
 				color: $white,
 			),
+
 			disabled: (
 				background-color: transparent,
 				box-shadow: none,
 				color: $secondary,
 				cursor: $disabled-cursor,
 				opacity: $component-disabled-opacity,
+
 				active: (
 					pointer-events: none,
 				),
 			),
 		),
+
 		sidebar-header: (
 			background-color: inherit,
 			border: 0px solid $gray-300,
 		),
+
 		sidebar-footer: (
 			background-color: inherit,
 			border: 0px solid $gray-300,
 		),
+
 		sidebar-dd: (
 			href: (
 				color: $gray-900,
 			),
 		),
+
 		sidebar-panel: (
 			background-color: $gray-200,
 		),
+
 		sidebar-list-group: (
 			list-group-title: (
 				font-size: 1rem,
+
 				href: (
 					color: $gray-900,
 				),
 			),
 		),
+
 		component-navigation-bar: $sidebar-light-navigation-bar,
 	),
 	$sidebar-light
@@ -281,45 +322,57 @@ $sidebar-dark: map-deep-merge(
 	(
 		background-color: $dark,
 		color: $white,
+
 		sidebar-header: (
 			component-title: (
 				color: inherit,
+
 				href: (
 					color: inherit,
 				),
 			),
+
 			component-subtitle: (
 				color: inherit,
+
 				href: (
 					color: inherit,
 				),
 			),
 		),
+
 		close: (
 			color: $secondary-l1,
+
 			hover: (
 				color: $white,
 			),
 		),
+
 		nav-nested: (
 			nav-link: (
 				border-radius: $border-radius,
 				color: $secondary-l1,
 				transition: box-shadow 0.15s ease-in-out,
+
 				hover: (
 					color: $white,
 				),
+
 				focus: (
 					box-shadow: $component-focus-box-shadow,
 					outline: 0,
 				),
+
 				active: (
 					color: $white,
 				),
+
 				disabled: (
 					box-shadow: none,
 					color: $secondary-l1,
 					opacity: 0.65,
+
 					active: (
 						pointer-events: none,
 					),
@@ -338,50 +391,65 @@ $sidebar-palette: () !default;
 $sidebar-palette: map-deep-merge(
 	(
 		sidebar-sm: $sidebar-sm,
+
 		sidebar-light: $sidebar-light,
+
 		sidebar-dark: $sidebar-dark,
+
 		sidebar-dark-l2: (
 			background-color: $dark-l2,
 			color: $white,
+
 			sidebar-header: (
 				component-title: (
 					color: inherit,
+
 					href: (
 						color: inherit,
 					),
 				),
+
 				component-subtitle: (
 					color: inherit,
+
 					href: (
 						color: inherit,
 					),
 				),
 			),
+
 			close: (
 				color: $secondary-l1,
+
 				hover: (
 					color: $white,
 				),
 			),
+
 			nav-nested: (
 				nav-link: (
 					border-radius: $border-radius,
 					color: $secondary-l1,
 					transition: box-shadow 0.15s ease-in-out,
+
 					hover: (
 						color: $white,
 					),
+
 					focus: (
 						box-shadow: $component-focus-box-shadow,
 						outline: 0,
 					),
+
 					active: (
 						color: $white,
 					),
+
 					disabled: (
 						box-shadow: none,
 						color: $secondary-l1,
 						opacity: 0.65,
+
 						active: (
 							pointer-events: none,
 						),

package/src/scss/variables/_slideout.scss

@@ -61,9 +61,10 @@ $c-slideout-push-start: () !default;
 $c-slideout-push-start: map-deep-merge(
 	(
 		padding-left: $c-slideout-sidebar-width,
+
 		media-breakpoint-down: (
 			md: (
-				padding-left: 0,
+				padding-left: 0rem,
 			),
 		),
 	),
@@ -74,9 +75,10 @@ $c-slideout-push-end: () !default;
 $c-slideout-push-end: map-deep-merge(
 	(
 		padding-right: $c-slideout-sidebar-width,
+
 		media-breakpoint-down: (
 			md: (
-				padding-right: 0,
+				padding-right: 0rem,
 			),
 		),
 	),
@@ -101,43 +103,53 @@ $c-slideout: map-deep-merge(
 		display: flex,
 		overflow: hidden,
 		z-index: $zindex-c-slideout,
+
 		c-slideout-shown: (
 			overflow: visible,
 		),
+
 		sidebar: (
 			display: none,
 			flex-shrink: 0,
 			position: relative,
 			width: $c-slideout-sidebar-width,
+
 			sidebar-body: (
 				flex-grow: 1,
 				overflow: visible,
 			),
+
 			sidebar-footer: (
 				border-top-width: 1px,
 			),
+
 			'@supports (position: sticky)': (
 				'@media (max-height: 700px)': (
 					'.sidebar-header.sticky-top': (
 						position: static,
 					),
+
 					'.sidebar-footer.sticky-bottom': (
 						position: static,
 					),
 				),
 			),
 		),
+
 		sidebar-c-slideout-show: (
 			display: flex,
 			flex-direction: column,
 		),
+
 		sidebar-c-slideout-transition: (
 			display: flex,
 			flex-direction: column,
+
 			c-horizontal-resizer: (
 				display: none,
 			),
 		),
+
 		tbar-stacked: (
 			display: none,
 			flex-shrink: 0,
@@ -146,12 +158,15 @@ $c-slideout: map-deep-merge(
 			position: relative,
 			z-index: 1,
 		),
+
 		tbar-stacked-c-slideout-show: (
 			display: flex,
 		),
+
 		tbar-stacked-c-slideout-transition: (
 			display: flex,
 		),
+
 		media-breakpoint-down: (
 			sm: $c-slideout-sm-down,
 		),
@@ -165,33 +180,41 @@ $c-slideout-fluid: map-deep-merge(
 		'&.c-slideout-push-start': (
 			padding-left: $c-slideout-fluid-sidebar-width,
 		),
+
 		'&.c-slideout-push-end': (
 			padding-right: $c-slideout-fluid-sidebar-width,
 		),
+
 		sidebar: (
 			max-width: $c-slideout-fluid-sidebar-width,
 			width: $c-slideout-fluid-sidebar-width,
 		),
+
 		media-breakpoint-down: (
 			md: (
 				'&.c-slideout-push-start': (
 					padding-left: $c-slideout-fluid-sidebar-width-md,
 				),
+
 				'&.c-slideout-push-end': (
 					padding-right: $c-slideout-fluid-sidebar-width-md,
 				),
+
 				sidebar: (
 					max-width: $c-slideout-fluid-sidebar-width-md,
 					width: $c-slideout-fluid-sidebar-width-md,
 				),
 			),
+
 			sm: (
 				'&.c-slideout-push-start': (
-					padding-left: 0,
+					padding-left: 0rem,
 				),
+
 				'&.c-slideout-push-end': (
-					padding-right: 0,
+					padding-right: 0rem,
 				),
+
 				sidebar: (
 					max-width: none,
 					width: 100vw,
@@ -208,15 +231,21 @@ $c-slideout-start-sm-down: () !default;
 $c-slideout-start-sm-down: map-deep-merge(
 	(
 		c-slideout-tbar-shown-sidebar: (
-			left: math-sign($c-slideout-sidebar-width-mobile),
+			left: calc(#{$c-slideout-sidebar-width-mobile} * -1),
 		),
+
 		sidebar: (
-			left: #{math-sign($c-slideout-sidebar-width-mobile) +
-				math-sign($c-slideout-tbar-stacked-min-width-mobile)},
+			left:
+				calc(
+					(
+							#{$c-slideout-sidebar-width-mobile} + #{$c-slideout-tbar-stacked-min-width-mobile}
+						) * -1
+				),
 			width: $c-slideout-sidebar-width-mobile,
 		),
+
 		tbar-stacked: (
-			left: math-sign($c-slideout-tbar-stacked-min-width-mobile),
+			left: calc(#{$c-slideout-tbar-stacked-min-width-mobile} * -1),
 		),
 	),
 	$c-slideout-start-sm-down
@@ -225,26 +254,36 @@ $c-slideout-start-sm-down: map-deep-merge(
 $c-slideout-start: () !default;
 $c-slideout-start: map-deep-merge(
 	(
-		bottom: 0,
-		left: 0,
-		top: 0,
+		bottom: 0rem,
+		left: 0rem,
+		top: 0rem,
+
 		c-slideout-tbar-shown-sidebar: (
-			left: math-sign($c-slideout-sidebar-width),
+			left: calc(#{$c-slideout-sidebar-width} * -1),
 		),
+
 		sidebar: (
-			left: #{math-sign($c-slideout-sidebar-width) +
-				math-sign($c-slideout-tbar-stacked-min-width)},
+			left:
+				calc(
+					(
+							#{$c-slideout-sidebar-width} + #{$c-slideout-tbar-stacked-min-width}
+						) * -1
+				),
 			width: $c-slideout-sidebar-width,
 		),
+
 		sidebar-c-slideout-show: (
-			left: 0,
+			left: 0rem,
 		),
+
 		tbar-stacked: (
-			left: math-sign($c-slideout-tbar-stacked-min-width),
+			left: calc(#{$c-slideout-tbar-stacked-min-width} * -1),
 		),
+
 		tbar-stacked-c-slideout-show: (
-			left: 0,
+			left: 0rem,
 		),
+
 		media-breakpoint-down: (
 			sm: $c-slideout-start-sm-down,
 		),
@@ -258,14 +297,20 @@ $c-slideout-end-sm-down: () !default;
 $c-slideout-end-sm-down: map-deep-merge(
 	(
 		c-slideout-tbar-shown-sidebar: (
-			right: math-sign($c-slideout-sidebar-width-mobile),
+			right: calc(#{$c-slideout-sidebar-width-mobile} * -1),
 		),
+
 		sidebar: (
-			right: #{math-sign($c-slideout-sidebar-width-mobile) +
-				math-sign($c-slideout-tbar-stacked-min-width-mobile)},
+			right:
+				calc(
+					(
+							#{$c-slideout-sidebar-width-mobile} + #{$c-slideout-tbar-stacked-min-width-mobile}
+						) * -1
+				),
 		),
+
 		tbar-stacked: (
-			right: math-sign($c-slideout-tbar-stacked-min-width-mobile),
+			right: calc(#{$c-slideout-tbar-stacked-min-width-mobile} * -1),
 		),
 	),
 	$c-slideout-end-sm-down
@@ -274,29 +319,40 @@ $c-slideout-end-sm-down: map-deep-merge(
 $c-slideout-end: () !default;
 $c-slideout-end: map-deep-merge(
 	(
-		bottom: 0,
-		right: 0,
-		top: 0,
+		bottom: 0rem,
+		right: 0rem,
+		top: 0rem,
+
 		c-slideout-tbar-shown-sidebar: (
-			right: math-sign($c-slideout-sidebar-width),
+			right: calc(#{$c-slideout-sidebar-width} * -1),
 		),
+
 		sidebar: (
-			right: #{math-sign($c-slideout-sidebar-width) +
-				math-sign($c-slideout-tbar-stacked-min-width)},
+			right:
+				calc(
+					(
+							#{$c-slideout-sidebar-width} + #{$c-slideout-tbar-stacked-min-width}
+						) * -1
+				),
 		),
+
 		sidebar-c-slideout-show: (
-			right: 0,
+			right: 0rem,
 		),
+
 		tbar-stacked: (
-			right: math-sign($c-slideout-tbar-stacked-min-width),
+			right: calc(#{$c-slideout-tbar-stacked-min-width} * -1),
 		),
+
 		tbar-stacked-c-slideout-show: (
-			right: 0,
+			right: 0rem,
 		),
+
 		c-horizontal-resizer: (
-			left: 0,
+			left: 0rem,
 			right: auto,
 		),
+
 		media-breakpoint-down: (
 			sm: $c-slideout-end-sm-down,
 		),