@clayui/css 3.94.0 → 3.95.0

package/src/scss/cadmin/components/_modals.scss

@@ -10,15 +10,7 @@
 
 .modal,
 &.modal {
-	display: none;
-	height: 100%;
-	left: 0;
-	outline: 0;
-	overflow: hidden;
-	position: fixed;
-	top: 0;
-	width: 100%;
-	z-index: $cadmin-zindex-modal;
+	@include clay-css($cadmin-modal);
 }
 
 .modal-dialog {
@@ -122,67 +114,44 @@
 
 .modal-backdrop,
 &.modal-backdrop {
-	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;
-	}
+	@include clay-map-to-css($cadmin-modal-backdrop);
 }
 
 .modal-content {
-	background-clip: padding-box;
-	background-color: $cadmin-modal-content-bg;
-	border: $cadmin-modal-content-border-width solid
-		$cadmin-modal-content-border-color;
-
-	@include border-radius($cadmin-modal-content-border-radius);
-	@include box-shadow($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%;
+	@include clay-map-to-css($cadmin-modal-content);
 }
 
 .modal-header,
 &.modal-header {
-	$breakpoint-down: map-get($cadmin-modal-header, breakpoint-down);
+	$_modal-header: setter(map-get($cadmin-modal, modal-header), ());
+
+	$_breakpoint-down: map-get($_modal-header, breakpoint-down);
+	$_mobile: map-get($_modal-header, mobile);
 
-	@include clay-css($cadmin-modal-header);
+	$_modal-header: map-remove($_modal-header, breakpoint-down, mobile);
 
-	@include clay-scale-component(null, $breakpoint-down) {
-		$mobile: setter(map-get($cadmin-modal-header, mobile), ());
+	@include clay-map-to-css($_modal-header);
 
-		@include clay-css($mobile);
+	@include clay-scale-component(null, $_breakpoint-down) {
+		@include clay-css(map-get($_modal-header, mobile));
 	}
 }
 
 .modal-body,
 &.modal-body {
-	@include clay-css($cadmin-modal-body);
+	$_modal-body: setter(map-get($cadmin-modal, modal-body), ());
+	$_modal-body: map-deep-merge(
+		$_modal-body,
+		(
+			'&.inline-scroller':
+				map-merge(
+					setter(map-get($_modal-body, '&.inline-scroller'), ()),
+					setter(map-get($_modal-body, inline-scroller), ())
+				),
+		)
+	);
 
-	&.inline-scroller {
-		$inline-scroller: setter(
-			map-get($cadmin-modal-body, inline-scroller),
-			()
-		);
-
-		@include clay-css($inline-scroller);
-	}
+	@include clay-map-to-css($_modal-body);
 }
 
 .modal-body-flush,
@@ -192,32 +161,11 @@
 
 .modal-footer,
 &.modal-footer {
-	align-items: center;
-	background-color: $cadmin-modal-footer-bg;
-	border-top: $cadmin-modal-footer-border-width solid
-		$cadmin-modal-footer-border-color;
-
-	@include border-bottom-radius($cadmin-modal-content-inner-border-radius);
-	@include box-shadow($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;
+	@include clay-map-to-css(map-get($cadmin-modal, modal-footer));
 
 	@include clay-scale-component {
 		height: $cadmin-modal-footer-height-mobile;
 	}
-
-	> * {
-		margin: $cadmin-modal-footer-margin-between * 0.5;
-	}
 }
 
 // Modal Item
@@ -272,15 +220,7 @@
 // Modal Title
 
 .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;
+	@include clay-map-to-css(map-get($cadmin-modal, modal-title));
 
 	@include clay-scale-component {
 		font-size: $cadmin-modal-title-font-size-mobile;
@@ -288,11 +228,7 @@
 }
 
 .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;
+	@include clay-map-to-css(map-get($cadmin-modal, modal-title-indicator));
 }
 
 // Modal Subtitle
@@ -314,13 +250,7 @@
 &.modal,
 .modal {
 	.close {
-		&:first-child {
-			margin-left: math-sign($cadmin-modal-close-spacer-x);
-		}
-
-		&:last-child {
-			margin-right: math-sign($cadmin-modal-close-spacer-x);
-		}
+		@include clay-close(map-get($cadmin-modal, close));
 	}
 }
 
@@ -492,10 +422,21 @@
 
 // Modal Variants
 
-@each $cadmin-color, $cadmin-value in $cadmin-modal-palette {
-	&.modal-#{$cadmin-color},
-	.modal-#{$cadmin-color} {
-		@include clay-modal-variant($cadmin-value);
+@each $color, $value in $cadmin-modal-palette {
+	@if not clay-is-map-unset($value) {
+		$deprecated-keys: 'primary', 'secondary', 'success', 'info', 'warning',
+			'danger', 'dark', 'light';
+
+		$selector: if(
+			index($deprecated-keys, '#{$color}') != null,
+			str-insert($color, '.modal-', 1),
+			$color
+		);
+
+		&#{$selector},
+		#{$selector} {
+			@include clay-modal-variant($value);
+		}
 	}
 }
 

package/src/scss/cadmin/components/_navs.scss

@@ -199,13 +199,15 @@
 // Nav Variants
 
 @each $key, $value in $cadmin-nav-palette {
-	$selector: if(
-		starts-with($key, '.') or starts-with($key, '#'),
-		$key,
-		str-insert($key, '.', 1)
-	);
-
-	#{$selector} {
-		@include clay-nav-variant($value);
+	@if not clay-is-map-unset($value) {
+		$selector: if(
+			starts-with($key, '.') or starts-with($key, '#'),
+			$key,
+			str-insert($key, '.', 1)
+		);
+
+		#{$selector} {
+			@include clay-nav-variant($value);
+		}
 	}
 }

package/src/scss/cadmin/components/_pagination.scss

@@ -19,7 +19,7 @@
 
 	&.active {
 		.page-link {
-			@include clay-link(map-get($cadmin-pagination-link, active));
+			@include clay-link(map-get($cadmin-pagination-link, active-class));
 		}
 	}
 

package/src/scss/cadmin/components/_popovers.scss

@@ -1,16 +1,18 @@
 // Popovers
 
 @each $selector, $value in $cadmin-popovers {
-	$selector: if(
-		starts-with($selector, '.') or
-			starts-with($selector, '#') or
-			starts-with($selector, '%'),
-		$selector,
-		str-insert($selector, '.', 1)
-	);
-
-	#{$selector} {
-		@include clay-popover-variant($value);
+	@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-popover-variant($value);
+		}
 	}
 }
 
