@clayui/css 3.65.2 → 3.70.1

package/src/scss/cadmin/components/_dropdowns.scss

@@ -248,18 +248,22 @@
 	.dropdown-subheader,
 	.dropdown-caption,
 	.dropdown-item {
-		padding-left: $cadmin-dropdown-item-padding-x +
-			$cadmin-dropdown-item-indicator-size +
-			$cadmin-dropdown-item-indicator-spacer-x;
+		padding-left: calc(
+			#{$cadmin-dropdown-item-padding-x} + #{$cadmin-dropdown-item-indicator-size} +
+				#{$cadmin-dropdown-item-indicator-spacer-x}
+		);
 	}
 
 	@if ($cadmin-enable-c-inner) {
 		.dropdown-item {
 			.c-inner {
-				margin-left: math-sign(
-					$cadmin-dropdown-item-padding-x +
-						$cadmin-dropdown-item-indicator-size +
-						$cadmin-dropdown-item-indicator-spacer-x
+				margin-left: calc(
+					(
+							#{$cadmin-dropdown-item-padding-x} +
+								#{$cadmin-dropdown-item-indicator-size} +
+								#{$cadmin-dropdown-item-indicator-spacer-x}
+						) *
+						-1
 				);
 			}
 		}
@@ -291,16 +295,20 @@
 	}
 
 	.dropdown-item {
-		padding-right: $cadmin-dropdown-item-padding-x +
-			$cadmin-dropdown-item-indicator-size +
-			$cadmin-dropdown-item-indicator-spacer-x;
+		padding-right: calc(
+			#{$cadmin-dropdown-item-padding-x} + #{$cadmin-dropdown-item-indicator-size} +
+				#{$cadmin-dropdown-item-indicator-spacer-x}
+		);
 
 		@if ($cadmin-enable-c-inner) {
 			.c-inner {
-				margin-right: math-sign(
-					$cadmin-dropdown-item-padding-x +
-						$cadmin-dropdown-item-indicator-size +
-						$cadmin-dropdown-item-indicator-spacer-x
+				margin-right: calc(
+					(
+							#{$cadmin-dropdown-item-padding-x} +
+								#{$cadmin-dropdown-item-indicator-size} +
+								#{$cadmin-dropdown-item-indicator-spacer-x}
+						) *
+						-1
 				);
 			}
 		}

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

@@ -94,6 +94,9 @@ $cadmin-btn: map-deep-merge(
 		),
 		inline-item: (
 			font-size: $cadmin-btn-inline-item-font-size,
+			lexicon-icon: (
+				margin-top: 0,
+			),
 		),
 		btn-section: (
 			display: block,
@@ -228,6 +231,9 @@ $cadmin-btn-monospaced: map-deep-merge(
 			height: $cadmin-btn-monospaced-size-mobile,
 			width: $cadmin-btn-monospaced-size-mobile,
 		),
+		lexicon-icon: (
+			margin-top: 0,
+		),
 		c-inner: (
 			align-items: center,
 			display: flex,

package/src/scss/cadmin/variables/_dropdowns.scss

@@ -73,8 +73,8 @@ $cadmin-dropdown-menu: map-deep-merge(
 
 // .dropdown-item
 
-$cadmin-dropdown-item-padding-x: 20px !default; // 20px
-$cadmin-dropdown-item-padding-y: 8px !default; // 8px
+$cadmin-dropdown-item-padding-x: 16px !default;
+$cadmin-dropdown-item-padding-y: 8px !default;
 
 $cadmin-dropdown-item-disabled-cursor: $cadmin-disabled-cursor !default;
 
@@ -163,20 +163,20 @@ $cadmin-dropdown-item-base: map-deep-merge(
 			line-height: $cadmin-dropdown-font-size * $cadmin-line-height-base,
 		),
 		'&.autofit-row': (
-			padding-left: 1rem,
-			padding-right: 1rem,
+			padding-left: calc(#{$cadmin-dropdown-item-padding-x} - 4px),
+			padding-right: calc(#{$cadmin-dropdown-item-padding-x} - 4px),
 			autofit-col: (
-				padding-left: 0.25rem,
-				padding-right: 0.25rem,
+				padding-left: 4px,
+				padding-right: 4px,
 			),
 		),
 		autofit-row: (
-			margin-left: 0.25rem,
-			margin-right: 0.25rem,
+			margin-left: -4px,
+			margin-right: -4px,
 			width: auto,
 			autofit-col: (
-				padding-left: 0.25rem,
-				padding-right: 0.25rem,
+				padding-left: 4px,
+				padding-right: 4px,
 			),
 		),
 	),

package/src/scss/cadmin/variables/_forms.scss

@@ -118,12 +118,15 @@ $cadmin-input-plaintext-color: $cadmin-body-color !default;
 
 // Deprecated
 
-$cadmin-input-height-border: $cadmin-input-border-bottom-width +
-	$cadmin-input-border-top-width !default;
+$cadmin-input-height-border: calc(
+	#{$cadmin-input-border-bottom-width} + #{$cadmin-input-border-top-width}
+) !default;
 
 // Deprecated
 
-$cadmin-input-height-inner: $cadmin-input-height - $cadmin-input-height-border !default;
+$cadmin-input-height-inner: calc(
+	#{$cadmin-input-height} - #{$cadmin-input-border-bottom-width} - #{$cadmin-input-border-top-width}
+) !default;
 
 // Deprecated
 
@@ -194,6 +197,7 @@ $cadmin-input-label: map-deep-merge(
 		font-weight: $cadmin-input-label-font-weight,
 		margin-bottom: $cadmin-input-label-margin-bottom,
 		max-width: 100%,
+		position: static,
 		word-wrap: break-word,
 		mobile: (
 			font-size: $cadmin-input-label-font-size-mobile,

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

@@ -73,11 +73,11 @@ $cadmin-menubar-vertical-transparent-md: map-deep-merge(
 			box-shadow 0.15s ease-in-out},
 			color: $cadmin-gray-600,
 			hover: (
-				background-color: rgba($cadmin-gray-900, 0.03),
+				background-color: rgba($cadmin-primary, 0.04),
 				color: $cadmin-gray-900,
 			),
 			focus: (
-				background-color: rgba($cadmin-gray-900, 0.03),
+				background-color: rgba($cadmin-primary, 0.04),
 				box-shadow:
 					clay-enable-shadows(
 						$cadmin-component-focus-inset-box-shadow
@@ -89,8 +89,8 @@ $cadmin-menubar-vertical-transparent-md: map-deep-merge(
 				color: rgba($cadmin-black, 0.9),
 			),
 			active-class: (
-				background-color: $cadmin-primary-l3,
-				color: $cadmin-primary,
+				background-color: rgba($cadmin-primary, 0.06),
+				color: $cadmin-gray-900,
 				font-weight: $cadmin-font-weight-semi-bold,
 			),
 			disabled: (
@@ -98,7 +98,7 @@ $cadmin-menubar-vertical-transparent-md: map-deep-merge(
 				color: rgba($cadmin-black, 0.3),
 			),
 			show: (
-				background-color: $cadmin-c-unset,
+				background-color: c-unset,
 				color: $cadmin-gray-900,
 				font-weight: $cadmin-font-weight-semi-bold,
 			),
@@ -107,16 +107,15 @@ $cadmin-menubar-vertical-transparent-md: map-deep-merge(
 			border-radius: clay-enable-rounded(0),
 			color: $cadmin-gray-900,
 			hover: (
-				background-color: $cadmin-gray-100,
-				color: clay-darken($cadmin-gray-900, 5%),
+				background-color: rgba($cadmin-primary, 0.04),
+				color: $cadmin-gray-900,
 			),
 			focus: (
-				background-color:
-					clay-lighten($cadmin-component-active-bg, 44.9),
+				background-color: rgba($cadmin-primary, 0.04),
 			),
 			active-class: (
-				background-color: $cadmin-primary-l3,
-				color: $cadmin-primary,
+				background-color: rgba($cadmin-primary, 0.06),
+				color: $cadmin-gray-900,
 				font-weight: $cadmin-font-weight-semi-bold,
 			),
 			disabled: (
@@ -124,9 +123,9 @@ $cadmin-menubar-vertical-transparent-md: map-deep-merge(
 				color: $cadmin-gray-600,
 			),
 			show: (
-				background-color: $cadmin-c-unset,
-				color: $cadmin-c-unset,
-				font-weight: $cadmin-c-unset,
+				background-color: c-unset,
+				color: c-unset,
+				font-weight: c-unset,
 			),
 		),
 		collapse-mobile: (
@@ -286,11 +285,11 @@ $cadmin-menubar-vertical-transparent-lg: map-deep-merge(
 			box-shadow 0.15s ease-in-out},
 			color: $cadmin-gray-600,
 			hover: (
-				background-color: rgba($cadmin-gray-900, 0.03),
+				background-color: rgba($cadmin-primary, 0.04),
 				color: $cadmin-gray-900,
 			),
 			focus: (
-				background-color: rgba($cadmin-gray-900, 0.03),
+				background-color: rgba($cadmin-primary, 0.04),
 				box-shadow:
 					clay-enable-shadows(
 						$cadmin-component-focus-inset-box-shadow
@@ -302,8 +301,8 @@ $cadmin-menubar-vertical-transparent-lg: map-deep-merge(
 				color: rgba($cadmin-black, 0.9),
 			),
 			active-class: (
-				background-color: $cadmin-primary-l3,
-				color: $cadmin-primary,
+				background-color: rgba($cadmin-primary, 0.06),
+				color: $cadmin-gray-900,
 				font-weight: $cadmin-font-weight-semi-bold,
 			),
 			disabled: (
@@ -311,7 +310,7 @@ $cadmin-menubar-vertical-transparent-lg: map-deep-merge(
 				color: rgba($cadmin-black, 0.3),
 			),
 			show: (
-				background-color: $cadmin-c-unset,
+				background-color: c-unset,
 				color: $cadmin-gray-900,
 				font-weight: $cadmin-font-weight-semi-bold,
 			),
@@ -320,16 +319,15 @@ $cadmin-menubar-vertical-transparent-lg: map-deep-merge(
 			border-radius: clay-enable-rounded(0),
 			color: $cadmin-gray-900,
 			hover: (
-				background-color: $cadmin-gray-100,
-				color: clay-darken($cadmin-gray-900, 5%),
+				background-color: rgba($cadmin-primary, 0.04),
+				color: $cadmin-gray-900,
 			),
 			focus: (
-				background-color:
-					clay-lighten($cadmin-component-active-bg, 44.9),
+				background-color: rgba($cadmin-primary, 0.04),
 			),
 			active-class: (
-				background-color: $cadmin-primary-l3,
-				color: $cadmin-primary,
+				background-color: rgba($cadmin-primary, 0.06),
+				color: $cadmin-gray-900,
 				font-weight: $cadmin-font-weight-semi-bold,
 			),
 			disabled: (
@@ -337,9 +335,9 @@ $cadmin-menubar-vertical-transparent-lg: map-deep-merge(
 				color: $cadmin-gray-600,
 			),
 			show: (
-				background-color: $cadmin-c-unset,
-				color: $cadmin-c-unset,
-				font-weight: $cadmin-c-unset,
+				background-color: c-unset,
+				color: c-unset,
+				font-weight: c-unset,
 			),
 		),
 		collapse-mobile: (

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

@@ -19,8 +19,9 @@ $cadmin-modal-content-border-color: transparent !default;
 $cadmin-modal-content-border-width: $cadmin-border-width !default;
 
 $cadmin-modal-content-border-radius: $cadmin-border-radius-lg !default;
-$cadmin-modal-content-inner-border-radius: $cadmin-modal-content-border-radius -
-	$cadmin-modal-content-border-width !default;
+$cadmin-modal-content-inner-border-radius: calc(
+	#{$cadmin-modal-content-border-radius} - #{$cadmin-modal-content-border-width}
+) !default;
 
 $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;

package/src/scss/cadmin/variables/_popovers.scss

@@ -3,8 +3,9 @@ $cadmin-popover-border-color: transparent !default;
 $cadmin-popover-border-width: $cadmin-border-width !default;
 
 $cadmin-popover-border-radius: $cadmin-border-radius !default; // 4px
-$cadmin-popover-inner-border-radius: $cadmin-popover-border-radius -
-	$cadmin-popover-border-width !default;
+$cadmin-popover-inner-border-radius: calc(
+	#{$cadmin-popover-border-radius} - #{$cadmin-popover-border-width}
+) !default;
 
 $cadmin-popover-box-shadow: 0 1px 15px -2px rgba(0, 0, 0, 0.2) !default;
 $cadmin-popover-font-size: $cadmin-font-size-sm !default;

package/src/scss/components/_buttons.scss

@@ -119,7 +119,11 @@ input[type='button'] {
 			starts-with($color, '#') or
 			starts-with($color, '%'),
 		$color,
-		str-insert($color, '.btn-', 1)
+		if(
+			starts-with($color, 'btn'),
+			str-insert($color, '.', 1),
+			str-insert($color, '.btn-', 1)
+		)
 	);
 
 	@if (starts-with($color, '%') or map-get($value, extend)) {
@@ -127,17 +131,9 @@ input[type='button'] {
 			@include clay-button-variant($value);
 		}
 	} @else {
-		$placeholder: if(
-			starts-with($color, '.') or starts-with($color, '#'),
-			'%#{str-slice($color, 2)}',
-			'%btn-#{$color}'
-		);
+		$placeholder: '%#{str-slice($selector, 2)}';
 
-		$placeholder-focus: if(
-			starts-with($color, '.') or starts-with($color, '#'),
-			'%#{str-slice($color, 2)}-focus',
-			'%btn-#{$color}-focus'
-		);
+		$placeholder-focus: '%#{str-slice($selector, 2)}-focus';
 
 		#{$placeholder} {
 			@include clay-button-variant($value);
@@ -161,7 +157,11 @@ input[type='button'] {
 			starts-with($color, '#') or
 			starts-with($color, '%'),
 		$color,
-		str-insert($color, '.btn-outline-', 1)
+		if(
+			starts-with($color, 'btn'),
+			str-insert($color, '.', 1),
+			str-insert($color, '.btn-outline-', 1)
+		)
 	);
 
 	@if (starts-with($color, '%') or map-get($value, extend)) {
@@ -169,17 +169,9 @@ input[type='button'] {
 			@include clay-button-variant($value);
 		}
 	} @else {
-		$placeholder: if(
-			starts-with($color, '.') or starts-with($color, '#'),
-			'%#{str-slice($color, 2)}',
-			'%btn-outline-#{$color}'
-		);
+		$placeholder: '%#{str-slice($selector, 2)}';
 
-		$placeholder-focus: if(
-			starts-with($color, '.') or starts-with($color, '#'),
-			'%#{str-slice($color, 2)}-focus',
-			'%btn-outline-#{$color}-focus'
-		);
+		$placeholder-focus: '%#{str-slice($selector, 2)}-focus';
 
 		#{$placeholder} {
 			@include clay-button-variant($value);

package/src/scss/components/_dropdowns.scss

@@ -238,17 +238,21 @@
 	.dropdown-subheader,
 	.dropdown-caption,
 	.dropdown-item {
-		padding-left: $dropdown-item-padding-x + $dropdown-item-indicator-size +
-			$dropdown-item-indicator-spacer-x;
+		padding-left: calc(
+			#{$dropdown-item-padding-x} + #{$dropdown-item-indicator-size} + #{$dropdown-item-indicator-spacer-x}
+		);
 	}
 
 	@if ($enable-c-inner) {
 		.dropdown-item {
 			.c-inner {
-				margin-left: math-sign(
-					$dropdown-item-padding-x +
-						$dropdown-item-indicator-size +
-						$dropdown-item-indicator-spacer-x
+				margin-left: calc(
+					(
+							#{$dropdown-item-padding-x} +
+								#{$dropdown-item-indicator-size} +
+								#{$dropdown-item-indicator-spacer-x}
+						) *
+						-1
 				);
 			}
 		}
@@ -279,15 +283,19 @@
 	}
 
 	.dropdown-item {
-		padding-right: $dropdown-item-padding-x + $dropdown-item-indicator-size +
-			$dropdown-item-indicator-spacer-x;
+		padding-right: calc(
+			#{$dropdown-item-padding-x} + #{$dropdown-item-indicator-size} + #{$dropdown-item-indicator-spacer-x}
+		);
 
 		@if ($enable-c-inner) {
 			.c-inner {
-				margin-right: math-sign(
-					$dropdown-item-padding-x +
-						$dropdown-item-indicator-size +
-						$dropdown-item-indicator-spacer-x
+				margin-right: calc(
+					(
+							#{$dropdown-item-padding-x} +
+								#{$dropdown-item-indicator-size} +
+								#{$dropdown-item-indicator-spacer-x}
+						) *
+						-1
 				);
 			}
 		}

package/src/scss/mixins/_buttons.scss

@@ -656,6 +656,22 @@
 					@include clay-css(map-deep-get($map, focus, after));
 				}
 
+				&:hover {
+					@include clay-css(map-deep-get($map, focus, hover));
+
+					&::before {
+						@include clay-css(
+							map-deep-get($map, focus, hover, before)
+						);
+					}
+
+					&::after {
+						@include clay-css(
+							map-deep-get($map, focus, hover, after)
+						);
+					}
+				}
+
 				.inline-item {
 					@include clay-css(map-get($focus, inline-item));
 				}

package/src/scss/mixins/_globals.scss

@@ -241,7 +241,7 @@
 
 		@if ($enabled) {
 			@each $key, $value in $map {
-				@if ($value == clay-unset) {
+				@if ($value == clay-unset or $value == c-unset) {
 					$value: null;
 				}
 

package/src/scss/mixins/_utilities.scss

@@ -30,7 +30,7 @@
 }
 
 // * SPDX-SnippetBegin
-// * SPDX-License-Identifier: APLv2
+// * SPDX-License-Identifier: Apache-2.0
 // * SPDX-SnippetCopyrightText: © 2018 A11Y Project <https://a11yproject.com/posts/how-to-hide-content/>
 // *
 

package/src/scss/variables/_dropdowns.scss

@@ -217,16 +217,16 @@ $dropdown-item-base: map-deep-merge(
 			line-height: calc(#{$dropdown-font-size} * #{$line-height-base}),
 		),
 		'&.autofit-row': (
-			padding-left: 1rem,
-			padding-right: 1rem,
+			padding-left: calc(#{$dropdown-item-padding-x} - 0.25rem),
+			padding-right: calc(#{$dropdown-item-padding-x} - 0.25rem),
 			autofit-col: (
 				padding-left: 0.25rem,
 				padding-right: 0.25rem,
 			),
 		),
 		autofit-row: (
-			margin-left: 0.25rem,
-			margin-right: 0.25rem,
+			margin-left: -0.25rem,
+			margin-right: -0.25rem,
 			width: auto,
 			autofit-col: (
 				padding-left: 0.25rem,

package/src/scss/variables/_forms.scss

@@ -116,7 +116,9 @@ $input-plaintext-color: $body-color !default;
 
 /// @deprecated with no replacement
 
-$input-height-border: $input-border-top-width + $input-border-bottom-width !default;
+$input-height-border: calc(
+	#{$input-border-top-width} + #{$input-border-bottom-width}
+) !default;
 
 /// @deprecated with no replacement
 

package/src/scss/variables/_menubar.scss

@@ -74,7 +74,7 @@ $menubar-vertical-transparent-md: map-deep-merge(
 				color: rgba($black, 0.9),
 			),
 			show: (
-				color: $c-unset,
+				color: c-unset,
 			),
 			disabled: (
 				color: rgba($black, 0.3),
@@ -99,9 +99,9 @@ $menubar-vertical-transparent-md: map-deep-merge(
 				color: $gray-600,
 			),
 			show: (
-				background-color: $c-unset,
-				color: $c-unset,
-				font-weight: $c-unset,
+				background-color: c-unset,
+				color: c-unset,
+				font-weight: c-unset,
 			),
 		),
 		collapse-mobile: (
@@ -241,7 +241,7 @@ $menubar-vertical-transparent-lg: map-deep-merge(
 				color: rgba($black, 0.9),
 			),
 			show: (
-				color: $c-unset,
+				color: c-unset,
 			),
 			disabled: (
 				color: rgba($black, 0.3),
@@ -266,9 +266,9 @@ $menubar-vertical-transparent-lg: map-deep-merge(
 				color: $gray-600,
 			),
 			show: (
-				background-color: $c-unset,
-				color: $c-unset,
-				font-weight: $c-unset,
+				background-color: c-unset,
+				color: c-unset,
+				font-weight: c-unset,
 			),
 		),
 		collapse-mobile: (

package/src/scss/variables/_modals.scss

@@ -19,8 +19,9 @@ $modal-content-border-color: rgba($black, 0.2) !default;
 $modal-content-border-width: $border-width !default;
 
 $modal-content-border-radius: $border-radius-lg !default;
-$modal-content-inner-border-radius: $modal-content-border-radius -
-	$modal-content-border-width !default;
+$modal-content-inner-border-radius: calc(
+	#{$modal-content-border-radius} - #{$modal-content-border-width}
+) !default;
 
 $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;

package/src/scss/variables/_popovers.scss

@@ -3,7 +3,9 @@ $popover-border-color: rgba($black, 0.2) !default;
 $popover-border-width: $border-width !default;
 
 $popover-border-radius: $border-radius-lg !default;
-$popover-inner-border-radius: $popover-border-radius - $popover-border-width !default;
+$popover-inner-border-radius: calc(
+	#{$popover-border-radius} - #{$popover-border-width}
+) !default;
 
 $popover-box-shadow: 0 0.25rem 0.5rem rgba($black, 0.2) !default;
 $popover-font-size: $font-size-sm !default;