@clayui/css 3.94.0 → 3.95.0

package/src/scss/mixins/_links.scss

@@ -465,7 +465,7 @@
 			$disabled-active,
 			map-get($map, disabled-active)
 		);
-		$disabled-active: map-deep-merge(
+		$disabled-active: map-merge(
 			$disabled-active,
 			(
 				pointer-events:
@@ -561,70 +561,62 @@
 			}
 
 			&:link {
-				@include clay-css(map-get($map, link));
+				$_link: setter(map-get($map, link), ());
+
+				@include clay-css($_link);
 
 				&::before {
-					@include clay-css(map-deep-get($map, link, before));
+					@include clay-css(map-get($_link, before));
 				}
 
 				&::after {
-					@include clay-css(map-deep-get($map, link, after));
+					@include clay-css(map-get($_link, after));
 				}
 
 				.inline-item {
-					@include clay-css(map-deep-get($map, link, inline-item));
+					@include clay-css(map-get($_link, inline-item));
 				}
 
 				.inline-item-before {
-					@include clay-css(
-						map-deep-get($map, link, inline-item-before)
-					);
+					@include clay-css(map-get($_link, inline-item-before));
 				}
 
 				.inline-item-middle {
-					@include clay-css(
-						map-deep-get($map, link, inline-item-middle)
-					);
+					@include clay-css(map-get($_link, inline-item-middle));
 				}
 
 				.inline-item-after {
-					@include clay-css(
-						map-deep-get($map, link, inline-item-after)
-					);
+					@include clay-css(map-get($_link, inline-item-after));
 				}
 			}
 
 			&:visited {
-				@include clay-css(map-get($map, visited));
+				$_visited: setter(map-get($map, visited), ());
+
+				@include clay-css($_visited);
 
 				&::before {
-					@include clay-css(map-deep-get($map, visited, before));
+					@include clay-css(map-get($_visited, before));
 				}
 
 				&::after {
-					@include clay-css(map-deep-get($map, visited, after));
+					@include clay-css(map-get($_visited, after));
 				}
 
 				.inline-item {
-					@include clay-css(map-deep-get($map, visited, inline-item));
+					@include clay-css(map-get($_visited, inline-item));
 				}
 
 				.inline-item-before {
-					@include clay-css(
-						map-deep-get($map, visited, inline-item-before)
-					);
+					@include clay-css(map-get($_visited, inline-item-before));
 				}
 
 				.inline-item-middle {
-					@include clay-css(
-						map-deep-get($map, visited, inline-item-middle)
-					);
+					@include clay-css(map-get($_visited, inline-item-middle));
 				}
 
 				.inline-item-after {
-					@include clay-css(
-						map-deep-get($map, visited, inline-item-after)
-					);
+					@include clay-css(map-get($_visited, inline-item-after));
 				}
 			}
 
@@ -633,11 +625,11 @@
 				@include clay-css($hover);
 
 				&::before {
-					@include clay-css(map-deep-get($map, hover, before));
+					@include clay-css(map-get($hover, before));
 				}
 
 				&::after {
-					@include clay-css(map-deep-get($map, hover, after));
+					@include clay-css(map-get($hover, after));
 				}
 
 				.inline-item {
@@ -662,11 +654,11 @@
 				@include clay-css($focus);
 
 				&::before {
-					@include clay-css(map-deep-get($map, focus, before));
+					@include clay-css(map-get($focus, before));
 				}
 
 				&::after {
-					@include clay-css(map-deep-get($map, focus, after));
+					@include clay-css(map-get($focus, after));
 				}
 
 				.inline-item {
@@ -690,11 +682,25 @@
 				@include clay-css($active);
 
 				&::before {
-					@include clay-css(map-deep-get($map, active, before));
+					@include clay-css(map-get($active, before));
 				}
 
 				&::after {
-					@include clay-css(map-deep-get($map, active, after));
+					@include clay-css(map-get($active, after));
+				}
+
+				&:focus {
+					$_active-focus: setter(map-get($active, focus), ());
+
+					@include clay-css($_active-focus);
+
+					&::before {
+						@include clay-css(map-get($_active-focus, before));
+					}
+
+					&::after {
+						@include clay-css(map-get($_active-focus, after));
+					}
 				}
 
 				.inline-item {
@@ -718,11 +724,30 @@
 				@include clay-css($active-class);
 
 				&::before {
-					@include clay-css(map-deep-get($map, active-class, before));
+					@include clay-css(map-get($active-class, before));
 				}
 
 				&::after {
-					@include clay-css(map-deep-get($map, active-class, after));
+					@include clay-css(map-get($active-class, after));
+				}
+
+				&:focus {
+					$_active-class-focus: setter(
+						map-get($active-class, focus),
+						()
+					);
+
+					@include clay-css($_active-class-focus);
+
+					&::before {
+						@include clay-css(
+							map-get($_active-class-focus, before)
+						);
+					}
+
+					&::after {
+						@include clay-css(map-get($_active-class-focus, after));
+					}
 				}
 
 				.inline-item {
@@ -753,26 +778,36 @@
 				@include clay-css($disabled);
 
 				&::before {
-					@include clay-css(map-deep-get($map, disabled, before));
+					@include clay-css(map-get($disabled, before));
 				}
 
 				&::after {
-					@include clay-css(map-deep-get($map, disabled, after));
+					@include clay-css(map-get($disabled, after));
+				}
+
+				&:focus {
+					$_disabled-focus: setter(map-get($disabled, focus), ());
+
+					@include clay-css($_disabled-focus);
+
+					&::before {
+						@include clay-css(map-get($_disabled-focus, before));
+					}
+
+					&::after {
+						@include clay-css(map-get($_disabled-focus, after));
+					}
 				}
 
 				&:active {
 					@include clay-css($disabled-active);
 
 					&::before {
-						@include clay-css(
-							map-deep-get($map, disabled, active, before)
-						);
+						@include clay-css(map-get($disabled-active, before));
 					}
 
 					&::after {
-						@include clay-css(
-							map-deep-get($map, disabled, active, after)
-						);
+						@include clay-css(map-get($disabled-active, after));
 					}
 				}
 
@@ -804,11 +839,11 @@
 				@include clay-css($show);
 
 				&::before {
-					@include clay-css(map-deep-get($map, show, before));
+					@include clay-css(map-get($show, before));
 				}
 
 				&::after {
-					@include clay-css(map-deep-get($map, show, after));
+					@include clay-css(map-get($show, after));
 				}
 			}
 

package/src/scss/mixins/_modals.scss

@@ -109,8 +109,30 @@
 			)
 		);
 
+		$map: map-remove(
+			$map,
+			enabled,
+			modal-header,
+			header,
+			header-bg,
+			header-border-color,
+			header-color,
+			header-close,
+			header-close-color,
+			btn-focus-box-shadow,
+			btn-focus-outline,
+			modal-body,
+			body,
+			body-bg,
+			body-color,
+			modal-footer,
+			footer,
+			footer-bg,
+			footer-border-color
+		);
+
 		@if ($enabled) {
-			@include clay-css($map);
+			@include clay-map-to-css($map);
 
 			// Modal specific btn-monospaced is deprecated in v2.0.0-rc.12
 
@@ -130,15 +152,15 @@
 			}
 
 			.modal-header {
-				@include clay-css($header);
+				@include clay-map-to-css($header);
 			}
 
 			.modal-body {
-				@include clay-css($body);
+				@include clay-map-to-css($body);
 			}
 
 			.modal-footer {
-				@include clay-css($footer);
+				@include clay-map-to-css($footer);
 			}
 		}
 	}

package/src/scss/mixins/_nav-nested.scss

@@ -17,10 +17,17 @@
 	$nav-class: '.nav',
 	$i: 1
 ) {
+	$_nav-class-next: '#{$nav-class}';
+
 	@for $i from (1) through $nest-level {
-		#{$nav-class} > li {
-			> a {
+		#{$_nav-class-next} > li {
+			> a,
+			> .btn {
 				padding-left: calc(#{$indent} * #{$i + 1});
+
+				.c-inner {
+					margin-left: calc(#{$indent} * -#{$i + 1});
+				}
 			}
 
 			> .nav-equal-height-heading {
@@ -28,6 +35,6 @@
 			}
 		}
 
-		$nav-class: '#{$nav-class} .nav';
+		$_nav-class-next: '#{$nav-class} #{$_nav-class-next}';
 	}
 }

package/src/scss/variables/_modals.scss

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

package/src/scss/variables/_navs.scss

@@ -346,9 +346,14 @@ $nav-unstyled: map-deep-merge(
 	$nav-unstyled
 );
 
-// Nav Nested
+// Nav Nested Margins
 
 $nav-nested-margins-spacer-x: $nav-link-padding-x !default;
+
+// Nav Nested
+
+$nav-nested-nav-class: '.nav' !default;
+$nav-nested-nest-level: 7 !default;
 $nav-nested-spacer-x: $nav-link-padding-x !default;
 
 // Nav Tabs

package/src/scss/variables/_pagination.scss

@@ -112,7 +112,6 @@ $pagination-link-active: map-deep-merge(
 		background-color: $pagination-active-bg,
 		border-color: $pagination-active-border-color,
 		color: $pagination-active-color,
-		cursor: default,
 		z-index: $zindex-pagination-link-active,
 	),
 	$pagination-link-active
@@ -161,6 +160,7 @@ $pagination-link: map-deep-merge(
 		hover: $pagination-link-hover,
 		focus: $pagination-link-focus,
 		active: $pagination-link-active,
+		active-class: $pagination-link-active,
 		disabled: $pagination-link-disabled,
 		lexicon-icon: (
 			margin-top: 0,