@clayui/css 3.62.1 → 3.65.1

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

@@ -25,17 +25,23 @@
 // Background
 
 @each $color, $value in $bg-theme-colors {
-	$hover: setter(map-get($value, hover), ());
+	$selector: if(
+		starts-with($color, '.') or
+			starts-with($color, '#') or
+			starts-with($color, '%'),
+		$color,
+		str-insert($color, '.bg-', 1)
+	);
 
-	.bg-#{$color} {
-		@include clay-css(setter($value, ()));
+	#{$selector} {
+		@include clay-css($value);
 	}
 
-	a.bg-#{$color},
-	button.bg-#{$color} {
+	a#{$selector},
+	button#{$selector} {
 		&:hover,
 		&:focus {
-			@include clay-css($hover);
+			@include clay-css(map-get($value, hover));
 		}
 	}
 }
@@ -43,7 +49,7 @@
 @if $enable-gradients {
 	@each $color, $value in $bg-gradient-theme-colors {
 		.bg-gradient-#{$color} {
-			@include clay-css(setter($value, ()));
+			@include clay-css($value);
 		}
 	}
 }
@@ -91,8 +97,16 @@
 }
 
 @each $color, $value in $border-theme-colors {
-	.border-#{$color} {
-		@include clay-css(setter($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);
 	}
 }
 
@@ -180,9 +194,9 @@
 	}
 }
 
-/* REUSE-Snippet-Begin
+/* SPDX-SnippetBegin
  * SPDX-License-Identifier: MIT
- * SPDX-Copyright: © 2012 Nicolas Gallagher <https://github.com/suitcss/components-flex-embed>
+ * SPDX-SnippetCopyrightText: © 2012 Nicolas Gallagher <https://github.com/suitcss/components-flex-embed>
  */
 
 .embed-responsive {
@@ -227,7 +241,7 @@
 	}
 }
 
-/* REUSE-Snippet-End */
+/* SPDX-SnippetEnd */
 
 // Flex
 
@@ -719,7 +733,9 @@
 
 @each $selector, $value in $font-sizes {
 	$selector: if(
-		starts-with($selector, '.') or starts-with($selector, '#'),
+		starts-with($selector, '.') or
+			starts-with($selector, '#') or
+			starts-with($selector, '%'),
 		$selector,
 		str-insert($selector, '.', 1)
 	);
@@ -736,16 +752,22 @@
 }
 
 @each $color, $value in $text-theme-colors {
-	$hover: setter(map-get($value, hover), ());
+	$selector: if(
+		starts-with($color, '.') or
+			starts-with($color, '#') or
+			starts-with($color, '%'),
+		$color,
+		str-insert($color, '.text-', 1)
+	);
 
-	.text-#{$color} {
-		@include clay-css(setter($value, ()));
+	#{$selector} {
+		@include clay-css($value);
 	}
 
-	a.text-#{$color} {
+	a#{$selector} {
 		&:hover,
 		&:focus {
-			@include clay-css($hover);
+			@include clay-css(map-get($value, hover));
 		}
 	}
 }

package/src/scss/components/_utilities.scss

@@ -272,14 +272,15 @@
 // Inline Scroller
 
 .inline-scroller {
-	list-style: none;
-	margin: 0;
-	max-height: $inline-scroller-max-height;
-	overflow: auto;
+	@include clay-css($inline-scroller);
 
-	-webkit-overflow-scrolling: touch;
+	&:focus {
+		@include clay-css(map-get($inline-scroller, focus));
+	}
 
-	padding: 0;
+	&:focus-visible {
+		@include clay-css(map-get($inline-scroller, focus-visible));
+	}
 }
 
 // Inline Item

package/src/scss/functions/_global-functions.scss

@@ -776,9 +776,9 @@
 	@return $returnVal;
 }
 
-// * REUSE-Snippet-Begin
+// * SPDX-SnippetBegin
 // * SPDX-License-Identifier: MIT
-// * SPDX-FileCopyrightText: © 2016 Hugo Giraudel <https://hugogiraudel.com/>
+// * SPDX-SnippetCopyrightText: © 2016 Hugo Giraudel <https://hugogiraudel.com/>
 // *
 
 /// A function that fetches deeply nested values from a Sass map.
@@ -842,11 +842,11 @@
 	@return clay-str-replace($string, $search, $replace);
 }
 
-// * REUSE-Snippet-End
+// * SPDX-SnippetEnd
 
-// * REUSE-Snippet-Begin
+// * SPDX-SnippetBegin
 // * SPDX-License-Identifier: MIT
