@clayui/css 3.159.0 → 3.160.0

package/src/scss/cadmin/variables/_buttons.scss

@@ -1,5 +1,5 @@
-$cadmin-btn-border-width: $cadmin-input-btn-border-width !default;
 $cadmin-btn-border-radius: $cadmin-border-radius !default;
+$cadmin-btn-border-width: $cadmin-input-btn-border-width !default;
 $cadmin-btn-box-shadow: null !default;
 
 $cadmin-btn-cursor: $cadmin-link-cursor !default;
@@ -17,6 +17,7 @@ $cadmin-btn-padding-x-mobile: null !default;
 $cadmin-btn-padding-y-mobile: null !default;
 
 $cadmin-btn-focus-width: $cadmin-input-btn-focus-width !default;
+
 $cadmin-btn-focus-box-shadow: $cadmin-component-focus-box-shadow !default;
 
 $cadmin-btn-active-box-shadow: null !default;
@@ -106,7 +107,7 @@ $cadmin-btn: map-deep-merge(
 			margin-top: -3px,
 
 			lexicon-icon: (
-				margin-top: 0,
+				margin-top: 0px,
 			),
 		),
 
@@ -208,6 +209,10 @@ $cadmin-btn-sm: map-deep-merge(
 		btn-section: (
 			font-size: $cadmin-btn-section-font-size-sm,
 		),
+
+		lexicon-icon: (
+			font-size: 16px,
+		),
 	),
 	$cadmin-btn-sm
 );
