@clayui/css 3.35.3 → 3.36.0

package/src/scss/components/_buttons.scss

@@ -1,123 +1,25 @@
 .btn {
-	background-color: transparent;
-	border: $btn-border-width solid transparent;
-
-	@include border-radius($btn-border-radius, 0);
-	@include box-shadow($btn-box-shadow);
-
-	color: $body-color;
-	cursor: $btn-cursor;
-	display: inline-block;
-	font-family: $btn-font-family;
-	font-size: $btn-font-size;
-	font-weight: $btn-font-weight;
-	line-height: $btn-line-height;
-	padding: $btn-padding-y $btn-padding-x;
-	text-align: center;
-	text-transform: none;
-
-	@include transition($btn-transition);
-
-	user-select: none;
-	vertical-align: middle;
-	white-space: $btn-white-space;
-
-	@include clay-scale-component {
-		font-size: $btn-font-size-mobile;
-		padding-bottom: $btn-padding-y-mobile;
-		padding-left: $btn-padding-x-mobile;
-		padding-right: $btn-padding-x-mobile;
-		padding-top: $btn-padding-y-mobile;
-	}
-
-	&:hover {
-		color: $body-color;
-		text-decoration: none;
-	}
-
-	&:focus,
-	&.focus {
-		box-shadow: $btn-focus-box-shadow;
-		outline: 0;
-	}
-
-	&:active,
-	&.active {
-		@include box-shadow($btn-active-box-shadow);
-
-		&:focus {
-			@if ($enable-shadows and $btn-active-box-shadow != none) {
-				box-shadow: $btn-focus-box-shadow, $btn-active-box-shadow;
-			} @else {
-				box-shadow: $btn-focus-box-shadow;
-			}
-		}
-	}
+	@include clay-button-variant($btn);
+}
 
