@clayui/css 3.159.0 → 3.160.0

package/src/scss/variables/_globals-z-index.scss

@@ -1,27 +1,48 @@
 $zindex-dropdown: 1000 !default;
+
 $zindex-sticky: 989 !default;
+
 $zindex-fixed: 1030 !default;
+
 $zindex-modal-backdrop: 1040 !default;
 $zindex-modal: 1050 !default;
+
 $zindex-popover: 1060 !default;
+
 $zindex-tooltip: 1070 !default;
 
 $zindex-alert-notifications: 5000 !default;
+
 $zindex-clay-range-input-form-control: 1 !default;
+
 $zindex-input-group-hover: 3 !default;
-$zindex-input-group-focus: $zindex-input-group-hover + 1 !default; // 4
+
+$zindex-input-group-focus: calc(#{$zindex-input-group-hover} + 1) !default; // 4
+
 $zindex-navbar-collapse-absolute: 500 !default;
+
 $zindex-navbar-overlay: 450 !default;
+
 $zindex-navbar-toggler-focus: 525 !default;
-$zindex-menubar-vertical-expand-md-collapse-mobile: $zindex-navbar-collapse-absolute -
-	1 !default; // 499
-$zindex-menubar-vertical-expand-lg-collapse-mobile: $zindex-navbar-collapse-absolute -
-	1 !default; // 499
+
+$zindex-menubar-vertical-expand-md-collapse-mobile: calc(
+	#{$zindex-navbar-collapse-absolute} - 1
+) !default; // 499
+
+$zindex-menubar-vertical-expand-lg-collapse-mobile: calc(
+	#{$zindex-navbar-collapse-absolute} - 1
+) !default; // 499
+
 $zindex-pagination-link-focus: 4 !default;
+
 $zindex-pagination-link-active: 3 !default;
+
 $zindex-pagination-link-disabled: 0 !default;
+
 $zindex-panel-header-link-focus: 1 !default;
+
 $zindex-sidenav: calc(#{$zindex-dropdown} - 25) !default; // 975
 
 $zindex-c-slideout: $zindex-sidenav !default; // 975
+
 $zindex-c-slideout-height-full: calc(#{$zindex-fixed} + 5) !default; // 1035

package/src/scss/variables/_globals.scss

@@ -32,6 +32,7 @@ $c-prefers-focus-selector: if(
 
 $enable-lexicon-flat-colors: false !default;
 $enable-scaling-components: false !default;
+
 $scaling-breakpoint-down: sm !default;
 
 /// This enables Clay color functions to get the fallback color of a CSS Custom Property, convert it to the correct Sass type color, then process it using the corresponding Sass color function. The Clay color function will return a CSS color value. Set this variable to `false` if you want the Clay color function to return the CSS Custom Property without any modifications.
@@ -58,6 +59,7 @@ $enable-validation-icons: false !default;
 $enable-hover-media-query: false !default;
 
 $white: #fff !default;
+
 $gray-100: #f8f9fa !default;
 $gray-200: #e9ecef !default;
 $gray-300: #dee2e6 !default;
@@ -67,6 +69,7 @@ $gray-600: #6c757d !default;
 $gray-700: #495057 !default;
 $gray-800: #343a40 !default;
 $gray-900: #212529 !default;
+
 $black: #000 !default;
 
 $grays: () !default;
@@ -85,110 +88,120 @@ $grays: map-merge(
 	$grays
 );
 
-$blue-d4: #004799 !default;
-$blue-d3: #0053b3 !default;
-$blue-d2: #005fcc !default;
-$blue-d1: #006be6 !default;
 $blue: #007bff !default;
+
+$blue-d1: #006be6 !default;
+$blue-d2: #005fcc !default;
+$blue-d3: #0053b3 !default;
+$blue-d4: #004799 !default;
 $blue-l1: #338fff !default;
 $blue-l2: #66abff !default;
 $blue-l3: #97c5ff !default;
 $blue-l4: #cce3ff !default;
 $blue-l5: #e5f1ff !default;
 
-$indigo-d4: #0017e5 !default;
-$indigo-d3: #001aff !default;
-$indigo-d2: #1a30ff !default;
-$indigo-d1: #3347ff !default;
 $indigo: #6610f2 !default;
+
+$indigo-d1: #3347ff !default;
+$indigo-d2: #1a30ff !default;
+$indigo-d3: #001aff !default;
+$indigo-d4: #0017e5 !default;
 $indigo-l1: #808cff !default;
 $indigo-l2: #99a3ff !default;
 $indigo-l3: #b2baff !default;
 $indigo-l4: #ccd1ff !default;
 $indigo-l5: #e5e8ff !default;
 
-$purple-d4: #7700cc !default;
-$purple-d3: #8600e6 !default;
-$purple-d2: #9500ff !default;
-$purple-d1: #9f1aff !default;
 $purple: #6f42c1 !default;
+
+$purple-d1: #9f1aff !default;
+$purple-d2: #9500ff !default;
+$purple-d3: #8600e6 !default;
+$purple-d4: #7700cc !default;
 $purple-l1: #bf66ff !default;
 $purple-l2: #ca80ff !default;
 $purple-l3: #d499ff !default;
 $purple-l4: #dfb3ff !default;
 $purple-l5: #f2e5ff !default;
 
-$pink-d4: #800048 !default;
-$pink-d3: #990057 !default;
-$pink-d2: #b30065 !default;
-$pink-d1: #cc0074 !default;
 $pink: #e83e8c !default;
+
+$pink-d1: #cc0074 !default;
+$pink-d2: #b30065 !default;
+$pink-d3: #990057 !default;
+$pink-d4: #800048 !default;
 $pink-l1: #ff4db2 !default;
 $pink-l2: #ff80c8 !default;
 $pink-l3: #ff99d3 !default;
 $pink-l4: #ffb3de !default;
 $pink-l5: #ffe5f4 !default;
 
-$red-d4: #800000 !default;
-$red-d3: #990000 !default;
-$red-d2: #b30000 !default;
-$red-d1: #cc0000 !default;
 $red: #dc3545 !default;
+
+$red-d1: #cc0000 !default;
+$red-d2: #b30000 !default;
+$red-d3: #990000 !default;
+$red-d4: #800000 !default;
 $red-l1: #ff4d4d !default;
 $red-l2: #ff6666 !default;
 $red-l3: #ff8080 !default;
 $red-l4: #ff9999 !default;
 $red-l5: #ffe5e5 !default;
 
-$orange-d4: #662700 !default;
-$orange-d3: #803100 !default;
-$orange-d2: #993b00 !default;
-$orange-d1: #b34400 !default;
 $orange: #fd7e14 !default;
+
+$orange-d1: #b34400 !default;
+$orange-d2: #993b00 !default;
+$orange-d3: #803100 !default;
+$orange-d4: #662700 !default;
 $orange-l1: #ff6200 !default;
 $orange-l2: #ff8133 !default;
 $orange-l3: #ffa166 !default;
 $orange-l4: #ffc099 !default;
 $orange-l5: #fff0e5 !default;
 
-$yellow-d4: #997000 !default;
-$yellow-d3: #b38900 !default;
-$yellow-d2: #cc9600 !default;
-$yellow-d1: #e6a800 !default;
 $yellow: #ffc107 !default;
+
+$yellow-d1: #e6a800 !default;
+$yellow-d2: #cc9600 !default;
+$yellow-d3: #b38900 !default;
+$yellow-d4: #997000 !default;
 $yellow-l1: #ffc933 !default;
 $yellow-l2: #ffd666 !default;
 $yellow-l3: #ffe499 !default;
 $yellow-l4: #fff1cc !default;
 $yellow-l5: #fff8e5 !default;
 
-$green-d4: #162d06 !default;
-$green-d3: #22430a !default;
-$green-d2: #2e590d !default;
-$green-d1: #397010 !default;
 $green: #28a745 !default;
+
+$green-d1: #397010 !default;
+$green-d2: #2e590d !default;
+$green-d3: #22430a !default;
+$green-d4: #162d06 !default;
 $green-l1: #53a117 !default;
 $green-l2: #67c91d !default;
 $green-l3: #81e236 !default;
 $green-l4: #9de963 !default;
 $green-l5: #f1fce9 !default;
 
-$teal-d4: #092a25 !default;
-$teal-d3: #0d3f37 !default;
-$teal-d2: #125449 !default;
-$teal-d1: #16695b !default;
 $teal: #20c997 !default;
+
+$teal-d1: #16695b !default;
+$teal-d2: #125449 !default;
+$teal-d3: #0d3f37 !default;
+$teal-d4: #092a25 !default;
 $teal-l1: #24a892 !default;
 $teal-l2: #42d7be !default;
 $teal-l3: #6ce0cc !default;
 $teal-l4: #96e9db !default;
 $teal-l5: #eafbf8 !default;
 
-$cyan-d4: #00334d !default;
-$cyan-d3: #004466 !default;
-$cyan-d2: #005580 !default;
-$cyan-d1: #006699 !default;
 $cyan: #17a2b8 !default;
+
+$cyan-d1: #006699 !default;
+$cyan-d2: #005580 !default;
+$cyan-d3: #004466 !default;
+$cyan-d4: #00334d !default;
 $cyan-l1: #0099e6 !default;
 $cyan-l2: #33bbff !default;
 $cyan-l3: #66ccff !default;
@@ -199,23 +212,36 @@ $colors: () !default;
 $colors: map-merge(
 	(
 		'blue': $blue,
+
+		'cyan': $cyan,
+
+		'gray': $gray-600,
+
+		'gray-dark': $gray-800,
+
+		'green': $green,
+
 		'indigo': $indigo,
-		'purple': $purple,
+
+		'orange': $orange,
+
 		'pink': $pink,
+
+		'purple': $purple,
+
 		'red': $red,
-		'orange': $orange,
-		'yellow': $yellow,
-		'green': $green,
+
 		'teal': $teal,
-		'cyan': $cyan,
+
 		'white': $white,
-		'gray': $gray-600,
-		'gray-dark': $gray-800,
+
+		'yellow': $yellow,
 	),
 	$colors
 );
 
 $primary: $blue !default;
+
 $primary-d1: clay-darken($primary, 7.5) !default;
 $primary-d2: clay-darken($primary, 10) !default;
 $primary-l0: clay-lighten($primary, 17.06) !default;
@@ -224,6 +250,7 @@ $primary-l2: clay-lighten($primary, 32.94) !default;
 $primary-l3: clay-lighten($primary, 44.9) !default;
 
 $secondary: $gray-600 !default;
+
 $secondary-d1: clay-darken($secondary, 7.5) !default;
 $secondary-d2: clay-darken($secondary, 10) !default;
 $secondary-l0: clay-lighten($secondary, 15.29) !default;
@@ -232,36 +259,42 @@ $secondary-l2: clay-lighten($secondary, 32.94) !default;
 $secondary-l3: clay-lighten($secondary, 44.9) !default;
 
 $info: $cyan !default;
+
 $info-d1: clay-darken($info, 7.5) !default;
 $info-d2: clay-darken($info, 10) !default;
 $info-l1: clay-lighten($info, 22.94) !default;
 $info-l2: clay-lighten($info, 32.94) !default;
 
 $success: $green !default;
+
 $success-d1: clay-darken($success, 7.5) !default;
 $success-d2: clay-darken($success, 10) !default;
 $success-l1: clay-lighten($success, 22.94) !default;
 $success-l2: clay-lighten($success, 32.94) !default;
 
 $warning: $yellow !default;
+
 $warning-d1: clay-darken($warning, 7.5) !default;
 $warning-d2: clay-darken($warning, 10) !default;
 $warning-l1: clay-lighten($warning, 22.94) !default;
 $warning-l2: clay-lighten($warning, 32.94) !default;
 
 $danger: $red !default;
+
 $danger-d1: clay-darken($danger, 7.5) !default;
 $danger-d2: clay-darken($danger, 10) !default;
 $danger-l1: clay-lighten($danger, 22.94) !default;
 $danger-l2: clay-lighten($danger, 32.94) !default;
 
 $light: $gray-100 !default;
+
 $light-d1: clay-darken($light, 7.5) !default;
 $light-d2: clay-darken($light, 10) !default;
 $light-l1: clay-lighten($light, 22.94) !default;
 $light-l2: clay-lighten($light, 32.94) !default;
 
 $dark: $gray-800 !default;
+
 $dark-d1: clay-darken($dark, 7.5) !default;
 $dark-d2: clay-darken($dark, 10) !default;
 $dark-l1: clay-lighten($dark, 22.94) !default;
@@ -271,12 +304,19 @@ $theme-colors: () !default;
 $theme-colors: map-merge(
 	(
 		'primary': $primary,
+
 		'secondary': $secondary,
+
 		'success': $success,
+
 		'info': $info,
+
 		'warning': $warning,
+
 		'danger': $danger,
+
 		'light': $light,
+
 		'dark': $dark,
 	),
 	$theme-colors
@@ -304,7 +344,7 @@ $spacer: 1rem !default;
 $spacers: () !default;
 $spacers: map-deep-merge(
 	(
-		0: 0,
+		0: 0rem,
 		1: $spacer * 0.25,
 		2: $spacer * 0.5,
 		3: $spacer,
@@ -334,23 +374,24 @@ $sizes: map-merge(
 // Reusable Values
 
 $line-height-lg: 1.5 !default;
+
 $line-height-sm: 1.5 !default;
 
 $border-color: $gray-300 !default;
 $border-width: 0.0625rem !default;
 
-$border-radius: 0.25rem !default;
 $border-radius-lg: 0.3rem !default;
 $border-radius-sm: 0.2rem !default;
+$border-radius: 0.25rem !default;
 
+$rounded-0-border-radius: 0px !default;
 $rounded-border-radius: $border-radius !default;
 $rounded-circle-border-radius: 5000px !default;
-$rounded-0-border-radius: 0px !default;
 $rounded-pill: 50rem !default;
 
+$box-shadow-lg: 0 1rem 3rem rgba($black, 0.175) !default;
 $box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075) !default;
 $box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;
-$box-shadow-lg: 0 1rem 3rem rgba($black, 0.175) !default;
 
 /// @deprecated as of v3.x with no replacement, Clay CSS inlines SVG icons for dropdown-toggle carets
 
@@ -358,15 +399,15 @@ $caret-width: 0.3em !default;
 
 /// @deprecated as of v3.x with no replacement, Clay CSS inlines SVG icons for dropdown-toggle carets
 
-$caret-vertical-align: $caret-width * 0.85 !default;
+$caret-vertical-align: calc(#{$caret-width} * 0.85) !default;
 
 /// @deprecated as of v3.x with no replacement, Clay CSS inlines SVG icons for dropdown-toggle carets
 
-$caret-spacing: $caret-width * 0.85 !default;
+$caret-spacing: calc(#{$caret-width} * 0.85) !default;
 
 $transition-base: all 0.2s ease-in-out !default;
-$transition-fade: opacity 0.15s linear !default;
 $transition-collapse: height 0.35s ease !default;
+$transition-fade: opacity 0.15s linear !default;
 
 $embed-responsive-aspect-ratios: () !default;
 $embed-responsive-aspect-ratios: join(
@@ -383,23 +424,28 @@ $component-transition:
 $component-focus-box-shadow: 0 0 0 0.2rem rgba($primary, 0.25) !default;
 $component-focus-inset-box-shadow: inset 0 0 0 0.2rem rgba($primary, 0.25) !default;
 
-$component-active-color: $white !default;
 $component-active-bg: $primary !default;
+$component-active-color: $white !default;
 
 $component-disabled-opacity: 0.65 !default;
 
 // Cursors
 
 $link-cursor: pointer !default;
+
 $disabled-cursor: not-allowed !default;
 
 // Grid
 
 $grid-breakpoints: (
 	xs: 0,
+
 	sm: 576px,
+
 	md: 768px,
+
 	lg: 992px,
+
 	xl: 1200px,
 ) !default;
 
@@ -440,10 +486,15 @@ $clay-container-fluid: map-merge(
 
 $container-max-widths: (
 	sm: 540px,
+
 	md: 720px,
+
 	lg: 960px,
+
 	xl: 1140px,
+
 	xxl: 1392px,
+
 	xxxl: 1872px,
 ) !default;
 
@@ -453,6 +504,7 @@ $container-form-lg: () !default;
 $container-form-lg: map-deep-merge(
 	(
 		breakpoint-up: lg,
+
 		padding-bottom: 3rem,
 		padding-top: 3rem,
 		padding-bottom-mobile: 1rem,
@@ -480,7 +532,9 @@ $font-import-url: null !default;
 $font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
 	'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
 	'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
+
 $font-family-serif: Georgia, 'Times New Roman', Times, serif !default;
+
 $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
 	'Liberation Mono', 'Courier New', monospace !default;
 
@@ -512,10 +566,15 @@ $font-size-base-mobile: $font-size-base !default;
 $font-size-lg-mobile: $font-size-lg !default;
 
 $font-weight-lighter: lighter !default;
+
 $font-weight-light: 300 !default;
+
 $font-weight-normal: 400 !default;
+
 $font-weight-semi-bold: 500 !default;
+
 $font-weight-bold: 700 !default;
+
 $font-weight-bolder: 900 !default;
 
 $font-weight-base: $font-weight-normal !default;
@@ -525,12 +584,14 @@ $line-height-base: 1.5 !default;
 // h1, .h1
 
 $h1-font-size: calc(#{$font-size-base} * 2.5) !default;
+
 $h1-font-size-mobile: null !default;
 
 $h1: () !default;
 $h1: map-deep-merge(
 	(
 		font-size: $h1-font-size,
+
 		media-breakpoint-down: (
 			sm: (
 				font-size: $h1-font-size-mobile,
@@ -543,12 +604,14 @@ $h1: map-deep-merge(
 // h2, .h2
 
 $h2-font-size: calc(#{$font-size-base} * 2) !default;
+
 $h2-font-size-mobile: null !default;
 
 $h2: () !default;
 $h2: map-deep-merge(
 	(
 		font-size: $h2-font-size,
+
 		media-breakpoint-down: (
 			sm: (
 				font-size: $h2-font-size-mobile,
@@ -561,12 +624,14 @@ $h2: map-deep-merge(
 // h3, .h3
 
 $h3-font-size: calc(#{$font-size-base} * 1.75) !default;
+
 $h3-font-size-mobile: null !default;
 
 $h3: () !default;
 $h3: map-deep-merge(
 	(
 		font-size: $h3-font-size,
+
 		media-breakpoint-down: (
 			sm: (
 				font-size: $h3-font-size-mobile,
@@ -579,12 +644,14 @@ $h3: map-deep-merge(
 // h4, .h4
 
 $h4-font-size: calc(#{$font-size-base} * 1.5) !default;
+
 $h4-font-size-mobile: null !default;
 
 $h4: () !default;
 $h4: map-deep-merge(
 	(
 		font-size: $h4-font-size,
+
 		media-breakpoint-down: (
 			sm: (
 				font-size: $h4-font-size-mobile,
@@ -597,12 +664,14 @@ $h4: map-deep-merge(
 // h5, .h5
 
 $h5-font-size: calc(#{$font-size-base} * 1.25) !default;
+
 $h5-font-size-mobile: null !default;
 
 $h5: () !default;
 $h5: map-deep-merge(
 	(
 		font-size: $h5-font-size,
+
 		media-breakpoint-down: (
 			sm: (
 				font-size: $h5-font-size-mobile,
@@ -615,12 +684,14 @@ $h5: map-deep-merge(
 // h6, .h6
 
 $h6-font-size: $font-size-base !default;
+
 $h6-font-size-mobile: null !default;
 
 $h6: () !default;
 $h6: map-deep-merge(
 	(
 		font-size: $h6-font-size,
+
 		media-breakpoint-down: (
 			sm: (
 				font-size: $h6-font-size-mobile,
@@ -632,11 +703,11 @@ $h6: map-deep-merge(
 
 // Headings h1-h6
 
-$headings-margin-bottom: 0.5rem !default;
+$headings-color: null !default;
 $headings-font-family: null !default;
 $headings-font-weight: 500 !default;
 $headings-line-height: 1.2 !default;
-$headings-color: null !default;
+$headings-margin-bottom: 0.5rem !default;
 
 $headings: () !default;
 $headings: map-deep-merge(
@@ -654,8 +725,10 @@ $headings: map-deep-merge(
 
 $body-bg: $white !default;
 $body-color: $gray-900 !default;
+
 $body-moz-osx-font-smoothing: $moz-osx-font-smoothing !default;
 $body-webkit-font-smoothing: $webkit-font-smoothing !default;
+
 $body-text-align: inherit !default;
 
 $c-body: () !default;
@@ -665,12 +738,16 @@ $c-body: map-merge(
 		color: $body-color,
 		font-family: $font-family-base,
 		font-size: $font-size-base,
+
 		-moz-osx-font-smoothing: $body-moz-osx-font-smoothing,
 		-webkit-font-smoothing: $body-webkit-font-smoothing,
+
 		font-weight: $font-weight-base,
 		line-height: $line-height-base,
-		margin: 0,
+		margin: 0rem,
+
 		-ms-overflow-style: scrollbar,
+
 		text-align: $body-text-align,
 	),
 	$c-body
@@ -680,10 +757,7 @@ $c-body: map-merge(
 
 $c-button-base: () !default;
 $c-button-base: map-merge(
-	(
-		cursor: $link-cursor,
-		-webkit-appearance: button,
-	),
+	(-webkit-appearance: button, cursor: $link-cursor),
 	$c-button-base
 );
 
@@ -691,6 +765,7 @@ $c-button-base: map-merge(
 
 $link-color: $primary !default;
 $link-decoration: none !default;
+
 $link-hover-color: clay-darken($link-color, 15%) !default;
 $link-hover-decoration: underline !default;
 
@@ -706,6 +781,7 @@ $link: map-deep-merge(
 			color: $link-hover-color,
 			text-decoration: $link-hover-decoration,
 		),
+
 		focus: (
 			box-shadow: $component-focus-box-shadow,
 			outline: 0,
@@ -835,11 +911,11 @@ $code-color: $pink !default;
 $code-font-size: 87.5% !default;
 
 $kbd-bg: $gray-900 !default;
+$kbd-box-shadow: inset 0 -0.1rem 0 rgba($black, 0.25) !default;
 $kbd-color: $white !default;
 $kbd-font-size: $code-font-size !default;
 $kbd-padding-x: 0.4rem !default;
 $kbd-padding-y: 0.2rem !default;
-$kbd-box-shadow: inset 0 -0.1rem 0 rgba($black, 0.25) !default;
 
 $nested-kbd-font-weight: $font-weight-bold !default;
 
@@ -857,10 +933,10 @@ $list-inline-padding: 0.5rem !default;
 $fieldset: () !default;
 $fieldset: map-merge(
 	(
-		border: 0,
-		margin: 0,
-		min-width: 0,
-		padding: 0,
+		border: 0rem,
+		margin: 0rem,
+		min-width: 0rem,
+		padding: 0rem,
 	),
 	$fieldset
 );
@@ -881,7 +957,7 @@ $legend: map-merge(
 		line-height: inherit,
 		margin-bottom: 0.5rem,
 		max-width: 100%,
-		padding: 0,
+		padding: 0rem,
 		white-space: normal,
 		width: 100%,
 	),
@@ -901,6 +977,7 @@ $input-btn-padding-y: 0.375rem !default;
 $input-btn-focus-width: 0.2rem !default;
 
 $input-btn-focus-color: rgba($component-active-bg, 0.25) !default;
+
 $input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
 
 $input-btn-font-size-sm: $font-size-sm !default;

package/src/scss/variables/_images.scss

@@ -1,8 +1,7 @@
 $thumbnail-bg: $body-bg !default;
 $thumbnail-border-color: $gray-300 !default;
-$thumbnail-border-width: $border-width !default;
-
 $thumbnail-border-radius: $border-radius !default;
+$thumbnail-border-width: $border-width !default;
 $thumbnail-box-shadow: 0 1px 2px rgba($black, 0.075) !default;
 $thumbnail-padding: 0.25rem !default;