@clayui/css 3.158.0 → 3.160.0

package/src/scss/cadmin/variables/_slideout.scss

@@ -61,9 +61,10 @@ $cadmin-c-slideout-push-start: () !default;
 $cadmin-c-slideout-push-start: map-deep-merge(
 	(
 		padding-left: $cadmin-c-slideout-sidebar-width,
+
 		media-breakpoint-down: (
 			md: (
-				padding-left: 0,
+				padding-left: 0px,
 			),
 		),
 	),
@@ -74,9 +75,10 @@ $cadmin-c-slideout-push-end: () !default;
 $cadmin-c-slideout-push-end: map-deep-merge(
 	(
 		padding-right: $cadmin-c-slideout-sidebar-width,
+
 		media-breakpoint-down: (
 			md: (
-				padding-right: 0,
+				padding-right: 0px,
 			),
 		),
 	),
@@ -101,43 +103,53 @@ $cadmin-c-slideout: map-deep-merge(
 		display: flex,
 		overflow: hidden,
 		z-index: $cadmin-zindex-c-slideout,
+
 		c-slideout-shown: (
 			overflow: visible,
 		),
+
 		sidebar: (
 			display: none,
 			flex-shrink: 0,
 			position: relative,
 			width: $cadmin-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 @@ $cadmin-c-slideout: map-deep-merge(
 			position: relative,
 			z-index: 1,
 		),
+
 		tbar-stacked-c-slideout-show: (
 			display: block,
 		),
+
 		tbar-stacked-c-slideout-transition: (
 			display: block,
 		),
+
 		media-breakpoint-down: (
 			sm: $cadmin-c-slideout-sm-down,
 		),
@@ -165,33 +180,41 @@ $cadmin-c-slideout-fluid: map-deep-merge(
 		'&.c-slideout-push-start': (
 			padding-left: $cadmin-c-slideout-fluid-sidebar-width,
 		),
+
 		'&.c-slideout-push-end': (
 			padding-right: $cadmin-c-slideout-fluid-sidebar-width,
 		),
+
 		sidebar: (
 			max-width: $cadmin-c-slideout-fluid-sidebar-width,
 			width: $cadmin-c-slideout-fluid-sidebar-width,
 		),
+
 		media-breakpoint-down: (
 			md: (
 				'&.c-slideout-push-start': (
 					padding-left: $cadmin-c-slideout-fluid-sidebar-width-md,
 				),
+
 				'&.c-slideout-push-end': (
 					padding-right: $cadmin-c-slideout-fluid-sidebar-width-md,
 				),
+
 				sidebar: (
 					max-width: $cadmin-c-slideout-fluid-sidebar-width-md,
 					width: $cadmin-c-slideout-fluid-sidebar-width-md,
 				),
 			),
+
 			sm: (
 				'&.c-slideout-push-start': (
-					padding-left: 0,
+					padding-left: 0px,
 				),
+
 				'&.c-slideout-push-end': (
-					padding-right: 0,
+					padding-right: 0px,
 				),
+
 				sidebar: (
 					max-width: none,
 					width: 100vw,
@@ -208,15 +231,21 @@ $cadmin-c-slideout-start-sm-down: () !default;
 $cadmin-c-slideout-start-sm-down: map-deep-merge(
 	(
 		c-slideout-tbar-shown-sidebar: (
-			left: math-sign($cadmin-c-slideout-sidebar-width-mobile),
+			left: calc(#{$cadmin-c-slideout-sidebar-width-mobile} * -1),
 		),
+
 		sidebar: (
-			left: #{math-sign($cadmin-c-slideout-sidebar-width-mobile) +
-				math-sign($cadmin-c-slideout-tbar-stacked-min-width-mobile)},
+			left:
+				calc(
+					(
+							#{$cadmin-c-slideout-sidebar-width-mobile} + #{$cadmin-c-slideout-tbar-stacked-min-width-mobile}
+						) * -1
+				),
 			width: $cadmin-c-slideout-sidebar-width-mobile,
 		),
+
 		tbar-stacked: (
-			left: math-sign($cadmin-c-slideout-tbar-stacked-min-width-mobile),
+			left: calc(#{$cadmin-c-slideout-tbar-stacked-min-width-mobile} * -1),
 		),
 	),
 	$cadmin-c-slideout-start-sm-down
@@ -225,26 +254,36 @@ $cadmin-c-slideout-start-sm-down: map-deep-merge(
 $cadmin-c-slideout-start: () !default;
 $cadmin-c-slideout-start: map-deep-merge(
 	(
-		bottom: 0,
-		left: 0,
-		top: 0,
+		bottom: 0px,
+		left: 0px,
+		top: 0px,
+
 		c-slideout-tbar-shown-sidebar: (
-			left: math-sign($cadmin-c-slideout-sidebar-width),
+			left: calc(#{$cadmin-c-slideout-sidebar-width} * -1),
 		),
+
 		sidebar: (
-			left: #{math-sign($cadmin-c-slideout-sidebar-width) +
-				math-sign($cadmin-c-slideout-tbar-stacked-min-width)},
+			left:
+				calc(
+					(
+							#{$cadmin-c-slideout-sidebar-width} + #{$cadmin-c-slideout-tbar-stacked-min-width}
+						) * -1
+				),
 			width: $cadmin-c-slideout-sidebar-width,
 		),
+
 		sidebar-c-slideout-show: (
-			left: 0,
+			left: 0px,
 		),
+
 		tbar-stacked: (
-			left: math-sign($cadmin-c-slideout-tbar-stacked-min-width),
+			left: calc(#{$cadmin-c-slideout-tbar-stacked-min-width} * -1),
 		),
+
 		tbar-stacked-c-slideout-show: (
-			left: 0,
+			left: 0px,
 		),
+
 		media-breakpoint-down: (
 			sm: $cadmin-c-slideout-start-sm-down,
 		),
@@ -258,14 +297,21 @@ $cadmin-c-slideout-end-sm-down: () !default;
 $cadmin-c-slideout-end-sm-down: map-deep-merge(
 	(
 		c-slideout-tbar-shown-sidebar: (
-			right: math-sign($cadmin-c-slideout-sidebar-width-mobile),
+			right: calc(#{$cadmin-c-slideout-sidebar-width-mobile} * -1),
 		),
+
 		sidebar: (
-			right: #{math-sign($cadmin-c-slideout-sidebar-width-mobile) +
-				math-sign($cadmin-c-slideout-tbar-stacked-min-width-mobile)},
+			right:
+				calc(
+					(
+							#{$cadmin-c-slideout-sidebar-width-mobile} + #{$cadmin-c-slideout-tbar-stacked-min-width-mobile}
+						) * -1
+				),
 		),
+
 		tbar-stacked: (
-			right: math-sign($cadmin-c-slideout-tbar-stacked-min-width-mobile),
+			right:
+				calc(#{$cadmin-c-slideout-tbar-stacked-min-width-mobile} * -1),
 		),
 	),
 	$cadmin-c-slideout-end-sm-down
@@ -274,29 +320,40 @@ $cadmin-c-slideout-end-sm-down: map-deep-merge(
 $cadmin-c-slideout-end: () !default;
 $cadmin-c-slideout-end: map-deep-merge(
 	(
-		bottom: 0,
-		right: 0,
-		top: 0,
+		bottom: 0px,
+		right: 0px,
+		top: 0px,
+
 		c-slideout-tbar-shown-sidebar: (
-			right: math-sign($cadmin-c-slideout-sidebar-width),
+			right: calc(#{$cadmin-c-slideout-sidebar-width} * -1),
 		),
+
 		sidebar: (
-			right: #{math-sign($cadmin-c-slideout-sidebar-width) +
-				math-sign($cadmin-c-slideout-tbar-stacked-min-width)},
+			right:
+				calc(
+					(
+							#{$cadmin-c-slideout-sidebar-width} + #{$cadmin-c-slideout-tbar-stacked-min-width}
+						) * -1
+				),
 		),
+
 		sidebar-c-slideout-show: (
-			right: 0,
+			right: 0px,
 		),
+
 		tbar-stacked: (
-			right: math-sign($cadmin-c-slideout-tbar-stacked-min-width),
+			right: calc(#{$cadmin-c-slideout-tbar-stacked-min-width} * -1),
 		),
+
 		tbar-stacked-c-slideout-show: (
-			right: 0,
+			right: 0px,
 		),
+
 		c-horizontal-resizer: (
-			left: 0,
+			left: 0px,
 			right: auto,
 		),
+
 		media-breakpoint-down: (
 			sm: $cadmin-c-slideout-end-sm-down,
 		),

package/src/scss/cadmin/variables/_stickers.scss

@@ -30,15 +30,18 @@ $cadmin-sticker: map-deep-merge(
 		text-align: center,
 		vertical-align: middle,
 		width: $cadmin-sticker-size,
+
 		inline-item: (
 			font-size: $cadmin-sticker-inline-item-font-size,
 			justify-content: center,
+
 			lexicon-icon: (
-				margin-top: 0,
+				margin-top: 0px,
 			),
 		),
+
 		lexicon-icon: (
-			margin-top: 0,
+			margin-top: 0px,
 		),
 	),
 	$cadmin-sticker
@@ -51,14 +54,14 @@ $cadmin-sticker-overlay: map-merge(
 	(
 		align-items: center,
 		border-radius: inherit,
-		bottom: 0,
+		bottom: 0px,
 		display: flex,
 		justify-content: center,
-		left: 0,
+		left: 0px,
 		overflow: hidden,
 		position: absolute,
-		right: 0,
-		top: 0,
+		right: 0px,
+		top: 0px,
 	),
 	$cadmin-sticker-overlay
 );
@@ -99,8 +102,9 @@ $cadmin-sticker-xxl: map-deep-merge(
 		height: 5rem,
 		line-height: 5rem,
 		width: 5rem,
+
 		lexicon-icon: (
-			font-size: 1.5rem,
+			font-size: 2.5rem,
 		),
 	),
 	$cadmin-sticker-xxl
@@ -115,9 +119,13 @@ $cadmin-sticker-sizes: map-deep-merge(
 			line-height: 1rem,
 			width: 1rem,
 		),
+
 		sticker-sm: $cadmin-sticker-sm,
+
 		sticker-lg: $cadmin-sticker-lg,
+
 		sticker-xl: $cadmin-sticker-xl,
+
 		sticker-xxl: $cadmin-sticker-xxl,
 	),
 	$cadmin-sticker-sizes
@@ -182,23 +190,26 @@ $cadmin-sticker-top-right: map-merge(
 
 // .sticker-outside
 
-$cadmin-sticker-outside-offset: math-sign($cadmin-sticker-size * 0.5) !default;
+$cadmin-sticker-outside-offset: calc(#{$cadmin-sticker-size} * -0.5) !default;
 
 $cadmin-sticker-outside: () !default;
 $cadmin-sticker-outside: map-deep-merge(
 	(
 		left: $cadmin-sticker-outside-offset,
 		top: $cadmin-sticker-outside-offset,
+
 		sticker-bottom-left: (
 			bottom: $cadmin-sticker-outside-offset,
 			top: auto,
 		),
+
 		sticker-bottom-right: (
 			bottom: $cadmin-sticker-outside-offset,
 			left: auto,
 			right: $cadmin-sticker-outside-offset,
 			top: auto,
 		),
+
 		sticker-top-right: (
 			left: auto,
 			right: $cadmin-sticker-outside-offset,
@@ -359,6 +370,16 @@ $cadmin-sticker-dark: map-deep-merge(
 	$cadmin-sticker-dark
 );
 
+$cadmin-sticker-outline: () !default;
+$cadmin-sticker-outline: map-deep-merge(
+	(
+		background-color: $cadmin-blue-l5,
+		border: 1px solid $cadmin-blue-d2,
+		color: $cadmin-blue-d2,
+	),
+	$cadmin-sticker-outline
+);
+
 $cadmin-sticker-outline-0: () !default;
 $cadmin-sticker-outline-0: map-deep-merge(
 	(
@@ -463,22 +484,40 @@ $cadmin-sticker-palette: () !default;
 $cadmin-sticker-palette: map-deep-merge(
 	(
 		primary: $cadmin-sticker-primary,
+
 		secondary: $cadmin-sticker-secondary,
+
 		success: $cadmin-sticker-success,
+
 		info: $cadmin-sticker-info,
+
 		warning: $cadmin-sticker-warning,
+
 		danger: $cadmin-sticker-danger,
+
 		light: $cadmin-sticker-light,
+
 		dark: $cadmin-sticker-dark,
+		'.sticker-outline': $cadmin-sticker-outline,
+
 		'.sticker-outline-0': $cadmin-sticker-outline-0,
+
 		'.sticker-outline-1': $cadmin-sticker-outline-1,
+
 		'.sticker-outline-2': $cadmin-sticker-outline-2,
+
 		'.sticker-outline-3': $cadmin-sticker-outline-3,
+
 		'.sticker-outline-4': $cadmin-sticker-outline-4,
+
 		'.sticker-outline-5': $cadmin-sticker-outline-5,
+
 		'.sticker-outline-6': $cadmin-sticker-outline-6,
+
 		'.sticker-outline-7': $cadmin-sticker-outline-7,
+
 		'.sticker-outline-8': $cadmin-sticker-outline-8,
+
 		'.sticker-outline-9': $cadmin-sticker-outline-9,
 	),
 	$cadmin-sticker-palette