@clayui/css 3.81.0 → 3.83.0

package/src/scss/cadmin/components/_sidebar.scss

@@ -1,9 +1,11 @@
 .sidebar,
 &.sidebar {
-	height: 100%;
-	overflow: auto;
+	@include clay-css($cadmin-sidebar);
 
-	-webkit-overflow-scrolling: touch;
+	&:focus,
+	&.focus {
+		@include clay-css(map-get($cadmin-sidebar, focus));
+	}
 
 	.container-fluid {
 		padding-left: $cadmin-sidebar-padding-left;
@@ -13,37 +15,32 @@
 
 // Sidebar Header / Footer
 
-.sidebar-header,
-.sidebar-footer {
-	padding-bottom: $cadmin-sidebar-padding-bottom;
-	padding-left: $cadmin-sidebar-padding-left;
-	padding-right: $cadmin-sidebar-padding-right;
-	padding-top: $cadmin-sidebar-padding-top;
-}
-
 .sidebar-header {
+	$sidebar-header: setter(map-get($cadmin-sidebar, sidebar-header), ());
+
+	@include clay-css($sidebar-header);
+
 	.component-title {
-		@include clay-text-typography($cadmin-sidebar-header-component-title);
+		@include clay-text-typography(
+			map-get($sidebar-header, component-title)
+		);
 	}
 
 	.component-subtitle {
 		@include clay-text-typography(
-			$cadmin-sidebar-header-component-subtitle
+			map-get($sidebar-header, component-subtitle)
 		);
 	}
 }
 
+.sidebar-footer {
+	@include clay-css(map-get($cadmin-sidebar, sidebar-footer));
+}
+
 // Sidebar Body
 
 .sidebar-body {
-	overflow: auto;
-
-	-webkit-overflow-scrolling: touch;
-
-	padding-bottom: $cadmin-sidebar-padding-bottom;
-	padding-left: $cadmin-sidebar-padding-left;
-	padding-right: $cadmin-sidebar-padding-right;
-	padding-top: $cadmin-sidebar-padding-top;
+	@include clay-css(map-get($cadmin-sidebar, sidebar-body));
 
 	> .sidebar-section {
 		margin-bottom: 32px;
@@ -64,11 +61,12 @@
 // Sidebar List Group
 
 .sidebar-list-group {
-	display: flex;
-	flex-direction: column;
-	font-size: $cadmin-sidebar-list-group-font-size;
-	margin-bottom: 0;
-	padding-left: 0;
+	$sidebar-list-group: setter(
+		map-get($cadmin-sidebar, sidebar-list-group),
+		()
+	);
+
+	@include clay-css($sidebar-list-group);
 
 	@extend %#{$cadmin-sidebar-list-group-type} !optional;
 
@@ -84,31 +82,28 @@
 	}
 
 	.list-group-item {
-		background-color: $cadmin-sidebar-list-group-bg;
-		border-color: $cadmin-sidebar-list-group-border-color;
-		padding: $cadmin-sidebar-list-group-item-padding;
+		@include clay-css(map-get($sidebar-list-group, list-group-item));
 	}
 
 	.sticker {
-		@include clay-sticker-variant($cadmin-sidebar-list-group-sticker-size);
+		@include clay-sticker-variant(map-get($sidebar-list-group, sticker));
 	}
 }
 
 // Sidebar Panel
 
 .sidebar-panel {
-	margin-bottom: $cadmin-sidebar-panel-margin-bottom;
-	position: relative;
+	@include clay-css(map-get($cadmin-sidebar, sidebar-panel));
 }
 
 // Sidebar Definition List (dl dt dd)
 
 .sidebar-dt {
-	@include clay-text-typography($cadmin-sidebar-dt);
+	@include clay-text-typography(map-get($cadmin-sidebar, sidebar-dt));
 }
 
 .sidebar-dd {
-	@include clay-text-typography($cadmin-sidebar-dd);
+	@include clay-text-typography(map-get($cadmin-sidebar, sidebar-dd));
 }
 
 // Sidebar Variants

package/src/scss/cadmin/components/_utilities.scss

@@ -324,6 +324,28 @@
 	background-color: $cadmin-page-header-bg;
 }
 
+// Clay Gap
+
+@each $breakpoint in map-keys($cadmin-grid-breakpoints) {
+	@include media-breakpoint-up($breakpoint) {
+		$infix: breakpoint-infix($breakpoint, $cadmin-grid-breakpoints);
+
+		@each $size, $length in $cadmin-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 $cadmin-breakpoint in map-keys($cadmin-grid-breakpoints) {

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

@@ -374,9 +374,15 @@ $cadmin-card-interactive-after-highlight: map-deep-merge(
 		position: absolute,
 		right: math-sign($cadmin-card-border-width),
 		transition: height 0.15s ease-out,
-		hover-height: 4px,
-		focus-height: 4px,
-		active-height: 4px,
+		hover: (
+			height: 4px,
+		),
+		focus: (
+			height: 4px,
+		),
+		active: (
+			height: 4px,
+		),
 	),
 	$cadmin-card-interactive-after-highlight
 );
@@ -395,10 +401,17 @@ $cadmin-card-interactive: map-deep-merge(
 		cursor: $cadmin-link-cursor,
 		outline: 0,
 		transition: $cadmin-component-transition,
-		hover-bg: #f7f8f9,
-		hover-text-decoration: none,
-		focus-box-shadow: 0 0 0 2px #FFF#{','} 0 0 0 4px #719aff,
-		active-bg: #f1f2f5,
+		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,
 	),
@@ -410,9 +423,15 @@ $cadmin-card-interactive: map-deep-merge(
 $cadmin-card-interactive-primary-after-highlight: () !default;
 $cadmin-card-interactive-primary-after-highlight: map-deep-merge(
 	(
-		hover-bg: $cadmin-component-active-bg,
-		focus-bg: $cadmin-component-active-bg,
-		active-bg: $cadmin-component-active-bg,
+		hover: (
+			background-color: $cadmin-component-active-bg,
+		),
+		focus: (
+			background-color: $cadmin-component-active-bg,
+		),
+		active: (
+			background-color: $cadmin-component-active-bg,
+		),
 	),
 	$cadmin-card-interactive-primary-after-highlight
 );
@@ -420,8 +439,12 @@ $cadmin-card-interactive-primary-after-highlight: map-deep-merge(
 $cadmin-card-interactive-primary: () !default;
 $cadmin-card-interactive-primary: map-deep-merge(
 	(
-		focus-bg: $cadmin-gray-100,
-		active-bg: $cadmin-gray-200,
+		focus: (
+			background-color: $cadmin-gray-100,
+		),
+		active: (
+			background-color: $cadmin-gray-200,
+		),
 		after-highlight: $cadmin-card-interactive-primary-after-highlight,
 	),
 	$cadmin-card-interactive-primary
@@ -433,13 +456,19 @@ $cadmin-card-interactive-secondary: () !default;
 $cadmin-card-interactive-secondary: map-deep-merge(
 	(
 		color: $cadmin-gray-900,
-		hover-color: $cadmin-gray-900,
-		hover-bg: $cadmin-white,
-		hover-border-color: transparent,
-		hover-box-shadow: 0 0 0 2px #719aff,
-		focus-border-color: transparent,
-		focus-box-shadow: 0 0 0 2px #719aff,
-		active-bg: $cadmin-white,
+		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,
+		),
 	),
 	$cadmin-card-interactive-secondary
 );

package/src/scss/cadmin/variables/_clay-color.scss

@@ -94,10 +94,18 @@ $cadmin-clay-color-dropdown-menu-close: map-deep-merge(
 		color: $cadmin-gray-600,
 		font-size: 16px,
 		opacity: 1,
-		hover-bg: rgba($cadmin-gray-900, 0.03),
-		focus-bg: rgba($cadmin-gray-900, 0.03),
-		active-bg: rgba($cadmin-gray-900, 0.06),
-		disabled-bg: transparent,
+		hover: (
+			background-color: rgba($cadmin-gray-900, 0.03),
+		),
+		focus: (
+			background-color: rgba($cadmin-gray-900, 0.03),
+		),
+		active: (
+			background-color: rgba($cadmin-gray-900, 0.06),
+		),
+		disabled: (
+			background-color: transparent,
+		),
 	),
 	$cadmin-clay-color-dropdown-menu-close
 );
@@ -164,7 +172,7 @@ $cadmin-clay-color-btn-bordered: map-deep-merge(
 $cadmin-clay-color-pointer: () !default;
 $cadmin-clay-color-pointer: map-deep-merge(
 	(
-		bg: transparent,
+		background-color: transparent,
 		border-radius: 100px,
 		border-color: $cadmin-white,
 		border-style: solid,
@@ -177,8 +185,10 @@ $cadmin-clay-color-pointer: map-deep-merge(
 		position: absolute,
 		transition: box-shadow 0.15s ease-in-out,
 		width: 14px,
-		focus-box-shadow: 0 0 0 2px $cadmin-primary-l1,
-		focus-outline: 0,
+		focus: (
+			box-shadow: 0 0 0 2px $cadmin-primary-l1,
+			outline: 0,
+		),
 	),
 	$cadmin-clay-color-pointer
 );

package/src/scss/cadmin/variables/_date-picker.scss

@@ -31,15 +31,23 @@ $cadmin-date-picker-nav-btn: map-deep-merge(
 	(
 		color: $cadmin-gray-600,
 		transition: $cadmin-component-transition,
-		hover-bg: $cadmin-gray-200,
-		hover-color: $cadmin-gray-900,
-		focus-bg: $cadmin-gray-200,
-		focus-box-shadow: $cadmin-component-focus-box-shadow,
-		focus-color: $cadmin-gray-900,
-		active-bg: $cadmin-gray-200,
-		disabled-bg: transparent,
-		disabled-box-shadow: none,
-		disabled-color: $cadmin-gray-500,
+		hover: (
+			background-color: $cadmin-gray-200,
+			color: $cadmin-gray-900,
+		),
+		focus: (
+			background-color: $cadmin-gray-200,
+			box-shadow: $cadmin-component-focus-box-shadow,
+			color: $cadmin-gray-900,
+		),
+		active: (
+			background-color: $cadmin-gray-200,
+		),
+		disabled: (
+			background-color: transparent,
+			box-shadow: none,
+			color: $cadmin-gray-500,
+		),
 	),
 	$cadmin-date-picker-nav-btn
 );
@@ -199,7 +207,8 @@ $cadmin-date-picker-calendar-item: () !default;
 $cadmin-date-picker-calendar-item: map-deep-merge(
 	(
 		align-items: center,
-		bg: transparent,
+		background-color:
+			setter(map-get($cadmin-date-picker-calendar-item, bg) transparent),
 		border-width: 0,
 		disabled-cursor: $cadmin-disabled-cursor,
 		display: inline-flex,
@@ -230,17 +239,25 @@ $cadmin-date-picker-date: map-deep-merge(
 		color: $cadmin-gray-600,
 		cursor: $cadmin-link-cursor,
 		position: relative,
-		hover-bg: $cadmin-gray-200,
-		hover-color: $cadmin-gray-900,
-		focus-bg: $cadmin-gray-200,
-		focus-box-shadow: $cadmin-component-focus-box-shadow,
-		focus-color: $cadmin-gray-900,
-		focus-outline: 0,
-		active-bg: $cadmin-component-active-bg,
-		active-color: $cadmin-component-active-color,
-		disabled-bg: transparent,
-		disabled-box-shadow: none,
-		disabled-color: $cadmin-gray-500,
+		hover: (
+			background-color: $cadmin-gray-200,
+			color: $cadmin-gray-900,
+		),
+		focus: (
+			background-color: $cadmin-gray-200,
+			box-shadow: $cadmin-component-focus-box-shadow,
+			color: $cadmin-gray-900,
+			outline: 0,
+		),
+		active: (
+			background-color: $cadmin-component-active-bg,
+			color: $cadmin-component-active-color,
+		),
+		disabled: (
+			background-color: transparent,
+			box-shadow: none,
+			color: $cadmin-gray-500,
+		),
 	),
 	$cadmin-date-picker-date
 );
@@ -266,7 +283,10 @@ $cadmin-date-picker-next-month-date: map-deep-merge(
 $cadmin-date-picker-input-group-text: () !default;
 $cadmin-date-picker-input-group-text: map-deep-merge(
 	(
-		bg: transparent,
+		background-color:
+			setter(
+				map-get($cadmin-date-picker-input-group-text, bg) transparent
+			),
 		border-color: transparent,
 		min-width: 32px,
 		padding-left: 4px,

package/src/scss/cadmin/variables/_forms.scss

@@ -112,6 +112,10 @@ $cadmin-input: map-deep-merge(
 	$cadmin-input
 );
 
+// Form Control Variants
+
+$cadmin-input-palette: () !default;
+
 // Form Control Plaintext
 
 $cadmin-input-plaintext-color: $cadmin-body-color !default;
@@ -1205,6 +1209,7 @@ $cadmin-form-control-select: map-deep-merge(
 				appearance: null,
 				cursor: null,
 				overflow: hidden,
+				text-align: left,
 				text-overflow: ellipsis,
 				white-space: nowrap,
 				hover: (
@@ -1217,6 +1222,36 @@ $cadmin-form-control-select: map-deep-merge(
 	$cadmin-form-control-select
 );
 
+// Form Control Select Variants
+
+$cadmin-form-control-select-palette: () !default;
+$cadmin-form-control-select-palette: map-deep-merge(
+	(
+		form-control-select-secondary: (
+			background-color: $cadmin-white,
+			color: $cadmin-gray-600,
+			hover: (
+				color: $cadmin-gray-600,
+			),
+			focus: (
+				background-image: clay-icon(caret-double-l, $cadmin-gray-900),
+				color: $cadmin-gray-900,
+			),
+			disabled: (
+				background-color: $cadmin-white,
+				color: $cadmin-gray-600,
+				opacity: $cadmin-component-disabled-opacity,
+			),
+			show: (
+				background-color: $cadmin-gray-200,
+				background-image: clay-icon(caret-double-l, $cadmin-gray-900),
+				color: $cadmin-gray-900,
+			),
+		),
+	),
+	$cadmin-form-control-select-palette
+);
+
 $cadmin-form-control-select-sm: () !default;
 $cadmin-form-control-select-sm: map-deep-merge(
 	(

package/src/scss/cadmin/variables/_modals.scss

@@ -262,14 +262,22 @@ $cadmin-modal-height-full-modal-content-sm-up: map-merge(
 $cadmin-modal-success: () !default;
 $cadmin-modal-success: map-deep-merge(
 	(
-		header-bg: $cadmin-success-l2,
-		header-border-color: $cadmin-success-l1,
-		header-color: $cadmin-success,
-		header-close: (
+		modal-header: (
+			background-color: $cadmin-success-l2,
+			border-color: $cadmin-success-l1,
 			color: $cadmin-success,
-			hover-color: inherit,
-			focus-color: inherit,
-			disabled-color: inherit,
+			close: (
+				color: $cadmin-success,
+				hover: (
+					color: inherit,
+				),
+				focus: (
+					color: inherit,
+				),
+				disabled: (
+					color: inherit,
+				),
+			),
 		),
 	),
 	$cadmin-modal-success
@@ -280,14 +288,22 @@ $cadmin-modal-success: map-deep-merge(
 $cadmin-modal-info: () !default;
 $cadmin-modal-info: map-deep-merge(
 	(
-		header-bg: $cadmin-info-l2,
-		header-border-color: $cadmin-info-l1,
-		header-color: $cadmin-info,
-		header-close: (
+		modal-header: (
+			background-color: $cadmin-info-l2,
+			border-color: $cadmin-info-l1,
 			color: $cadmin-info,
-			hover-color: inherit,
-			focus-color: inherit,
-			disabled-color: inherit,
+			close: (
+				color: $cadmin-info,
+				hover: (
+					color: inherit,
+				),
+				focus: (
+					color: inherit,
+				),
+				disabled: (
+					color: inherit,
+				),
+			),
 		),
 	),
 	$cadmin-modal-info
@@ -298,14 +314,22 @@ $cadmin-modal-info: map-deep-merge(
 $cadmin-modal-warning: () !default;
 $cadmin-modal-warning: map-deep-merge(
 	(
-		header-bg: $cadmin-warning-l2,
-		header-border-color: $cadmin-warning-l1,
-		header-color: $cadmin-warning,
-		header-close: (
+		modal-header: (
+			background-color: $cadmin-warning-l2,
+			border-color: $cadmin-warning-l1,
 			color: $cadmin-warning,
-			hover-color: inherit,
-			focus-color: inherit,
-			disabled-color: inherit,
+			close: (
+				color: $cadmin-warning,
+				hover: (
+					color: inherit,
+				),
+				focus: (
+					color: inherit,
+				),
+				disabled: (
+					color: inherit,
+				),
+			),
 		),
 	),
 	$cadmin-modal-warning
@@ -316,14 +340,22 @@ $cadmin-modal-warning: map-deep-merge(
 $cadmin-modal-danger: () !default;
 $cadmin-modal-danger: map-deep-merge(
 	(
-		header-bg: $cadmin-danger-l2,
-		header-border-color: $cadmin-danger-l1,
-		header-color: $cadmin-danger,
-		header-close: (
+		modal-header: (
+			background-color: $cadmin-danger-l2,
+			border-color: $cadmin-danger-l1,
 			color: $cadmin-danger,
-			hover-color: inherit,
-			focus-color: inherit,
-			disabled-color: inherit,
+			close: (
+				color: $cadmin-danger,
+				hover: (
+					color: inherit,
+				),
+				focus: (
+					color: inherit,
+				),
+				disabled: (
+					color: inherit,
+				),
+			),
 		),
 	),
 	$cadmin-modal-danger

package/src/scss/cadmin/variables/_sheets.scss

@@ -125,11 +125,15 @@ $cadmin-sheet-subtitle-link: map-deep-merge(
 		color: $cadmin-sheet-subtitle-link-color,
 		text-decoration: $cadmin-sheet-subtitle-link-text-decoration,
 		transition: box-shadow 0.15s ease-in-out,
-		hover-color: $cadmin-sheet-subtitle-link-hover-color,
-		hover-text-decoration: $cadmin-sheet-subtitle-link-hover-text-decoration,
-		focus-box-shadow: #{0 0 0 4px $cadmin-white,
-		0 0 0 6px $cadmin-primary-l1},
-		focus-outline: 0,
+		hover: (
+			color: $cadmin-sheet-subtitle-link-hover-color,
+			text-decoration: $cadmin-sheet-subtitle-link-hover-text-decoration,
+		),
+		focus: (
+			box-shadow: #{0 0 0 4px $cadmin-white,
+			0 0 0 6px $cadmin-primary-l1},
+			outline: 0,
+		),
 	),
 	$cadmin-sheet-subtitle-link
 );

package/src/scss/cadmin/variables/_sidebar.scss

@@ -75,6 +75,60 @@ $cadmin-sidebar-list-group-sticker-size: map-deep-merge(
 	$cadmin-sidebar-list-group-sticker-size
 );
 
+$cadmin-sidebar: () !default;
+$cadmin-sidebar: map-deep-merge(
+	(
+		height: 100%,
+		overflow: auto,
+		-webkit-overflow-scrolling: touch,
+		focus: (
+			box-shadow: $cadmin-component-focus-inset-box-shadow,
+		),
+		sidebar-header: (
+			padding-bottom: $cadmin-sidebar-padding-bottom,
+			padding-left: $cadmin-sidebar-padding-left,
+			padding-right: $cadmin-sidebar-padding-right,
+			padding-top: $cadmin-sidebar-padding-top,
+			component-title: $cadmin-sidebar-header-component-title,
+			component-subtitle: $cadmin-sidebar-header-component-subtitle,
+		),
+		sidebar-footer: (
+			padding-bottom: $cadmin-sidebar-padding-bottom,
+			padding-left: $cadmin-sidebar-padding-left,
+			padding-right: $cadmin-sidebar-padding-right,
+			padding-top: $cadmin-sidebar-padding-top,
+		),
+		sidebar-body: (
+			overflow: auto,
+			-webkit-overflow-scrolling: touch,
+			padding-bottom: $cadmin-sidebar-padding-bottom,
+			padding-left: $cadmin-sidebar-padding-left,
+			padding-right: $cadmin-sidebar-padding-right,
+			padding-top: $cadmin-sidebar-padding-top,
+		),
+		sidebar-list-group: (
+			display: flex,
+			flex-direction: column,
+			font-size: $cadmin-sidebar-list-group-font-size,
+			margin-bottom: 0,
+			padding-left: 0,
+			list-group-item: (
+				background-color: $cadmin-sidebar-list-group-bg,
+				border-color: $cadmin-sidebar-list-group-border-color,
+				padding: $cadmin-sidebar-list-group-item-padding,
+			),
+			sticker: $cadmin-sidebar-list-group-sticker-size,
+		),
+		sidebar-panel: (
+			margin-bottom: $cadmin-sidebar-panel-margin-bottom,
+			position: relative,
+		),
+		sidebar-dt: $cadmin-sidebar-dt,
+		sidebar-dd: $cadmin-sidebar-dd,
+	),
+	$cadmin-sidebar
+);
+
 // Sidebar Light
 
 $cadmin-sidebar-light-navigation-bar: () !default;