-// * SPDX-FileCopyrightText: © 2018 Jakob Eriksen <http://codepen.io/jakob-e/pen/doMoML>
+// * SPDX-SnippetCopyrightText: © 2018 Jakob Eriksen <http://codepen.io/jakob-e/pen/doMoML>
 // *
 
 /// A function to encode an SVG and provide back a data URI to be used in `background-image`. If the SVG uses double quotes to delimit attribute names and values, wrap the SVG in single quotes or vice versa.
@@ -880,11 +880,11 @@
 	@return url('data:image/svg+xml;charset=utf8,#{$encoded}');
 }
 
-// * REUSE-Snippet-End
+// * SPDX-SnippetEnd
 
-// * REUSE-Snippet-Begin
+// * SPDX-SnippetBegin
 // * SPDX-License-Identifier: MIT
-// * SPDX-FileCopyrightText: © 2018 Kevin Weber <https://codepen.io/kevinweber/pen/dXWoRw>
+// * SPDX-SnippetCopyrightText: © 2018 Kevin Weber <https://codepen.io/kevinweber/pen/dXWoRw>
 // *
 
 /// A Bootstrap 4 function that converts ASCII characters in SVG's to URL encoded characters.
@@ -914,7 +914,7 @@
 	@return $string;
 }
 
-// * REUSE-Snippet-End
+// * SPDX-SnippetEnd
 
 /// A function that returns a specific Lexicon Icon with a specific color as a data URI to be used in `background-image`.
 /// @param {String} $name - The Lexicon Icon name (e.g., angle-right)

package/src/scss/functions/_lx-icons-generated.scss

@@ -478,6 +478,8 @@
 
 	'hidden': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M478.4 278.7c7.1-8.3 20.8-24.4 29-38.1 20.4-36.2-32.2-69-54.9-32.9-78.7 135.8-339 139.8-390.7 4.6C42.4 172-11.9 198.5 2.4 236c7 17.4 22.6 41.6 28.1 47.9-19 8.6-39.8 25.6-25.7 52.8 25 33.7 52.7 4.7 74.4-7.4 8.7 6.8 29.3 17.1 38.3 21.1-15 22.5-32.3 50.3-2 69.6 36.8 15.3 47.7-20.2 64.3-50 7.2 1.5 31.7 5.1 44.2 5.3 0 40.8-6.1 69.4 32 72.8 37.5-2.6 32-32 32-74.6 13.2-1 38.2-7.1 44.3-8.6 20.3 31.9 27.8 70 67.7 53.2 30.3-21.3 13-41.4-6.7-75.6 7.3-3.5 28.7-15.7 33.9-19.4 27.2 15.1 57.1 43.9 80.3 9.5 11.2-20.9 1.3-40.2-29.1-53.9z" fill="#{$color}"/></svg>',
 
+	'hierarchy': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline lx-hierarchy-line-1" fill-rule="evenodd" clip-rule="evenodd" d="M0 64C0 28.654 28.654 0 64 0h320c35.346 0 64 28.654 64 64v64c0 35.346-28.654 64-64 64H64c-35.346 0-64-28.654-64-64V64Zm384 0H64v64h320V64Z" fill="#{$color}"/><path class="lexicon-icon-outline lx-hierarchy-line-2" d="M128 304c0-26.51 21.49-48 48-48h288c26.51 0 48 21.49 48 48s-21.49 48-48 48H176c-26.51 0-48-21.49-48-48Zm0 160c0-26.51 21.49-48 48-48h288c26.51 0 48 21.49 48 48s-21.49 48-48 48H176c-26.51 0-48-21.49-48-48Z" fill="#{$color}"/></svg>',
+
 	'home-full': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M233.6 22.4c12.5-12.5 32.3-12.5 44.8 0l182.9 182.8c12 12 18.7 28.3 18.7 45.3V512H320V384c0-35.3-28.7-64-64-64s-64 28.7-64 64v128H32V250.5c0-17 6.7-33.3 18.7-45.3L233.6 22.4z" fill="#{$color}"/></svg>',
 
 	'home': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M461.3 205.2 278.4 22.4c-12.5-12.5-32.3-12.5-44.8 0L50.7 205.3c-12 12-18.7 28.3-18.7 45.3V512h192V352c0-42.7 64-42.7 64 0v160h192V250.5c0-17-6.7-33.3-18.7-45.3zM416 448h-64v-96c0-128-192-128-192 0v96H96V256L256 96l160 160v192z" fill="#{$color}"/></svg>',