@@ -155,48 +157,54 @@
 // Popover Headers
 
 @each $selector, $value in $cadmin-popover-headers {
-	$selector: if(
-		starts-with($selector, '.') or
-			starts-with($selector, '#') or
-			starts-with($selector, '%'),
-		$selector,
-		str-insert($selector, '.', 1)
-	);
-
-	#{$selector} {
-		@include clay-popover-header-variant($value);
+	@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-popover-header-variant($value);
+		}
 	}
 }
 
 // Popover Bodies
 
 @each $selector, $value in $cadmin-popover-bodies {
-	$selector: if(
-		starts-with($selector, '.') or
-			starts-with($selector, '#') or
-			starts-with($selector, '%'),
-		$selector,
-		str-insert($selector, '.', 1)
-	);
-
-	#{$selector} {
-		@include clay-popover-header-variant($value);
+	@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-popover-header-variant($value);
+		}
 	}
 }
 
 // Popover Widths
 
 @each $selector, $value in $cadmin-popover-widths {
-	$selector: if(
-		starts-with($selector, '.') or
-			starts-with($selector, '#') or
-			starts-with($selector, '%'),
-		$selector,
-		str-insert($selector, '.', 1)
-	);
-
-	#{$selector} {
-		@include clay-popover-variant($value);
+	@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-popover-variant($value);
+		}
 	}
 }
 

package/src/scss/cadmin/components/_progress-bars.scss

@@ -132,13 +132,15 @@
 // Progress Variants
 
 @each $cadmin-color, $cadmin-value in $cadmin-progress-palette {
-	.progress-#{$cadmin-color} {
-		.progress-bar {
-			background-color: map-get($cadmin-value, bar-bg);
-		}
+	@if not clay-is-map-unset($cadmin-value) {
+		.progress-#{$cadmin-color} {
+			.progress-bar {
+				background-color: map-get($cadmin-value, bar-bg);
+			}
 
-		.progress-group-feedback {
-			color: map-get($cadmin-value, group-feedback-color);
+			.progress-group-feedback {
+				color: map-get($cadmin-value, group-feedback-color);
+			}
 		}
 	}
 }

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

