@clayui/css 3.81.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
 );

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/_progress-bars.scss

@@ -124,11 +124,38 @@
 @each $color, $value in $progress-palette {
 	.progress-#{$color} {
 		.progress-bar {
-			background-color: map-get($value, bar-bg);
+			$progress-bar: setter(map-get($value, progress-bar), ());
+			$progress-bar: map-merge(
+				$progress-bar,
+				(
+					background-color:
+						setter(
+							map-get($progress-bar, background-color),
+							map-get($value, bar-bg)
+						),
+				)
+			);
+
+			@include clay-css($progress-bar);
 		}
 
 		.progress-group-feedback {
-			color: map-get($value, group-feedback-color);
+			$progress-group-feedback: setter(
+				map-get($value, progress-group-feedback),
+				()
+			);
+			$progress-group-feedback: map-merge(
+				$progress-group-feedback,
+				(
+					color:
+						setter(
+							map-get($progress-group-feedback, color),
+							map-get($value, group-feedback-color)
+						),
+				)
+			);
+
+			@include clay-css($progress-group-feedback);
 		}
 	}
 }

package/src/scss/components/_utilities.scss

@@ -324,6 +324,28 @@
 	background-color: $page-header-bg;
 }
 
+// Clay Gap
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+	@include media-breakpoint-up($breakpoint) {
+		$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+		@each $size, $length in $c-gap {
+			.c-gap#{$infix}-#{$size} {
+				gap: $length;
+			}
+
+			.c-gapx#{$infix}-#{$size} {
+				column-gap: $length;
+			}
+
+			.c-gapy#{$infix}-#{$size} {
+				row-gap: $length;
+			}
+		}
+	}
+}
+
 // Clay Margin and Padding
 
 @each $breakpoint in map-keys($grid-breakpoints) {

package/src/scss/mixins/_globals.scss

@@ -119,6 +119,7 @@
 			'font-style',
 			'font-variant',
 			'font-weight',
+			'gap',
 			'grid',
 			'grid-area',
 			'grid-auto-columns',
@@ -199,6 +200,7 @@
 			'position',
 			'resize',
 			'right',
+			'row-gap',
 			'scroll-behavior',
 			'scrollbar-width',
 			'table-layout',

package/src/scss/mixins/_input-groups.scss

@@ -27,7 +27,7 @@
 	$breakpoint: setter(map-get($map, breakpoint), md);
 	$breakpoint-down: clay-breakpoint-prev($breakpoint);
 
-	$item: setter(map-get($map, item), ());
+	$item: setter(map-get($map, input-group-item), map-get($map, item), ());
 	$item: map-merge(
 		$item,
 		(
@@ -55,7 +55,11 @@
 		)
 	);
 
-	$item-shrink: setter(map-get($map, item-shrink), ());
+	$item-shrink: setter(
+		map-get($map, input-group-item-shrink),
+		map-get($map, item-shrink),
+		()
+	);
 	$item-shrink: map-merge(
 		$item-shrink,
 		(

package/src/scss/mixins/_modals.scss

@@ -24,7 +24,7 @@
 	@if (type-of($map) == 'map') {
 		$enabled: setter(map-get($map, enabled), true);
 
-		$header: setter(map-get($map, header), ());
+		$header: setter(map-get($map, modal-header), map-get($map, header), ());
 		$header: map-merge(
 			$header,
 			(
@@ -46,7 +46,11 @@
 			)
 		);
 
-		$header-close: setter(map-get($map, header-close), ());
+		$header-close: setter(
+			map-deep-get($map, header, close),
+			map-get($map, header-close),
+			()
+		);
 		$header-close: map-merge(
 			$header-close,
 			(
@@ -75,7 +79,7 @@
 			)
 		);
 
-		$body: setter(map-get($map, body), ());
+		$body: setter(map-get($map, modal-body), map-get($map, body), ());
 		$body: map-merge(
 			$body,
 			(
@@ -88,7 +92,7 @@
 			)
 		);
 
-		$footer: setter(map-get($map, footer), ());
+		$footer: setter(map-get($map, modal-footer), map-get($map, footer), ());
 		$footer: map-merge(
 			$footer,
 			(

package/src/scss/mixins/_panels.scss

@@ -67,7 +67,7 @@
 			)
 		);
 
-		$header: setter(map-get($map, header), ());
+		$header: setter(map-get($map, panel-header), map-get($map, header), ());
 		$header: map-merge(
 			$header,
 			(
@@ -184,7 +184,7 @@
 		$header-link: setter(map-get($header, link), ());
 		$header-link: map-deep-merge($header-link, $old-header-link);
 
-		$title: setter(map-get($map, title), ());
+		$title: setter(map-get($map, panel-title), map-get($map, title), ());
 		$title: map-merge(
 			$title,
 			(
@@ -238,7 +238,7 @@
 			)
 		);
 
-		$body: setter(map-get($map, body), ());
+		$body: setter(map-get($map, panel-body), map-get($map, body), ());
 		$body: map-merge(
 			$body,
 			(
@@ -285,7 +285,7 @@
 			)
 		);
 
-		$footer: setter(map-get($map, footer), ());
+		$footer: setter(map-get($map, panel-footer), map-get($map, footer), ());
 		$footer: map-merge(
 			$footer,
 			(