@@ -568,6 +570,8 @@
 
 	'myspace': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline myspace-user" d="M488.728 231.264c-12.846 0-23.272 10.426-23.272 23.273 0 115.486-93.969 209.454-209.454 209.454S46.548 370.022 46.548 254.537c0-12.846-10.426-23.273-23.273-23.273S.002 241.69.002 254.537c0 141.152 114.847 256 256 256s256-114.848 256-256c0-12.846-10.426-23.273-23.272-23.273z" fill="#{$color}"/><path class="lexicon-icon-outline myspace-border" d="M115.513 298.183c6.49 0 12.953-2.712 17.581-8.006 30.986-35.588 75.776-56.014 122.933-56.014s91.947 20.427 122.933 56.014c8.431 9.682 23.139 10.719 32.848 2.261 9.682-8.431 10.692-23.139 2.261-32.848-21.916-25.188-49.338-44.205-79.579-56.44 23.139-21.278 37.901-51.519 37.901-85.377 0-64.153-52.211-116.364-116.363-116.364S139.665 53.62 139.665 117.773c0 33.858 14.762 64.1 37.901 85.377-30.242 12.235-57.663 31.251-79.579 56.44-8.431 9.682-7.421 24.39 2.287 32.848a22.987 22.987 0 0 0 15.24 5.745zm70.669-180.357c0-38.513 31.305-69.818 69.818-69.818s69.818 31.305 69.818 69.818-31.305 69.818-69.818 69.818-69.818-31.332-69.818-69.818z" fill="#{$color}"/></svg>',
 
+	'no-bot': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline lx-no-bot-1" fill-rule="evenodd" clip-rule="evenodd" d="M471.463 54.627c12.497-12.496 12.497-32.758 0-45.254-12.496-12.497-32.758-12.497-45.254 0L371.581 64h-82.745V32c0-17.673-14.327-32-32-32-17.673 0-32 14.327-32 32v32h-96c-35.346 0-64 28.654-64 64v64c-35.346 0-64 28.654-64 64 0 35.346 28.654 64 64 64v50.745l-54.627 54.628c-12.497 12.496-12.497 32.758 0 45.254 11.457 11.458 29.443 12.411 41.986 2.858l257.731-257.732c-12.727-8.632-21.09-23.216-21.09-39.753 0-26.51 21.49-48 48-48 16.537 0 31.121 8.363 39.753 21.09l94.874-94.463ZM224.835 176c0 26.51-21.49 48-48 48-26.509 0-48-21.49-48-48s21.491-48 48-48c26.51 0 48 21.49 48 48Z" fill="#{$color}"/><path class="lexicon-icon-outline lx-no-bot-2" d="M448.836 167.353 296.189 320h24.647c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32l-87.85-.797L168.189 448h216.647c35.346 0 64-28.654 64-64v-64c35.346 0 64-28.654 64-64 0-35.346-28.654-64-64-64v-24.647Z" fill="#{$color}"/></svg>',
+
 	'nodes': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="m387.9 365.3-31.2-31.2c36-44 36.9-104.5 3.9-151.7l32.9-32.9C422.9 172.6 512 159.8 512 79.7c0-106.5-160-106.1-160 0 0 18.5 6.5 35.3 17.1 48.9l-30.3 30.3c-50.5-40.4-112.3-41.8-160.9-3.9l-31.2-31.2C155.1 111.2 160 96 160 79.7c0-103-160-108.3-160 0 0 62.9 71.7 102.4 124.1 66.8l31.2 31.2c-28.3 30.3-45.4 108.9 3.9 161.1l-30.3 30.3C80 329.3 0 359.8 0 432c0 106.6 160 106.6 160 0 0-14.1-3.9-27.1-10.3-38.5l32.9-32.9c43.9 31.8 106.6 31.8 151.5-3.9l31.2 31.2c-8.4 12.7-13.3 27.8-13.3 44.1 0 103.3 160 109.5 160 0 0-71.8-81.7-99.8-124.1-66.7zM448 79.7c0 20.4-32 21.4-32 0 0-21.1 32-20.9 32 0zm-384 0c0-21.9 32-21.1 32 0 0 20.5-32 21-32 0zM64 432c0-20.7 32-21.7 32 0 0 20.9-32 20.7-32 0zm128-176.1c0-84.5 128-85 128 0 0 84-128 85.5-128 0zM416.2 433c0-23.1 31.8-20.8 31.8-.9 0 20.9-31.8 19.7-31.8.9z" fill="#{$color}"/></svg>',
 
 	'number': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline number-hundreds" d="M7 334.5h50V187.4H15.8V162c15.9-3.5 35-7.8 51.7-18.3h30.3v190.8h44v33.1H7v-33.1z" fill="#{$color}"/><path class="lexicon-icon-outline number-tens" d="M174.9 344c18.1-21 98.1-82 101.4-133.8-.3-59.2-66.3-39.7-80.6-13.7L173.2 174c91.3-89 188.8 8 118.1 95.2-7.4 10.5-46.2 54.6-57.2 66.4 36.9-2.6 92.2-2.5 92.2-2.5v34.5H174.9V344z" fill="#{$color}"/><path class="lexicon-icon-outline number-ones" d="M369.9 314.1C382 326 416 354 452.8 329.8c29.7-27.3 6.7-68.8-54.4-62.8v-29.6c11 0 58.6.6 58.4-35.9-2.3-43.5-54.8-34-78.1-8.8l-20.7-25c9.6-8.5 43-38.7 96.8-24.3 67.2 23.1 46.2 98.1 3.8 106.6 47.4 9 77.4 88-1.6 117.4-44 11.6-86-2.4-106.5-27.3l19.4-26z" fill="#{$color}"/></svg>',

