@clayui/css 3.51.0 → 3.54.0

package/src/scss/mixins/_popovers.scss

@@ -2,6 +2,52 @@
 /// @group popovers
 ////
 
+/// A mixin to help create `.popover-header` variants.
+/// @param {Map} $map - A map of `key: value` pairs. The keys and value types are listed below:
+/// @example
+/// (
+/// 	enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
+/// 	// .popover-header
+/// 	before: (
+/// 		// .popover-header::before
+/// 	),
+/// 	after: (
+/// 		// .popover-header::after
+/// 	),
+/// 	empty: (
+/// 		// .popover-header:empty
+/// 	),
+/// 	close: (
+/// 		// .popover-header .close
+/// 	),
+/// )
+
+@mixin clay-popover-header-variant($map) {
+	@if (type-of($map) == 'map') {
+		$enabled: setter(map-get($map, enabled), true);
+
+		@if ($enabled) {
+			@include clay-css($map);
+
+			&::before {
+				@include clay-css(map-get($map, before));
+			}
+
+			&::after {
+				@include clay-css(map-get($map, after));
+			}
+
+			&:empty {
+				@include clay-css(map-get($map, empty));
+			}
+
+			.close {
+				@include clay-close(map-get($map, close));
+			}
+		}
+	}
+}
+
 /// A mixin to help create `.popover` variants.
 /// @param {Map} $map - A map of `key: value` pairs. The keys and value types are listed below:
 /// @example
@@ -35,6 +81,9 @@
 /// 	inline-scroller: (
 /// 		// .popover .inline-scroller
 /// 	),
+/// 	close: (
+/// 		// .popover .close
+/// 	),
 /// )
 
 @mixin clay-popover-variant($map) {
@@ -57,25 +106,9 @@
 			}
 
 			.popover-header {
-				@include clay-css(map-get($map, popover-header));
-
-				&::before {
-					@include clay-css(
-						map-deep-get($map, popover-header, before)
-					);
-				}
-
-				&::after {
-					@include clay-css(
-						map-deep-get($map, popover-header, after)
-					);
-				}
-
-				&:empty {
-					@include clay-css(
-						map-deep-get($map, popover-header, empty)
-					);
-				}
+				@include clay-popover-header-variant(
+					map-get($map, popover-header)
+				);
 			}
 
 			.popover-body {
@@ -85,6 +118,10 @@
 			.inline-scroller {
 				@include clay-css(map-get($map, inline-scroller));
 			}
+
+			.close {
+				@include clay-close(map-get($map, close));
+			}
 		}
 	}
 }

package/src/scss/variables/_forms.scss

@@ -142,6 +142,27 @@ $input-padding-y-lg: $input-btn-padding-y-lg !default;
 $input-font-size-lg-mobile: null !default;
 $input-height-lg-mobile: null !default;
 
+$input-lg: () !default;
+$input-lg: map-deep-merge(
+	(
+		border-radius: clay-enable-rounded($input-border-radius-lg),
+		font-size: $input-font-size-lg,
+		height: $input-height-lg,
+		line-height: $input-line-height-lg,
+		padding-bottom: $input-padding-y-lg,
+		padding-left: $input-padding-x-lg,
+		padding-right: $input-padding-x-lg,
+		padding-top: $input-padding-y-lg,
+		media-breakpoint-down: (
+			sm: (
+				font-size: $input-font-size-lg-mobile,
+				height: $input-height-lg-mobile,
+			),
+		),
+	),
+	$input-lg
+);
+
 // Input Sm (.form-control-sm)
 
 $input-border-radius-sm: $border-radius-sm !default;
@@ -154,6 +175,26 @@ $input-padding-y-sm: $input-btn-padding-y-sm !default;
 $input-font-size-sm-mobile: null !default;
 $input-height-sm-mobile: null !default;
 
