@clayui/css 3.78.0 → 3.82.0

package/src/scss/variables/_tbar.scss

@@ -10,39 +10,43 @@ $tbar-stacked: map-deep-merge(
 		height: 100%,
 		padding-bottom: 0.5rem,
 		padding-top: 0.5rem,
-		nav: (
+		tbar-nav: (
 			flex-direction: column,
 			min-width: 0,
 		),
-		item: (
+		tbar-item: (
 			align-items: center,
 			justify-content: flex-start,
 			padding-left: 0,
 			padding-right: 0,
 		),
-		item-expand: (
+		tbar-item-expand: (
 			flex-shrink: 0,
 			min-width: 0,
 		),
-		divider-before: (
-			background-color: $body-color,
-			content: '',
-			display: block,
-			height: 1px,
-			margin-bottom: 0.25rem,
-			margin-top: 0.25rem,
-			width: 2.5rem,
+		tbar-divider-before: (
+			before: (
+				background-color: $body-color,
+				content: '',
+				display: block,
+				height: 1px,
+				margin-bottom: 0.25rem,
+				margin-top: 0.25rem,
+				width: 2.5rem,
+			),
 		),
-		divider-after: (
-			background-color: $body-color,
-			content: '',
-			display: block,
-			height: 1px,
-			margin-bottom: 0.25rem,
-			margin-top: 0.25rem,
-			width: 2.5rem,
+		tbar-divider-after: (
+			after: (
+				background-color: $body-color,
+				content: '',
+				display: block,
+				height: 1px,
+				margin-bottom: 0.25rem,
+				margin-top: 0.25rem,
+				width: 2.5rem,
+			),
 		),
-		btn-monospaced: (
+		tbar-btn-monospaced: (
 			border-color: transparent,
 			border-radius: 0px,
 			border-width: 0px,
@@ -76,7 +80,9 @@ $tbar-inline-xs-down: () !default;
 $tbar-inline-xs-down: map-deep-merge(
 	(
 		breakpoint-down: nth(map-keys($grid-breakpoints), 1),
-		item-padding-left: 0,
+		tbar-item: (
+			padding-left: 0,
+		),
 	),
 	$tbar-inline-xs-down
 );
@@ -85,7 +91,9 @@ $tbar-inline-sm-down: () !default;
 $tbar-inline-sm-down: map-deep-merge(
 	(
 		breakpoint-down: nth(map-keys($grid-breakpoints), 2),
-		item-padding-left: 0,
+		tbar-item: (
+			padding-left: 0,
+		),
 	),
 	$tbar-inline-sm-down
 );
@@ -94,7 +102,9 @@ $tbar-inline-md-down: () !default;
 $tbar-inline-md-down: map-deep-merge(
 	(
 		breakpoint-down: nth(map-keys($grid-breakpoints), 3),
-		item-padding-left: 0,
+		tbar-item: (
+			padding-left: 0,
+		),
 	),
 	$tbar-inline-md-down
 );
@@ -103,7 +113,9 @@ $tbar-inline-lg-down: () !default;
 $tbar-inline-lg-down: map-deep-merge(
 	(
 		breakpoint-down: nth(map-keys($grid-breakpoints), 4),
-		item-padding-left: 0,
+		tbar-item: (
+			padding-left: 0,
+		),
 	),
 	$tbar-inline-lg-down
 );
@@ -112,7 +124,9 @@ $tbar-inline-xl-down: () !default;
 $tbar-inline-xl-down: map-deep-merge(
 	(
 		breakpoint-down: nth(map-keys($grid-breakpoints), 5),
-		item-padding-left: 0,
+		tbar-item: (
+			padding-left: 0,
+		),
 	),
 	$tbar-inline-xl-down
 );
@@ -139,13 +153,17 @@ $tbar-light: map-deep-merge(
 		box-shadow: #{inset 1px 0 0 0 $gray-200,
 		inset -1px 0 0 0 $gray-200},
 		color: $secondary,
-		divider-before: (
-			background-color: $gray-200,
+		tbar-divider-before: (
+			before: (
+				background-color: $gray-200,
+			),
 		),
-		divider-after: (
-			background-color: $gray-200,
+		tbar-divider-after: (
+			after: (
+				background-color: $gray-200,
+			),
 		),
-		btn-monospaced: (
+		tbar-btn-monospaced: (
 			hover: (
 				color: $dark,
 			),
@@ -171,13 +189,17 @@ $tbar-dark-d1: map-deep-merge(
 		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),
+		tbar-divider-before: (
+			before: (
+				background-color: rgba($white, 0.06),
+			),
 		),
-		divider-after: (
-			background-color: rgba($white, 0.06),
+		tbar-divider-after: (
+			after: (
+				background-color: rgba($white, 0.06),
+			),
 		),
-		btn-monospaced: (
+		tbar-btn-monospaced: (
 			hover: (
 				color: $white,
 			),
@@ -191,15 +213,17 @@ $tbar-dark-d1: map-deep-merge(
 				background-color: rgba($white, 0.06),
 				color: $white,
 			),
-			active-class-after: (
-				background-color: $primary-l1,
-				bottom: 0,
-				content: '',
-				display: block,
-				left: 0,
-				position: absolute,
-				top: 0,
-				width: 0.25rem,
+			active-class: (
+				after: (
+					background-color: $primary-l1,
+					bottom: 0,
+					content: '',
+					display: block,
+					left: 0,
+					position: absolute,
+					top: 0,
+					width: 0.25rem,
+				),
 			),
 		),
 	),
@@ -214,13 +238,17 @@ $tbar-dark-l2: map-deep-merge(
 		inset -1px 0 0 0 rgba($white, 0.06)},
 		border-color: rgba($white, 0.06),
 		color: $gray-500,
-		divider-before: (
-			background-color: rgba($white, 0.06),
+		tbar-divider-before: (
+			before: (
+				background-color: rgba($white, 0.06),
+			),
 		),
-		divider-after: (
-			background-color: rgba($white, 0.06),
+		tbar-divider-after: (
+			after: (
+				background-color: rgba($white, 0.06),
+			),
 		),
-		btn-monospaced: (
+		tbar-btn-monospaced: (
 			hover: (
 				color: $white,
 			),
@@ -259,8 +287,13 @@ $subnav-tbar-component-link: () !default;
 $subnav-tbar-component-link: map-deep-merge(
 	(
 		color: $link-color,
-		hover-color: $link-hover-color,
 		font-weight: $font-weight-semi-bold,
+		hover: (
+			color: $link-hover-color,
+		),
+		disabled: (
+			box-shadow: none,
+		),
 	),
 	$subnav-tbar-component-link
 );
@@ -281,26 +314,49 @@ $subnav-tbar: () !default;
 $subnav-tbar: map-deep-merge(
 	(
 		font-size: 0.875rem,
-		section-text-align: left,
-		strong-font-weight: $font-weight-semi-bold,
-		item-padding-x: 0.5rem,
-		btn-height: 1.5rem,
-		btn-line-height: 1,
-		btn-margin-y: 0.125rem,
-		btn-padding-y: 0,
-		btn-monospaced-margin-y: 0.125rem,
-		btn-monospaced-padding: 0.25rem,
+		tbar-section: (
+			text-align: left,
+		),
+		strong: (
+			font-weight: $font-weight-semi-bold,
+		),
+		tbar-item: (
+			padding-left: 0.5rem,
+			padding-right: 0.5rem,
+		),
+		tbar-btn: (
+			height: 1.5rem,
+			line-height: 1,
+			margin-bottom: 0.125rem,
+			margin-top: 0.125rem,
+			padding-left: 0,
+			padding-right: 0,
+		),
+		tbar-btn-monospaced: (
+			margin-bottom: 0.125rem,
+			margin-top: 0.125rem,
+			padding: 0.25rem,
+		),
 		component-link: $subnav-tbar-component-link,
 		component-title: $subnav-tbar-component-title,
 		component-text: $subnav-tbar-component-text,
 		component-label: (
 			font-weight: $font-weight-normal,
 		),
-		link-margin-y: 0.125rem,
-		link-padding-x: 0.25rem,
-		link-padding-y: 0.09375rem,
-		link-monospaced-margin-y: 0.125rem,
-		link-monospaced-size: 1.5rem,
+		tbar-link: (
+			margin-bottom: 0.125rem,
+			margin-top: 0.125rem,
+			padding-bottom: 0.09375rem,
+			padding-left: 0.25rem,
+			padding-right: 0.25rem,
+			padding-top: 0.09375rem,
+		),
+		tbar-link-monospaced: (
+			height: 1.5rem,
+			margin-bottom: 0.125rem,
+			margin-top: 0.125rem,
+			width: 1.5rem,
+		),
 	),
 	$subnav-tbar
 );
@@ -310,9 +366,15 @@ $subnav-tbar: map-deep-merge(
 $subnav-tbar-light: () !default;
 $subnav-tbar-light: map-deep-merge(
 	(
-		bg-color: $light,
-		color: $navbar-light-color,
-		padding-y: 0.125rem,
+		background-color: setter(map-get($subnav-tbar-light, bg-color), $light),
+		color:
+			if(
+				variable-exists(navbar-light-color),
+				$navbar-light-color,
+				rgba($black, 0.5)
+			),
+		padding-bottom: 0.125rem,
+		padding-top: 0.125rem,
 	),
 	$subnav-tbar-light
 );
@@ -323,11 +385,15 @@ $subnav-tbar-primary-component-link: () !default;
 $subnav-tbar-primary-component-link: map-deep-merge(
 	(
 		color: $gray-900,
-		hover-color: $gray-900,
-		disabled-color: $gray-600,
-		disabled-cursor: $disabled-cursor,
-		disabled-opacity: $component-disabled-opacity,
-		disabled-text-decoration: none,
+		hover: (
+			color: $gray-900,
+		),
+		disabled: (
+			color: $gray-600,
+			cursor: $disabled-cursor,
+			opacity: $component-disabled-opacity,
+			text-decoration: none,
+		),
 	),
 	$subnav-tbar-primary-component-link
 );
@@ -335,9 +401,13 @@ $subnav-tbar-primary-component-link: map-deep-merge(
 $subnav-tbar-primary-component-label-close: () !default;
 $subnav-tbar-primary-component-label-close: map-deep-merge(
 	(
-		focus-color: inherit,
-		disabled-color: $gray-600,
-		disabled-opacity: $component-disabled-opacity,
+		focus: (
+			color: inherit,
+		),
+		disabled: (
+			color: $gray-600,
+			opacity: $component-disabled-opacity,
+		),
 	),
 	$subnav-tbar-primary-component-label-close
 );
@@ -355,8 +425,10 @@ $subnav-tbar-primary-tbar-label-size: map-deep-merge(
 	(
 		font-size: 0.75rem,
 		margin-right: 0,
-		padding-x: 0.625rem,
-		padding-y: 0.3125rem,
+		padding-bottom: 0.3125rem,
+		padding-left: 0.625rem,
+		padding-right: 0.625rem,
+		padding-top: 0.3125rem,
 		text-transform: none,
 	),
 	$subnav-tbar-primary-tbar-label-size
@@ -365,18 +437,28 @@ $subnav-tbar-primary-tbar-label-size: map-deep-merge(
 $subnav-tbar-primary: () !default;
 $subnav-tbar-primary: map-deep-merge(
 	(
-		bg-color: $primary-l2,
-		padding-x: 0.25rem,
-		padding-y: 0.625rem,
-		item-justify-content: flex-start,
-		item-padding-x: 0.25rem,
-		link-monospaced-border-radius: 0px,
-		link-monospaced-border-width: 0px,
-		link-monospaced-margin-y: -0.625rem,
-		link-monospaced-size: 3rem,
+		background-color:
+			setter(map-get($subnav-tbar-primary, bg-color), $primary-l2),
+		padding-bottom: 0.625rem,
+		padding-left: 0.25rem,
+		padding-right: 0.25rem,
+		padding-top: 0.625rem,
+		tbar-item: (
+			justify-content: flex-start,
+			padding-left: 0.25rem,
+			padding-right: 0.25rem,
+		),
+		tbar-link-monospaced: (
+			border-radius: 0px,
+			border-width: 0px,
+			height: 3rem,
+			margin-bottom: -0.625rem,
+			margin-top: -0.625rem,
+			width: 3rem,
+		),
 		component-link: $subnav-tbar-primary-component-link,
 		component-label: $subnav-tbar-primary-component-label,
-		tbar-label-size: $subnav-tbar-primary-tbar-label-size,
+		tbar-label: $subnav-tbar-primary-tbar-label-size,
 	),
 	$subnav-tbar-primary
 );
@@ -394,7 +476,11 @@ $subnav-tbar-primary-disabled-component-label: map-deep-merge(
 $subnav-tbar-primary-disabled: () !default;
 $subnav-tbar-primary-disabled: map-deep-merge(
 	(
-		bg-color: clay-lighten(clay-desaturate($primary, 27.03), 37.06),
+		background-color:
+			setter(
+				map-get($subnav-tbar-primary-disabled, bg-color),
+				clay-lighten(clay-desaturate($primary, 27.03), 37.06)
+			),
 		color: #6c757d,
 		component-label: $subnav-tbar-primary-disabled-component-label,
 	),

package/src/scss/variables/_time.scss

@@ -56,9 +56,10 @@ $clay-time-ampm: map-deep-merge(
 );
 
 $clay-time-input-group-text: () !default;
-$clay-time-input-group-text: map-deep-merge(
+$clay-time-input-group-text: map-merge(
 	(
-		bg: transparent,
+		background-color:
+			setter(map-get($clay-time-input-group-text, bg), transparent),
 		border-color: transparent,
 		padding-bottom: 0,
 		padding-left: 0,
@@ -72,7 +73,7 @@ $clay-time-divider-margin-left: null !default;
 $clay-time-divider-margin-right: null !default;
 
 $clay-time-edit: () !default;
-$clay-time-edit: map-deep-merge(
+$clay-time-edit: map-merge(
 	(
 		display: flex,
 		flex-wrap: wrap,
@@ -84,7 +85,7 @@ $clay-time-edit: map-deep-merge(
 );
 
 $clay-time-inner-spin: () !default;
-$clay-time-inner-spin: map-deep-merge(
+$clay-time-inner-spin: map-merge(
 	(
 		border-color: $secondary-d1,
 		border-radius: 8px,

package/src/scss/variables/_toggle-switch.scss

@@ -1,5 +1,9 @@
 $toggle-switch-cursor: $link-cursor !default;
-$toggle-switch-font-weight: $input-label-font-weight !default;
+$toggle-switch-font-weight: if(
+	variable-exists(input-label-font-weight),
+	$input-label-font-weight,
+	null
+) !default;
 $toggle-switch-transition: background-color 100ms ease-in,
 	border-color 100ms ease-in, box-shadow 150ms ease-in-out,
 	color 100ms ease-in, left 100ms ease-in, right 100ms ease-in !default;
@@ -17,22 +21,22 @@ $toggle-switch-bar-height-mobile: $toggle-switch-bar-height !default;
 $toggle-switch-bar-width-mobile: $toggle-switch-bar-width !default;
 // must all be same units--end
 
-$toggle-switch-bar-bg: $input-group-addon-bg !default;
-$toggle-switch-bar-border-color: $input-group-addon-border-color !default;
+$toggle-switch-bar-bg: $gray-200 !default;
+$toggle-switch-bar-border-color: $gray-400 !default;
 $toggle-switch-bar-border-radius: 3px !default;
 $toggle-switch-bar-border-width: 1px !default;
-$toggle-switch-bar-focus-box-shadow: $input-btn-focus-box-shadow !default;
+$toggle-switch-bar-focus-box-shadow: $component-focus-box-shadow !default;
 $toggle-switch-bar-font-size: 0.75rem !default; // 12px
 $toggle-switch-bar-font-size-mobile: $toggle-switch-bar-font-size !default;
-$toggle-switch-bar-icon-color: $input-color !default;
+$toggle-switch-bar-icon-color: $gray-700 !default;
 
-$toggle-switch-button-bg: $input-bg !default;
-$toggle-switch-button-border-color: $input-group-addon-border-color !default;
+$toggle-switch-button-bg: $white !default;
+$toggle-switch-button-border-color: $gray-400 !default;
 $toggle-switch-button-border-radius: 3px 0 0 3px !default;
 $toggle-switch-button-border-width: 1px !default;
 $toggle-switch-button-font-size: $toggle-switch-bar-font-size !default;
 $toggle-switch-button-font-size-mobile: $toggle-switch-button-font-size !default; // null
-$toggle-switch-button-icon-color: $input-color !default;
+$toggle-switch-button-icon-color: $gray-700 !default;
 
 // See https://issues.liferay.com/browse/LPS-147457.
 
@@ -64,13 +68,21 @@ $toggle-switch-disabled-opacity: 0.4 !default;
 
 // Toggle Switch Label
 
-$toggle-switch-label-disabled-color: $input-label-disabled-color !default;
+$toggle-switch-label-disabled-color: if(
+	variable-exists(input-label-disabled-color),
+	$input-label-disabled-color,
+	$gray-600
+) !default;
 
 // Toggle Switch Text
 
 $toggle-switch-text-font-size: 0.75rem !default;
 
-$toggle-switch-text-disabled-color: $input-label-disabled-color !default;
+$toggle-switch-text-disabled-color: if(
+	variable-exists(input-label-disabled-color),
+	$input-label-disabled-color,
+	$gray-600
+) !default;
 
 // .toggle-switch
 

package/src/scss/variables/_utilities.scss

@@ -174,6 +174,21 @@ $inline-item: map-deep-merge(
 
 $page-header-bg: $gray-200 !default;
 
+// Clay Gap
+
+$c-gap: () !default;
+$c-gap: map-merge(
+	(
+		0: map-get($spacers, 0),
+		1: map-get($spacers, 1),
+		2: map-get($spacers, 2),
+		3: map-get($spacers, 3),
+		4: map-get($spacers, 4),
+		5: map-get($spacers, 5),
+	),
+	$c-gap
+);
+
 // Background
 
 $bg-theme-colors: () !default;
@@ -342,8 +357,8 @@ $border-theme-colors: map-deep-merge(
 
 // Display
 
-$displays: none, inline, inline-block, block, table, table-row, table-cell, flex,
-	inline-flex !default;
+$displays: none, inline, inline-block, block, grid, table, table-row, table-cell,
+	flex, inline-flex !default;
 
 // Overflow