@clayui/css 3.52.0 → 3.55.0

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;
@@ -335,7 +409,7 @@ $form-control-inset: () !default;
 $form-control-inset: map-deep-merge(
 	(
 		background-color: transparent,
-		border-width: 0,
+		border-width: 0px,
 		color: $input-color,
 		flex-grow: 1,
 		margin-bottom: $form-control-inset-margin-y,

package/src/scss/variables/_globals.scss

@@ -243,7 +243,7 @@ $border-radius-sm: 0.2rem !default;
 
 $rounded-border-radius: $border-radius !default;
 $rounded-circle-border-radius: 5000px !default;
-$rounded-0-border-radius: 0 !default;
+$rounded-0-border-radius: 0px !default;
 $rounded-pill: 50rem !default;
 
 $box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075) !default;
@@ -496,7 +496,7 @@ $h6: map-deep-merge(
 
 // Headings h1-h6
 
-$headings-margin-bottom: $spacer * 0.5 !default;
+$headings-margin-bottom: 0.5rem !default;
 $headings-font-family: null !default;
 $headings-font-weight: 500 !default;
 $headings-line-height: 1.2 !default;

package/src/scss/variables/_links.scss

@@ -264,7 +264,7 @@ $component-action: map-deep-merge(
 		background-color: transparent,
 		border-color: transparent,
 		border-radius: $border-radius,
-		border-width: 0,
+		border-width: 0px,
 		color: $secondary,
 		display: inline-flex,
 		height: map-get($link-monospaced, height),

package/src/scss/variables/_list-group.scss

@@ -313,8 +313,8 @@ $list-group-notification-item-primary: map-deep-merge(
 	(
 		border-left-color: theme-color-level(primary, -9),
 		border-left-width: 0.5rem,
-		border-bottom-left-radius: 0,
-		border-top-left-radius: 0,
+		border-bottom-left-radius: 0px,
+		border-top-left-radius: 0px,
 		active-border-left-color: theme-color-level(primary, -9),
 	),
 	$list-group-notification-item-primary

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/_multi-step-nav.scss

@@ -5,7 +5,7 @@ $multi-step-nav-padding-y: 0 !default;
 $multi-step-icon-bg: $gray-200 !default;
 $multi-step-icon-border-color: null !default;
 $multi-step-icon-border-style: null !default;
-$multi-step-icon-border-width: 0 !default;
+$multi-step-icon-border-width: 0px !default;
 $multi-step-icon-color: rgba($black, 0.5) !default;
 $multi-step-icon-cursor: $link-cursor !default;
 $multi-step-icon-border-radius: $border-radius !default;

package/src/scss/variables/_navbar.scss

@@ -2,8 +2,8 @@ $enable-scaling-navbar: $enable-scaling-components !default;
 
 $navbar-border-radius: null !default;
 $navbar-font-size: null !default;
-$navbar-padding-x: $spacer !default;
-$navbar-padding-y: $spacer * 0.5 !default;
+$navbar-padding-x: 1rem !default;
+$navbar-padding-y: 0.5rem !default;
 
 $navbar-nav-link-padding-x: 0.5rem !default;
 

package/src/scss/variables/_navs.scss

@@ -157,7 +157,7 @@ $nav-item: map-deep-merge(
 // .nav-divider
 
 $nav-divider-color: $gray-600 !default;
-$nav-divider-margin-y: $spacer * 0.5 !default;
+$nav-divider-margin-y: 0.5rem !default;
 
 $nav-divider: () !default;
 $nav-divider: map-deep-merge(

package/src/scss/variables/_pagination.scss

@@ -53,7 +53,7 @@ $pagination-item: map-deep-merge(
 
 /// @deprecated as of v2 use the Sass map `$pagination-link` instead
 
-$pagination-link-border-radius: 0 !default;
+$pagination-link-border-radius: 0px !default;
 
 /// @deprecated as of v2 use the Sass map `$pagination-link` instead
 

package/src/scss/variables/_panels.scss

@@ -47,7 +47,8 @@ $panel-header-link: map-deep-merge(
 		color: inherit,
 		display: block,
 		text-decoration: $panel-header-link-text-decoration,
-		transition: border-color 0.1s ease#{','} border-radius 0.5s ease,
+		transition: #{border-color 0.1s ease,
+		border-radius 0.5s ease},
 		hover: (
 			color: inherit,
 			text-decoration: $panel-header-link-hover-text-decoration,
@@ -185,12 +186,12 @@ $panel-unstyled: () !default;
 $panel-unstyled: map-deep-merge(
 	(
 		background-color: transparent,
-		border-radius: 0,
-		border-width: 0,
+		border-radius: 0px,
+		border-width: 0px,
 		margin-bottom: 1.5rem,
 		header: (
 			border-color: $gray-500,
-			border-radius: 0,
+			border-radius: 0px,
 			border-style: solid,
 			border-width: 0 0 1px 0,
 			padding-left: 0,

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;

package/src/scss/variables/_range.scss

@@ -20,7 +20,7 @@ $clay-range-input-group-text: () !default;
 $clay-range-input-group-text: map-deep-merge(
 	(
 		bg: transparent,
-		border-width: 0,
+		border-width: 0px,
 		color: $body-color,
 		font-size: 0.875rem,
 		font-weight: $font-weight-semi-bold,
@@ -58,7 +58,7 @@ $clay-range-input: map-deep-merge(
 		thumb-appearance: none,
 		thumb-bg: $white,
 		thumb-border-radius: 100px,
-		thumb-border-width: 0,
+		thumb-border-width: 0px,
 		thumb-box-shadow: 0 1px 5px -1px rgba(0, 0, 0, 0.3),
 		thumb-height: 1.5rem,
 		thumb-width: 1.5rem,

package/src/scss/variables/_sheets.scss

@@ -212,7 +212,7 @@ $sheet-dataset-content: () !default;
 $sheet-dataset-content-sheet-header: () !default;
 $sheet-dataset-content-sheet-header: map-merge(
 	(
-		border-width: 0,
+		border-width: 0px,
 		margin: -1.5rem -1.5rem 1.5rem,
 		padding: 1rem 1.5rem,
 	),

package/src/scss/variables/_tables.scss

@@ -68,8 +68,8 @@ $table-cell-expand-smallest-width: 10% !default;
 // TH
 
 $table-head-bg: $white !default;
-$table-head-border-bottom-width: 2 * $table-border-width !default;
-$table-head-border-top-width: 0 !default;
+$table-head-border-bottom-width: calc(2 * #{$table-border-width}) !default;
+$table-head-border-top-width: 0px !default;
 $table-head-color: $gray-700 !default;
 $table-head-font-size: null !default;
 $table-head-font-weight: null !default;
@@ -97,8 +97,8 @@ $c-table-tbody: () !default;
 // TD
 
 $table-data-border-bottom-width: $table-border-width !default;
-$table-data-border-left-width: 0 !default;
-$table-data-border-right-width: 0 !default;
+$table-data-border-left-width: 0px !default;
+$table-data-border-right-width: 0px !default;
 $table-data-border-top-width: $table-border-width !default;
 
 $table-data-border-color: $table-border-color !default;

package/src/scss/variables/_tbar.scss

@@ -44,8 +44,8 @@ $tbar-stacked: map-deep-merge(
 		),
 		btn-monospaced: (
 			border-color: transparent,
-			border-radius: 0,
-			border-width: 0,
+			border-radius: 0px,
+			border-width: 0px,
 			color: inherit,
 			height: 2.5rem,
 			margin-bottom: 0,
@@ -58,12 +58,12 @@ $tbar-stacked: map-deep-merge(
 			position: relative,
 			width: 2.5rem,
 			focus: (
-				box-shadow: inset 0 0 0 0.125rem $primary-l1#{','} inset 0 0 0 0.25rem
-					$white,
+				box-shadow: #{inset 0 0 0 0.125rem $primary-l1,
+				inset 0 0 0 0.25rem $white},
 			),
 			active-focus: (
-				box-shadow: inset 0 0 0 0.125rem $primary-l1#{','} inset 0 0 0 0.25rem
-					$white,
+				box-shadow: #{inset 0 0 0 0.125rem $primary-l1,
+				inset 0 0 0 0.25rem $white},
 			),
 		),
 	),
@@ -136,7 +136,8 @@ $tbar-light: () !default;
 $tbar-light: map-deep-merge(
 	(
 		background-color: $white,
-		box-shadow: inset 1px 0 0 0 $gray-200#{','} inset -1px 0 0 0 $gray-200,
+		box-shadow: #{inset 1px 0 0 0 $gray-200,
+		inset -1px 0 0 0 $gray-200},
 		color: $secondary,
 		divider-before: (
 			background-color: $gray-200,
@@ -167,8 +168,8 @@ $tbar-dark-d1: () !default;
 $tbar-dark-d1: map-deep-merge(
 	(
 		background-color: $dark-d1,
-		box-shadow: inset 1px 0 0 0 rgba($white, 0.06) #{','} inset -1px 0 0 0
-			rgba($white, 0.06),
+		box-shadow: #{inset 1px 0 0 0 rgba($white, 0.06),
+		inset -1px 0 0 0 rgba($white, 0.06)},
 		color: $gray-500,
 		divider-before: (
 			background-color: rgba($white, 0.06),
@@ -209,8 +210,8 @@ $tbar-dark-l2: () !default;
 $tbar-dark-l2: map-deep-merge(
 	(
 		background-color: $dark-l2,
-		box-shadow: inset 1px 0 0 0 rgba($white, 0.06) #{','} inset -1px 0 0 0
-			rgba($white, 0.06),
+		box-shadow: #{inset 1px 0 0 0 rgba($white, 0.06),
+		inset -1px 0 0 0 rgba($white, 0.06)},
 		border-color: rgba($white, 0.06),
 		color: $gray-500,
 		divider-before: (
@@ -369,8 +370,8 @@ $subnav-tbar-primary: map-deep-merge(
 		padding-y: 0.625rem,
 		item-justify-content: flex-start,
 		item-padding-x: 0.25rem,
-		link-monospaced-border-radius: 0,
-		link-monospaced-border-width: 0,
+		link-monospaced-border-radius: 0px,
+		link-monospaced-border-width: 0px,
 		link-monospaced-margin-y: -0.625rem,
 		link-monospaced-size: 3rem,
 		component-link: $subnav-tbar-primary-component-link,

package/src/scss/variables/_time.scss

@@ -99,7 +99,7 @@ $clay-time-inner-spin-btn: map-deep-merge(
 	(
 		align-items: center,
 		border-radius: map-get($clay-time-inner-spin, border-radius),
-		border-width: 0,
+		border-width: 0px,
 		display: inline-flex,
 		font-size: 8px,
 		height: auto,

package/src/scss/variables/_type.scss

@@ -52,7 +52,7 @@ $c-kbd: map-deep-merge(
 $c-kbd-c-kbd: () !default;
 $c-kbd-c-kbd: map-merge(
 	(
-		border-width: 0,
+		border-width: 0px,
 		font-size: inherit,
 		font-weight: inherit,
 		height: auto,
@@ -74,7 +74,7 @@ $c-kbd-monospaced: map-deep-merge(
 $c-kbd-inline: () !default;
 $c-kbd-inline: map-deep-merge(
 	(
-		border-width: 0,
+		border-width: 0px,
 		font-weight: $font-weight-light,
 		height: auto,
 		line-height: inherit,

package/src/scss/variables/_utilities.scss

@@ -34,7 +34,7 @@ $close: map-deep-merge(
 		appearance: none,
 		background-color: transparent,
 		border-radius: $border-radius-sm,
-		border-width: 0,
+		border-width: 0px,
 		color: $close-color,
 		cursor: $link-cursor,
 		display: inline-flex,