@clayui/css 3.159.0 → 3.161.0

package/src/scss/cadmin/variables/_pagination.scss

@@ -5,7 +5,7 @@ $cadmin-pagination-color: $cadmin-gray-600 !default;
 $cadmin-pagination-font-size: 14px !default; // 14px
 $cadmin-pagination-line-height: 1 !default;
 $cadmin-pagination-padding-x: 10px !default; // 10px
-$cadmin-pagination-padding-y: 0 !default;
+$cadmin-pagination-padding-y: 0px !default;
 
 $cadmin-pagination-hover-bg: rgba($cadmin-gray-900, 0.04) !default;
 $cadmin-pagination-hover-border-color: transparent !default;
@@ -89,9 +89,10 @@ $cadmin-pagination-link-hover: map-deep-merge(
 		border-color: $cadmin-pagination-hover-border-color,
 		color: $cadmin-pagination-hover-color,
 		font-weight: $cadmin-font-weight-semi-bold,
-		letter-spacing: 0,
+		letter-spacing: 0px,
 		text-decoration: none,
 		z-index: 2,
+
 		before: (
 			background-color: $cadmin-secondary-l0,
 			height: 3px,
@@ -108,17 +109,18 @@ $cadmin-pagination-link-focus: map-deep-merge(
 		color: $cadmin-pagination-hover-color,
 		outline: $cadmin-pagination-focus-outline,
 		z-index: $cadmin-zindex-pagination-link-focus,
+
 		after: (
 			border-radius: $cadmin-pagination-link-border-radius,
-			bottom: 0,
+			bottom: 0px,
 			box-shadow: $cadmin-pagination-focus-box-shadow,
 			content: '',
 			display: block,
-			left: 0,
+			left: 0px,
 			pointer-events: none,
 			position: absolute,
-			right: 0,
-			top: 0,
+			right: 0px,
+			top: 0px,
 		),
 	),
 	$cadmin-pagination-link-focus
@@ -131,7 +133,7 @@ $cadmin-pagination-link-active: map-deep-merge(
 		border-color: $cadmin-pagination-active-border-color,
 		color: $cadmin-pagination-active-color,
 		font-weight: $cadmin-font-weight-semi-bold,
-		letter-spacing: 0,
+		letter-spacing: 0px,
 		z-index: $cadmin-zindex-pagination-link-active,
 	),
 	$cadmin-pagination-link-active
@@ -148,9 +150,11 @@ $cadmin-pagination-link-disabled: map-deep-merge(
 		opacity: $cadmin-pagination-disabled-opacity,
 		pointer-events: $cadmin-pagination-disabled-pointer-events,
 		z-index: $cadmin-zindex-pagination-link-disabled,
+
 		before: (
 			content: none,
 		),
+
 		focus: (
 			after: (
 				content: none,
@@ -176,43 +180,53 @@ $cadmin-pagination-link: map-deep-merge(
 		justify-content: center,
 		letter-spacing: 0.033em,
 		line-height: $cadmin-pagination-line-height,
-		margin-left: 0,
+		margin-left: 0px,
 		padding-bottom: $cadmin-pagination-padding-y,
 		padding-left: $cadmin-pagination-padding-x,
 		padding-right: $cadmin-pagination-padding-x,
 		padding-top: $cadmin-pagination-padding-y,
 		position: relative,
 		transition: $cadmin-pagination-link-transition,
+
 		before: (
-			border-radius: 0 0 $cadmin-border-radius $cadmin-border-radius,
-			bottom: 0,
+			border-radius: 0px 0px $cadmin-border-radius $cadmin-border-radius,
+			bottom: 0px,
 			content: '',
 			display: block,
-			left: 0,
+			left: 0px,
 			position: absolute,
-			right: 0,
+			right: 0px,
 		),
+
 		hover: $cadmin-pagination-link-hover,
+
 		focus: $cadmin-pagination-link-focus,
+
 		active: $cadmin-pagination-link-active,
+
 		active-class: (
 			background-color: $cadmin-pagination-active-bg,
 			border-color: $cadmin-pagination-active-border-color,
 			color: $cadmin-pagination-active-color,
 			font-weight: $cadmin-font-weight-semi-bold,
-			letter-spacing: 0,
+			letter-spacing: 0px,
+
 			before: (
 				background-color: $cadmin-primary-l0,
 				height: 4px,
 			),
 		),
+
 		disabled: $cadmin-pagination-link-disabled,
+
 		show: (
 			font-weight: $cadmin-font-weight-semi-bold,
-			letter-spacing: 0,
+			letter-spacing: 0px,
+
 			before: (
 				background-color: transparent,
 			),
+
 			hover: (
 				before: (
 					background-color: $cadmin-secondary-l0,
@@ -220,8 +234,9 @@ $cadmin-pagination-link: map-deep-merge(
 				),
 			),
 		),
+
 		lexicon-icon: (
-			margin-top: 0,
+			margin-top: 0px,
 		),
 	),
 	$cadmin-pagination-link
@@ -260,7 +275,7 @@ $cadmin-pagination: map-deep-merge(
 		font-size: $cadmin-pagination-font-size,
 		list-style: none,
 		margin-bottom: $cadmin-pagination-margin-bottom,
-		padding-left: 0,
+		padding-left: 0px,
 	),
 	$cadmin-pagination
 );
@@ -273,10 +288,12 @@ $cadmin-pagination-bar: map-deep-merge(
 		align-items: center,
 		display: flex,
 		flex-wrap: wrap,
+
 		media-breakpoint-down: (
 			sm: (
 				flex-direction: column,
 				justify-content: center,
+
 				pagination: (
 					margin-top: $cadmin-pagination-margin-top-mobile,
 				),
@@ -362,6 +379,7 @@ $cadmin-pagination-items-per-page-link-focus: map-deep-merge(
 		box-shadow: $cadmin-pagination-items-per-page-focus-box-shadow,
 		color: map-get($cadmin-pagination-link-focus, color),
 		outline: $cadmin-pagination-items-per-page-focus-outline,
+
 		after: map-get($cadmin-pagination-link-focus, after),
 	),
 	$cadmin-pagination-items-per-page-link-focus
@@ -389,9 +407,11 @@ $cadmin-pagination-items-per-page-link-disabled: map-deep-merge(
 		opacity: $cadmin-pagination-disabled-opacity,
 		pointer-events: $cadmin-pagination-disabled-pointer-events,
 		letter-spacing: 0.033em,
+
 		before: (
 			content: none,
 		),
+
 		focus: (
 			after: (
 				content: none,
@@ -422,19 +442,25 @@ $cadmin-pagination-items-per-page-link: map-deep-merge(
 		padding-top: $cadmin-pagination-padding-y,
 		text-decoration: none,
 		transition: $cadmin-pagination-items-per-page-transition,
+
 		before: (
-			border-radius: 0 0 $cadmin-border-radius $cadmin-border-radius,
-			bottom: 0,
+			border-radius: 0px 0px $cadmin-border-radius $cadmin-border-radius,
+			bottom: 0px,
 			content: '',
 			display: block,
-			left: 0,
+			left: 0px,
 			position: absolute,
-			right: 0,
+			right: 0px,
 		),
+
 		hover: $cadmin-pagination-items-per-page-link-hover,
+
 		focus: $cadmin-pagination-items-per-page-link-focus,
+
 		active: $cadmin-pagination-items-per-page-link-active,
+
 		disabled: $cadmin-pagination-items-per-page-link-disabled,
+
 		show: map-get($cadmin-pagination-link, show),
 		lexicon-icon: (
 			margin-left:
@@ -453,7 +479,9 @@ $cadmin-pagination-items-per-page: map-deep-merge(
 	(
 		font-size: $cadmin-pagination-items-per-page-font-size,
 		margin-bottom: $cadmin-pagination-margin-bottom,
+
 		link: $cadmin-pagination-items-per-page-link,
+
 		media-breakpoint-down: (
 			sm: (
 				pagination-results: (
@@ -494,7 +522,7 @@ $cadmin-pagination-results: map-deep-merge(
 $cadmin-pagination-font-size-sm: 12px !default; // 12px
 $cadmin-pagination-line-height-sm: 1 !default;
 $cadmin-pagination-padding-x-sm: 8px !default;
-$cadmin-pagination-padding-y-sm: 0 !default;
+$cadmin-pagination-padding-y-sm: 0px !default;
 
 $cadmin-pagination-item-height-sm: 24px !default; // 24px
 
@@ -515,14 +543,17 @@ $cadmin-pagination-sm: map-deep-merge(
 			padding-left: $cadmin-pagination-padding-x-sm,
 			padding-top: $cadmin-pagination-padding-y-sm,
 		),
+
 		page-link-first: (
 			border-bottom-left-radius: $cadmin-pagination-link-border-radius-sm,
 			border-top-left-radius: $cadmin-pagination-link-border-radius-sm,
 		),
+
 		page-link-last: (
 			border-bottom-right-radius: $cadmin-pagination-link-border-radius-sm,
 			border-top-right-radius: $cadmin-pagination-link-border-radius-sm,
 		),
+
 		pagination-items-per-page: (
 			border-radius:
 				clay-enable-rounded($cadmin-pagination-link-border-radius-sm),
@@ -535,12 +566,14 @@ $cadmin-pagination-sm: map-deep-merge(
 				padding-right: $cadmin-pagination-padding-x,
 				padding-top: $cadmin-pagination-padding-y-sm,
 			),
+
 			lexicon-icon: (
 				margin-left:
 					$cadmin-pagination-items-per-page-lexicon-icon-margin-left-sm,
 				margin-right:
 					$cadmin-pagination-items-per-page-lexicon-icon-margin-top-sm,
 			),
+
 			pagination-results: (
 				font-size: $cadmin-pagination-font-size-sm,
 				line-height: $cadmin-pagination-line-height-sm,
@@ -557,7 +590,7 @@ $cadmin-pagination-sm: map-deep-merge(
 $cadmin-pagination-font-size-lg: 18px !default; // 18px
 $cadmin-pagination-line-height-lg: 1 !default;
 $cadmin-pagination-padding-x-lg: 16px !default; // 16px
-$cadmin-pagination-padding-y-lg: 0 !default;
+$cadmin-pagination-padding-y-lg: 0px !default;
 
 $cadmin-pagination-item-height-lg: 44px !default; //44px
 
@@ -578,14 +611,17 @@ $cadmin-pagination-lg: map-deep-merge(
 			padding-right: $cadmin-pagination-padding-x-lg,
 			padding-top: $cadmin-pagination-padding-y-lg,
 		),
+
 		page-link-first: (
 			border-bottom-left-radius: $cadmin-pagination-link-border-radius-lg,
 			border-top-left-radius: $cadmin-pagination-link-border-radius-lg,
 		),
+
 		page-link-last: (
 			border-bottom-right-radius: $cadmin-pagination-link-border-radius-lg,
 			border-top-right-radius: $cadmin-pagination-link-border-radius-lg,
 		),
+
 		pagination-items-per-page: (
 			border-radius:
 				clay-enable-rounded($cadmin-pagination-link-border-radius-lg),
@@ -598,12 +634,14 @@ $cadmin-pagination-lg: map-deep-merge(
 				padding-right: $cadmin-pagination-padding-x,
 				padding-top: $cadmin-pagination-padding-y-lg,
 			),
+
 			lexicon-icon: (
 				margin-left:
 					$cadmin-pagination-items-per-page-lexicon-icon-margin-left-lg,
 				margin-right:
 					$cadmin-pagination-items-per-page-lexicon-icon-margin-top-lg,
 			),
+
 			pagination-results: (
 				font-size: $cadmin-pagination-font-size-lg,
 				line-height: $cadmin-pagination-line-height-lg,

package/src/scss/cadmin/variables/_panels.scss

@@ -16,17 +16,18 @@ $cadmin-panel-margin-bottom: $cadmin-spacer !default;
 
 // Panel Header
 
-$cadmin-panel-header-border-bottom-width: 0 !default;
+$cadmin-panel-header-border-bottom-width: 0px !default;
 $cadmin-panel-header-offset-border-radius: calc(
 	#{$cadmin-panel-border-radius} - #{$cadmin-panel-border-top-width}
 ) !default;
+
 $cadmin-panel-header-font-size: 14px !default; // 14px
 $cadmin-panel-header-line-height: $cadmin-headings-line-height !default;
 $cadmin-panel-header-padding-x: 20px !default;
 $cadmin-panel-header-padding-y: 12px !default;
 
-$cadmin-panel-header-collapse-icon-font-size: 12px !default; // 12px
 $cadmin-panel-header-collapse-icon-bottom: null !default;
+$cadmin-panel-header-collapse-icon-font-size: 12px !default; // 12px
 $cadmin-panel-header-collapse-icon-left: null !default;
 $cadmin-panel-header-collapse-icon-right: null !default;
 $cadmin-panel-header-collapse-icon-top: clay-collapse-icon-align(
@@ -40,6 +41,7 @@ $cadmin-panel-header-collapse-icon-padding-left: null !default;
 $cadmin-panel-header-collapse-icon-padding-right: null !default;
 
 $cadmin-panel-header-link-text-decoration: null !default;
+
 $cadmin-panel-header-link-hover-text-decoration: none !default;
 
 $cadmin-panel-header-link: () !default;
@@ -49,10 +51,12 @@ $cadmin-panel-header-link: map-deep-merge(
 		display: block,
 		text-decoration: $cadmin-panel-header-link-text-decoration,
 		transition: box-shadow 0.15s ease-in-out,
+
 		hover: (
 			color: inherit,
 			text-decoration: $cadmin-panel-header-link-hover-text-decoration,
 		),
+
 		focus: (
 			box-shadow: $cadmin-component-focus-box-shadow,
 			outline: 0,
@@ -71,10 +75,11 @@ $cadmin-panel-body-padding-y: 12px !default;
 
 // Panel Footer
 
-$cadmin-panel-footer-border-top-width: 0 !default;
+$cadmin-panel-footer-border-top-width: 0px !default;
 $cadmin-panel-footer-offset-border-radius: calc(
 	#{$cadmin-panel-border-radius} - #{$cadmin-panel-border-bottom-width}
 ) !default;
+
 $cadmin-panel-footer-padding-x: $cadmin-panel-header-padding-x !default;
 $cadmin-panel-footer-padding-y: $cadmin-panel-header-padding-y !default;
 
@@ -91,8 +96,8 @@ $cadmin-panel-title-small-margin-left: 6px !default; // 6px
 
 // Panel Group
 
-$cadmin-panel-group-panel-margin-bottom: math-sign(
-	$cadmin-panel-border-bottom-width
+$cadmin-panel-group-panel-margin-bottom: calc(
+	#{$cadmin-panel-border-bottom-width} * -1
 ) !default;
 
 $cadmin-panel-group-panel-unstyled: () !default;
@@ -109,13 +114,16 @@ $cadmin-panel-group-sm: () !default;
 $cadmin-panel-group-sm: map-deep-merge(
 	(
 		font-size: 14px,
+
 		header: (
 			padding-bottom: 8px,
 			padding-top: 8px,
 		),
+
 		title: (
 			font-size: 12px,
 		),
+
 		collapse-icon: (
 			top: 11px,
 		),
@@ -134,10 +142,10 @@ $cadmin-panel-group-sm-panel-unstyled: map-deep-merge(
 // Panel Group Flush
 
 $cadmin-panel-group-flush-body-margin-bottom: 24px !default;
-$cadmin-panel-group-flush-body-padding: 0 !default;
+$cadmin-panel-group-flush-body-padding: 0px !default;
 
 $cadmin-panel-group-flush-collapse-icon-left: null !default;
-$cadmin-panel-group-flush-collapse-icon-right: 0 !default;
+$cadmin-panel-group-flush-collapse-icon-right: 0px !default;
 $cadmin-panel-group-flush-collapse-icon-padding-left: null !default;
 $cadmin-panel-group-flush-collapse-icon-padding-right: 24px !default;
 
@@ -145,8 +153,9 @@ $cadmin-panel-group-flush-panel-unstyled: () !default;
 $cadmin-panel-group-flush-panel-unstyled: map-deep-merge(
 	(
 		margin-bottom: 24px,
+
 		body: (
-			margin-bottom: 0,
+			margin-bottom: 0px,
 		),
 	),
 	$cadmin-panel-group-flush-panel-unstyled
@@ -161,10 +170,12 @@ $cadmin-panel-secondary: map-deep-merge(
 	(
 		border-color: $cadmin-gray-300,
 		color: $cadmin-gray-600,
+
 		header: (
 			border-color: $cadmin-gray-300,
 			link: $cadmin-panel-secondary-header-link,
 		),
+
 		footer: (
 			border-color: $cadmin-gray-300,
 		),
@@ -178,6 +189,7 @@ $cadmin-panel-unstyled-header-link: () !default;
 $cadmin-panel-unstyled-header-link: map-deep-merge(
 	(
 		border-radius: 1px,
+
 		focus: (
 			box-shadow: #{0 0 0 4px $cadmin-body-bg,
 			0 0 0 6px $cadmin-primary-l0},
@@ -190,28 +202,34 @@ $cadmin-panel-unstyled: () !default;
 $cadmin-panel-unstyled: map-deep-merge(
 	(
 		background-color: transparent,
-		border-radius: 0,
-		border-width: 0,
+		border-radius: 0px,
+		border-width: 0px,
 		margin-bottom: 24px,
+
 		header: (
 			border-color: $cadmin-gray-500,
-			border-radius: 0,
+			border-radius: 0px,
 			border-style: solid,
-			border-width: 0 0 1px 0,
-			padding-left: 0,
+			border-width: 0px 0px 1px 0px,
+			padding-left: 0px,
+
 			collapsed: (
 				border-color: $cadmin-gray-500,
 			),
+
 			link: $cadmin-panel-unstyled-header-link,
 		),
+
 		collapse-icon: (
-			right: 0,
+			right: 0px,
 		),
+
 		body: (
-			padding: 16px 0 0.1px 0,
+			padding: 16px 0px 0.1px 0px,
 		),
+
 		footer: (
-			padding: 16px 0 0.1px 0,
+			padding: 16px 0px 0.1px 0px,
 		),
 	),
 	$cadmin-panel-unstyled