+$input-sm: () !default;
+$input-sm: map-deep-merge(
+	(
+		border-radius: clay-enable-rounded($input-border-radius-sm),
+		font-size: $input-font-size-sm,
+		height: $input-height-sm,
+		line-height: $input-line-height-sm,
+		padding-bottom: $input-padding-y-sm,
+		padding-left: $input-padding-x-sm,
+		padding-right: $input-padding-x-sm,
+		padding-top: $input-padding-y-sm,
+		media-breakpoint-down: (
+			sm: (
+				height: $input-height-sm-mobile,
+			),
+		),
+	),
+	$input-sm
+);
+
 // Input Label (<label>)
 
 $input-label-color: null !default;
@@ -300,10 +341,43 @@ $input-plaintext-readonly: map-deep-merge(
 	$input-plaintext-readonly
 );
 
+// textarea.form-control, textarea.form-control-plaintext, .form-control.form-control-textarea
+
 $input-textarea-height: 150px !default;
+
+$input-textarea: () !default;
+$input-textarea: map-merge(
+	(
+		height: $input-textarea-height,
+		resize: vertical,
+	),
+	$input-textarea
+);
+
+// textarea.form-control-lg, .form-control-lg.form-control-textarea
+
 $input-textarea-height-lg: 190px !default;
+
+$input-textarea-lg: () !default;
+$input-textarea-lg: map-deep-merge(
+	(
+		height: $input-textarea-height-lg,
+	),
+	$input-textarea-lg
+);
+
+// textarea.form-control-sm, .form-control-sm.form-control-textarea
+
 $input-textarea-height-sm: 120px !default;
 
+$input-textarea-sm: () !default;
+$input-textarea-sm: map-deep-merge(
+	(
+		height: $input-textarea-height-sm,
+	),
+	$input-textarea-sm
+);
+
 // Form Control Label (Labels inside Form Control Tag Group)
 
 $form-control-label-size: () !default;

package/src/scss/variables/_management-bar.scss

@@ -76,8 +76,8 @@ $management-bar-primary: map-deep-merge(
 					color: $navbar-light-active-color,
 				),
 				disabled: (
-					disabled-color: $navbar-light-disabled-color,
-					disabled-opacity: 1,
+					color: $navbar-light-disabled-color,
+					opacity: 1,
 				),
 			),
 		),

package/src/scss/variables/_popovers.scss

@@ -106,6 +106,27 @@ $popover: map-deep-merge(
 	$popover
 );
 
+// Popovers
+
+$popovers: () !default;
+$popovers: map-deep-merge(
+	(
+		popover: $popover,
+		popover-secondary: (
+			box-shadow: 0 8px 16px 0 rgba($primary, 0.16),
+			popover-header: (
+				background-color: transparent,
+				border-color: transparent,
+				padding-bottom: 0,
+			),
+			close: (
+				color: $gray-600,
+			),
+		),
+	),
+	$popovers
+);
+
 // .popover-header
 
 $popover-header: () !default;
@@ -134,6 +155,16 @@ $popover-header: map-deep-merge(
 	$popover-header
 );
 
+// Popover Headers
+
+$popover-headers: () !default;
+$popover-headers: map-deep-merge(
+	(
+		popover-header: $popover-header,
+	),
+	$popover-headers
+);
+
 // .popover-body
 
 $popover-body: () !default;
@@ -149,6 +180,28 @@ $popover-body: map-merge(
 	$popover-body
 );
 
+// Popover Bodies
+
+$popover-bodies: () !default;
+$popover-bodies: map-deep-merge(
+	(
+		popover-body: $popover-body,
+	),
+	$popover-bodies
+);
+
+// Popover Widths
+
+$popover-widths: () !default;
+$popover-widths: map-deep-merge(
+	(
+		popover-width-lg: (
+			max-width: 421px,
+		),
+	),
+	$popover-widths
+);
+
 // .clay-popover-top, .clay-popover-top-left, .clay-popover-top-right
 
 $clay-popover-top: () !default;