@clayui/css 3.35.3 → 3.36.0

package/src/scss/cadmin/components/_buttons.scss

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

package/src/scss/cadmin/components/_forms.scss

@@ -23,129 +23,61 @@ fieldset {
 }
 
 label {
-	color: $cadmin-input-label-color;
-	font-size: $cadmin-input-label-font-size;
-	font-weight: $cadmin-input-label-font-weight;
-	margin-bottom: $cadmin-input-label-margin-bottom;
-	max-width: 100%;
-	word-wrap: break-word;
+	@include clay-css($cadmin-input-label);
 
 	@include clay-scale-component {
-		font-size: $cadmin-input-label-font-size-mobile;
+		$mobile: setter(map-get($cadmin-input-label, mobile), ());
+
+		@include clay-css($mobile);
 	}
 
 	&.focus {
-		color: $cadmin-input-label-focus-color;
+		$focus: setter(map-get($cadmin-input-label, focus), ());
+
+		@include clay-css($focus);
 	}
 
 	&[for] {
-		cursor: $cadmin-input-label-for-cursor;
+		$for: setter(map-get($cadmin-input-label, for), ());
+
+		@include clay-css($for);
 	}
 
 	+ .form-text {
-		margin-bottom: $cadmin-input-label-margin-bottom;
-		margin-top: 0;
+		$form-text: setter(map-get($cadmin-input-label, form-text), ());
+
+		@include clay-css($form-text);
 	}
 
 	.reference-mark {
-		color: $cadmin-input-label-reference-mark-color;
-		font-size: $cadmin-input-label-reference-mark-font-size;
-		margin-left: $cadmin-input-label-reference-mark-spacer;
-		margin-right: $cadmin-input-label-reference-mark-spacer;
-		vertical-align: $cadmin-input-label-reference-mark-vertical-align;
+		$reference-mark: setter(
+			map-get($cadmin-input-label, reference-mark),
+			()
+		);
+
+		@include clay-css($reference-mark);
 	}
 }
 
 // Label without for attribute
 
 .form-control-label {
-	display: inline;
-	margin-bottom: 0;
+	@include clay-css($cadmin-form-control-label);
 }
 
 .form-control-label-text {
-	cursor: $cadmin-input-label-for-cursor;
-	display: inline-block;
-	margin-bottom: $cadmin-input-label-margin-bottom;
-	max-width: 100%;
-	word-wrap: break-word;
+	@include clay-css($cadmin-form-control-label-text);
 }
 
 // Inputs
 
 .form-control {
-	background-color: $cadmin-input-bg;
-	border-color: $cadmin-input-border-color;
-	border-style: $cadmin-input-border-style;
-
-	border-bottom-width: $cadmin-input-border-bottom-width;
-	border-left-width: $cadmin-input-border-left-width;
-	border-right-width: $cadmin-input-border-right-width;
-	border-top-width: $cadmin-input-border-top-width;
-
-	@include border-radius($cadmin-input-border-radius, 0);
-	@include box-shadow($cadmin-input-box-shadow);
-
-	color: $cadmin-input-color;
-	display: block;
-	font-family: $cadmin-input-font-family;
-	font-size: $cadmin-input-font-size;
-	font-weight: $cadmin-input-font-weight;
-	height: $cadmin-input-height;
-	line-height: $cadmin-input-line-height;
-	min-width: 0;
-	padding-bottom: $cadmin-input-padding-y;
-	padding-left: $cadmin-input-padding-x;
-	padding-right: $cadmin-input-padding-x;
-	padding-top: $cadmin-input-padding-y;
-	width: 100%;
-
-	@include transition($cadmin-input-transition);
+	@include clay-form-control-variant($cadmin-input);
 
 	@include clay-scale-component {
-		font-size: $cadmin-input-font-size-mobile;
-		height: $cadmin-input-height-mobile;
-	}
-
-	// Placeholder
-
-	&::placeholder {
-		color: $cadmin-input-placeholder-color;
-
-		// Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
-
-		opacity: 1;
-	}
-
-	&:focus,
-	&.focus {
-		background-color: $cadmin-input-focus-bg;
-		border-color: $cadmin-input-focus-border-color;
-		box-shadow: $cadmin-input-focus-box-shadow;
-		color: $cadmin-input-focus-color;
-		outline: 0;
+		$mobile: setter(map-get($cadmin-input, mobile), ());
 
-		&::placeholder {
-			color: $cadmin-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: $cadmin-input-disabled-bg;
-		border-color: $cadmin-input-disabled-border-color;
-		color: $cadmin-input-disabled-color;
-		cursor: $cadmin-input-disabled-cursor;
-
-		// `opacity: 1;` iOS fix for unreadable disabled content;
-		// see https://github.com/twbs/bootstrap/issues/11655.
-
-		opacity: $cadmin-input-disabled-opacity;
+		@include clay-css($mobile);
 	}
 
 	// Removes inner shadow on inputs in iOS. Bootstrap 4 uses

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

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