@clayui/css 3.35.0 → 3.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@clayui/css",
-	"version": "3.35.0",
+	"version": "3.36.0",
 	"description": "Liferay's web implementation of the Lexicon Design Language",
 	"main": "index.js",
 	"files": [
@@ -94,5 +94,5 @@
 		"string-sub": "0.0.1",
 		"underscore.string": "^3.2.2"
 	},
-	"gitHead": "affbbdaef528353c6fed80e077bc55d35d5e59bd"
+	"gitHead": "e91895f788381be22112ad3e98a755a7992ff448"
 }

package/src/scss/_license-text.scss

@@ -1,5 +1,5 @@
 /**
- * Clay 3.35.0
+ * Clay 3.36.0
  *
  * SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
  * SPDX-FileCopyrightText: © 2020 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>

package/src/scss/atlas/variables/_alerts.scss

@@ -1,7 +1,3 @@
-////
-/// @group alerts
-////
-
 $alert-padding-x: 1rem !default;
 $alert-padding-y: 1.03125rem !default;
 
@@ -16,7 +12,7 @@ $alert-close-font-size: 1rem !default;
 
 $alert-close-opacity: 1 !default;
 
-/// @deprecated as of v2.12.0 use the Sass map `$alert-close` instead
+// @deprecated as of v2.12.0 use the Sass map `$alert-close` instead
 
 $alert-close-position-top: 0.6875rem !default;
 

package/src/scss/atlas/variables/_buttons.scss

@@ -10,13 +10,39 @@ $btn-focus-box-shadow: $component-focus-box-shadow !default;
 
 $btn-disabled-opacity: 0.4 !default;
 
-$btn-link-disabled-color: $link-color !default;
-
 $btn-active-box-shadow: none !default;
 
 $btn-inline-item-font-size: 1rem !default; // 16px
 
-// Button Sizes
+$btn: () !default;
+$btn: map-deep-merge(
+	(
+		box-shadow: $btn-box-shadow,
+		font-weight: $btn-font-weight,
+		padding-bottom: $btn-padding-y,
+		padding-left: $btn-padding-x,
+		padding-right: $btn-padding-x,
+		padding-top: $btn-padding-y,
+		transition: clay-enable-transitions($btn-transition),
+		focus: (
+			box-shadow: $btn-focus-box-shadow,
+		),
+		active: (
+			box-shadow: $btn-active-box-shadow,
+		),
+		disabled: (
+			opacity: $btn-disabled-opacity,
+		),
+		inline-item: (
+			font-size: $btn-inline-item-font-size,
+		),
+	),
+	$btn
+);
+
+$btn-link-disabled-color: $link-color !default;
+
+// Button Lg
 
 $btn-border-radius-lg: $border-radius !default;
 $btn-font-size-lg: $font-size-lg !default; // 18px
@@ -24,21 +50,67 @@ $btn-padding-x-lg: 1.5rem !default; // 24px
 $btn-padding-y-lg: 0.59375rem !default; // 9.5px
 $btn-inline-item-font-size-lg: $font-size-lg !default; // 18px
 
+$btn-lg: () !default;
+$btn-lg: map-deep-merge(
+	(
+		border-radius: clay-enable-rounded($btn-border-radius-lg),
+		font-size: $btn-font-size-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,
+		inline-item: (
+			font-size: $btn-inline-item-font-size-lg,
+		),
+	),
+	$btn-lg
+);
+
+// Button Sm
+
 $btn-font-size-sm: $font-size-sm !default; // 14px
 $btn-line-height-sm: 1.15 !default;
 $btn-padding-x-sm: 0.75rem !default; // 12px
 $btn-padding-y-sm: 0.4375rem !default; // 7px
 
+$btn-sm: () !default;
+$btn-sm: map-deep-merge(
+	(
+		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,
+	),
+	$btn-sm
+);
+
 // Button Monospaced
 
-$btn-monospaced-padding-y: 0.25rem !default; // 4px
 $btn-monospaced-size: 2.5rem !default; // 40px
 
-$btn-monospaced-padding-x-sm: null !default;
-$btn-monospaced-padding-y-sm: 0.1875rem !default; // 3px
+$btn-monospaced: () !default;
+$btn-monospaced: map-deep-merge(
+	(
+		height: $btn-monospaced-size,
+		width: $btn-monospaced-size,
+	),
+	$btn-monospaced
+);
+
+// Button Monospaced Sm
+
 $btn-monospaced-size-sm: 2rem !default; // 32px
 
-$btn-monospaced-padding-y-lg: 0.375rem !default; // 6px
+$btn-monospaced-sm: () !default;
+$btn-monospaced-sm: map-deep-merge(
+	(
+		height: $btn-monospaced-size-sm,
+		width: $btn-monospaced-size-sm,
+	),
+	$btn-monospaced-sm
+);
 
 // Button Group
 

package/src/scss/atlas/variables/_custom-forms.scss

@@ -1,7 +1,3 @@
-////
-/// @group customForms
-////
-
 $custom-control-indicator-bg: $white !default;
 $custom-control-indicator-border-color: $gray-400 !default;
 $custom-control-indicator-border-style: solid !default;
@@ -76,7 +72,7 @@ $custom-control-description-font-size: $input-label-font-size !default; // 13px
 
 $custom-control-description-font-weight: $font-weight-normal !default;
 
-/// @deprecated as of v2.19.0 use the Sass map `$custom-control-label-disabled-color` instead. This variable is not used in Clay CSS.
+// @deprecated as of v2.19.0 use the Sass map `$custom-control-label-disabled-color` instead. This variable is not used in Clay CSS.
 
 $custom-control-label-disabled-color: $input-label-disabled-color !default;
 

package/src/scss/atlas/variables/_forms.scss

@@ -1,11 +1,5 @@
-$input-font-size-mobile: 1rem !default; // 16px
-
-$input-label-font-size: 0.875rem !default; // 14px
-$input-label-font-weight: $font-weight-semi-bold !default;
-$input-label-margin-bottom: 0.25rem !default; // 4px
-
-$input-label-reference-mark-font-size: 6px !default;
-
+$input-bg: $gray-200 !default;
+$input-border-color: $gray-300 !default;
 $input-border-width: 0.0625rem !default; // 1px
 
 $input-border-bottom-width: $input-border-width !default; // 1px
@@ -13,26 +7,90 @@ $input-border-left-width: $input-border-width !default; // 1px
 $input-border-right-width: $input-border-width !default; // 1px
 $input-border-top-width: $input-border-width !default; // 1px
 
-$input-border-radius-sm: $border-radius !default;
-
+$input-box-shadow: none !default;
+$input-color: $gray-900 !default;
+$input-height: 2.5rem !default; // 40px
 $input-padding-x: 1rem !default; // 16px
 $input-padding-y: 0.4375rem !default; // 7px
 
-$input-padding-x-lg: $input-padding-x !default;
-$input-padding-y-lg: $input-padding-y !default;
+$input-font-size-mobile: 1rem !default; // 16px
 
-$input-padding-x-sm: 0.75rem !default; // 12px
-$input-padding-y-sm: 0.25rem !default;
+// .form-control::placeholder
+
+$input-placeholder-color: $gray-600 !default;
+
+// Input Focus (.form-control:focus)
+
+$input-focus-bg: lighten($component-active-bg, 44.9) !default;
+$input-focus-border-color: lighten($component-active-bg, 22.94) !default;
+$input-focus-box-shadow: $component-focus-box-shadow !default;
+
+// Input Disabled (.form-control:disabled)
+
+$input-disabled-color: $gray-500 !default;
+$input-disabled-bg: $input-bg !default;
+$input-disabled-border-color: $input-bg !default;
+
+// .form-control:disabled::placeholder
+
+$input-placeholder-disabled-color: $input-disabled-color !default;
+
+$input: () !default;
+$input: map-deep-merge(
+	(
+		background-color: $input-bg,
+		border-color: $input-border-color,
+		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,
+		box-shadow: $input-box-shadow,
+		color: $input-color,
+		height: $input-height,
+		padding-bottom: $input-padding-y,
+		padding-left: $input-padding-x,
+		padding-right: $input-padding-x,
+		padding-top: $input-padding-y,
+		mobile: (
+			font-size: $input-font-size-mobile,
+		),
+		placeholder: (
+			color: $input-placeholder-color,
+		),
+		focus: (
+			background-color: $input-focus-bg,
+			border-color: $input-focus-border-color,
+			box-shadow: $input-focus-box-shadow,
+		),
+		disabled: (
+			background-color: $input-disabled-bg,
+			border-color: $input-disabled-border-color,
+			color: $input-disabled-color,
+			placeholder: (
+				color: $input-placeholder-disabled-color,
+			),
+		),
+	),
+	$input
+);
 
 $input-height-border: $input-border-bottom-width + $input-border-top-width !default;
-$input-height: 2.5rem !default; // 40px
+
 $input-height-inner: $input-height - $input-height-border !default;
+
+// Input Lg (.form-control-lg)
+
 $input-height-lg: 3rem !default; // 48px
-$input-height-sm: 2rem !default; // 32px
+$input-padding-x-lg: $input-padding-x !default;
+$input-padding-y-lg: $input-padding-y !default;
 
-$form-feedback-font-size: 0.875rem !default; // 14px
+// Input Sm (.form-control-sm)
 
-$form-text-color: $gray-600 !default;
+$input-border-radius-sm: $border-radius !default;
+$input-height-sm: 2rem !default; // 32px
+$input-padding-x-sm: 0.75rem !default; // 12px
+$input-padding-y-sm: 0.25rem !default;
 
 // Form Group
 
@@ -42,26 +100,35 @@ $form-group-margin-bottom-mobile: 1rem !default; // 16px
 $form-group-sm-input-label-margin-bottom: 0.1875rem !default; // 3px
 $form-group-sm-item-label-spacer: 1.5625rem !default; // 25px
 
-// Skin
+// Input Label (<label>)
 
-$input-color: $gray-900 !default;
-$input-bg: $gray-200 !default;
-$input-border-color: $gray-300 !default;
-$input-box-shadow: none !default;
-$input-placeholder-color: $gray-600 !default;
 $input-label-color: $gray-900 !default;
+$input-label-font-size: 0.875rem !default; // 14px
+$input-label-font-weight: $font-weight-semi-bold !default;
+$input-label-margin-bottom: 0.25rem !default; // 4px
 
-$input-focus-bg: lighten($component-active-bg, 44.9) !default;
-$input-focus-border-color: lighten($component-active-bg, 22.94) !default;
-$input-focus-box-shadow: $component-focus-box-shadow !default;
-
-$input-disabled-color: $gray-500 !default;
-$input-disabled-bg: $input-bg !default;
-$input-disabled-border-color: $input-bg !default;
-$input-placeholder-disabled-color: $input-disabled-color !default;
+// label.disabled
 
 $input-label-disabled-color: $gray-500 !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,
+		disabled: (
+			color: $input-label-disabled-color,
+		),
+	),
+	$input-label
+);
+
+// label .reference-mark
+
+$input-label-reference-mark-font-size: 6px !default;
+
 // @deprecated after v2.18.0 use the Sass map `$input-readonly` instead
 
 $input-readonly-bg: $white !default;
@@ -90,6 +157,18 @@ $input-plaintext-readonly: map-deep-merge(
 	$input-plaintext-readonly
 );
 
+// Form Feedback
+
+$form-text-color: $gray-600 !default;
+$form-text-font-weight: $font-weight-semi-bold !default;
+
+$form-feedback-font-size: 0.875rem !default; // 14px
+$form-feedback-font-weight: $font-weight-semi-bold !default;
+
+$form-feedback-indicator-margin-x: 0 !default;
+
+// Input Variants
+
 $input-danger-bg: $danger-l2 !default;
 $input-danger-border-color: $danger-l1 !default;
 // Will need to be revisited if https://github.com/twbs/bootstrap/pull/24821 merge error is fixed
@@ -208,14 +287,6 @@ $input-select-size: map-deep-merge(
 	$input-select-size
 );
 
-// Form Feedback
-
-$form-feedback-font-weight: $font-weight-semi-bold !default;
-
-$form-feedback-indicator-margin-x: 0 !default;
-
-$form-text-font-weight: $font-weight-semi-bold !default;
-
 // Textarea
 
 $input-textarea-height: 100px !default;
@@ -245,6 +316,10 @@ $form-control-label-size: map-deep-merge(
 	$form-control-label-size
 );
 
+// Form Control Tag Group
+
+$form-control-inset-margin-y: 0.3125rem !default;
+
 // Form Group
 
 $form-group-item-label-spacer: ($input-label-font-size * $line-height-base) +