@clayui/css 3.78.0 → 3.82.0

package/src/scss/cadmin/variables/_tbar.scss

@@ -10,39 +10,43 @@ $cadmin-tbar-stacked: map-deep-merge(
 		height: 100%,
 		padding-bottom: 8px,
 		padding-top: 8px,
-		nav: (
+		tbar-nav: (
 			flex-direction: column,
 			min-width: 0,
 		),
-		item: (
+		tbar-item: (
 			align-items: center,
 			justify-content: flex-start,
 			padding-left: 0,
 			padding-right: 0,
 		),
-		item-expand: (
+		tbar-item-expand: (
 			flex-shrink: 0,
 			min-width: 0,
 		),
-		divider-before: (
-			background-color: $cadmin-body-color,
-			content: '',
-			display: block,
-			height: 1px,
-			margin-bottom: 4px,
-			margin-top: 4px,
-			width: 40px,
+		tbar-divider-before: (
+			before: (
+				background-color: $cadmin-body-color,
+				content: '',
+				display: block,
+				height: 1px,
+				margin-bottom: 4px,
+				margin-top: 4px,
+				width: 40px,
+			),
 		),
-		divider-after: (
-			background-color: $cadmin-body-color,
-			content: '',
-			display: block,
-			height: 1px,
-			margin-bottom: 4px,
-			margin-top: 4px,
-			width: 40px,
+		tbar-divider-after: (
+			after: (
+				background-color: $cadmin-body-color,
+				content: '',
+				display: block,
+				height: 1px,
+				margin-bottom: 4px,
+				margin-top: 4px,
+				width: 40px,
+			),
 		),
-		btn-monospaced: (
+		tbar-btn-monospaced: (
 			border-color: transparent,
 			border-radius: 0,
 			border-width: 0,
@@ -58,12 +62,14 @@ $cadmin-tbar-stacked: map-deep-merge(
 			position: relative,
 			width: 40px,
 			focus: (
-				box-shadow: inset 0 0 0 2px $cadmin-primary-l1#{','} inset 0 0 0
-					4px $cadmin-white,
+				box-shadow: #{inset 0 0 0 2px $cadmin-primary-l1,
+				inset 0 0 0 4px $cadmin-white},
 			),
-			active-focus: (
-				box-shadow: inset 0 0 0 2px $cadmin-primary-l1#{','} inset 0 0 0
-					4px $cadmin-white,
+			active: (
+				focus: (
+					box-shadow: #{inset 0 0 0 2px $cadmin-primary-l1,
+					inset 0 0 0 4px $cadmin-white},
+				),
 			),
 		),
 	),
@@ -76,7 +82,9 @@ $cadmin-tbar-inline-xs-down: () !default;
 $cadmin-tbar-inline-xs-down: map-deep-merge(
 	(
 		breakpoint-down: nth(map-keys($cadmin-grid-breakpoints), 1),
-		item-padding-left: 0,
+		tbar-item: (
+			padding-left: 0,
+		),
 	),
 	$cadmin-tbar-inline-xs-down
 );
@@ -85,7 +93,9 @@ $cadmin-tbar-inline-sm-down: () !default;
 $cadmin-tbar-inline-sm-down: map-deep-merge(
 	(
 		breakpoint-down: nth(map-keys($cadmin-grid-breakpoints), 2),
-		item-padding-left: 0,
+		tbar-item: (
+			padding-left: 0,
+		),
 	),
 	$cadmin-tbar-inline-sm-down
 );
@@ -94,7 +104,9 @@ $cadmin-tbar-inline-md-down: () !default;
 $cadmin-tbar-inline-md-down: map-deep-merge(
 	(
 		breakpoint-down: nth(map-keys($cadmin-grid-breakpoints), 3),
-		item-padding-left: 0,
+		tbar-item: (
+			padding-left: 0,
+		),
 	),
 	$cadmin-tbar-inline-md-down
 );
@@ -103,7 +115,9 @@ $cadmin-tbar-inline-lg-down: () !default;
 $cadmin-tbar-inline-lg-down: map-deep-merge(
 	(
 		breakpoint-down: nth(map-keys($cadmin-grid-breakpoints), 4),
-		item-padding-left: 0,
+		tbar-item: (
+			padding-left: 0,
+		),
 	),
 	$cadmin-tbar-inline-lg-down
 );
@@ -112,7 +126,9 @@ $cadmin-tbar-inline-xl-down: () !default;
 $cadmin-tbar-inline-xl-down: map-deep-merge(
 	(
 		breakpoint-down: nth(map-keys($cadmin-grid-breakpoints), 5),
-		item-padding-left: 0,
+		tbar-item: (
+			padding-left: 0,
+		),
 	),
 	$cadmin-tbar-inline-xl-down
 );
@@ -140,13 +156,17 @@ $cadmin-tbar-light: map-deep-merge(
 		box-shadow: inset 1px 0 0 0 $cadmin-gray-200#{','} inset -1px 0 0 0
 			$cadmin-gray-200,
 		color: $cadmin-secondary,
-		divider-before: (
-			background-color: $cadmin-gray-200,
+		tbar-divider-before: (
+			before: (
+				background-color: $cadmin-gray-200,
+			),
 		),
-		divider-after: (
-			background-color: $cadmin-gray-200,
+		tbar-divider-after: (
+			after: (
+				background-color: $cadmin-gray-200,
+			),
 		),
-		btn-monospaced: (
+		tbar-btn-monospaced: (
 			hover: (
 				color: $cadmin-dark,
 			),
@@ -172,13 +192,17 @@ $cadmin-tbar-dark-d1: map-deep-merge(
 		box-shadow: inset 1px 0 0 0 rgba($cadmin-white, 0.06) #{','} inset -1px
 			0 0 0 rgba($cadmin-white, 0.06),
 		color: $cadmin-gray-500,
-		divider-before: (
-			background-color: rgba($cadmin-white, 0.06),
+		tbar-divider-before: (
+			before: (
+				background-color: rgba($cadmin-white, 0.06),
+			),
 		),
-		divider-after: (
-			background-color: rgba($cadmin-white, 0.06),
+		tbar-divider-after: (
+			after: (
+				background-color: rgba($cadmin-white, 0.06),
+			),
 		),
-		btn-monospaced: (
+		tbar-btn-monospaced: (
 			hover: (
 				color: $cadmin-white,
 			),
@@ -192,15 +216,17 @@ $cadmin-tbar-dark-d1: map-deep-merge(
 				background-color: rgba($cadmin-white, 0.06),
 				color: $cadmin-white,
 			),
-			active-class-after: (
-				background-color: $cadmin-primary-l1,
-				bottom: 0,
-				content: '',
-				display: block,
-				left: 0,
-				position: absolute,
-				top: 0,
-				width: 4px,
+			active-class: (
+				after: (
+					background-color: $cadmin-primary-l1,
+					bottom: 0,
+					content: '',
+					display: block,
+					left: 0,
+					position: absolute,
+					top: 0,
+					width: 4px,
+				),
 			),
 		),
 	),
@@ -215,13 +241,17 @@ $cadmin-tbar-dark-l2: map-deep-merge(
 			0 0 0 rgba($cadmin-white, 0.06),
 		border-color: rgba($cadmin-white, 0.06),
 		color: $cadmin-gray-500,
-		divider-before: (
-			background-color: rgba($cadmin-white, 0.06),
+		tbar-divider-before: (
+			before: (
+				background-color: rgba($cadmin-white, 0.06),
+			),
 		),
-		divider-after: (
-			background-color: rgba($cadmin-white, 0.06),
+		tbar-divider-after: (
+			after: (
+				background-color: rgba($cadmin-white, 0.06),
+			),
 		),
-		btn-monospaced: (
+		tbar-btn-monospaced: (
 			hover: (
 				color: $cadmin-white,
 			),
@@ -260,8 +290,10 @@ $cadmin-subnav-tbar-component-link: () !default;
 $cadmin-subnav-tbar-component-link: map-deep-merge(
 	(
 		color: $cadmin-link-color,
-		hover-color: $cadmin-link-hover-color,
 		font-weight: $cadmin-font-weight-semi-bold,
+		hover: (
+			color: $cadmin-link-hover-color,
+		),
 	),
 	$cadmin-subnav-tbar-component-link
 );
@@ -282,26 +314,49 @@ $cadmin-subnav-tbar: () !default;
 $cadmin-subnav-tbar: map-deep-merge(
 	(
 		font-size: 14px,
-		section-text-align: left,
-		strong-font-weight: $cadmin-font-weight-semi-bold,
-		item-padding-x: 8px,
-		btn-height: 24px,
-		btn-line-height: 1,
-		btn-margin-y: 2px,
-		btn-padding-y: 0,
-		btn-monospaced-margin-y: 2px,
-		btn-monospaced-padding: 4px,
+		tbar-section: (
+			text-align: left,
+		),
+		strong: (
+			font-weight: $cadmin-font-weight-semi-bold,
+		),
+		tbar-item-padding: (
+			padding-left: 8px,
+			padding-right: 8px,
+		),
+		tbar-btn: (
+			height: 24px,
+			line-height: 1,
+			margin-bottom: 2px,
+			margin-top: 2px,
+			padding-bottom: 0,
+			padding-top: 0,
+		),
+		tbar-btn-monospaced: (
+			margin-bottom: 2px,
+			margin-top: 2px,
+			padding: 4px,
+		),
 		component-link: $cadmin-subnav-tbar-component-link,
 		component-title: $cadmin-subnav-tbar-component-title,
 		component-text: $cadmin-subnav-tbar-component-text,
 		component-label: (
 			font-weight: $cadmin-font-weight-normal,
 		),
-		link-margin-y: 2px,
-		link-padding-x: 4px,
-		link-padding-y: 1.5px,
-		link-monospaced-margin-y: 2px,
-		link-monospaced-size: 24px,
+		tbar-link: (
+			margin-bottom: 2px,
+			margin-top: 2px,
+			padding-bottom: 1.5px,
+			padding-left: 4px,
+			padding-right: 4px,
+			padding-top: 1.5px,
+		),
+		tbar-link-monospaced: (
+			height: 24px,
+			margin-bottom: 2px,
+			margin-top: 2px,
+			width: 24px,
+		),
 	),
 	$cadmin-subnav-tbar
 );
@@ -311,7 +366,11 @@ $cadmin-subnav-tbar: map-deep-merge(
 $cadmin-subnav-tbar-light: () !default;
 $cadmin-subnav-tbar-light: map-deep-merge(
 	(
-		bg-color: $cadmin-light-l2,
+		background-color:
+			setter(
+				map-get($cadmin-subnav-tbar-light, bg-color),
+				$cadmin-light-l2
+			),
 		color: $cadmin-gray-600,
 		padding-y: 2px,
 	),
@@ -324,11 +383,15 @@ $cadmin-subnav-tbar-primary-component-link: () !default;
 $cadmin-subnav-tbar-primary-component-link: map-deep-merge(
 	(
 		color: $cadmin-gray-900,
-		hover-color: $cadmin-gray-900,
-		disabled-color: $cadmin-gray-600,
-		disabled-cursor: $cadmin-disabled-cursor,
-		disabled-opacity: 0.65,
-		disabled-text-decoration: none,
+		hover: (
+			color: $cadmin-gray-900,
+		),
+		disabled: (
+			color: $cadmin-gray-600,
+			cursor: $cadmin-disabled-cursor,
+			opacity: 0.65,
+			text-decoration: none,
+		),
 	),
 	$cadmin-subnav-tbar-primary-component-link
 );
@@ -336,9 +399,13 @@ $cadmin-subnav-tbar-primary-component-link: map-deep-merge(
 $cadmin-subnav-tbar-primary-component-label-close: () !default;
 $cadmin-subnav-tbar-primary-component-label-close: map-deep-merge(
 	(
-		focus-color: inherit,
-		disabled-color: $cadmin-gray-600,
-		disabled-opacity: 0.65,
+		focus: (
+			color: inherit,
+		),
+		disabled: (
+			color: $cadmin-gray-600,
+			opacity: 0.65,
+		),
 	),
 	$cadmin-subnav-tbar-primary-component-label-close
 );
@@ -356,8 +423,10 @@ $cadmin-subnav-tbar-primary-tbar-label-size: map-deep-merge(
 	(
 		font-size: 12px,
 		margin-right: 0,
-		padding-x: 10px,
-		padding-y: 5px,
+		padding-bottom: 5px,
+		padding-left: 10px,
+		padding-right: 10px,
+		padding-top: 5px,
 		text-transform: none,
 	),
 	$cadmin-subnav-tbar-primary-tbar-label-size
@@ -366,18 +435,31 @@ $cadmin-subnav-tbar-primary-tbar-label-size: map-deep-merge(
 $cadmin-subnav-tbar-primary: () !default;
 $cadmin-subnav-tbar-primary: map-deep-merge(
 	(
-		bg-color: $cadmin-primary-l2,
-		padding-x: 4px,
-		padding-y: 10px,
-		item-justify-content: flex-start,
-		item-padding-x: 4px,
-		link-monospaced-border-radius: 0,
-		link-monospaced-border-width: 0,
-		link-monospaced-margin-y: -10px,
-		link-monospaced-size: 48px,
+		background-color:
+			setter(
+				map-get($cadmin-subnav-tbar-primary, bg-color),
+				$cadmin-primary-l2
+			),
+		padding-bottom: 10px,
+		padding-left: 4px,
+		padding-right: 4px,
+		padding-top: 10px,
+		tbar-item: (
+			justify-content: flex-start,
+			padding-left: 4px,
+			padding-right: 4px,
+		),
+		tbar-link-monospaced: (
+			border-radius: 0,
+			border-width: 0,
+			height: 48px,
+			margin-bottom: -10px,
+			margin-top: -10px,
+			width: 48px,
+		),
 		component-link: $cadmin-subnav-tbar-primary-component-link,
 		component-label: $cadmin-subnav-tbar-primary-component-label,
-		tbar-label-size: $cadmin-subnav-tbar-primary-tbar-label-size,
+		tbar-label: $cadmin-subnav-tbar-primary-tbar-label-size,
 	),
 	$cadmin-subnav-tbar-primary
 );
@@ -395,7 +477,11 @@ $cadmin-subnav-tbar-primary-disabled-component-label: map-deep-merge(
 $cadmin-subnav-tbar-primary-disabled: () !default;
 $cadmin-subnav-tbar-primary-disabled: map-deep-merge(
 	(
-		bg-color: clay-lighten(clay-desaturate($cadmin-primary, 27.03), 37.06),
+		background-color:
+			setter(
+				map-get($cadmin-subnav-tbar-primary-disabled, bg-color),
+				clay-lighten(clay-desaturate($cadmin-primary, 27.03), 37.06)
+			),
 		color: #8e94aa,
 		component-label: $cadmin-subnav-tbar-primary-disabled-component-label,
 	),

package/src/scss/cadmin/variables/_time.scss

@@ -12,7 +12,9 @@ $cadmin-clay-time-btn: map-deep-merge(
 		padding-right: 0,
 		padding-top: 0,
 		width: 24px,
-		focus-box-shadow: 0 0 0 1px #80acff,
+		focus: (
+			box-shadow: 0 0 0 1px #80acff,
+		),
 	),
 	$cadmin-clay-time-btn
 );
@@ -37,7 +39,9 @@ $cadmin-clay-time-form-control-inset: map-deep-merge(
 		text-align: center,
 		width: 20px,
 		selection-bg: transparent,
-		focus-bg: #b3d8fd,
+		focus: (
+			background-color: #b3d8fd,
+		),
 	),
 	$cadmin-clay-time-form-control-inset
 );
@@ -54,9 +58,10 @@ $cadmin-clay-time-ampm: map-deep-merge(
 );
 
 $cadmin-clay-time-input-group-text: () !default;
-$cadmin-clay-time-input-group-text: map-deep-merge(
+$cadmin-clay-time-input-group-text: map-merge(
 	(
-		bg: transparent,
+		background-color:
+			setter(map-get($cadmin-clay-time-input-group-text, bg), transparent),
 		border-color: transparent,
 		padding-bottom: 0,
 		padding-left: 0,
@@ -70,7 +75,7 @@ $cadmin-clay-time-divider-margin-left: null !default;
 $cadmin-clay-time-divider-margin-right: null !default;
 
 $cadmin-clay-time-edit: () !default;
-$cadmin-clay-time-edit: map-deep-merge(
+$cadmin-clay-time-edit: map-merge(
 	(
 		display: flex,
 		flex-wrap: wrap,
@@ -82,7 +87,7 @@ $cadmin-clay-time-edit: map-deep-merge(
 );
 
 $cadmin-clay-time-inner-spin: () !default;
-$cadmin-clay-time-inner-spin: map-deep-merge(
+$cadmin-clay-time-inner-spin: map-merge(
 	(
 		border-color: $cadmin-secondary-l2,
 		border-radius: 8px,

package/src/scss/cadmin/variables/_utilities.scss

@@ -87,13 +87,13 @@ $cadmin-close: map-deep-merge(
 			cursor: $cadmin-disabled-cursor,
 			opacity: $cadmin-component-disabled-opacity,
 			outline: 0,
+			active: (
+				pointer-events: none,
+			),
 		),
-		disabled-active: (
-			pointer-events: none,
+		lexicon-icon: (
+			margin-top: 0,
 		),
-		btn-focus-box-shadow: $cadmin-component-focus-box-shadow,
-		btn-focus-outline: 0,
-		lexicon-icon-margin-top: 0,
 	),
 	$cadmin-close
 );
@@ -172,6 +172,21 @@ $cadmin-inline-item: map-deep-merge(
 
 $cadmin-page-header-bg: $cadmin-white !default;
 
+// Clay Gap
+
+$cadmin-c-gap: () !default;
+$cadmin-c-gap: map-merge(
+	(
+		0: map-get($cadmin-spacers, 0),
+		1: map-get($cadmin-spacers, 1),
+		2: map-get($cadmin-spacers, 2),
+		3: map-get($cadmin-spacers, 3),
+		4: map-get($cadmin-spacers, 4),
+		5: map-get($cadmin-spacers, 5),
+	),
+	$cadmin-c-gap
+);
+
 // Background
 
 $cadmin-bg-theme-colors: () !default;
@@ -352,7 +367,7 @@ $cadmin-border-theme-colors: map-deep-merge(
 
 // Display
 
-$cadmin-displays: none, inline, inline-block, block, table, table-row,
+$cadmin-displays: none, inline, inline-block, grid, block, table, table-row,
 	table-cell, flex, inline-flex !default;
 
 // Overflow

package/src/scss/components/_alerts.scss

@@ -9,7 +9,7 @@
 }
 
 .alert-footer {
-	@include clay-container($alert-footer);
+	@include clay-css($alert-footer);
 }
 
 .alert-link,
@@ -106,7 +106,11 @@
 .modal-body {
 	.alert {
 		.close {
-			right: $modal-inner-padding;
+			right: if(
+				variable-exists(modal-inner-padding),
+				$modal-inner-padding,
+				null
+			);
 		}
 	}
 

package/src/scss/components/_buttons.scss

@@ -203,5 +203,9 @@ input[type='button'] {
 
 .btn .loading-animation {
 	font-size: 1em;
-	margin-top: $inline-item-lexicon-icon-margin-top;
+	margin-top: if(
+		variable-exists(inline-item-lexicon-icon-margin-top),
+		$inline-item-lexicon-icon-margin-top,
+		null
+	);
 }

package/src/scss/components/_clay-color.scss

@@ -7,11 +7,11 @@
 		}
 
 		> .input-group-inset-item-before {
-			@include clay-container($clay-color-input-group-inset-item-before);
+			@include clay-css($clay-color-input-group-inset-item-before);
 		}
 
 		> .input-group-text {
-			@include clay-container($clay-color-input-group-text);
+			@include clay-css($clay-color-input-group-text);
 		}
 	}
 }
@@ -36,11 +36,11 @@
 	}
 
 	.form-group {
-		@include clay-container($clay-color-dropdown-menu-form-group);
+		@include clay-css($clay-color-dropdown-menu-form-group);
 	}
 
 	.input-group .input-group-inset-item-before {
-		@include clay-container(
+		@include clay-css(
 			$clay-color-dropdown-menu-input-group-inset-item-before
 		);
 	}
@@ -65,7 +65,7 @@
 // Clay Color Header
 
 .clay-color-header {
-	@include clay-container($clay-color-header);
+	@include clay-css($clay-color-header);
 
 	.component-title {
 		@include clay-title($clay-color-header-component-title);
@@ -75,13 +75,13 @@
 // Clay Color Footer
 
 .clay-color-footer {
-	@include clay-container($clay-color-footer);
+	@include clay-css($clay-color-footer);
 }
 
 // Clay Color Swatch
 
 .clay-color-swatch {
-	@include clay-row($clay-color-swatch);
+	@include clay-css($clay-color-swatch);
 
 	+ .clay-color-swatch {
 		margin-top: 0;
@@ -89,24 +89,21 @@
 }
 
 .clay-color-swatch-item {
-	@include clay-container($clay-color-swatch-item);
+	@include clay-css($clay-color-swatch-item);
 }
 
 // Clay Color Map Group
 
 .clay-color-map-group {
-	@include clay-container($clay-color-map-group);
+	@include clay-css($clay-color-map-group);
 }
 
 .clay-color-map {
-	@include clay-container($clay-color-map);
+	@include clay-css($clay-color-map);
 }
 
 .clay-color-map-hsb {
-	background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)),
-		linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
-
-	@include clay-container($clay-color-map-hsb);
+	@include clay-css($clay-color-map-hsb);
 }
 
 .clay-color-map-pointer {
@@ -116,27 +113,25 @@
 // Clay Color Map Values
 
 .clay-color-map-values {
-	@include clay-container($clay-color-map-values);
+	@include clay-css($clay-color-map-values);
 
 	.form-control {
 		@include clay-form-control-variant($clay-color-map-values-input);
 	}
 
 	.input-group .input-group-inset-item-before {
-		@include clay-container(
-			$clay-color-map-values-input-group-inset-item-before
-		);
+		@include clay-css($clay-color-map-values-input-group-inset-item-before);
 	}
 
 	.form-group {
-		@include clay-container($clay-color-map-values-form-group);
+		@include clay-css($clay-color-map-values-form-group);
 	}
 }
 
 // Clay Color Range
 
 .clay-color-range {
-	@include clay-container($clay-color-range);
+	@include clay-css($clay-color-range);
 }
 
 .clay-color-range-hue {