@clayui/css 3.158.0 → 3.160.0

package/src/scss/atlas/variables/_pagination.scss

@@ -29,7 +29,7 @@ $pagination-border-color: $pagination-bg !default;
 $pagination-border-width: 0.0625rem !default; // 1px
 $pagination-color: $gray-600 !default;
 $pagination-padding-x: 0.625rem !default; // 10px
-$pagination-padding-y: 0 !default;
+$pagination-padding-y: 0rem !default;
 
 $pagination-hover-bg: rgba($gray-900, 0.04) !default;
 $pagination-hover-border-color: transparent !default;
@@ -56,9 +56,10 @@ $pagination-link-hover: map-deep-merge(
 		border-color: $pagination-hover-border-color,
 		color: $pagination-hover-color,
 		font-weight: $font-weight-semi-bold,
-		letter-spacing: 0,
+		letter-spacing: 0rem,
 		text-decoration: none,
 		z-index: 2,
+
 		before: (
 			background-color: $secondary-l0,
 			height: 0.1875rem,
@@ -74,17 +75,18 @@ $pagination-link-focus: map-deep-merge(
 		border-color: $pagination-hover-border-color,
 		box-shadow: none,
 		color: $pagination-hover-color,
+
 		after: (
 			border-radius: $pagination-link-border-radius,
-			bottom: 0,
+			bottom: 0rem,
 			box-shadow: $pagination-focus-box-shadow,
 			content: '',
 			display: block,
-			left: 0,
+			left: 0rem,
 			pointer-events: none,
 			position: absolute,
-			right: 0,
-			top: 0,
+			right: 0rem,
+			top: 0rem,
 		),
 	),
 	$pagination-link-focus
@@ -97,7 +99,7 @@ $pagination-link-active: map-deep-merge(
 		border-color: $pagination-active-border-color,
 		color: $pagination-active-color,
 		font-weight: $font-weight-semi-bold,
-		letter-spacing: 0,
+		letter-spacing: 0rem,
 	),
 	$pagination-link-active
 );
@@ -108,6 +110,7 @@ $pagination-link-disabled: map-deep-merge(
 		before: (
 			content: none,
 		),
+
 		focus: (
 			after: (
 				content: none,
@@ -121,33 +124,40 @@ $pagination-link: () !default;
 $pagination-link: map-deep-merge(
 	(
 		letter-spacing: 0.033em,
+
 		before: (
-			border-radius: 0 0 $border-radius $border-radius,
-			bottom: 0,
+			border-radius: 0rem 0rem $border-radius $border-radius,
+			bottom: 0rem,
 			content: '',
 			display: block,
-			left: 0,
+			left: 0rem,
 			position: absolute,
-			right: 0,
+			right: 0rem,
 		),
+
 		active: $pagination-link-active,
+
 		active-class: (
 			background-color: $pagination-active-bg,
 			border-color: $pagination-active-border-color,
 			color: $pagination-active-color,
 			font-weight: $font-weight-semi-bold,
-			letter-spacing: 0,
+			letter-spacing: 0rem,
+
 			before: (
 				background-color: $primary-l0,
 				height: 0.25rem,
 			),
 		),
+
 		show: (
 			font-weight: $font-weight-semi-bold,
-			letter-spacing: 0,
+			letter-spacing: 0rem,
+
 			before: (
 				background-color: transparent,
 			),
+
 			hover: (
 				before: (
 					background-color: $secondary-l0,
@@ -186,9 +196,11 @@ $pagination-items-per-page-link-disabled: map-deep-merge(
 	(
 		font-weight: $font-weight-normal,
 		letter-spacing: 0.033em,
+
 		before: (
 			content: none,
 		),
+
 		focus: (
 			after: (
 				content: none,
@@ -204,17 +216,21 @@ $pagination-items-per-page-link: () !default;
 $pagination-items-per-page-link: map-deep-merge(
 	(
 		letter-spacing: 0.025em,
+
 		before: (
-			border-radius: 0 0 $border-radius $border-radius,
-			bottom: 0,
+			border-radius: 0rem 0rem $border-radius $border-radius,
+			bottom: 0rem,
 			content: '',
 			display: block,
-			left: 0,
+			left: 0rem,
 			position: absolute,
-			right: 0,
+			right: 0rem,
 		),
+
 		hover: $pagination-link-hover,
+
 		disabled: $pagination-items-per-page-link-disabled,
+
 		show: map-get($pagination-link, show),
 	),
 	$pagination-items-per-page-link
@@ -228,15 +244,19 @@ $pagination-results-color: $pagination-color !default;
 
 // .pagination-sm
 
-$pagination-link-border-radius-sm: 0.3125rem !default;
 $pagination-font-size-sm: 0.75rem !default; // 12px
+$pagination-padding-y-sm: 0rem !default;
+
 $pagination-item-height-sm: 1.5rem !default; // 24px
-$pagination-padding-y-sm: 0 !default;
+
+$pagination-link-border-radius-sm: 0.3125rem !default;
 
 // .pagination-lg
 
-$pagination-link-border-radius-lg: 0.3125rem !default; // 5px
 $pagination-font-size-lg: 1.125rem !default; // 18px
-$pagination-item-height-lg: 2.75rem !default; //44px
 $pagination-padding-x-lg: 1rem !default; // 16px
-$pagination-padding-y-lg: 0 !default;
+$pagination-padding-y-lg: 0rem !default;
+
+$pagination-item-height-lg: 2.75rem !default; //44px
+
+$pagination-link-border-radius-lg: 0.3125rem !default; // 5px

package/src/scss/atlas/variables/_panels.scss

@@ -10,9 +10,11 @@ $panel-header-link: () !default;
 $panel-header-link: map-deep-merge(
 	(
 		transition: box-shadow 0.15s ease-in-out,
+
 		hover: (
 			text-decoration: $panel-header-link-hover-text-decoration,
 		),
+
 		focus: (
 			box-shadow: $component-focus-box-shadow,
 			outline: 0,
@@ -52,9 +54,11 @@ $panel: map-deep-merge(
 		panel-header: (
 			border-bottom: $panel-header-border-bottom-width solid transparent,
 			font-size: $panel-header-font-size,
+
 			collapsed: (
 				link: $panel-header-collapsed-link,
 			),
+
 			link: $panel-header-link,
 		),
 	),
@@ -80,10 +84,12 @@ $panel-secondary: map-deep-merge(
 	(
 		border-color: $gray-300,
 		color: $gray-600,
+
 		panel-header: (
 			background-color: null,
 			border-color: $gray-300,
 		),
+
 		panel-footer: (
 			background-color: null,
 			border-color: $gray-300,
@@ -98,6 +104,7 @@ $panel-unstyled-header-link: () !default;
 $panel-unstyled-header-link: map-deep-merge(
 	(
 		border-radius: 1px,
+
 		focus: (
 			box-shadow: #{0 0 0 0.25rem $body-bg,
 			0 0 0 0.375rem $primary-l0},

package/src/scss/atlas/variables/_popovers.scss

@@ -3,20 +3,22 @@ $popover-border-radius: $border-radius !default; // 4px
 $popover-border-width: 1px !default;
 $popover-box-shadow: 0 1px 15px -2px rgba(0, 0, 0, 0.2) !default;
 $popover-max-width: 14.5rem !default; // 232px
+
 $popover-inline-scroller-max-height: 14.875rem !default; // 238px
 
-$popover-arrow-outer-color: transparent !default;
 $popover-arrow-height: 5px !default;
 $popover-arrow-offset: 0.625rem !default; // 10px
-$popover-arrow-width: $popover-arrow-height * 2 !default;
+
+$popover-arrow-outer-color: transparent !default;
+$popover-arrow-width: calc(#{$popover-arrow-height} * 2) !default;
 
 $popover-header-bg: $white !default;
 $popover-header-border-color: $gray-300 !default;
 $popover-header-color: $gray-900 !default;
 $popover-header-font-size: 0.875rem !default; // 14px
 $popover-header-margin-x: 1rem !default; // 16px
-$popover-header-margin-y: 0 !default;
-$popover-header-padding-x: 0 !default;
+$popover-header-margin-y: 0rem !default;
+$popover-header-padding-x: 0rem !default;
 $popover-header-padding-y: 0.75rem !default; // 12px
 
 $popover-body-color: $gray-600 !default;

package/src/scss/atlas/variables/_range.scss

@@ -12,26 +12,32 @@ $clay-range-input: () !default;
 $clay-range-input: map-deep-merge(
 	(
 		color: $gray-500,
+
 		clay-range-thumb: (
 			box-shadow: 0 1px 5px -1px rgba(0, 0, 0, 0.3),
 		),
+
 		clay-range-track: (
 			background-color: $gray-200,
 		),
+
 		tooltip-inner: (
 			padding: 0.5rem 0.75rem,
 		),
+
 		form-control-range: (
 			hover: (
 				clay-range-thumb: (
 					background-color: $primary-l3,
 				),
 			),
+
 			focus: (
 				clay-range-thumb: (
 					box-shadow: $component-focus-inset-box-shadow,
 				),
 			),
+
 			disabled: (
 				clay-range-thumb: (
 					background-color: $gray-100,

package/src/scss/atlas/variables/_sheets.scss

@@ -36,6 +36,7 @@ $sheet-subtitle-link: map-deep-merge(
 	(
 		border-radius: 1px,
 		transition: box-shadow 0.15s ease-in-out,
+
 		focus: (
 			box-shadow: #{0 0 0 0.25rem $white,
 			0 0 0 0.375rem $primary-l0},

package/src/scss/atlas/variables/_sidebar.scss

@@ -62,37 +62,46 @@ $sidebar-light: map-deep-merge(
 		box-shadow: -0.25rem 0 0.5rem -0.25rem rgba(0, 0, 0, 0.1),
 		close: (
 			color: $secondary,
+
 			hover: (
 				background-color: rgba($gray-900, 0.03),
 				color: $gray-900,
 			),
+
 			focus: (
 				background-color: rgba($gray-900, 0.03),
 				color: $gray-900,
 			),
+
 			active: (
 				background-color: rgba($gray-900, 0.06),
 				color: $gray-900,
 			),
+
 			disabled: (
 				background-color: transparent,
 				box-shadow: none,
 			),
 		),
+
 		sidenav-start: (
 			box-shadow: 0.25rem 0 0.5rem -0.25rem rgba(0, 0, 0, 0.1),
 		),
+
 		sidebar-panel: (
 			background-color: $gray-200,
 		),
+
 		sidebar-dt: (
 			color: $gray-600,
 		),
+
 		sidebar-dd: (
 			href: (
 				color: $gray-900,
 			),
 		),
+
 		panel-unstyled: (
 			header: (
 				link: (
@@ -103,6 +112,7 @@ $sidebar-light: map-deep-merge(
 				),
 			),
 		),
+
 		component-navigation-bar: $sidebar-light-navigation-bar,
 	),
 	$sidebar-light

package/src/scss/atlas/variables/_tables.scss

@@ -1,13 +1,15 @@
 $table-bg: $white !default;
-$table-accent-bg: $light-l1 !default;
-$table-hover-bg: clay-lighten($component-active-bg, 44.9) !default;
 $table-border-color: $gray-300 !default;
 $table-font-size: 0.875rem !default;
 
+$table-accent-bg: $light-l1 !default;
+
+$table-hover-bg: clay-lighten($component-active-bg, 44.9) !default;
+
 $table-disabled-color: $gray-500 !default;
 
 $table-head-bg: $white !default;
-$table-head-border-bottom-width: 0 !default;
+$table-head-border-bottom-width: 0rem !default;
 $table-head-color: $gray-600 !default;
 $table-head-font-weight: $font-weight-semi-bold !default;
 
@@ -17,9 +19,11 @@ $table-head-link: map-deep-merge(
 		border-radius: 1px,
 		color: $gray-600,
 		transition: box-shadow 0.15s ease-in-out,
+
 		hover: (
 			color: $gray-900,
 		),
+
 		focus: (
 			box-shadow: $component-focus-box-shadow,
 			outline: 0,
@@ -45,8 +49,11 @@ $table-divider-font-weight: $font-weight-semi-bold !default;
 $table-divider-text-transform: uppercase !default;
 
 $table-quick-action-menu-accent-bg: $table-accent-bg !default;
+
 $table-quick-action-menu-accent-active-bg: $table-hover-bg !default;
+
 $table-quick-action-menu-active-bg: $gray-200 !default;
+
 $table-quick-action-menu-hover-bg: $table-hover-bg !default;
 
 // Table Title
@@ -58,6 +65,7 @@ $table-title-link: map-deep-merge(
 		display: inline-block,
 		max-width: 100%,
 		transition: box-shadow 0.15s ease-in-out,
+
 		focus: (
 			box-shadow: $component-focus-box-shadow,
 			outline: 0,
@@ -83,16 +91,19 @@ $table-action-link: map-deep-merge(
 		color: $gray-600,
 		font-size: 1rem,
 		transition: $component-transition,
+
 		hover: (
 			background-color: rgba(0, 0, 0, 0.02),
 			color: $gray-900,
 		),
+
 		focus: (
 			background-color: rgba(0, 0, 0, 0.02),
 			color: $gray-900,
 			box-shadow: $component-focus-box-shadow,
 			outline: 0,
 		),
+
 		active: (
 			background-color: rgba(0, 0, 0, 0.04),
 		),
@@ -110,9 +121,11 @@ $table-link: map-deep-merge(
 		display: inline-block,
 		max-width: 100%,
 		transition: box-shadow 0.15s ease-in-out,
+
 		hover: (
 			color: $gray-900,
 		),
+
 		focus: (
 			box-shadow: $component-focus-box-shadow,
 			outline: 0,
@@ -135,6 +148,7 @@ $c-tr-table-focus: map-deep-merge(
 					inset 0 -0.25rem 0 0 $white,
 				),
 			),
+
 			first-child: (
 				after: (
 					box-shadow: (
@@ -143,6 +157,7 @@ $c-tr-table-focus: map-deep-merge(
 					),
 				),
 			),
+
 			last-child: (
 				after: (
 					box-shadow: (
@@ -162,7 +177,9 @@ $table-list-border-color: $gray-300 !default;
 $table-list-color: $body-color !default;
 
 $table-list-accent-bg: $gray-100 !default;
+
 $table-list-hover-bg: $table-hover-bg !default;
+
 $table-list-active-bg: $table-list-hover-bg !default;
 
 $table-list-disabled-color: $gray-500 !default;
@@ -189,9 +206,11 @@ $table-list-title-link: map-deep-merge(
 		display: inline-block,
 		max-width: 100%,
 		transition: box-shadow 0.15s ease-in-out,
+
 		hover: (
 			color: $gray-900,
 		),
+
 		focus: (
 			box-shadow: $component-focus-box-shadow,
 			outline: 0,
@@ -210,9 +229,11 @@ $table-list-link: map-deep-merge(
 		display: inline-block,
 		max-width: 100%,
 		transition: box-shadow 0.15s ease-in-out,
+
 		hover: (
 			color: $gray-900,
 		),
+
 		focus: (
 			box-shadow: $component-focus-box-shadow,
 			outline: 0,
@@ -229,16 +250,19 @@ $table-list-action-link: map-deep-merge(
 		color: $gray-600,
 		font-size: 1rem,
 		transition: $component-transition,
+
 		hover: (
 			background-color: rgba(0, 0, 0, 0.02),
 			color: $gray-900,
 		),
+
 		focus: (
 			background-color: rgba(0, 0, 0, 0.02),
 			color: $gray-900,
 			box-shadow: $component-focus-box-shadow,
 			outline: 0,
 		),
+
 		active: (
 			background-color: rgba(0, 0, 0, 0.04),
 		),

package/src/scss/atlas/variables/_time.scss

@@ -2,6 +2,7 @@ $clay-time-btn: () !default;
 $clay-time-btn: map-deep-merge(
 	(
 		color: $secondary,
+
 		focus: (
 			box-shadow: 0 0 0 1px $primary-l0,
 		),

package/src/scss/atlas/variables/_toggle-switch.scss

@@ -1,16 +1,22 @@
 // must all be same units--start
 $toggle-switch-bar-padding: 4px !default; // space between button and bar, can be negative value
+
 $toggle-switch-bar-padding-mobile: 4px !default;
 
 $toggle-switch-button-width: 16px !default; // 24px
+
 $toggle-switch-button-width-mobile: 16px !default; // 16px
 
-$toggle-switch-bar-height: ($toggle-switch-bar-padding * 2) +
-	$toggle-switch-button-width !default;
-$toggle-switch-bar-height-mobile: ($toggle-switch-bar-padding-mobile * 2) +
-	$toggle-switch-button-width-mobile !default;
+$toggle-switch-bar-height: calc(
+	(#{$toggle-switch-bar-padding} * 2) + #{$toggle-switch-button-width}
+) !default;
+
+$toggle-switch-bar-height-mobile: calc(
+	(#{$toggle-switch-bar-padding-mobile} * 2) + #{$toggle-switch-button-width-mobile}
+) !default;
 
 $toggle-switch-bar-width: 48px !default; // width of switch bar
+
 $toggle-switch-bar-width-mobile: 40px !default; // width of switch bar
 // must all be same units--end
 
@@ -19,18 +25,20 @@ $toggle-switch-bar-border-color: $toggle-switch-bar-bg !default;
 $toggle-switch-bar-border-radius: 20px !default;
 $toggle-switch-bar-border-width: 1px !default;
 $toggle-switch-bar-font-size: 0.625rem !default;
-$toggle-switch-bar-font-size-mobile: 0.625rem !default;
 $toggle-switch-bar-icon-color: $white !default;
 $toggle-switch-bar-focus-box-shadow: $component-focus-box-shadow !default;
+$toggle-switch-bar-font-size-mobile: 0.625rem !default;
 
 $toggle-switch-button-bg: $white !default;
 $toggle-switch-button-border-color: $toggle-switch-button-bg !default;
 $toggle-switch-button-border-radius: 50% !default;
 $toggle-switch-button-border-width: 1px !default;
 $toggle-switch-button-font-size: $toggle-switch-bar-font-size !default; // 12px
-$toggle-switch-button-font-size-mobile: $toggle-switch-bar-font-size-mobile !default; // 10px
+
 $toggle-switch-button-icon-color: $gray-900 !default;
 
+$toggle-switch-button-font-size-mobile: $toggle-switch-bar-font-size-mobile !default; // 10px
+
 // Toggle Switch On
 $toggle-switch-bar-on-bg: $component-active-bg !default;
 $toggle-switch-bar-on-border-color: $toggle-switch-bar-on-bg !default;
@@ -50,25 +58,29 @@ $toggle-switch-sizes: map-deep-merge(
 			toggle-switch-check: (
 				toggle-switch-bar: (
 					after: (
-						bottom: 0,
+						bottom: 0px,
 						height: 12px,
 						left: 2px,
 						top: 2px,
 						width: 12px,
 					),
+
 					toggle-switch-icon: (
 						font-size: 0.5rem,
 						top: 0px,
 					),
+
 					toggle-switch-icon-off: (
 						left: 13px,
 					),
 				),
+
 				checked: (
 					toggle-switch-bar: (
 						after: (
 							left: 16px,
 						),
+
 						button-icon: (
 							left: 14px,
 						),

package/src/scss/atlas/variables/_utilities.scss

@@ -21,15 +21,18 @@ $close: map-deep-merge(
 	(
 		color: $gray-900,
 		opacity: 1,
+
 		hover: (
 			color: $gray-900,
 			opacity: 1,
 			outline: 0,
 		),
+
 		focus: (
 			box-shadow: $component-focus-box-shadow,
 			opacity: c-unset,
 		),
+
 		disabled: (
 			color: $gray-600,
 			opacity: 0.65,

package/src/scss/cadmin/components/_alerts.scss

@@ -123,7 +123,9 @@
 
 	.alert-list {
 		.alert-fluid:last-child {
-			margin-bottom: math-sign($cadmin-alert-fluid-border-bottom-width);
+			margin-bottom: calc(
+				#{$cadmin-alert-fluid-border-bottom-width} * -1
+			);
 		}
 	}
 }

package/src/scss/cadmin/components/_button-groups.scss

@@ -25,7 +25,7 @@
 .btn-group {
 	> .btn:not(:first-child),
 	> .btn-group:not(:first-child) {
-		margin-left: math-sign($cadmin-btn-border-width);
+		margin-left: calc(#{$cadmin-btn-border-width} * -1);
 	}
 
 	> .btn:not(:last-child):not(.dropdown-toggle),
@@ -123,7 +123,7 @@
 
 	> .btn:not(:first-child),
 	> .btn-group:not(:first-child) {
-		margin-top: math-sign($cadmin-btn-border-width);
+		margin-top: calc(#{$cadmin-btn-border-width} * -1);
 	}
 
 	> .btn:not(:last-child):not(.dropdown-toggle),

package/src/scss/cadmin/components/_cards.scss

@@ -488,8 +488,8 @@
 }
 
 .card-page-item-header {
-	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);
 	width: 100%;
 }
 

package/src/scss/cadmin/components/_drilldown.scss

@@ -64,11 +64,11 @@
 		}
 
 		.dropdown-item-indicator-text-end {
-			margin-left: math-sign(
-				map-get(
-					$cadmin-drilldown-dropdown-menu-indicator-start,
-					padding-left
-				)
+			margin-left: calc(
+				#{map-get(
+						$cadmin-drilldown-dropdown-menu-indicator-start,
+						padding-left
+					)} * -1
 			);
 		}
 	}
@@ -82,11 +82,11 @@
 		@include clay-css($cadmin-drilldown-dropdown-menu-indicator-end);
 
 		.dropdown-item-indicator-text-start {
-			margin-right: math-sign(
-				map-get(
-					$cadmin-drilldown-dropdown-menu-indicator-end,
-					padding-right
-				)
+			margin-right: calc(
+				#{map-get(
+						$cadmin-drilldown-dropdown-menu-indicator-end,
+						padding-right
+					)} * -1
 			);
 		}
 

package/src/scss/cadmin/components/_dropdowns.scss

@@ -158,11 +158,11 @@
 		margin-right: 0;
 
 		&:first-child {
-			margin-top: math-sign($cadmin-dropdown-padding-y);
+			margin-top: calc(#{$cadmin-dropdown-padding-y} * -1);
 		}
 
 		&:last-child {
-			margin-bottom: math-sign($cadmin-dropdown-padding-y);
+			margin-bottom: calc(#{$cadmin-dropdown-padding-y} * -1);
 		}
 	}