@clayui/css 3.35.3 → 3.36.0

package/src/scss/mixins/_globals.scss

@@ -216,6 +216,10 @@
 				$value: null;
 			}
 
+			@if (starts-with($key, '--')) {
+				#{$key}: $value;
+			}
+
 			@if ($key == 'appearance') {
 				-moz-appearance: $value;
 				-webkit-appearance: $value;
@@ -233,6 +237,14 @@
 			} @else if ($key == 'overflow-wrap') {
 				overflow-wrap: $value;
 				word-wrap: $value;
+			} @else if ($key == 'transition') {
+				transition: $value;
+
+				@if ($value != 'none' and $value != null) {
+					@media (prefers-reduced-motion: reduce) {
+						transition: none;
+					}
+				}
 			} @else if ($key == 'user-select') {
 				-ms-user-select: $value;
 				-moz-user-select: $value;

package/src/scss/variables/_buttons.scss

@@ -30,6 +30,79 @@ $btn-section-font-size: 0.6875rem !default; // 11px
 $btn-section-font-weight: $font-weight-normal !default;
 $btn-section-line-height: 1 !default;
 
+$btn: () !default;
+$btn: map-deep-merge(
+	(
+		background-color: transparent,
+		border-color: transparent,
+		border-style: solid,
+		border-width: $btn-border-width,
+		border-radius: clay-enable-rounded($btn-border-radius),
+		box-shadow: clay-enable-shadows([$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-bottom: $btn-padding-y,
+		padding-left: $btn-padding-x,
+		padding-right: $btn-padding-x,
+		padding-top: $btn-padding-y,
+		text-align: center,
+		text-transform: none,
+		transition: clay-enable-transitions($btn-transition),
+		user-select: none,
+		vertical-align: middle,
+		white-space: $btn-white-space,
+		mobile: (
+			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: (
+			box-shadow: $btn-focus-box-shadow,
+			outline: 0,
+		),
+		active: (
+			box-shadow: clay-enable-shadows([$btn-active-box-shadow]),
+			focus: (
+				box-shadow: clay-enable-shadows([$btn-focus-box-shadow]),
+			),
+		),
+		active-class: (
+			box-shadow: clay-enable-shadows([$btn-active-box-shadow]),
+		),
+		disabled: (
+			cursor: $btn-disabled-cursor,
+			opacity: $btn-disabled-opacity,
+			focus: (
+				box-shadow: none,
+			),
+			active: (
+				pointer-events: none,
+			),
+		),
+		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,
+		),
+	),
+	$btn
+);
+
 // Button Lg
 
 $btn-border-radius-lg: $border-radius-lg !default;
@@ -44,6 +117,33 @@ $btn-font-size-lg-mobile: null !default;
 $btn-padding-x-lg-mobile: null !default;
 $btn-padding-y-lg-mobile: null !default;
 
+$btn-lg: () !default;
+$btn-lg: map-deep-merge(
+	(
+		border-radius: clay-enable-rounded($btn-border-radius-lg),
+		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,
+		mobile: (
+			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,
+		),
+	),
+	$btn-lg
+);
+
 // Button Sm
 
 $btn-border-radius-sm: $border-radius-sm !default;
@@ -58,28 +158,154 @@ $btn-font-size-sm-mobile: null !default;
 $btn-padding-x-sm-mobile: null !default;
 $btn-padding-y-sm-mobile: null !default;
 
+$btn-sm: () !default;
+$btn-sm: map-deep-merge(
+	(
+		border-radius: clay-enable-rounded($btn-border-radius-sm),
+		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,
+		mobile: (
+			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,
+		),
+	),
+	$btn-sm
+);
+
 // Button Monospaced
 
 $btn-monospaced-padding-x: 0 !default;
-$btn-monospaced-padding-y: 0.1875rem !default; // 3px
+$btn-monospaced-padding-y: 0 !default;
 $btn-monospaced-size: 2.375rem !default; // 38px
 
-$btn-monospaced-padding-x-lg: 0 !default;
-$btn-monospaced-padding-y-lg: 0.3125rem !default; // 5px
+$btn-monospaced-size-mobile: null !default;
+
+$btn-monospaced: () !default;
+$btn-monospaced: map-deep-merge(
+	(
+		align-items: center,
+		display: inline-flex,
+		flex-direction: column,
+		height: $btn-monospaced-size,
+		justify-content: center,
+		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,
+		mobile: (
+			height: $btn-monospaced-size-mobile,
+			width: $btn-monospaced-size-mobile,
+		),
+		c-inner: (
+			align-items: center,
+			display: flex,
+			flex-direction: column,
+			height: 100%,
+			justify-content: center,
+			padding: 0,
+			width: 100%,
+		),
+	),
+	$btn-monospaced
+);
+
+// Button Monospaced Lg
+
+$btn-monospaced-padding-x-lg: null !default;
+$btn-monospaced-padding-y-lg: null !default;
 $btn-monospaced-size-lg: 3rem !default; // 48px
 
-$btn-monospaced-padding-x-sm: 0 !default;
-$btn-monospaced-padding-y-sm: 0.125rem !default; // 2px
+$btn-monospaced-size-lg-mobile: null !default;
+
+$btn-monospaced-lg: () !default;
+$btn-monospaced-lg: map-deep-merge(
+	(
+		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,
+		mobile: (
+			height: $btn-monospaced-size-lg-mobile,
+			width: $btn-monospaced-size-lg-mobile,
+		),
+	),
+	$btn-monospaced-lg
+);
+
+// Button Monospaced Sm
+
+$btn-monospaced-padding-x-sm: null !default;
+$btn-monospaced-padding-y-sm: null !default;
 $btn-monospaced-size-sm: 1.9375rem !default; // 31px
 
-$btn-monospaced-size-mobile: null !default;
-$btn-monospaced-size-lg-mobile: null !default;
 $btn-monospaced-size-sm-mobile: null !default;
 
+$btn-monospaced-sm: () !default;
+$btn-monospaced-sm: map-deep-merge(
+	(
+		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,
+		mobile: (
+			height: $btn-monospaced-size-sm-mobile,
+			width: $btn-monospaced-size-sm-mobile,
+		),
+	),
+	$btn-monospaced-sm
+);
+
 // Button Block
 
 $btn-block-spacing-y: 0.5rem !default;
 
+// Button Unstyled
+
+$btn-unstyled: () !default;
+$btn-unstyled: map-deep-merge(
+	(
+		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,
+		c-inner: (
+			margin: 0,
+			max-width: none,
+		),
+	),
+	$btn-unstyled
+);
+
 // Button Group
 
 $btn-group-item-margin-right: map-get($spacers, 2) !default;
@@ -815,6 +1041,23 @@ $btn-outline-dark: map-deep-merge(
 	$btn-outline-dark
 );
 
+$btn-outline-borderless: () !default;
+$btn-outline-borderless: map-deep-merge(
+	(
+		border-color: transparent,
+		hover: (
+			border-color: transparent,
+		),
+		focus: (
+			border-color: transparent,
+		),
+		disabled: (
+			border-color: transparent,
+		),
+	),
+	$btn-outline-borderless
+);
+
 $btn-outline-palette: () !default;
 $btn-outline-palette: map-deep-merge(
 	(

package/src/scss/variables/_forms.scss

@@ -1,15 +1,13 @@
 $input-bg: $white !default;
-
 $input-border-color: $gray-400 !default;
 $input-border-style: solid !default;
+$input-border-width: 0.0625rem !default;
+
 $input-border-top-width: 0.0625rem !default;
 $input-border-right-width: 0.0625rem !default;
 $input-border-bottom-width: 0.0625rem !default;
 $input-border-left-width: 0.0625rem !default;
 
-$input-border-width: $input-border-top-width $input-border-right-width
-	$input-border-bottom-width $input-border-left-width !default;
-
 $input-border-radius: $border-radius !default;
 $input-box-shadow: inset 0 1px 1px rgba($black, 0.075) !default;
 $input-color: $gray-700 !default;
@@ -25,6 +23,10 @@ $input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out
 $input-font-size-mobile: null !default;
 $input-height-mobile: null !default;
 
+// .form-control::placeholder
+
+$input-placeholder-color: $gray-600 !default;
+
 // Input Focus
 
 $input-focus-bg: $input-bg !default;
@@ -33,6 +35,10 @@ $input-focus-color: $input-color !default;
 $input-focus-width: $input-btn-focus-width !default;
 $input-focus-box-shadow: $input-btn-focus-box-shadow !default;
 
+// .form-control:focus::placeholder
+
+$input-placeholder-focus-color: null !default;
+
 // Input Disabled
 
 $input-disabled-bg: $gray-200 !default;
@@ -41,12 +47,69 @@ $input-disabled-color: null !default;
 $input-disabled-cursor: $disabled-cursor !default;
 $input-disabled-opacity: 1 !default;
 
-// Input Placeholder
+// .form-control:disabled::placeholder
 
-$input-placeholder-color: $gray-600 !default;
-$input-placeholder-focus-color: null !default;
 $input-placeholder-disabled-color: null !default;
 
+$input: () !default;
+$input: map-deep-merge(
+	(
+		background-color: $input-bg,
+		border-color: $input-border-color,
+		border-style: $input-border-style,
+		border-width: $input-border-width,
+		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,
+		border-radius: clay-enable-rounded($input-border-radius),
+		box-shadow: clay-enable-shadows([$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,
+		transition: $input-transition,
+		width: 100%,
+		mobile: (
+			font-size: $input-font-size-mobile,
+			height: $input-height-mobile,
+		),
+		placeholder: (
+			color: $input-placeholder-color,
+			opacity: 1,
+		),
+		focus: (
+			background-color: $input-focus-bg,
+			border-color: $input-focus-border-color,
+			box-shadow: $input-focus-box-shadow,
+			color: $input-focus-color,
+			outline: 0,
+			placeholder: (
+				color: $input-placeholder-focus-color,
+			),
+		),
+		disabled: (
+			background-color: $input-disabled-bg,
+			border-color: $input-disabled-border-color,
+			color: $input-disabled-color,
+			cursor: $input-disabled-cursor,
+			opacity: $input-disabled-opacity,
+			placeholder: (
+				color: $input-placeholder-disabled-color,
+			),
+		),
+	),
+	$input
+);
+
 // Form Control Plaintext
 
 $input-plaintext-color: $body-color !default;
@@ -67,7 +130,7 @@ $input-height-inner-half: 18px 18px !default;
 
 $input-height-inner-quarter: 9px !default;
 
-// Input Lg
+// Input Lg (.form-control-lg)
 
 $input-border-radius-lg: $border-radius-lg !default;
 $input-font-size-lg: $input-btn-font-size-lg !default;
@@ -79,7 +142,7 @@ $input-padding-y-lg: $input-btn-padding-y-lg !default;
 $input-font-size-lg-mobile: null !default;
 $input-height-lg-mobile: null !default;
 
-// Input Sm
+// Input Sm (.form-control-sm)
 
 $input-border-radius-sm: $border-radius-sm !default;
 $input-font-size-sm: $input-btn-font-size-sm !default;
@@ -95,24 +158,85 @@ $input-height-sm-mobile: null !default;
 
 $input-label-color: null !default;
 $input-label-font-size: null !default;
-$input-label-font-size-mobile: null !default;
 $input-label-font-weight: null !default;
 $input-label-margin-bottom: $label-margin-bottom !default;
 
-$input-label-for-cursor: $link-cursor !default;
+$input-label-font-size-mobile: null !default;
 
 $input-label-focus-color: null !default;
 
 $input-label-disabled-color: $gray-600 !default;
 $input-label-disabled-cursor: $disabled-cursor !default;
 
-// Label Reference Mark
+// label[for]
+
+$input-label-for-cursor: $link-cursor !default;
+
+// label .reference-mark
 
 $input-label-reference-mark-color: $warning !default;
 $input-label-reference-mark-font-size: null !default;
 $input-label-reference-mark-spacer: null !default;
 $input-label-reference-mark-vertical-align: null !default;
 
+$input-label: () !default;
+$input-label: map-deep-merge(
+	(
+		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,
+		mobile: (
+			font-size: $input-label-font-size-mobile,
+		),
+		focus: (
+			color: $input-label-focus-color,
+		),
+		for: (
+			cursor: $input-label-for-cursor,
+		),
+		form-text: (
+			margin-bottom: $input-label-margin-bottom,
+			margin-top: 0,
+		),
+		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,
+		),
+	),
+	$input-label
+);
+
+// .form-control-label
+
+$form-control-label: () !default;
+$form-control-label: map-merge(
+	(
+		display: inline,
+		margin-bottom: 0,
+	),
+	$form-control-label
+);
+
+// .form-control-label-text
+
+$form-control-label-text: () !default;
+$form-control-label-text: map-merge(
+	(
+		cursor: $input-label-for-cursor,
+		display: inline-block,
+		margin-bottom: $input-label-margin-bottom,
+		max-width: 100%,
+		word-wrap: break-word,
+	),
+	$form-control-label-text
+);
+
 /// @deprecated after v2.18.0 use the Sass map `$input-readonly` instead
 
 $input-readonly-bg: $input-disabled-bg !default;

package/src/scss/variables/_globals.scss

@@ -12,6 +12,31 @@ $c-unset: $clay-unset !default;
 
 $clay-unset-placeholder: clay-unset-placeholder !default;
 
+// Settings
+
+$enable-bs4-deprecated: true !default;
+$enable-c-inner: true !default;
+$enable-lexicon-flat-colors: false !default;
+$enable-scaling-components: false !default;
+$scaling-breakpoint-down: sm !default;
+
+$enable-caret: false !default;
+$enable-rounded: true !default;
+$enable-shadows: false !default;
+$enable-gradients: false !default;
+$enable-transitions: true !default;
+$enable-prefers-reduced-motion-media-query: true !default;
+$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-deprecation-messages: true !default;
+
+// Deprecated, no longer affects any compiled CSS
+
+$enable-hover-media-query: false !default;
+
 $white: #fff !default;
 $gray-100: #f8f9fa !default;
 $gray-200: #e9ecef !default;
@@ -151,30 +176,6 @@ $yiq-text-light: $white !default;
 
 $escaped-characters: (('<', '%3c'), ('>', '%3e'), ('#', '%23')) !default;
 
-// Settings
-
-$enable-bs4-deprecated: true !default;
-$enable-scaling-components: false !default;
-$enable-c-inner: true !default;
-$scaling-breakpoint-down: sm !default;
-
-$enable-caret: false !default;
-$enable-rounded: true !default;
-$enable-shadows: false !default;
-$enable-gradients: false !default;
-$enable-transitions: true !default;
-$enable-prefers-reduced-motion-media-query: true !default;
-$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-deprecation-messages: true !default;
-
-// Deprecated, no longer affects any compiled CSS
-
-$enable-hover-media-query: false !default;
-
 // Spacers
 
 $spacer: 1rem !default;
@@ -350,6 +351,7 @@ $font-weight-bold: 700 !default;
 $font-weight-bolder: 900 !default;
 
 $font-weight-base: $font-weight-normal !default;
+
 $line-height-base: 1.5 !default;
 
 $h1-font-size: $font-size-base * 2.5 !default;