@@ -256,8 +261,8 @@ $cadmin-btn-sizes: map-deep-merge(
 
 // Button Monospaced
 
-$cadmin-btn-monospaced-padding-x: 0 !default;
-$cadmin-btn-monospaced-padding-y: 0 !default;
+$cadmin-btn-monospaced-padding-x: 0px !default;
+$cadmin-btn-monospaced-padding-y: 0px !default;
 $cadmin-btn-monospaced-size: 40px !default; // 40px
 
 $cadmin-btn-monospaced-size-mobile: null !default;
@@ -287,11 +292,11 @@ $cadmin-btn-monospaced: map-deep-merge(
 		),
 
 		inline-item: (
-			margin-top: 0,
+			margin-top: 0px,
 		),
 
 		lexicon-icon: (
-			margin-top: 0,
+			margin-top: 0px,
 		),
 
 		c-inner: (
@@ -300,7 +305,7 @@ $cadmin-btn-monospaced: map-deep-merge(
 			flex-direction: column,
 			height: 100%,
 			justify-content: center,
-			padding: 0,
+			padding: 0px,
 			width: 100%,
 		),
 	),
@@ -395,19 +400,19 @@ $cadmin-btn-unstyled: () !default;
 $cadmin-btn-unstyled: map-deep-merge(
 	(
 		background-color: rgba(0, 0, 0, 0.001),
-		border-width: 0,
+		border-width: 0px,
 		cursor: $cadmin-btn-cursor,
 		font-size: inherit,
 		font-weight: inherit,
 		line-height: inherit,
 		max-width: 100%,
-		padding: 0,
+		padding: 0px,
 		text-align: left,
 		text-transform: inherit,
 		vertical-align: baseline,
 
 		c-inner: (
-			margin: 0,
+			margin: 0px,
 			max-width: none,
 		),
 	),

package/src/scss/cadmin/variables/_cards.scss

@@ -52,7 +52,8 @@ $cadmin-card-section-header-font-size: 12px !default;
 $cadmin-card-section-header-font-weight: $cadmin-font-weight-semi-bold !default;
 $cadmin-card-section-header-line-height: 2.5 !default;
 $cadmin-card-section-header-margin-bottom: 24px !default;
-$cadmin-card-section-header-padding: 0 ($cadmin-grid-gutter-width * 0.5) !default;
+$cadmin-card-section-header-padding: 0px
+	calc(#{$cadmin-grid-gutter-width} * 0.5) !default;
 $cadmin-card-section-header-text-transform: uppercase !default;
 
 $cadmin-card-section-header: () !default;
@@ -80,8 +81,8 @@ $cadmin-card-aspect-ratio-label: map-deep-merge(
 	(
 		display: block,
 		margin-bottom: 8px,
-		margin-left: 0,
-		margin-right: 0,
+		margin-left: 0px,
+		margin-right: 0px,
 		margin-top: 8px,
 	),
 	$cadmin-card-aspect-ratio-label
@@ -163,26 +164,35 @@ $card: map-deep-merge(
 		display: block,
 		height: $cadmin-card-height,
 		margin-bottom: $cadmin-card-margin-bottom,
-		min-width: 0,
+		min-width: 0px,
 		position: relative,
 		word-wrap: break-word,
+
 		aspect-ratio: (
 			label: $cadmin-card-aspect-ratio-label,
 		),
+
 		aspect-ratio-item-top-left: $cadmin-card-aspect-ratio-item-top-left,
+
 		aspect-ratio-item-top-center: $cadmin-card-aspect-ratio-item-top-center,
+
 		aspect-ratio-item-top-right: $cadmin-card-aspect-ratio-item-top-right,
+
 		aspect-ratio-item-right-middle:
 			$cadmin-card-aspect-ratio-item-right-middle,
+
 		aspect-ratio-item-bottom-right:
 			$cadmin-card-aspect-ratio-item-bottom-right,
+
 		aspect-ratio-item-bottom-center:
 			$cadmin-card-aspect-ratio-item-bottom-center,
+
 		aspect-ratio-item-bottom-left:
 			$cadmin-card-aspect-ratio-item-bottom-left,
+
 		hr: (
-			margin-left: 0,
-			margin-right: 0,
+			margin-left: 0px,
+			margin-right: 0px,
 		),
 	),
 	$card
@@ -197,7 +207,7 @@ $cadmin-card-title: map-deep-merge(
 		font-size: 14px,
 		font-weight: $cadmin-font-weight-semi-bold,
 		line-height: $cadmin-line-height-base,
-		margin-bottom: 0,
+		margin-bottom: 0px,
 	),
 	$cadmin-card-title
 );
@@ -228,8 +238,8 @@ $cadmin-card-subtitle: map-deep-merge(
 		color: $cadmin-gray-600,
 		font-size: 14px,
 		font-weight: $cadmin-font-weight-normal,
-		margin-bottom: 0,
-		margin-top: 0,
+		margin-bottom: 0px,
+		margin-top: 0px,
 	),
 	$cadmin-card-subtitle
 );
@@ -259,6 +269,7 @@ $cadmin-card-link: map-deep-merge(
 	(
 		color: $cadmin-gray-600,
 		font-size: 14px,
+
 		hover: (
 			color: $cadmin-gray-600,
 			text-decoration: underline,
@@ -273,7 +284,7 @@ $cadmin-card-text: () !default;
 $cadmin-card-text: map-deep-merge(
 	(
 		last-child: (
-			margin-bottom: 0,
+			margin-bottom: 0px,
 		),
 	),
 	$cadmin-card-text
@@ -309,13 +320,14 @@ $cadmin-card-header: map-deep-merge(
 		background-color: $cadmin-card-cap-bg,
 		border-bottom: $cadmin-card-border-width solid $cadmin-card-border-color,
 		color: $cadmin-card-cap-color,
-		margin-bottom: 0,
+		margin-bottom: 0px,
 		padding: $cadmin-card-spacer-y $cadmin-card-spacer-x,
+
 		first-child: (
 			border-radius:
 				clay-enable-rounded(
 					$cadmin-card-inner-border-radius
-						$cadmin-card-inner-border-radius 0 0
+						$cadmin-card-inner-border-radius 0px 0px
 				),
 		),
 	),
@@ -330,10 +342,11 @@ $cadmin-card-footer: map-deep-merge(
 		background-color: $cadmin-card-cap-bg,
 		border-top: $cadmin-card-border-width solid $cadmin-card-border-color,
 		padding: $cadmin-card-spacer-y $cadmin-card-spacer-x,
+
 		last-child: (
 			border-radius:
 				clay-enable-rounded(
-					0 0 $cadmin-card-inner-border-radius
+					0px 0px $cadmin-card-inner-border-radius
 						$cadmin-card-inner-border-radius
 				),
 		),
@@ -366,20 +379,24 @@ $cadmin-form-check-card-checked-box-shadow: 0 0 0 2px
 $cadmin-card-interactive-after-highlight: () !default;
 $cadmin-card-interactive-after-highlight: map-deep-merge(
 	(
-		border-radius: 0 0 $cadmin-card-border-radius $cadmin-card-border-radius,
-		bottom: math-sign($cadmin-card-border-width),
+		border-radius: 0px 0px $cadmin-card-border-radius
+			$cadmin-card-border-radius,
+		bottom: calc(#{$cadmin-card-border-width} * -1),
 		content: '',
-		height: 0,
-		left: math-sign($cadmin-card-border-width),
+		height: 0px,
+		left: calc(#{$cadmin-card-border-width} * -1),
 		position: absolute,
-		right: math-sign($cadmin-card-border-width),
+		right: calc(#{$cadmin-card-border-width} * -1),
 		transition: height 0.15s ease-out,
+
 		hover: (
 			height: 4px,
 		),
+
 		focus: (
 			height: 4px,
 		),
+
 		active: (
 			height: 4px,
 		),
@@ -401,18 +418,23 @@ $cadmin-card-interactive: map-deep-merge(
 		cursor: $cadmin-link-cursor,
 		outline: 0,
 		transition: $cadmin-component-transition,
+
 		hover: (
 			background-color: #f7f8f9,
 			text-decoration: none,
 		),
+
 		focus: (
 			box-shadow: #{0 0 0 2px #fff,
 			0 0 0 4px #719aff},
 		),
+
 		active: (
 			background-color: #f1f2f5,
 		),
+
 		after-highlight: $cadmin-card-interactive-after-highlight,
+
 		card-body: $cadmin-card-interactive-card-body,
 	),
 	$cadmin-card-interactive
@@ -426,9 +448,11 @@ $cadmin-card-interactive-primary-after-highlight: map-deep-merge(
 		hover: (
 			background-color: $cadmin-component-active-bg,
 		),
+
 		focus: (
 			background-color: $cadmin-component-active-bg,
 		),
+
 		active: (
 			background-color: $cadmin-component-active-bg,
 		),
@@ -442,9 +466,11 @@ $cadmin-card-interactive-primary: map-deep-merge(
 		focus: (
 			background-color: $cadmin-gray-100,
 		),
+
 		active: (
 			background-color: $cadmin-gray-200,
 		),
+
 		after-highlight: $cadmin-card-interactive-primary-after-highlight,
 	),
 	$cadmin-card-interactive-primary
@@ -456,16 +482,19 @@ $cadmin-card-interactive-secondary: () !default;
 $cadmin-card-interactive-secondary: map-deep-merge(
 	(
 		color: $cadmin-gray-900,
+
 		hover: (
 			background-color: $cadmin-white,
 			border-color: transparent,
 			box-shadow: 0 0 0 2px #719aff,
 			color: $cadmin-gray-900,
 		),
+
 		focus: (
 			border-color: transparent,
 			box-shadow: 0 0 0 2px #719aff,
 		),
+
 		active: (
 			background-color: $cadmin-white,
 		),
@@ -481,33 +510,38 @@ $cadmin-card-type-asset: map-deep-merge(
 		aspect-ratio: (
 			border-color: $cadmin-gray-300,
 			border-style: solid,
-			border-width: 0 0 1px 0,
+			border-width: 0px 0px 1px 0px,
 			horizontal: 16,
 			vertical: 9,
+
 			custom-control: (
 				label: (
-					bottom: 0,
+					bottom: 0px,
 					cursor: $cadmin-link-cursor,
-					left: 0,
+					left: 0px,
 					position: absolute,
-					right: 0,
-					top: 0,
+					right: 0px,
+					top: 0px,
 				),
 			),
 		),
+
 		card-type-asset-icon: (
 			width: 22.225%,
+
 			inline-item: (
-				bottom: 0,
-				left: 0,
+				bottom: 0px,
+				left: 0px,
 				position: absolute,
-				right: 0,
-				top: 0,
+				right: 0px,
+				top: 0px,
 			),
+
 			lexicon-icon: (
 				height: 100%,
 				width: 100%,
 			),
+
 			sticker: (
 				border-radius: 50%,
 				display: block,
@@ -516,12 +550,15 @@ $cadmin-card-type-asset: map-deep-merge(
 				width: 100%,
 			),
 		),
+
 		card-body: (
 			padding-top: 12px,
 		),
+
 		card-row: (
 			align-items: flex-start,
 		),
+
 		dropdown-action: (
 			margin-right: -8px,
 			margin-top: -3px,
@@ -563,15 +600,19 @@ $cadmin-product-card: map-deep-merge(
 			background-color: $cadmin-white,
 			background-image: linear-gradient(0deg, #ebebeb, #ebebeb),
 		),
+
 		card-body: (
 			text-align: center,
 		),
+
 		card-title: (
 			font-size: 16px,
 		),
+
 		card-subtitle: (
 			font-size: 12px,
 		),
+
 		card-text: (
 			font-size: 18px,
 			font-weight: $cadmin-font-weight-semi-bold,
@@ -589,6 +630,7 @@ $cadmin-user-card: map-deep-merge(
 			max-width: 80px,
 			min-width: 48px,
 			width: 30%,
+
 			lexicon-icon: (
 				height: auto,
 				width: 50%,
@@ -615,23 +657,26 @@ $cadmin-card-page-item-asset: map-deep-merge(
 	(
 		flex-basis: 100%,
 		max-width: 100%,
-		padding-left: $cadmin-grid-gutter-width * 0.5,
-		padding-right: $cadmin-grid-gutter-width * 0.5,
+		padding-left: calc(#{$cadmin-grid-gutter-width} * 0.5),
+		padding-right: calc(#{$cadmin-grid-gutter-width} * 0.5),
 		'@container #{map-get($cadmin-card-page, container-name)} (min-width: #{map-get($cadmin-container-max-widths, sm)})':
 		(
 			flex-basis: 50%,
 			max-width: 50%,
 		),
+
 		'@container #{map-get($cadmin-card-page, container-name)} (min-width: #{map-get($cadmin-container-max-widths, md)})':
 		(
 			flex-basis: 33.33333%,
 			max-width: 33.33333%,
 		),
+
 		'@container #{map-get($cadmin-card-page, container-name)} (min-width: #{map-get($cadmin-container-max-widths, lg)})':
 		(
 			flex-basis: 25%,
 			max-width: 25%,
 		),
+
 		'@container #{map-get($cadmin-card-page, container-name)} (min-width: #{map-get($cadmin-container-max-widths, xl)})':
 		(
 			flex-basis: 20%,
@@ -687,11 +732,12 @@ $cadmin-card-type-template-aspect-ratio: () !default;
 $cadmin-card-type-template-aspect-ratio: map-deep-merge(
 	(
 		background-image: none,
-		border-width: 0,
+		border-width: 0px,
 		color: $cadmin-gray-600,
 		horizontal: 16,
 		text-align: center,
 		vertical: 9,
+
 		lexicon-icon: (
 			height: auto,
 			width: 28%,
@@ -732,13 +778,19 @@ $cadmin-card-type-template: map-deep-merge(
 		border-width: 1px,
 		box-shadow: none,
 		color: $cadmin-gray-900,
+
 		hover: (
 			color: $cadmin-gray-900,
 		),
+
 		after-highlight: $cadmin-card-type-template-after-highlight,
+
 		aspect-ratio: $cadmin-card-type-template-aspect-ratio,
+
 		aspect-ratio-item: $cadmin-card-type-template-aspect-ratio-item,
+
 		card-title: $cadmin-card-type-template-card-title,
+
 		card-text: $cadmin-card-type-template-card-text,
 	),
 	$cadmin-card-type-template
@@ -749,7 +801,7 @@ $cadmin-card-type-template: map-deep-merge(
 $cadmin-template-card-body: () !default;
 $cadmin-template-card-body: map-deep-merge(
 	(
-		padding-top: 0,
+		padding-top: 0px,
 		text-align: center,
 	),
 	$cadmin-template-card-body
@@ -779,6 +831,7 @@ $cadmin-template-card-horizontal-card-row: map-deep-merge(
 		margin-left: -4px,
 		margin-right: -4px,
 		width: auto,
+
 		autofit-col: (
 			padding-left: 4px,
 			padding-right: 4px,
@@ -791,7 +844,7 @@ $cadmin-template-card-horizontal-card-title: () !default;
 $cadmin-template-card-horizontal-card-title: map-deep-merge(
 	(
 		color: inherit,
-		margin-bottom: 0,
+		margin-bottom: 0px,
 	),
 	$cadmin-template-card-horizontal-card-title
 );
@@ -800,11 +853,15 @@ $cadmin-template-card-horizontal: () !default;
 $cadmin-template-card-horizontal: map-deep-merge(
 	(
 		color: $cadmin-gray-600,
+
 		hover: (
 			color: $cadmin-gray-600,
 		),
+
 		sticker: $cadmin-template-card-horizontal-sticker,
+
 		card-row: $cadmin-template-card-horizontal-card-row,
+
 		card-title: $cadmin-template-card-horizontal-card-title,
 	),
 	$cadmin-template-card-horizontal