-	&.disabled,
-	&:disabled {
-		cursor: $btn-disabled-cursor;
-		opacity: $btn-disabled-opacity;
+fieldset:disabled a.btn {
+	$btn-disabled: setter(map-get($btn, disabled), ());
 
-		&:focus,
-		&:focus:active {
-			box-shadow: none;
-		}
+	@include clay-css($btn-disabled);
 
-		&:active {
-			pointer-events: none;
-		}
+	&:focus {
+		@include clay-css(setter(map-get($btn-disabled, focus), ()));
 	}
-}
-
-fieldset:disabled a.btn {
-	box-shadow: none;
-	cursor: $btn-disabled-cursor;
-	opacity: $btn-disabled-opacity;
 
 	&:active {
-		pointer-events: none;
+		@include clay-css(setter(map-get($btn-disabled, active), ()));
 	}
 }
 
-.btn .inline-item {
-	font-size: $btn-inline-item-font-size;
-}
-
-.btn-section {
-	display: block;
-	font-size: $btn-section-font-size;
-	font-weight: $btn-section-font-weight;
-	line-height: $btn-section-line-height;
-}
-
 // Button Sizes
 
 %clay-btn-lg {
-	@include border-radius($btn-border-radius-lg, 0);
-
-	font-size: $btn-font-size-lg;
-	line-height: $btn-line-height-lg;
-	padding-bottom: $btn-padding-y-lg;
-	padding-left: $btn-padding-x-lg;
-	padding-right: $btn-padding-x-lg;
-	padding-top: $btn-padding-y-lg;
-
-	@include clay-scale-component {
-		font-size: $btn-font-size-lg-mobile;
-		padding-bottom: $btn-padding-y-lg-mobile;
-		padding-left: $btn-padding-x-lg-mobile;
-		padding-right: $btn-padding-x-lg-mobile;
-		padding-top: $btn-padding-y-lg-mobile;
-	}
-
-	.inline-item {
-		font-size: $btn-inline-item-font-size-lg;
-	}
-
-	.btn-section {
-		font-size: $btn-section-font-size-lg;
-	}
+	@include clay-button-variant($btn-lg);
 }
 
 .btn-lg {
@@ -125,30 +27,7 @@ fieldset:disabled a.btn {
 }
 
 %clay-btn-sm {
-	@include border-radius($btn-border-radius-sm, 0);
-
-	font-size: $btn-font-size-sm;
-	line-height: $btn-line-height-sm;
-	padding-bottom: $btn-padding-y-sm;
-	padding-left: $btn-padding-x-sm;
-	padding-right: $btn-padding-x-sm;
-	padding-top: $btn-padding-y-sm;
-
-	@include clay-scale-component {
-		font-size: $btn-font-size-sm-mobile;
-		padding-bottom: $btn-padding-y-sm-mobile;
-		padding-left: $btn-padding-x-sm-mobile;
-		padding-right: $btn-padding-x-sm-mobile;
-		padding-top: $btn-padding-y-sm-mobile;
-	}
-
-	.inline-item {
-		font-size: $btn-inline-item-font-size-sm;
-	}
-
-	.btn-section {
-		font-size: $btn-section-font-size-sm;
-	}
+	@include clay-button-variant($btn-sm);
 }
 
 .btn-sm {
@@ -179,17 +58,7 @@ input[type='button'] {
 // Button Unstyled
 
 %btn-unstyled {
-	background-color: rgba(0, 0, 0, 0.001);
-	border-width: 0;
-	cursor: $btn-cursor;
-	font-size: inherit;
-	font-weight: inherit;
-	line-height: inherit;
-	max-width: 100%;
-	padding: 0;
-	text-align: left;
-	text-transform: inherit;
-	vertical-align: baseline;
+	@include clay-button-variant($btn-unstyled);
 }
 
 .btn-unstyled {
@@ -199,22 +68,7 @@ input[type='button'] {
 // Button Monospaced
 
 .btn-monospaced {
-	height: $btn-monospaced-size;
-	line-height: 1;
-	overflow: hidden;
-	padding-bottom: $btn-monospaced-padding-y;
-	padding-left: $btn-monospaced-padding-x;
-	padding-right: $btn-monospaced-padding-x;
-	padding-top: $btn-monospaced-padding-y;
-	text-align: center;
-	white-space: normal;
-	width: $btn-monospaced-size;
-	word-wrap: break-word;
-
-	@include clay-scale-component {
-		height: $btn-monospaced-size-mobile;
-		width: $btn-monospaced-size-mobile;
-	}
+	@include clay-button-variant($btn-monospaced);
 
 	&.btn .lexicon-icon {
 		margin-top: 0;
@@ -222,17 +76,7 @@ input[type='button'] {
 }
 
 %clay-btn-monospaced-lg {
-	height: $btn-monospaced-size-lg;
-	padding-bottom: $btn-monospaced-padding-y-lg;
-	padding-left: $btn-monospaced-padding-x-lg;
-	padding-right: $btn-monospaced-padding-x-lg;
-	padding-top: $btn-monospaced-padding-y-lg;
-	width: $btn-monospaced-size-lg;
-
-	@include clay-scale-component {
-		height: $btn-monospaced-size-lg-mobile;
-		width: $btn-monospaced-size-lg-mobile;
-	}
+	@include clay-button-variant($btn-monospaced-lg);
 }
 
 .btn-monospaced.btn-lg {
@@ -240,96 +84,24 @@ input[type='button'] {
 }
 
 %clay-btn-monospaced-sm {
-	height: $btn-monospaced-size-sm;
-	padding-bottom: $btn-monospaced-padding-y-sm;
-	padding-left: $btn-monospaced-padding-x-sm;
-	padding-right: $btn-monospaced-padding-x-sm;
-	padding-top: $btn-monospaced-padding-y-sm;
-	width: $btn-monospaced-size-sm;
-
-	@include clay-scale-component {
-		height: $btn-monospaced-size-sm-mobile;
-		width: $btn-monospaced-size-sm-mobile;
-	}
+	@include clay-button-variant($btn-monospaced-sm);
 }
 
 .btn-monospaced.btn-sm {
 	@extend %clay-btn-monospaced-sm !optional;
 }
 
-// Button C Inner
-
-@if ($enable-c-inner) {
-	.btn .c-inner {
-		margin: #{math-sign($btn-padding-y)} #{math-sign($btn-padding-x)};
-
-		@include clay-scale-component {
-			margin: #{math-sign($btn-padding-y-mobile)} #{math-sign(
-					$btn-padding-x-mobile
-				)};
-		}
-	}
-
-	.btn-unstyled .c-inner {
-		margin: 0;
-		max-width: none;
-	}
-
-	.btn-monospaced .c-inner {
-		align-items: center;
-		display: flex;
-		flex-direction: column;
-		height: calc(100% + #{$btn-monospaced-padding-y * 2});
-		justify-content: center;
-		margin: #{math-sign($btn-monospaced-padding-y)} 0;
-		padding: 0;
-		width: 100%;
-	}
-
-	.btn-sm {
-		.c-inner {
-			margin: #{math-sign($btn-padding-y-sm)}
-				#{math-sign($btn-padding-x-sm)};
-
-			@include clay-scale-component {
-				margin: #{math-sign($btn-padding-y-sm-mobile)} #{math-sign(
-						$btn-padding-x-sm-mobile
-					)};
-			}
-		}
-
-		&.btn-monospaced .c-inner {
-			height: calc(100% + #{$btn-monospaced-padding-y-sm * 2});
-			margin: #{math-sign($btn-monospaced-padding-y-sm)} 0;
-		}
-	}
-
-	.btn-lg {
-		.c-inner {
-			margin: #{math-sign($btn-padding-y-lg)}
-				#{math-sign($btn-padding-x-lg)};
-
-			@include clay-scale-component {
-				margin: #{math-sign($btn-padding-y-lg-mobile)} #{math-sign(
-						$btn-padding-x-lg-mobile
-					)};
-			}
-		}
-
-		&.btn-monospaced .c-inner {
-			height: calc(100% + #{$btn-monospaced-padding-y-lg * 2});
-			margin: #{math-sign($btn-monospaced-padding-y-lg)} 0;
-		}
-	}
-}
-
 // Button Variants
 
 @each $color, $value in $btn-palette {
-	.btn-#{$color} {
+	%btn-#{$color} {
 		@include clay-button-variant($value);
 	}
 
+	.btn-#{$color} {
+		@extend %btn-#{$color} !optional;
+	}
+
 	%btn-#{$color}-focus {
 		background-color: map-get($value, focus-bg);
 		border-color: map-get($value, focus-border-color);
@@ -341,10 +113,14 @@ input[type='button'] {
 // Button Outline Variants
 
 @each $color, $value in $btn-outline-palette {
-	.btn-outline-#{$color} {
+	%btn-outline-#{$color} {
 		@include clay-button-variant($value);
 	}
 
+	.btn-outline-#{$color} {
+		@extend %btn-outline-#{$color} !optional;
+	}
+
 	%btn-outline-#{$color}-focus {
 		background-color: map-get($value, focus-bg);
 		border-color: map-get($value, focus-border-color);
@@ -354,17 +130,7 @@ input[type='button'] {
 }
 
 .btn-outline-borderless {
-	border-color: transparent;
-
-	&:hover,
-	&:focus {
-		border-color: transparent;
-	}
-
-	&:disabled,
-	&.disabled {
-		border-color: transparent;
-	}
+	@include clay-button-variant($btn-outline-borderless);
 }
 
 .btn-outline-borderless:not(:disabled):not(.disabled):active {

package/src/scss/components/_forms.scss

@@ -23,129 +23,58 @@ fieldset {
 }
 
 label {
-	color: $input-label-color;
-	font-size: $input-label-font-size;
-	font-weight: $input-label-font-weight;
-	margin-bottom: $input-label-margin-bottom;
-	max-width: 100%;
-	word-wrap: break-word;
+	@include clay-css($input-label);
 
 	@include clay-scale-component {
-		font-size: $input-label-font-size-mobile;
+		$mobile: setter(map-get($input-label, mobile), ());
+
+		@include clay-css($mobile);
 	}
 
 	&.focus {
-		color: $input-label-focus-color;
+		$focus: setter(map-get($input-label, focus), ());
+
+		@include clay-css($focus);
 	}
 
 	&[for] {
-		cursor: $input-label-for-cursor;
+		$for: setter(map-get($input-label, for), ());
+
+		@include clay-css($for);
 	}
 
 	+ .form-text {
-		margin-bottom: $input-label-margin-bottom;
-		margin-top: 0;
+		$form-text: setter(map-get($input-label, form-text), ());
+
+		@include clay-css($form-text);
 	}
 
 	.reference-mark {
-		color: $input-label-reference-mark-color;
-		font-size: $input-label-reference-mark-font-size;
-		margin-left: $input-label-reference-mark-spacer;
-		margin-right: $input-label-reference-mark-spacer;
-		vertical-align: $input-label-reference-mark-vertical-align;
+		$reference-mark: setter(map-get($input-label, reference-mark), ());
+
+		@include clay-css($reference-mark);
 	}
 }
 
 // Label without for attribute
 
 .form-control-label {
-	display: inline;
-	margin-bottom: 0;
+	@include clay-css($form-control-label);
 }
 
 .form-control-label-text {
-	cursor: $input-label-for-cursor;
-	display: inline-block;
-	margin-bottom: $input-label-margin-bottom;
-	max-width: 100%;
-	word-wrap: break-word;
+	@include clay-css($form-control-label-text);
 }
 
 // Inputs
 
 .form-control {
-	background-color: $input-bg;
-	border-color: $input-border-color;
-	border-style: $input-border-style;
-
-	border-bottom-width: $input-border-bottom-width;
-	border-left-width: $input-border-left-width;
-	border-right-width: $input-border-right-width;
-	border-top-width: $input-border-top-width;
-
-	@include border-radius($input-border-radius, 0);
-	@include box-shadow($input-box-shadow);
-
-	color: $input-color;
-	display: block;
-	font-family: $input-font-family;
-	font-size: $input-font-size;
-	font-weight: $input-font-weight;
-	height: $input-height;
-	line-height: $input-line-height;
-	min-width: 0;
-	padding-bottom: $input-padding-y;
-	padding-left: $input-padding-x;
-	padding-right: $input-padding-x;
-	padding-top: $input-padding-y;
-	width: 100%;
-
-	@include transition($input-transition);
+	@include clay-form-control-variant($input);
 
 	@include clay-scale-component {
-		font-size: $input-font-size-mobile;
-		height: $input-height-mobile;
-	}
-
-	// Placeholder
-
-	&::placeholder {
-		color: $input-placeholder-color;
-
-		// Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
-
-		opacity: 1;
-	}
-
-	&:focus,
-	&.focus {
-		background-color: $input-focus-bg;
-		border-color: $input-focus-border-color;
-		box-shadow: $input-focus-box-shadow;
-		color: $input-focus-color;
-		outline: 0;
+		$mobile: setter(map-get($input, mobile), ());
 
-		&::placeholder {
-			color: $input-placeholder-focus-color;
-		}
-	}
-
-	// Disabled
-	// HTML5 says that controls under a fieldset > legend:first-child won't be
-	// disabled if the fieldset is disabled. Due to implementation difficulty, we
-	// don't honor that edge case; we style them as disabled anyway.
-
-	&:disabled,
-	&.disabled {
-		background-color: $input-disabled-bg;
-		border-color: $input-disabled-border-color;
-		color: $input-disabled-color;
-		cursor: $input-disabled-cursor;
-
-		// `opacity: 1;` iOS fix for unreadable disabled content;
-		// see https://github.com/twbs/bootstrap/issues/11655.
-
-		opacity: $input-disabled-opacity;
+		@include clay-css($mobile);
 	}
 
 	// Removes inner shadow on inputs in iOS. Bootstrap 4 uses

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

@@ -166,6 +166,10 @@
 	}
 }
 
+.hide {
+	display: none !important;
+}
+
 // Display Print
 
 @media print {

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

@@ -246,8 +246,8 @@
 		true
 	);
 
-	@if ($enable-transitions) {
-		@return $transition;
+	@if ($enable) {
+		@return $transitions;
 	}
 
 	@return null;
@@ -634,6 +634,20 @@
 	@return max($val1, $val2);
 }
 
+/// A function that determines whether the string `$str1` begins with the characters of the specified string `$str2`. This returns `true` if `$str1` begins with `$str2`.
+/// @param {String} $str1 - The string to search.
+/// @param {String} $str2 - The search parameter.
+
+@function starts-with($str1, $str2) {
+	$returnVal: false;
+
+	@if (str-index($str1, $str2) == 1) {
+		$returnVal: true;
+	}
+
+	@return $returnVal;
+}
+
 // * REUSE-Snippet-Begin
 // * SPDX-License-Identifier: MIT
 // * SPDX-FileCopyrightText: © 2016 Hugo Giraudel <https://hugogiraudel.com/>

package/src/scss/mixins/_buttons.scss

@@ -233,6 +233,8 @@
 		)
 	);
 
+	$disabled-focus: setter(map-get($disabled, focus), ());
+
 	$nested-disabled-active: setter(map-get($disabled, active), ());
 	$disabled-active: setter(map-get($map, disabled-active), ());
 	$disabled-active: map-merge($nested-disabled-active, $disabled-active);
@@ -281,7 +283,9 @@
 		)
 	);
 
+	$btn-section: setter(map-get($map, btn-section), ());
 	$section: setter(map-get($map, section), ());
+	$section: map-merge($btn-section, $section);
 	$section: map-merge(
 		$section,
 		(
@@ -338,6 +342,26 @@
 		)
 	);
 
+	$mobile-c-inner: setter(map-get($mobile, c-inner), ());
+	$mobile-c-inner: map-merge(
+		(
+			enabled:
+				setter(
+					if(
+						variable-exists(enable-c-inner),
+						$enable-c-inner,
+						$cadmin-enable-c-inner
+					),
+					true
+				),
+			margin-bottom: math-sign(map-get($mobile, padding-bottom)),
+			margin-left: math-sign(map-get($mobile, padding-left)),
+			margin-right: math-sign(map-get($mobile, padding-right)),
+			margin-top: math-sign(map-get($mobile, padding-top)),
+		),
+		$mobile-c-inner
+	);
+
 	$unset: setter(
 		if(
 			variable-exists(clay-unset-placeholder),
@@ -372,16 +396,15 @@
 	@if ($enabled) {
 		@include clay-css($base);
 
-		@at-root {
-			a#{&},
-			button#{&} {
-				cursor: map-get($map, cursor);
-			}
-		}
-
 		@if ($breakpoint-down) {
 			@include media-breakpoint-down($breakpoint-down) {
 				@include clay-css($mobile);
+
+				@if (map-get($c-inner, enabled)) {
+					.c-inner {
+						@include clay-css($mobile-c-inner);
+					}
+				}
 			}
 		}
 
@@ -417,6 +440,10 @@
 		&.disabled {
 			@include clay-css($disabled);
 
+			&:focus {
+				@include clay-css($disabled-focus);
+			}
+
 			&:active {
 				@include clay-css($disabled-active);
 			}

package/src/scss/mixins/_forms.scss

@@ -334,7 +334,12 @@
 		)
 	);
 
-	$hover-placeholder: setter(map-get($map, hover-placeholder), ());
+	$old-hover-placeholder: setter(map-get($map, hover-placeholder), ());
+	$hover-placeholder: setter(map-get($hover, placeholder), ());
+	$hover-placeholder: map-deep-merge(
+		$hover-placeholder,
+		$old-hover-placeholder
+	);
 	$hover-placeholder: map-deep-merge(
 		$hover-placeholder,
 		(
@@ -374,7 +379,12 @@
 		)
 	);
 
-	$focus-placeholder: setter(map-get($map, focus-placeholder), ());
+	$old-focus-placeholder: setter(map-get($map, focus-placeholder), ());
+	$focus-placeholder: setter(map-get($focus, placeholder), ());
+	$focus-placeholder: map-deep-merge(
+		$focus-placeholder,
+		$old-focus-placeholder
+	);
 	$focus-placeholder: map-deep-merge(
 		$focus-placeholder,
 		(
@@ -436,7 +446,12 @@
 		)
 	);
 
-	$disabled-placeholder: setter(map-get($map, disabled-placeholder), ());
+	$old-disabled-placeholder: setter(map-get($map, disabled-placeholder), ());
+	$disabled-placeholder: setter(map-get($disabled, placeholder), ());
+	$disabled-placeholder: map-deep-merge(
+		$disabled-placeholder,
+		$old-disabled-placeholder
+	);
 	$disabled-placeholder: map-deep-merge(
 		$disabled-placeholder,
 		(
@@ -452,6 +467,8 @@
 		@include clay-css($base);
 
 		&::placeholder {
+			// opacity: 1, override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
+
 			@include clay-css($placeholder);
 		}
 
@@ -493,8 +510,16 @@
 			}
 		}
 
+		// Disabled
+		// HTML5 says that controls under a fieldset > legend:first-child won't be
+		// disabled if the fieldset is disabled. Due to implementation difficulty, we
+		// don't honor that edge case; we style them as disabled anyway.
+
 		&:disabled,
 		&.disabled {
+			// `opacity: 1;` iOS fix for unreadable disabled content;
+			// see https://github.com/twbs/bootstrap/issues/11655.
+
 			@include clay-css($disabled);
 
 			&::placeholder {