@clayui/css 3.94.0 → 3.95.0

package/src/scss/cadmin/components/_utilities-functional-important.scss

@@ -25,31 +25,35 @@
 // Background
 
 @each $color, $value in $cadmin-bg-theme-colors {
-	$selector: if(
-		starts-with($color, '.') or
-			starts-with($color, '#') or
-			starts-with($color, '%'),
-		$color,
-		str-insert($color, '.bg-', 1)
-	);
+	@if not clay-is-map-unset($value) {
+		$selector: if(
+			starts-with($color, '.') or
+				starts-with($color, '#') or
+				starts-with($color, '%'),
+			$color,
+			str-insert($color, '.bg-', 1)
+		);
 
-	#{$selector} {
-		@include clay-css($value);
-	}
+		#{$selector} {
+			@include clay-css($value);
+		}
 
-	a#{$selector},
-	button#{$selector} {
-		&:hover,
-		&:focus {
-			@include clay-css(map-get($value, hover));
+		a#{$selector},
+		button#{$selector} {
+			&:hover,
+			&:focus {
+				@include clay-css(map-get($value, hover));
+			}
 		}
 	}
 }
 
 @if $cadmin-enable-gradients {
 	@each $color, $value in $cadmin-bg-gradient-theme-colors {
-		.bg-gradient-#{$color} {
-			@include clay-css($value);
+		@if not clay-is-map-unset($value) {
+			.bg-gradient-#{$color} {
+				@include clay-css($value);
+			}
 		}
 	}
 }
@@ -97,16 +101,18 @@
 }
 
 @each $color, $value in $cadmin-border-theme-colors {
-	$selector: if(
-		starts-with($color, '.') or
-			starts-with($color, '#') or
-			starts-with($color, '%'),
-		$color,
-		str-insert($color, '.border-', 1)
-	);
+	@if not clay-is-map-unset($value) {
+		$selector: if(
+			starts-with($color, '.') or
+				starts-with($color, '#') or
+				starts-with($color, '%'),
+			$color,
+			str-insert($color, '.border-', 1)
+		);
 
-	#{$selector} {
-		@include clay-css($value);
+		#{$selector} {
+			@include clay-css($value);
+		}
 	}
 }
 
@@ -760,16 +766,18 @@
 // Font Sizes
 
 @each $selector, $value in $cadmin-font-sizes {
-	$selector: if(
-		starts-with($selector, '.') or
-			starts-with($selector, '#') or
-			starts-with($selector, '%'),
-		$selector,
-		str-insert($selector, '.', 1)
-	);
+	@if not clay-is-map-unset($value) {
+		$selector: if(
+			starts-with($selector, '.') or
+				starts-with($selector, '#') or
+				starts-with($selector, '%'),
+			$selector,
+			str-insert($selector, '.', 1)
+		);
 
-	#{$selector} {
-		@include clay-css($value);
+		#{$selector} {
+			@include clay-css($value);
+		}
 	}
 }
 
@@ -780,22 +788,24 @@
 }
 
 @each $color, $value in $cadmin-text-theme-colors {
-	$selector: if(
-		starts-with($color, '.') or
-			starts-with($color, '#') or
-			starts-with($color, '%'),
-		$color,
-		str-insert($color, '.text-', 1)
-	);
+	@if not clay-is-map-unset($value) {
+		$selector: if(
+			starts-with($color, '.') or
+				starts-with($color, '#') or
+				starts-with($color, '%'),
+			$color,
+			str-insert($color, '.text-', 1)
+		);
 
-	#{$selector} {
-		@include clay-css($value);
-	}
+		#{$selector} {
+			@include clay-css($value);
+		}
 
-	a#{$selector} {
-		&:hover,
-		&:focus {
-			@include clay-css(map-get($value, hover));
+		a#{$selector} {
+			&:hover,
+			&:focus {
+				@include clay-css(map-get($value, hover));
+			}
 		}
 	}
 }