package/src/scss/functions/_type-conversion-functions.scss

@@ -4,9 +4,9 @@
 	@return map-remove((), 'key');
 }
 
-// * REUSE-Snippet-Begin
+// * SPDX-SnippetBegin
 // * SPDX-License-Identifier: MIT
-// * SPDX-FileCopyrightText: © 2014 Kitty Giraudel <https://kittygiraudel.com/>
+// * SPDX-SnippetCopyrightText: © 2014 Kitty Giraudel <https://kittygiraudel.com/>
 // *
 
 /// Add `$unit` to `$value`
@@ -95,11 +95,11 @@
 	@return if($minus, -$result, $result);
 }
 
-// * REUSE-Snippet-End
+// * SPDX-SnippetEnd
 
-// * REUSE-Snippet-Begin
+// * SPDX-SnippetBegin
 // * SPDX-License-Identifier: MIT
-// * SPDX-FileCopyrightText: © 2014 Kitty Giraudel <https://github.com/KittyGiraudel/SassyJSON>
+// * SPDX-SnippetCopyrightText: © 2014 Kitty Giraudel <https://github.com/KittyGiraudel/SassyJSON>
 // *
 
 /// Logs an error at `$pointer` with `$string` message
@@ -606,4 +606,4 @@
 	}
 }
 
-// * REUSE-Snippet-End
+// * SPDX-SnippetEnd

package/src/scss/mixins/_globals.scss

@@ -274,6 +274,8 @@
 							transition: none;
 						}
 					}
+				} @else if ($key == 'extend') {
+					@extend #{$value} !optional;
 				} @else if ($key == 'user-select') {
 					-ms-user-select: $value;
 					-moz-user-select: $value;

package/src/scss/mixins/_utilities.scss

@@ -29,9 +29,9 @@
 	resize: $direction;
 }
 
-// * REUSE-Snippet-Begin
+// * SPDX-SnippetBegin
 // * SPDX-License-Identifier: APLv2
-// * SPDX-FileCopyrightText: © 2018 A11Y Project <https://a11yproject.com/posts/how-to-hide-content/>
+// * SPDX-SnippetCopyrightText: © 2018 A11Y Project <https://a11yproject.com/posts/how-to-hide-content/>
 // *
 
 /// A Bootstrap 4 mixin that generates styles to only display content to screen readers.
@@ -48,11 +48,11 @@
 	width: 1px;
 }
 
-// * REUSE-Snippet-End
+// * SPDX-SnippetEnd
 
-// * REUSE-Snippet-Begin
+// * SPDX-SnippetBegin
 // * SPDX-License-Identifier: MIT
-// * SPDX-FileCopyrightText: © 2018 HTML5 Boilerplate <https://github.com/h5bp/main.css>
+// * SPDX-SnippetCopyrightText: © 2018 HTML5 Boilerplate <https://github.com/h5bp/main.css>
 // *
 
 /// A Bootstrap 4 mixin to display `.sr-only` content when focused. Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
@@ -69,7 +69,7 @@
 	}
 }
 
-// * REUSE-Snippet-End
+// * SPDX-SnippetEnd
 
 /// A Bootstrap 4 mixin for generating `width` and `height` properties.
 /// @deprecated

package/src/scss/variables/_alerts.scss