@@ -109,13 +109,15 @@
 // Sidebar Variants
 
 @each $color, $value in $cadmin-sidebar-palette {
-	$selector: if(
-		starts-with($color, '.') or starts-with($color, '#'),
-		$color,
-		str-insert($color, '.', 1)
-	);
+	@if not clay-is-map-unset($value) {
+		$selector: if(
+			starts-with($color, '.') or starts-with($color, '#'),
+			$color,
+			str-insert($color, '.', 1)
+		);
 
-	#{$selector} {
-		@include clay-sidebar-variant($value);
+		#{$selector} {
+			@include clay-sidebar-variant($value);
+		}
 	}
 }

package/src/scss/cadmin/components/_stickers.scss

@@ -68,32 +68,34 @@
 
 // Sticker Sizes
 
-@each $selector, $value in $cadmin-sticker-sizes {
-	$selector: if(
-		starts-with($selector, '.') or
-			starts-with($selector, '#') or
-			starts-with($selector, '%'),
-		$selector,
-		str-insert($selector, '.', 1)
-	);
-
-	@if (starts-with($selector, '%') or map-get($value, extend)) {
-		#{$selector} {
-			@include clay-sticker-variant($value);
-		}
-	} @else {
-		$placeholder: if(
-			starts-with($selector, '.') or starts-with($selector, '#'),
-			'%#{str-slice($selector, 2)}',
-			'%#{$selector}'
+@each $size, $value in $cadmin-sticker-sizes {
+	@if not clay-is-map-unset($value) {
+		$selector: if(
+			starts-with($size, '.') or
+				starts-with($size, '#') or
+				starts-with($size, '%'),
+			$size,
+			str-insert($size, '.', 1)
 		);
 
-		#{$placeholder} {
-			@include clay-sticker-variant($value);
-		}
-
-		#{$selector} {
-			@extend #{$placeholder} !optional;
+		@if (starts-with($size, '%') or map-get($value, extend)) {
+			#{$selector} {
+				@include clay-sticker-variant($value);
+			}
+		} @else if(starts-with($size, 'sticker-')) {
+			$placeholder: '%#{$size}';
+
+			#{$placeholder} {
+				@include clay-sticker-variant($value);
+			}
+
+			#{$selector} {
+				@extend #{$placeholder} !optional;
+			}
+		} @else {
+			#{$selector} {
+				@include clay-sticker-variant($value);
+			}
 		}
 	}
 }
@@ -101,31 +103,36 @@
 // Sticker Variants
 
 @each $color, $value in $cadmin-sticker-palette {
-	$selector: if(
-		starts-with($color, '.') or
-			starts-with($color, '#') or
-			starts-with($color, '%'),
-		$color,
-		str-insert($color, '.sticker-', 1)
-	);
-
-	@if (starts-with($color, '%') or map-get($value, extend)) {
-		#{$selector} {
-			@include clay-sticker-variant($value);
-		}
-	} @else {
-		$placeholder: if(
-			starts-with($color, '.') or starts-with($color, '#'),
-			'%#{str-slice($color, 2)}',
-			'%sticker-#{$color}'
+	@if not clay-is-map-unset($value) {
+		$deprecated-keys: 'primary', 'secondary', 'success', 'info', 'warning',
+			'danger', 'dark', 'light';
+
+		$selector: if(
+			starts-with($color, '.') or
+				starts-with($color, '#') or
+				starts-with($color, '%'),
+			$color,
+			str-insert($color, '.sticker-', 1)
 		);
 
-		#{$placeholder} {
-			@include clay-sticker-variant($value);
-		}
-
-		#{$selector} {
-			@extend #{$placeholder} !optional;
+		@if (starts-with($color, '%') or map-get($value, extend)) {
+			#{$selector} {
+				@include clay-sticker-variant($value);
+			}
+		} @else if (index($deprecated-keys, '#{$color}') != null) {
+			$placeholder: '%sticker-#{$color}';
+
+			#{$placeholder} {
+				@include clay-sticker-variant($value);
+			}
+
+			#{$selector} {
+				@extend #{$placeholder} !optional;
+			}
+		} @else {
+			#{$selector} {
+				@include clay-sticker-variant($value);
+			}
 		}
 	}
 }