@@ -811,16 +821,18 @@
 }
 
 @each $key, $value in $cadmin-text-decorations {
-	$selector: if(
-		starts-with($key, '.') or
-			starts-with($key, '#') or
-			starts-with($key, '%'),
-		$key,
-		str-insert($key, '.', 1)
-	);
+	@if not clay-is-map-unset($value) {
+		$selector: if(
+			starts-with($key, '.') or
+				starts-with($key, '#') or
+				starts-with($key, '%'),
+			$key,
+			str-insert($key, '.', 1)
+		);
 
-	#{$selector} {
-		@include clay-link($value);
+		#{$selector} {
+			@include clay-link($value);
+		}
 	}
 }
 

package/src/scss/cadmin/variables/_buttons.scss

@@ -74,7 +74,7 @@ $cadmin-btn: map-deep-merge(
 		active: (
 			box-shadow: clay-enable-shadows([$cadmin-btn-active-box-shadow]),
 			focus: (
-				box-shadow: clay-enable-shadows([$cadmin-btn-focus-box-shadow]),
+				box-shadow: c-unset,
 			),
 		),
 		active-class: (

package/src/scss/cadmin/variables/_menubar.scss

@@ -66,30 +66,43 @@ $cadmin-menubar-vertical-transparent-md: () !default;
 $cadmin-menubar-vertical-transparent-md: map-deep-merge(
 	(
 		nav-link: (
-			border-radius: 6px,
+			border-radius: $cadmin-border-radius,
 			transition: #{color 0.15s ease-in-out,
 			background-color 0.15s ease-in-out,
 			border-color 0.15s ease-in-out,
 			box-shadow 0.15s ease-in-out},
 			color: $cadmin-gray-600,
+			margin-bottom: 0.25rem,
 			hover: (
-				background-color: rgba($cadmin-primary, 0.04),
+				background-color: rgba($cadmin-gray-900, 0.04),
+				box-shadow: inset 0.125rem 0 0 0 $cadmin-secondary-l0,
 				color: $cadmin-gray-900,
+				font-weight: $cadmin-font-weight-semi-bold,
 			),
 			focus: (
-				background-color: rgba($cadmin-primary, 0.04),
-				box-shadow:
-					clay-enable-shadows(
-						$cadmin-component-focus-inset-box-shadow
-					),
+				background-color: c-unset,
+				box-shadow: $cadmin-component-focus-inset-box-shadow,
 				color: $cadmin-gray-900,
 				outline: 0,
+				after: (
+					border-radius: $cadmin-border-radius,
+					bottom: 0,
+					box-shadow: $cadmin-component-focus-box-shadow,
+					content: '',
+					display: block,
+					left: 0,
+					pointer-events: none,
+					position: absolute,
+					right: 0,
+					top: 0,
+				),
 			),
 			active: (
 				color: rgba($cadmin-black, 0.9),
 			),
 			active-class: (
 				background-color: rgba($cadmin-primary, 0.06),
+				box-shadow: inset 0.25rem 0 0 0 $cadmin-primary-l0,
 				color: $cadmin-gray-900,
 				font-weight: $cadmin-font-weight-semi-bold,
 			),
@@ -99,6 +112,7 @@ $cadmin-menubar-vertical-transparent-md: map-deep-merge(
 			),
 			show: (
 				background-color: c-unset,
+				box-shadow: c-unset,
 				color: $cadmin-gray-900,
 				font-weight: $cadmin-font-weight-semi-bold,
 			),
@@ -109,15 +123,21 @@ $cadmin-menubar-vertical-transparent-md: map-deep-merge(
 				nav-link: (
 					border-radius: clay-enable-rounded(0),
 					color: $cadmin-gray-900,
+					margin-bottom: 0,
 					hover: (
-						background-color: rgba($cadmin-primary, 0.04),
+						background-color: rgba($cadmin-gray-900, 0.04),
+						box-shadow: none,
 						color: $cadmin-gray-900,
 					),
 					focus: (
-						background-color: rgba($cadmin-primary, 0.04),
+						background-color: transparent,
+						after: (
+							box-shadow: $cadmin-component-focus-inset-box-shadow,
+						),
 					),
 					active-class: (
 						background-color: rgba($cadmin-primary, 0.06),
+						box-shadow: none,
 						color: $cadmin-gray-900,
 						font-weight: $cadmin-font-weight-semi-bold,
 					),
@@ -139,6 +159,7 @@ $cadmin-menubar-vertical-transparent-md: map-deep-merge(
 						clay-enable-shadows(0 1px 5px -1px rgba(0, 0, 0, 0.3)),
 				),
 				menubar-toggler: (
+					box-shadow: $cadmin-component-focus-box-shadow,
 					color: $cadmin-gray-900,
 					font-size: 14px,
 					font-weight: $cadmin-font-weight-semi-bold,
@@ -285,30 +306,40 @@ $cadmin-menubar-vertical-transparent-lg: () !default;
 $cadmin-menubar-vertical-transparent-lg: map-deep-merge(
 	(
 		nav-link: (
-			border-radius: 6px,
+			border-radius: $cadmin-border-radius,
 			transition: #{color 0.15s ease-in-out,
 			background-color 0.15s ease-in-out,
 			border-color 0.15s ease-in-out,
 			box-shadow 0.15s ease-in-out},
 			color: $cadmin-gray-600,
 			hover: (
-				background-color: rgba($cadmin-primary, 0.04),
+				background-color: rgba($cadmin-gray-900, 0.04),
+				box-shadow: inset 0.125rem 0 0 0 $cadmin-secondary-l0,
 				color: $cadmin-gray-900,
+				font-weight: $cadmin-font-weight-semi-bold,
 			),
 			focus: (
 				background-color: rgba($cadmin-primary, 0.04),
-				box-shadow:
-					clay-enable-shadows(
-						$cadmin-component-focus-inset-box-shadow
-					),
 				color: $cadmin-gray-900,
 				outline: 0,
+				after: (
+					border-radius: $cadmin-border-radius,
+					bottom: 0,
+					box-shadow: $cadmin-component-focus-box-shadow,
+					content: '',
+					display: block,
+					left: 0,
+					position: absolute,
+					right: 0,
+					top: 0,
+				),
 			),
 			active: (
 				color: rgba($cadmin-black, 0.9),
 			),
 			active-class: (
 				background-color: rgba($cadmin-primary, 0.06),
+				box-shadow: inset 0.25rem 0 0 0 $cadmin-primary-l0,
 				color: $cadmin-gray-900,
 				font-weight: $cadmin-font-weight-semi-bold,
 			),
@@ -328,15 +359,20 @@ $cadmin-menubar-vertical-transparent-lg: map-deep-merge(
 				nav-link: (
 					border-radius: clay-enable-rounded(0),
 					color: $cadmin-gray-900,
+					margin-bottom: 0,
 					hover: (
-						background-color: rgba($cadmin-primary, 0.04),
-						color: $cadmin-gray-900,
+						background-color: rgba($cadmin-gray-900, 0.04),
+						box-shadow: none,
 					),
 					focus: (
-						background-color: rgba($cadmin-primary, 0.04),
+						background-color: transparent,
+						after: (
+							box-shadow: $cadmin-component-focus-inset-box-shadow,
+						),
 					),
 					active-class: (
 						background-color: rgba($cadmin-primary, 0.06),
+						box-shadow: none,
 						color: $cadmin-gray-900,
 						font-weight: $cadmin-font-weight-semi-bold,
 					),

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

@@ -1,6 +1,26 @@
 $cadmin-modal-backdrop-bg: $cadmin-gray-800 !default;
 $cadmin-modal-backdrop-opacity: 0.8 !default;
 
+$cadmin-modal-backdrop: () !default;
+$cadmin-modal-backdrop: map-deep-merge(
+	(
+		background-color: $cadmin-modal-backdrop-bg,
+		height: 100vh,
+		left: 0,
+		position: fixed,
+		top: 0,
+		width: 100vw,
+		z-index: $cadmin-zindex-modal-backdrop,
+		'&.fade': (
+			opacity: 0,
+		),
+		'&.show': (
+			opacity: $cadmin-modal-backdrop-opacity,
+		),
+	),
+	$cadmin-modal-backdrop
+);
+
 // Modal Dialog
 
 $cadmin-modal-dialog-margin: 8px !default;
@@ -26,6 +46,27 @@ $cadmin-modal-content-inner-border-radius: calc(
 $cadmin-modal-content-box-shadow-xs: 0 0 3px 1px rgba(0, 0, 0, 0.2) !default;
 $cadmin-modal-content-box-shadow-sm-up: 0 8px 16px rgba($cadmin-black, 0.5) !default;
 
+$cadmin-modal-content: () !default;
+$cadmin-modal-content: map-deep-merge(
+	(
+		background-clip: padding-box,
+		background-color: $cadmin-modal-content-bg,
+		border-radius: clay-enable-rounded($cadmin-modal-content-border-radius),
+		border: $cadmin-modal-content-border-width solid
+			$cadmin-modal-content-border-color,
+		box-shadow: clay-enable-shadows($cadmin-modal-content-box-shadow-xs),
+		color: $cadmin-modal-content-color,
+		display: flex,
+		flex-direction: column,
+		outline: 0,
+		overflow: hidden,
+		pointer-events: auto,
+		position: relative,
+		width: 100%,
+	),
+	$cadmin-modal-content
+);
+
 // .modal-header
 
 $cadmin-modal-header-bg: null !default;
@@ -85,7 +126,7 @@ $cadmin-modal-body: map-deep-merge(
 		margin-top: math-sign($cadmin-modal-content-border-width),
 		padding: $cadmin-modal-inner-padding,
 		position: relative,
-		inline-scroller: (
+		'&.inline-scroller': (
 			max-height: 320px,
 			-webkit-overflow-scrolling: touch,
 			overflow: auto,
@@ -257,6 +298,76 @@ $cadmin-modal-height-full-modal-content-sm-up: map-merge(
 	$cadmin-modal-height-full-modal-content-sm-up
 );
 
+// Modal
+
+$cadmin-modal: () !default;
+$cadmin-modal: map-deep-merge(
+	(
+		display: none,
+		height: 100%,
+		left: 0,
+		outline: 0,
+		overflow: hidden,
+		position: fixed,
+		top: 0,
+		width: 100%,
+		z-index: $cadmin-zindex-modal,
+		close: (
+			'&:first-child': (
+				margin-left: math-sign($cadmin-modal-close-spacer-x),
+			),
+			'&:last-child': (
+				margin-right: math-sign($cadmin-modal-close-spacer-x),
+			),
+		),
+		modal-header: $cadmin-modal-header,
+		modal-body: $cadmin-modal-body,
+		modal-footer: (
+			align-items: center,
+			background-color: $cadmin-modal-footer-bg,
+			border-bottom-left-radius:
+				clay-enable-rounded($cadmin-modal-content-inner-border-radius),
+			border-bottom-right-radius:
+				clay-enable-rounded($cadmin-modal-content-inner-border-radius),
+			border-top: $cadmin-modal-footer-border-width solid
+				$cadmin-modal-footer-border-color,
+			box-shadow: clay-enable-shadows($cadmin-modal-footer-box-shadow),
+			color: $cadmin-modal-footer-color,
+			display: flex,
+			flex-shrink: 0,
+			flex-wrap: wrap,
+			height: $cadmin-modal-footer-height,
+			justify-content: flex-start,
+			padding-bottom: $cadmin-modal-footer-padding-y,
+			padding-left: $cadmin-modal-footer-padding-x,
+			padding-right: $cadmin-modal-footer-padding-x,
+			padding-top: $cadmin-modal-footer-padding-y,
+			'> *': (
+				margin: calc(#{$cadmin-modal-footer-margin-between} * 0.5),
+			),
+		),
+		modal-title: (
+			flex-grow: 1,
+			font-size: $cadmin-modal-title-font-size,
+			font-weight: $cadmin-modal-title-font-weight,
+			line-height: $cadmin-modal-title-line-height,
+			margin-bottom: 0,
+			overflow: hidden,
+			text-align: $cadmin-modal-title-text-align,
+			text-overflow: ellipsis,
+			white-space: nowrap,
+		),
+		modal-title-indicator: (
+			display: inline-block,
+			font-size: $cadmin-modal-title-indicator-font-size,
+			margin-right: $cadmin-modal-title-indicator-spacer-x,
+			margin-top: -0.2em,
+			vertical-align: middle,
+		),
+	),
+	$cadmin-modal
+);
+
 // Modal Success
 
 $cadmin-modal-success: () !default;

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

@@ -7,16 +7,16 @@ $cadmin-pagination-line-height: 1 !default;
 $cadmin-pagination-padding-x: 10px !default; // 10px
 $cadmin-pagination-padding-y: 0 !default;
 
-$cadmin-pagination-hover-bg: rgba(39, 40, 41, 0.04) !default;
+$cadmin-pagination-hover-bg: rgba($cadmin-gray-900, 0.04) !default;
 $cadmin-pagination-hover-border-color: transparent !default;
 $cadmin-pagination-hover-color: $cadmin-gray-900 !default;
 
 $cadmin-pagination-focus-box-shadow: $cadmin-component-focus-box-shadow !default;
 $cadmin-pagination-focus-outline: 0 !default;
 
-$cadmin-pagination-active-bg: $cadmin-secondary !default;
+$cadmin-pagination-active-bg: rgba($cadmin-primary, 0.06) !default;
 $cadmin-pagination-active-border-color: transparent !default;
-$cadmin-pagination-active-color: $cadmin-white !default;
+$cadmin-pagination-active-color: $cadmin-gray-900 !default;
 
 $cadmin-pagination-disabled-bg: transparent !default;
 $cadmin-pagination-disabled-border-color: $cadmin-pagination-disabled-bg !default;
@@ -57,7 +57,8 @@ $cadmin-pagination-link-cursor: null !default;
 
 // @deprecated as of v2 use the Sass map `$cadmin-pagination-link` instead
 
-$cadmin-pagination-link-transition: box-shadow 0.15s ease-in-out !default;
+$cadmin-pagination-link-transition: background-color 0.15s ease-in-out,
+	border-color 0.15s ease-in-out !default;
 
 $cadmin-pagination-link-first-border-radius: $cadmin-pagination-link-border-radius !default;
 $cadmin-pagination-link-last-border-radius: $cadmin-pagination-link-border-radius !default;
@@ -85,7 +86,10 @@ $cadmin-pagination-link-hover: map-deep-merge(
 	(
 		background-color: $cadmin-pagination-hover-bg,
 		border-color: $cadmin-pagination-hover-border-color,
+		box-shadow: inset 0 -0.125rem 0 0 $cadmin-secondary-l0,
 		color: $cadmin-pagination-hover-color,
+		font-weight: $cadmin-font-weight-semi-bold,
+		letter-spacing: 0,
 		text-decoration: none,
 		z-index: 2,
 	),
@@ -95,12 +99,23 @@ $cadmin-pagination-link-hover: map-deep-merge(
 $cadmin-pagination-link-focus: () !default;
 $cadmin-pagination-link-focus: map-deep-merge(
 	(
-		background-color: $cadmin-pagination-hover-bg,
 		border-color: $cadmin-pagination-hover-border-color,
-		box-shadow: $cadmin-pagination-focus-box-shadow,
+		box-shadow: none,
 		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,
+			box-shadow: $cadmin-pagination-focus-box-shadow,
+			content: '',
+			display: block,
+			left: 0,
+			pointer-events: none,
+			position: absolute,
+			right: 0,
+			top: 0,
+		),
 	),
 	$cadmin-pagination-link-focus
 );
@@ -110,8 +125,10 @@ $cadmin-pagination-link-active: map-deep-merge(
 	(
 		background-color: $cadmin-pagination-active-bg,
 		border-color: $cadmin-pagination-active-border-color,
+		box-shadow: inset 0 -0.125rem 0 0 $cadmin-primary-l0,
 		color: $cadmin-pagination-active-color,
-		cursor: default,
+		font-weight: $cadmin-font-weight-semi-bold,
+		letter-spacing: 0,
 		z-index: $cadmin-zindex-pagination-link-active,
 	),
 	$cadmin-pagination-link-active
@@ -128,6 +145,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,
+		focus: (
+			after: (
+				content: none,
+			),
+		),
 	),
 	$cadmin-pagination-link-disabled
 );
@@ -146,6 +168,7 @@ $cadmin-pagination-link: map-deep-merge(
 		display: inline-flex,
 		height: $cadmin-pagination-item-height,
 		justify-content: center,
+		letter-spacing: 0.033em,
 		line-height: $cadmin-pagination-line-height,
 		margin-left: 0,
 		padding-bottom: $cadmin-pagination-padding-y,
@@ -157,7 +180,20 @@ $cadmin-pagination-link: map-deep-merge(
 		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,
+			box-shadow: inset 0 -0.25rem 0 0 $cadmin-primary-l0,
+			font-weight: $cadmin-font-weight-semi-bold,
+			letter-spacing: 0,
+		),
 		disabled: $cadmin-pagination-link-disabled,
+		show: (
+			box-shadow: inset 0 -0.25rem 0 0 $cadmin-primary-l0,
+			font-weight: $cadmin-font-weight-semi-bold,
+			letter-spacing: 0,
+		),
 		lexicon-icon: (
 			margin-top: 0,
 		),
@@ -294,11 +330,13 @@ $cadmin-pagination-items-per-page-link-hover: map-deep-merge(
 $cadmin-pagination-items-per-page-link-focus: () !default;
 $cadmin-pagination-items-per-page-link-focus: map-deep-merge(
 	(
-		background-color: map-get($cadmin-pagination-link-focus, bg),
+		background-color:
+			map-get($cadmin-pagination-link-focus, background-color),
 		border-color: map-get($cadmin-pagination-link-focus, border-color),
 		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
 );
@@ -340,6 +378,7 @@ $cadmin-pagination-items-per-page-link: map-deep-merge(
 		display: inline-flex,
 		height: $cadmin-pagination-item-height,
 		justify-content: center,
+		letter-spacing: 0.025em,
 		line-height: $cadmin-pagination-line-height,
 		padding-bottom: $cadmin-pagination-padding-y,
 		padding-left: $cadmin-pagination-padding-x,
@@ -351,6 +390,7 @@ $cadmin-pagination-items-per-page-link: map-deep-merge(
 		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:
 				$cadmin-pagination-items-per-page-lexicon-icon-margin-left,

package/src/scss/components/_alerts.scss

@@ -385,12 +385,8 @@
 			#{$selector} {
 				@include clay-alert-variant($value);
 			}
-		} @else {
-			$placeholder: if(
-				starts-with($color, '.') or starts-with($color, '#'),
-				'%#{str-slice($color, 2)}',
-				'%alert-#{$color}'
-			);
+		} @else if (starts-with($color, 'alert-')) {
+			$placeholder: '%alert-#{$color}';
 
 			#{$placeholder} {
 				@include clay-alert-variant($value);
@@ -399,6 +395,10 @@
 			#{$selector} {
 				@extend %alert-#{$color} !optional;
 			}
+		} @else {
+			#{$selector} {
+				@include clay-alert-variant($value);
+			}
 		}
 	}
 }