@clayui/css 3.76.0 → 3.81.0

package/src/scss/variables/_clay-color.scss

@@ -1,10 +1,28 @@
+$clay-color-border-color: if(
+	variable-exists(input-border-color),
+	$input-border-color,
+	$gray-400
+) !default;
+$clay-color-padding-x: if(
+	variable-exists(input-padding-x),
+	$input-padding-x,
+	0.75rem
+) !default;
+
+$clay-color-sm-padding-x: if(
+	variable-exists(input-padding-x-sm),
+	$input-padding-x-sm,
+	0.5rem
+) !default;
+
 // Clay Color Input Group Text (.clay-color > .input-group-item > .input-group-text)
 
 $clay-color-input-group-text: () !default;
-$clay-color-input-group-text: map-deep-merge(
+$clay-color-input-group-text: map-merge(
 	(
-		bg: $white,
-		border-color: $input-border-color,
+		background-color:
+			setter(map-get($clay-color-input-group-text, bg), $white),
+		border-color: $clay-color-border-color,
 		padding-left: 0,
 		padding-right: 0,
 	),
@@ -18,11 +36,11 @@ $clay-color-input-group-input: () !default;
 // Clay Color Input Group Inset Item Before (.clay-color > .input-group-item > .input-group-inset-item-before)
 
 $clay-color-input-group-inset-item-before: () !default;
-$clay-color-input-group-inset-item-before: map-deep-merge(
+$clay-color-input-group-inset-item-before: map-merge(
 	(
 		color: $gray-600,
 		font-size: inherit,
-		padding-left: $input-padding-x,
+		padding-left: $clay-color-padding-x,
 		padding-right: 0.5rem,
 	),
 	$clay-color-input-group-inset-item-before
@@ -47,7 +65,7 @@ $clay-color-dropdown-menu: map-deep-merge(
 // Dropdown Menu Form Group
 
 $clay-color-dropdown-menu-form-group: () !default;
-$clay-color-dropdown-menu-form-group: map-deep-merge(
+$clay-color-dropdown-menu-form-group: map-merge(
 	(
 		margin-bottom: 1rem,
 	),
@@ -76,7 +94,7 @@ $clay-color-dropdown-menu-input-group-inset-item-before: map-deep-merge(
 	(
 		color: $gray-600,
 		font-size: 0.875rem,
-		padding-left: $input-padding-x-sm,
+		padding-left: $clay-color-sm-padding-x,
 		padding-right: 0.5rem,
 	),
 	$clay-color-dropdown-menu-input-group-inset-item-before
@@ -102,7 +120,7 @@ $clay-color-dropdown-menu-component-action: map-deep-merge(
 // Clay Color Swatch
 
 $clay-color-swatch: () !default;
-$clay-color-swatch: map-deep-merge(
+$clay-color-swatch: map-merge(
 	(
 		display: flex,
 		flex-wrap: wrap,
@@ -179,7 +197,7 @@ $clay-color-pointer: map-deep-merge(
 // Clay Color Header
 
 $clay-color-header: () !default;
-$clay-color-header: map-deep-merge(
+$clay-color-header: map-merge(
 	(
 		display: flex,
 		justify-content: space-between,
@@ -206,7 +224,7 @@ $clay-color-header-component-title: map-deep-merge(
 // Clay Color Footer
 
 $clay-color-footer: () !default;
-$clay-color-footer: map-deep-merge(
+$clay-color-footer: map-merge(
 	(
 		margin-bottom: 1rem,
 	),
@@ -216,7 +234,7 @@ $clay-color-footer: map-deep-merge(
 // Clay Color Map
 
 $clay-color-map-group: () !default;
-$clay-color-map-group: map-deep-merge(
+$clay-color-map-group: map-merge(
 	(
 		display: flex,
 		margin-top: 0.5rem,
@@ -225,7 +243,7 @@ $clay-color-map-group: map-deep-merge(
 );
 
 $clay-color-map: () !default;
-$clay-color-map: map-deep-merge(
+$clay-color-map: map-merge(
 	(
 		flex-shrink: 0,
 		height: 128px,
@@ -240,6 +258,13 @@ $clay-color-map: map-deep-merge(
 );
 
 $clay-color-map-hsb: () !default;
+$clay-color-map-hsb: map-merge(
+	(
+		background-image: #{linear-gradient(to top, #000, rgba(0, 0, 0, 0)),
+		linear-gradient(to right, #fff, rgba(255, 255, 255, 0))},
+	),
+	$clay-color-map-hsb
+);
 
 // Clay Color Map Pointer
 
@@ -248,7 +273,7 @@ $clay-color-map-pointer: () !default;
 // Clay Color Map Values
 
 $clay-color-map-values: () !default;
-$clay-color-map-values: map-deep-merge(
+$clay-color-map-values: map-merge(
 	(
 		flex-grow: 1,
 		flex-shrink: 1,
@@ -274,7 +299,7 @@ $clay-color-map-values-input: map-deep-merge(
 // Clay Color Map Values Input Group Inset Item Before (.clay-color-map-values .input-group-inset-item-before)
 
 $clay-color-map-values-input-group-inset-item-before: () !default;
-$clay-color-map-values-input-group-inset-item-before: map-deep-merge(
+$clay-color-map-values-input-group-inset-item-before: map-merge(
 	(
 		font-weight: $font-weight-semi-bold,
 		padding-left: 10%,
@@ -287,7 +312,7 @@ $clay-color-map-values-input-group-inset-item-before: map-deep-merge(
 // Clay Color Range
 
 $clay-color-range: () !default;
-$clay-color-range: map-deep-merge(
+$clay-color-range: map-merge(
 	(
 		border-radius: 100px,
 		height: 0.5rem,
@@ -314,7 +339,7 @@ $clay-color-range-pointer: map-deep-merge(
 $clay-color-sm-input-group-inset-item-before: () !default;
 $clay-color-sm-input-group-inset-item-before: map-merge(
 	(
-		padding-left: $input-padding-x-sm,
+		padding-left: $clay-color-sm-padding-x,
 	),
 	$clay-color-sm-input-group-inset-item-before
 );

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

@@ -9,16 +9,32 @@ $custom-forms-transition: background-color 0.15s ease-in-out,
 
 $custom-control-indicator-size: 1rem !default;
 
-$custom-control-indicator-bg: $input-bg !default;
+$custom-control-indicator-bg: if(
+	variable-exists(input-bg),
+	$input-bg,
+	$white
+) !default;
 $custom-control-indicator-bg-size: 50% 50% !default;
 $custom-control-indicator-border-color: $gray-500 !default;
 $custom-control-indicator-border-style: solid !default;
 $custom-control-indicator-border-width: $border-width !default;
-$custom-control-indicator-box-shadow: $input-box-shadow !default;
+$custom-control-indicator-box-shadow: if(
+	variable-exists(input-box-shadow),
+	$input-box-shadow,
+	inset 0 1px 1px rgba($black, 0.075)
+) !default;
 $custom-control-indicator-position-top: 0.25rem !default;
 
-$custom-control-indicator-focus-border-color: $input-focus-border-color !default;
-$custom-control-indicator-focus-box-shadow: $input-focus-box-shadow !default;
+$custom-control-indicator-focus-border-color: if(
+	variable-exists(input-focus-border-color),
+	$input-focus-border-color,
+	clay-lighten($component-active-bg, 25%)
+) !default;
+$custom-control-indicator-focus-box-shadow: if(
+	variable-exists(input-focus-box-shadow),
+	$input-focus-box-shadow,
+	$component-focus-box-shadow
+) !default;
 
 $custom-control-indicator-active-bg: clay-lighten(
 	$component-active-bg,
@@ -28,7 +44,11 @@ $custom-control-indicator-active-box-shadow: none !default;
 $custom-control-indicator-active-border-color: $custom-control-indicator-active-bg !default;
 $custom-control-indicator-active-color: $component-active-color !default;
 
-$custom-control-indicator-disabled-bg: $input-disabled-bg !default;
+$custom-control-indicator-disabled-bg: if(
+	variable-exists(input-disabled-bg),
+	$input-disabled-bg,
+	$gray-200
+) !default;
 $custom-control-indicator-disabled-border-color: $gray-400 !default;
 $custom-control-indicator-disabled-cursor: $disabled-cursor !default;
 
@@ -82,7 +102,11 @@ $custom-control-min-height: $custom-control-indicator-size +
 
 /// @deprecated as of v2.19.0 use the Sass map `$custom-control-label` instead
 
-$custom-control-description-cursor: $form-check-label-cursor !default;
+$custom-control-description-cursor: if(
+	variable-exists(form-check-label-cursor),
+	$form-check-label-cursor,
+	$link-cursor
+) !default;
 
 /// @deprecated as of v2.19.0 use the Sass map `$custom-control-label` instead
 
@@ -192,7 +216,7 @@ $custom-control-label-text: map-deep-merge(
 // .custom-control-label-text small, .custom-control-label-text .small
 
 $custom-control-label-text-small: () !default;
-$custom-control-label-text-small: map-deep-merge(
+$custom-control-label-text-small: map-merge(
 	(
 		font-size: $custom-control-description-small-font-size,
 	),
@@ -227,7 +251,12 @@ $custom-control: map-deep-merge(
 $custom-control-input: () !default;
 $custom-control-input: map-deep-merge(
 	(
-		cursor: $form-check-input-cursor,
+		cursor:
+			if(
+				variable-exists(form-check-input-cursor),
+				$form-check-input-cursor,
+				$link-cursor
+			),
 		height: $custom-control-indicator-size,
 		left: 0,
 		opacity: 0,
@@ -503,7 +532,7 @@ $custom-switch-indicator-size: $custom-control-indicator-size -
 
 /// @deprecated as of v3.x with no replacement
 
-$custom-select-bg: $input-bg !default;
+$custom-select-bg: if(variable-exists(input-bg), $input-bg, $white) !default;
 
 /// @deprecated as of v3.x with no replacement
 
@@ -511,7 +540,11 @@ $custom-select-bg-size: 8px 10px !default;
 
 /// @deprecated as of v3.x with no replacement
 
-$custom-select-border-color: $input-border-color !default;
+$custom-select-border-color: if(
+	variable-exists(input-border-color),
+	$input-border-color,
+	$gray-400
+) !default;
 
 /// @deprecated as of v3.x with no replacement
 
@@ -519,7 +552,11 @@ $custom-select-border-radius: $border-radius !default;
 
 /// @deprecated as of v3.x with no replacement
 
-$custom-select-border-width: $input-border-width !default;
+$custom-select-border-width: if(
+	variable-exists(input-border-width),
+	$input-border-width,
+	0.0625rem
+) !default;
 
 /// @deprecated as of v3.x with no replacement
 
@@ -527,23 +564,43 @@ $custom-select-box-shadow: inset 0 1px 2px rgba($black, 0.075) !default;
 
 /// @deprecated as of v3.x with no replacement
 
-$custom-select-color: $input-color !default;
+$custom-select-color: if(
+	variable-exists(input-color),
+	$input-color,
+	$gray-700
+) !default;
 
 /// @deprecated as of v3.x with no replacement
 
-$custom-select-font-family: $input-font-family !default;
+$custom-select-font-family: if(
+	variable-exists(input-font-family),
+	$input-font-family,
+	null
+) !default;
 
 /// @deprecated as of v3.x with no replacement
 
-$custom-select-font-size: $input-font-size !default;
+$custom-select-font-size: if(
+	variable-exists(input-font-size),
+	$input-font-size,
+	$font-size-base
+) !default;
 
 /// @deprecated as of v3.x with no replacement
 
-$custom-select-font-weight: $input-font-weight !default;
+$custom-select-font-weight: if(
+	variable-exists(input-font-weight),
+	$input-font-weight,
+	$font-weight-base
+) !default;
 
 /// @deprecated as of v3.x with no replacement
 
-$custom-select-height: $input-height !default;
+$custom-select-height: if(
+	variable-exists(input-height),
+	$input-height,
+	2.375rem
+) !default;
 
 /// @deprecated as of v3.x with no replacement
 
@@ -551,15 +608,27 @@ $custom-select-indicator-padding: 1rem !default;
 
 /// @deprecated as of v3.x with no replacement
 
-$custom-select-line-height: $input-line-height !default;
+$custom-select-line-height: if(
+	variable-exists(input-line-height),
+	$input-line-height,
+	$line-height-base
+) !default;
 
 /// @deprecated as of v3.x with no replacement
 
-$custom-select-padding-x: $input-padding-x !default;
+$custom-select-padding-x: if(
+	variable-exists(input-padding-x),
+	$input-padding-x,
+	0.75rem
+) !default;
 
 /// @deprecated as of v3.x with no replacement
 
-$custom-select-padding-y: $input-padding-y !default;
+$custom-select-padding-y: if(
+	variable-exists(input-padding-y),
+	$input-padding-y,
+	0.375rem
+) !default;
 
 /// @deprecated as of v3.x with no replacement
 
@@ -580,16 +649,24 @@ $custom-select-background: $custom-select-indicator no-repeat right
 
 /// @deprecated as of v3.x with no replacement
 
-$custom-select-focus-border-color: $input-focus-border-color !default;
+$custom-select-focus-border-color: if(
+	variable-exists(input-focus-border-color),
+	$input-focus-border-color,
+	clay-lighten($component-active-bg, 25%)
+) !default;
 
 /// @deprecated as of v3.x with no replacement
 
-$custom-select-focus-width: $input-focus-width !default;
+$custom-select-focus-width: if(
+	variable-exists(input-focus-width),
+	$input-focus-width,
+	0.2rem
+) !default;
 
 /// @deprecated as of v3.x with no replacement
 
 $custom-select-focus-box-shadow: 0 0 0 $custom-select-focus-width
-	$input-btn-focus-color !default;
+	$custom-select-focus-border-color !default;
 
 // Custom Select Disabled
 
@@ -623,37 +700,69 @@ $custom-select-feedback-icon-size: 18px 18px !default;
 
 /// @deprecated as of v3.x with no replacement
 
-$custom-select-font-size-lg: $input-font-size-lg !default;
+$custom-select-font-size-lg: if(
+	variable-exists(input-font-size-lg),
+	$input-font-size-lg,
+	$font-size-lg
+) !default;
 
 /// @deprecated as of v3.x with no replacement
 
-$custom-select-height-lg: $input-height-lg !default;
+$custom-select-height-lg: if(
+	variable-exists(input-height-lg),
+	$input-height-lg,
+	3rem
+) !default;
 
 /// @deprecated as of v3.x with no replacement
 
-$custom-select-padding-x-lg: $input-padding-x-lg !default;
+$custom-select-padding-x-lg: if(
+	variable-exists(input-padding-x-lg),
+	$input-padding-x-lg,
+	1rem
+) !default;
 
 /// @deprecated as of v3.x with no replacement
 
-$custom-select-padding-y-lg: $input-padding-y-lg !default;
+$custom-select-padding-y-lg: if(
+	variable-exists(input-padding-y-lg),
+	$input-padding-y-lg,
+	0.5rem
+) !default;
 
 // Custom Select Sm
 
 /// @deprecated as of v3.x with no replacement
 
-$custom-select-font-size-sm: $input-font-size-sm !default;
+$custom-select-font-size-sm: if(
+	variable-exists(input-font-size-sm),
+	$input-font-size-sm,
+	$font-size-sm
+) !default;
 
 /// @deprecated as of v3.x with no replacement
 
-$custom-select-height-sm: $input-height-sm !default;
+$custom-select-height-sm: if(
+	variable-exists(input-height-sm),
+	$input-height-sm,
+	1.9375rem
+) !default;
 
 /// @deprecated as of v3.x with no replacement
 
-$custom-select-padding-x-sm: $input-padding-x-sm !default;
+$custom-select-padding-x-sm: if(
+	variable-exists(input-padding-x-sm),
+	$input-padding-x-sm,
+	0.5rem
+) !default;
 
 /// @deprecated as of v3.x with no replacement
 
-$custom-select-padding-y-sm: $input-padding-y-sm !default;
+$custom-select-padding-y-sm: if(
+	variable-exists(input-padding-y-sm),
+	$input-padding-y-sm,
+	0.25rem
+) !default;
 
 // Custom Range
 
@@ -708,11 +817,19 @@ $custom-range-thumb-height: $custom-range-thumb-width !default;
 /// @deprecated as of v3.x with no replacement
 
 $custom-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg,
-	$input-focus-box-shadow !default;
+	if(
+		variable-exists(input-focus-box-shadow),
+		$input-focus-box-shadow,
+		$component-focus-box-shadow
+	) !default;
 
 /// @deprecated as of v3.x with no replacement
 
-$custom-range-thumb-focus-box-shadow-width: $input-focus-width !default;
+$custom-range-thumb-focus-box-shadow-width: if(
+	variable-exists(input-focus-width),
+	$input-focus-width,
+	0.2rem
+) !default;
 
 /// @deprecated as of v3.x with no replacement
 
@@ -726,35 +843,63 @@ $custom-range-thumb-disabled-bg: $gray-500 !default;
 
 /// @deprecated as of v3.x with no replacement
 
-$custom-file-bg: $input-bg !default;
+$custom-file-bg: if(variable-exists(input-bg), $input-bg, $white) !default;
 
 /// @deprecated as of v3.x with no replacement
 
-$custom-file-border-color: $input-border-color !default;
+$custom-file-border-color: if(
+	variable-exists(input-border-color),
+	$input-border-color,
+	$gray-400
+) !default;
 
 /// @deprecated as of v3.x with no replacement
 
-$custom-file-border-width: $input-border-width !default;
+$custom-file-border-width: if(
+	variable-exists(input-border-width),
+	$input-border-width,
+	0.0625rem
+) !default;
 
 /// @deprecated as of v3.x with no replacement
 
-$custom-file-border-radius: $input-border-radius !default;
+$custom-file-border-radius: if(
+	variable-exists(input-border-radius),
+	$input-border-radius,
+	$border-radius
+) !default;
 
 /// @deprecated as of v3.x with no replacement
 
-$custom-file-box-shadow: $input-box-shadow !default;
+$custom-file-box-shadow: if(
+	variable-exists(input-box-shadow),
+	$input-box-shadow,
+	inset 0 1px 1px rgba($black, 0.075)
+) !default;
 
 /// @deprecated as of v3.x with no replacement
 
-$custom-file-color: $input-color !default;
+$custom-file-color: if(
+	variable-exists(input-color),
+	$input-color,
+	$gray-700
+) !default;
 
 /// @deprecated as of v3.x with no replacement
 
-$custom-file-font-family: $input-font-family !default;
+$custom-file-font-family: if(
+	variable-exists(input-font-family),
+	$input-font-family,
+	null
+) !default;
 
 /// @deprecated as of v3.x with no replacement
 
-$custom-file-font-weight: $input-font-weight !default;
+$custom-file-font-weight: if(
+	variable-exists(input-font-weight),
+	$input-font-weight,
+	$font-weight-base
+) !default;
 
 /// @deprecated as of v3.x with no replacement
 
@@ -762,35 +907,67 @@ $custom-file-height-inner: 36px !default;
 
 /// @deprecated as of v3.x with no replacement
 
-$custom-file-height: $input-height !default;
+$custom-file-height: if(
+	variable-exists(input-height),
+	$input-height,
+	2.375rem
+) !default;
 
 /// @deprecated as of v3.x with no replacement
 
-$custom-file-line-height: $input-line-height !default;
+$custom-file-line-height: if(
+	variable-exists(input-line-height),
+	$input-line-height,
+	$line-height-base
+) !default;
 
 /// @deprecated as of v3.x with no replacement
 
-$custom-file-padding-x: $input-padding-x !default;
+$custom-file-padding-x: if(
+	variable-exists(input-padding-x),
+	$input-padding-x,
+	0.75rem
+) !default;
 
 /// @deprecated as of v3.x with no replacement
 
-$custom-file-padding-y: $input-padding-y !default;
+$custom-file-padding-y: if(
+	variable-exists(input-padding-y),
+	$input-padding-y,
+	0.375rem
+) !default;
 
 /// @deprecated as of v3.x with no replacement
 
-$custom-file-focus-border-color: $input-focus-border-color !default;
+$custom-file-focus-border-color: if(
+	variable-exists(input-focus-border-color),
+	$input-focus-border-color,
+	clay-lighten($component-active-bg, 25%)
+) !default;
 
 /// @deprecated as of v3.x with no replacement
 
-$custom-file-focus-box-shadow: $input-focus-box-shadow !default;
+$custom-file-focus-box-shadow: if(
+	variable-exists(input-focus-box-shadow),
+	$input-focus-box-shadow,
+	$component-focus-box-shadow
+) !default;
 
 /// @deprecated as of v3.x with no replacement
 
-$custom-file-disabled-bg: $input-disabled-bg !default;
+$custom-file-disabled-bg: if(
+	variable-exists(input-disabled-bg),
+	$input-disabled-bg,
+	$gray-200
+) !default;
 
 /// @deprecated as of v3.x with no replacement
 
-$custom-file-button-bg: $input-group-addon-bg !default;
+$custom-file-button-bg: if(
+	variable-exists(input-group-addon-bg),
+	$input-group-addon-bg,
+	$gray-200
+) !default;
 
 /// @deprecated as of v3.x with no replacement
 

package/src/scss/variables/_date-picker.scss

@@ -32,7 +32,7 @@ $date-picker-nav-btn: map-deep-merge(
 		color: $gray-600,
 		transition: $component-transition,
 		hover-bg: $gray-200,
-		focus-box-shadow: $input-btn-focus-box-shadow,
+		focus-box-shadow: $component-focus-box-shadow,
 		disabled-bg: transparent,
 		disabled-box-shadow: none,
 		disabled-color: $gray-600,
@@ -120,7 +120,7 @@ $date-picker-day: map-deep-merge(
 // Date Picker Calendar
 
 $date-picker-calendar-container: () !default;
-$date-picker-calendar-container: map-deep-merge(
+$date-picker-calendar-container: map-merge(
 	(
 		float: left,
 		min-width: 100%,
@@ -129,7 +129,7 @@ $date-picker-calendar-container: map-deep-merge(
 );
 
 $date-picker-calendar-header-container: () !default;
-$date-picker-calendar-header-container: map-deep-merge(
+$date-picker-calendar-header-container: map-merge(
 	(
 		padding-bottom: 1rem,
 		padding-left: 1rem,
@@ -140,7 +140,7 @@ $date-picker-calendar-header-container: map-deep-merge(
 );
 
 $date-picker-calendar-body-container: () !default;
-$date-picker-calendar-body-container: map-deep-merge(
+$date-picker-calendar-body-container: map-merge(
 	(
 		padding-left: 1rem,
 		padding-right: 1rem,
@@ -150,7 +150,7 @@ $date-picker-calendar-body-container: map-deep-merge(
 );
 
 $date-picker-calendar-footer-container: () !default;
-$date-picker-calendar-footer-container: map-deep-merge(
+$date-picker-calendar-footer-container: map-merge(
 	(
 		border-color: $gray-400,
 		border-style: solid,
@@ -201,7 +201,7 @@ $date-picker-date: map-deep-merge(
 		cursor: $link-cursor,
 		position: relative,
 		hover-bg: $gray-200,
-		focus-box-shadow: $input-btn-focus-box-shadow,
+		focus-box-shadow: $component-focus-box-shadow,
 		focus-outline: 0,
 		active-bg: $component-active-bg,
 		active-color: $component-active-color,

package/src/scss/variables/_drilldown.scss

@@ -1,7 +1,11 @@
 $drilldown-inner-transition: height 0.25s ease !default;
 
 $drilldown-transition: all 0.25s ease !default;
-$drilldown-width: $dropdown-max-width !default;
+$drilldown-width: if(
+	variable-exists(dropdown-max-width),
+	$dropdown-max-width,
+	260px
+) !default;
 
 $drilldown-inline-scroller-max-height: none !default;