@@ -182,6 +182,8 @@ $alert-indicator: () !default;
 $alert-indicator: map-deep-merge(
 	(
 		font-size: $alert-indicator-font-size,
+		line-height: 1,
+		vertical-align: 8%,
 		lead: (
 			margin-left: $alert-lead-spacer-x,
 		),
@@ -397,6 +399,7 @@ $alert-notification-sm-down: map-merge(
 $alert-autofit-row: () !default;
 $alert-autofit-row: map-deep-merge(
 	(
+		align-items: baseline,
 		margin-left: -0.5rem,
 		margin-right: -0.5rem,
 		width: auto,

package/src/scss/variables/_forms.scss

@@ -413,6 +413,7 @@ $form-control-inset: map-deep-merge(
 		color: $input-color,
 		flex-grow: 1,
 		margin-bottom: $form-control-inset-margin-y,
+		margin-left: 0.25rem,
 		margin-top: $form-control-inset-margin-y,
 		min-height: $form-control-inset-min-height,
 		padding: 0,
@@ -440,6 +441,7 @@ $form-control-tag-group: map-deep-merge(
 		flex-wrap: wrap,
 		height: auto,
 		padding-bottom: $form-control-tag-group-padding-y,
+		padding-left: 0.5rem,
 		padding-right: 0.5rem,
 		padding-top: $form-control-tag-group-padding-y,
 	),
@@ -550,6 +552,7 @@ $form-control-tag-group-sm: map-deep-merge(
 		),
 		form-control-inset: (
 			margin-bottom: 0.125rem,
+			margin-left: 0.25rem,
 			margin-top: 0.1875rem,
 		),
 	),

package/src/scss/variables/_globals.scss

@@ -35,7 +35,7 @@ $enable-grid-classes: true !default;
 $enable-pointer-cursor-for-buttons: true !default;
 $enable-print-styles: true !default;
 $enable-responsive-font-sizes: false !default;
-$enable-validation-icons: true !default;
+$enable-validation-icons: false !default;
 $enable-deprecation-messages: true !default;
 
 // Deprecated, no longer affects any compiled CSS
@@ -290,6 +290,30 @@ $grid-row-columns: 6 !default;
 
 // Containers
 
+$clay-container: () !default;
+$clay-container: map-merge(
+	(
+		margin-left: auto,
+		margin-right: auto,
+		padding-left: calc(#{$grid-gutter-width} * 0.5),
+		padding-right: calc(#{$grid-gutter-width} * 0.5),
+		width: 100%,
+	),
+	$clay-container
+);
+
+$clay-container-fluid: () !default;
+$clay-container-fluid: map-merge(
+	(
+		margin-left: auto,
+		margin-right: auto,
+		padding-left: calc(#{$grid-gutter-width} * 0.5),
+		padding-right: calc(#{$grid-gutter-width} * 0.5),
+		width: 100%,
+	),
+	$clay-container-fluid
+);
+
 $container-max-widths: (
 	sm: 540px,
 	md: 720px,

package/src/scss/variables/_treeview.scss

@@ -198,6 +198,12 @@ $treeview-light: map-deep-merge(
 		),
 		treeview-link: (
 			color: $gray-600,
+			treeview-no-hover: (
+				hover: (
+					background-color: transparent,
+					color: $secondary,
+				),
+			),
 			hover: (
 				background-color: $gray-100,
 				color: $gray-900,
@@ -238,6 +244,12 @@ $treeview-dark: map-deep-merge(
 		),
 		treeview-link: (
 			color: $secondary-l1,
+			treeview-no-hover: (
+				hover: (
+					background-color: transparent,
+					color: $secondary-l1,
+				),
+			),
 			hover: (
 				background-color: rgba($white, 0.04),
 			),

package/src/scss/variables/_utilities.scss

@@ -1,6 +1,28 @@
 $bg-checkered-fg: $gray-200 !default;
+
+// .inline-scroller
+
 $inline-scroller-max-height: 125px !default;
 
+$inline-scroller: () !default;
+$inline-scroller: map-deep-merge(
+	(
+		-webkit-overflow-scrolling: touch,
+		list-style: none,
+		margin: 0,
+		max-height: $inline-scroller-max-height,
+		overflow: auto,
+		padding: 0,
+		focus: (
+			outline: 0,
+		),
+		focus-visible: (
+			box-shadow: $component-focus-box-shadow,
+		)
+	),
+	$inline-scroller
+);
+
 // Autofit Row
 
 $autofit-col-expand-min-width: 3.125rem !default; // 50px