@clayui/css 3.38.0 → 3.41.0

package/src/scss/variables/_forms.scss

@@ -325,7 +325,7 @@ $form-control-tag-group-padding-y: (
 			map-get($form-control-label-size, height) -
 			(map-get($form-control-label-size, margin-bottom)) -
 			(map-get($form-control-label-size, margin-top))
-	) / 2 !default;
+	) * 0.5 !default;
 
 $form-control-inset-min-height: 1.5rem !default;
 $form-control-inset-margin-y: 0.125rem !default;
@@ -456,6 +456,14 @@ $form-control-tag-group-component-action: map-deep-merge(
 
 $form-grid-gutter-width: 10px !default;
 
+// .form-fieldset
+
+$form-fieldset: () !default;
+
+// .form-legend
+
+$form-legend: () !default;
+
 // Form Group
 
 $form-group-margin-bottom: 1rem !default;
@@ -496,19 +504,70 @@ $form-check-inline-margin-x: 0.75rem !default;
 
 $form-check-inline-input-margin-x: auto !default;
 
-// Form Feedback
+// .form-feedback-group
+
+$form-feedback-group: () !default;
+$form-feedback-group: map-merge(
+	(
+		width: 100%,
+		word-wrap: break-word,
+	),
+	$form-feedback-group
+);
+
+// .form-text
 
 $form-text-color: $gray-600 !default;
 $form-text-font-size: 0.875rem !default; // 14px
 $form-text-font-weight: null !default;
 $form-text-margin-top: 0.25rem !default;
 
+$form-text: () !default;
+$form-text: map-merge(
+	(
+		color: $form-text-color,
+		display: block,
+		font-size: $form-text-font-size,
+		font-weight: $form-text-font-weight,
+		margin-top: $form-text-margin-top,
+		word-wrap: break-word,
+	),
+	$form-text
+);
+
+// .form-feedback-item
+
 $form-feedback-font-size: $small-font-size !default;
 $form-feedback-font-weight: null !default;
 $form-feedback-margin-top: 0.25rem !default;
 
+$form-feedback-item: () !default;
+$form-feedback-item: map-merge(
+	(
+		font-size: $form-feedback-font-size,
+		font-weight: $form-feedback-font-weight,
+		margin-top: $form-feedback-margin-top,
+		word-wrap: break-word,
+	),
+	$form-feedback-item
+);
+
+// .form-feedback-indicator
+
 $form-feedback-indicator-margin-x: 0.125rem !default;
 
+$form-feedback-indicator: () !default;
+$form-feedback-indicator: map-deep-merge(
+	(
+		margin-left: $form-feedback-indicator-margin-x,
+		margin-right: $form-feedback-indicator-margin-x,
+		first-child: (
+			margin-left: 0,
+		),
+	),
+	$form-feedback-indicator
+);
+
 $form-feedback-valid-color: $success !default;
 
 $form-feedback-warning-color: $warning !default;
@@ -622,6 +681,87 @@ $input-danger-select-multiple: map-deep-merge(
 	$input-danger-select-multiple
 );
 
+// .has-error
+
+$has-error: () !default;
+$has-error: map-deep-merge(
+	(
+		label: (
+			color: $input-danger-label-color,
+		),
+		custom-control-label: (
+			color: $input-danger-checkbox-label-color,
+		),
+		form-control:
+			map-deep-merge(
+				(
+					readonly: $input-danger-readonly,
+				),
+				$input-danger
+			),
+		form-feedback-item: (
+			color: $form-feedback-invalid-color,
+		),
+		select: (
+			form-control:
+				map-deep-merge(
+					(
+						multiple: $input-danger-select-multiple,
+						size: $input-danger-select-size,
+					),
+					$input-danger-select
+				),
+		),
+		input-group-item: (
+			focus: (
+				box-shadow:
+					setter(
+						$input-danger-focus-box-shadow,
+						$input-danger-box-shadow
+					),
+				input-group-inset: (
+					background-color:
+						setter($input-danger-focus-bg, $input-danger-bg),
+					border-color:
+						setter(
+							$input-danger-focus-border-color,
+							$input-danger-border-color
+						),
+					input-group-inset-item: (
+						background-color:
+							setter($input-danger-focus-bg, $input-danger-bg),
+						border-color:
+							setter(
+								$input-danger-focus-border-color,
+								$input-danger-border-color
+							),
+					),
+				),
+			),
+			input-group-inset: (
+				input-group-inset-item: (
+					background-color: $input-danger-bg,
+					border-color: $input-danger-border-color,
+					box-shadow: $input-danger-box-shadow,
+				),
+				focus: (
+					box-shadow: none,
+					input-group-inset-item: (
+						background-color:
+							setter($input-danger-focus-bg, $input-danger-bg),
+						border-color:
+							setter(
+								$input-danger-focus-border-color,
+								$input-danger-border-color
+							),
+					),
+				),
+			),
+		),
+	),
+	$has-error
+);
+
 // .has-warning .form-control
 
 $input-warning-bg: null !default;
@@ -694,6 +834,87 @@ $input-warning-select-multiple: map-deep-merge(
 	$input-warning-select-multiple
 );
 
+// .has-warning
+
+$has-warning: () !default;
+$has-warning: map-deep-merge(
+	(
+		label: (
+			color: $input-warning-label-color,
+		),
+		custom-control-label: (
+			color: $input-warning-checkbox-label-color,
+		),
+		form-control:
+			map-deep-merge(
+				(
+					readonly: $input-warning-readonly,
+				),
+				$input-warning
+			),
+		form-feedback-item: (
+			color: $form-feedback-warning-color,
+		),
+		select: (
+			form-control:
+				map-deep-merge(
+					(
+						multiple: $input-warning-select-multiple,
+						size: $input-warning-select-size,
+					),
+					$input-warning-select
+				),
+		),
+		input-group-item: (
+			focus: (
+				box-shadow:
+					setter(
+						$input-warning-focus-box-shadow,
+						$input-warning-box-shadow
+					),
+				input-group-inset: (
+					background-color:
+						setter($input-warning-focus-bg, $input-warning-bg),
+					border-color:
+						setter(
+							$input-warning-focus-border-color,
+							$input-warning-border-color
+						),
+					input-group-inset-item: (
+						background-color:
+							setter($input-warning-focus-bg, $input-warning-bg),
+						border-color:
+							setter(
+								$input-warning-focus-border-color,
+								$input-warning-border-color
+							),
+					),
+				),
+			),
+			input-group-inset: (
+				input-group-inset-item: (
+					background-color: $input-warning-bg,
+					border-color: $input-warning-border-color,
+					box-shadow: $input-warning-box-shadow,
+				),
+				focus: (
+					box-shadow: none,
+					input-group-inset-item: (
+						background-color:
+							setter($input-warning-focus-bg, $input-warning-bg),
+						border-color:
+							setter(
+								$input-warning-focus-border-color,
+								$input-warning-border-color
+							),
+					),
+				),
+			),
+		),
+	),
+	$has-warning
+);
+
 // .has-success .form-control
 
 $input-success-bg: null !default;
@@ -766,6 +987,87 @@ $input-success-select-multiple: map-deep-merge(
 	$input-success-select-multiple
 );
 
+// .has-success
+
+$has-success: () !default;
+$has-success: map-deep-merge(
+	(
+		label: (
+			color: $input-success-label-color,
+		),
+		custom-control-label: (
+			color: $input-success-checkbox-label-color,
+		),
+		form-control:
+			map-deep-merge(
+				(
+					readonly: $input-success-readonly,
+				),
+				$input-success
+			),
+		form-feedback-item: (
+			color: $form-feedback-valid-color,
+		),
+		select: (
+			form-control:
+				map-deep-merge(
+					(
+						multiple: $input-success-select-multiple,
+						size: $input-success-select-size,
+					),
+					$input-success-select
+				),
+		),
+		input-group-item: (
+			focus: (
+				box-shadow:
+					setter(
+						$input-success-focus-box-shadow,
+						$input-success-box-shadow
+					),
+				input-group-inset: (
+					background-color:
+						setter($input-success-focus-bg, $input-success-bg),
+					border-color:
+						setter(
+							$input-success-focus-border-color,
+							$input-success-border-color
+						),
+					input-group-inset-item: (
+						background-color:
+							setter($input-success-focus-bg, $input-success-bg),
+						border-color:
+							setter(
+								$input-success-focus-border-color,
+								$input-success-border-color
+							),
+					),
+				),
+			),
+			input-group-inset: (
+				input-group-inset-item: (
+					background-color: $input-success-bg,
+					border-color: $input-success-border-color,
+					box-shadow: $input-success-box-shadow,
+				),
+				focus: (
+					box-shadow: none,
+					input-group-inset-item: (
+						background-color:
+							setter($input-success-focus-bg, $input-success-bg),
+						border-color:
+							setter(
+								$input-success-focus-border-color,
+								$input-success-border-color
+							),
+					),
+				),
+			),
+		),
+	),
+	$has-success
+);
+
 // Select Element
 
 $input-select-bg: null !default;

package/src/scss/variables/_globals.scss

@@ -382,7 +382,7 @@ $h4-font-size-mobile: null !default;
 $h5-font-size-mobile: null !default;
 $h6-font-size-mobile: null !default;
 
-$headings-margin-bottom: $spacer / 2 !default;
+$headings-margin-bottom: $spacer * 0.5 !default;
 $headings-font-family: null !default;
 $headings-font-weight: 500 !default;
 $headings-line-height: 1.2 !default;
@@ -432,6 +432,19 @@ $link-decoration: none !default;
 $link-hover-color: clay-darken($link-color, 15%) !default;
 $link-hover-decoration: underline !default;
 
+$link: () !default;
+$link: map-deep-merge(
+	(
+		color: $link-color,
+		text-decoration: $link-decoration,
+		hover: (
+			color: $link-hover-color,
+			text-decoration: $link-hover-decoration,
+		),
+	),
+	$link
+);
+
 /// Darken percentage for links with `.text-*` class (e.g. `.text-success`)
 /// @deprecated as of v3.x with no replacement, fixed percentages do not propagate well for all colors; manually define them for each theme color in `$text-theme-colors`.
 
@@ -490,6 +503,46 @@ $list-inline-padding: 0.5rem !default;
 
 $mark-bg: #fcf8e3 !default;
 
+// fieldset
+
+// `min-width`: Browsers set a default `min-width: min-content;` on fieldsets, unlike e.g. `<div>`s, which have `min-width: 0;` by default. So we reset that to ensure fieldsets behave more like a standard block element.
+// See https://github.com/twbs/bootstrap/issues/12359 and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
+// `padding`: Reset the default outline behavior of fieldsets so they don't affect page layout.
+
+$fieldset: () !default;
+$fieldset: map-merge(
+	(
+		border: 0,
+		margin: 0,
+		min-width: 0,
+		padding: 0,
+	),
+	$fieldset
+);
+
+// legend
+
+// `color`: Correct the color inheritance from `fieldset` elements in IE
+// `max-width`: Correct the text wrapping in Edge and IE
+// `white-space`: Correct the text wrapping in Edge and IE
+// `width`: Correct the text wrapping in Edge and IE
+
+$legend: () !default;
+$legend: map-merge(
+	(
+		color: inherit,
+		display: block,
+		font-size: 1.5rem,
+		line-height: inherit,
+		margin-bottom: 0.5rem,
+		max-width: 100%,
+		padding: 0,
+		white-space: normal,
+		width: 100%,
+	),
+	$legend
+);
+
 // Buttons + Forms
 
 $label-margin-bottom: 0.5rem !default;

package/src/scss/variables/_icons.scss

@@ -1,3 +1,63 @@
+// .lexicon-icon
+
+$lexicon-icon-size: 1em !default; // 16px
+
+$lexicon-icon: () !default;
+$lexicon-icon: map-merge(
+	(
+		display: inline-block,
+		fill: currentColor,
+		height: $lexicon-icon-size,
+		margin-top: -3px,
+		vertical-align: middle,
+		width: $lexicon-icon-size,
+	),
+	$lexicon-icon
+);
+
+// .lexicon-icon-sm
+
+$lexicon-icon-sm-font-size: 0.5rem !default; // 8px
+
+$lexicon-icon-sm: () !default;
+$lexicon-icon-sm: map-merge(
+	(
+		font-size: $lexicon-icon-sm-font-size,
+	),
+	$lexicon-icon-sm
+);
+
+// .lexicon-icon-lg
+
+$lexicon-icon-lg-font-size: 2rem !default; // 32px
+
+$lexicon-icon-lg: () !default;
+$lexicon-icon-lg: map-merge(
+	(
+		font-size: $lexicon-icon-lg-font-size,
+	),
+	$lexicon-icon-lg
+);
+
+// .lexicon-icon-xl
+
+$lexicon-icon-xl-font-size: 8rem !default; // 128px
+
+$lexicon-icon-xl: () !default;
+$lexicon-icon-xl: map-merge(
+	(
+		font-size: $lexicon-icon-xl-font-size,
+	),
+	$lexicon-icon-xl
+);
+
+// .order-arrow
+
+$order-arrow-down-active-color: rgba($black, 0.9) !default;
+$order-arrow-up-active-color: $order-arrow-down-active-color !default;
+
+// .collapse-icon[href], .collapse-icon[type]
+
 $collapse-icon-padding-left: null !default;
 $collapse-icon-padding-right: 2.28125rem !default; // 45px
 
@@ -9,12 +69,3 @@ $collapse-icon-position-top: clay-collapse-icon-align(
 	0.0625rem,
 	0.9375em
 ) !default;
-
-$lexicon-icon-size: 1em !default; // 16px
-
-$lexicon-icon-sm-font-size: 0.5rem !default; // 8px
-$lexicon-icon-lg-font-size: 2rem !default; // 32px
-$lexicon-icon-xl-font-size: 8rem !default; // 128px
-
-$order-arrow-down-active-color: rgba($black, 0.9) !default;
-$order-arrow-up-active-color: $order-arrow-down-active-color !default;