@clayui/css 3.81.0 → 3.83.0

package/src/scss/variables/_progress-bars.scss

@@ -66,20 +66,36 @@ $progress-palette: () !default;
 $progress-palette: map-deep-merge(
 	(
 		success: (
-			bar-bg: $progress-bar-success-bg,
-			group-feedback-color: $progress-group-feedback-success-color,
+			progress-bar: (
+				background-color: $progress-bar-success-bg,
+			),
+			progress-group-feedback: (
+				color: $progress-group-feedback-success-color,
+			),
 		),
 		info: (
-			bar-bg: $progress-bar-info-bg,
-			group-feedback-color: $progress-group-feedback-info-color,
+			progress-bar: (
+				background-color: $progress-bar-info-bg,
+			),
+			progress-group-feedback: (
+				color: $progress-group-feedback-info-color,
+			),
 		),
 		warning: (
-			bar-bg: $progress-bar-warning-bg,
-			group-feedback-color: $progress-group-feedback-warning-color,
+			progress-bar: (
+				background-color: $progress-bar-warning-bg,
+			),
+			progress-group-feedback: (
+				color: $progress-group-feedback-warning-color,
+			),
 		),
 		danger: (
-			bar-bg: $progress-bar-danger-bg,
-			group-feedback-color: $progress-group-feedback-danger-color,
+			progress-bar: (
+				background-color: $progress-bar-danger-bg,
+			),
+			progress-group-feedback: (
+				color: $progress-group-feedback-danger-color,
+			),
 		),
 	),
 	$progress-palette

package/src/scss/variables/_sidebar.scss

@@ -77,6 +77,60 @@ $sidebar-list-group-sticker-size: map-deep-merge(
 	$sidebar-list-group-sticker-size
 );
 
+$sidebar: () !default;
+$sidebar: map-deep-merge(
+	(
+		height: 100%,
+		overflow: auto,
+		-webkit-overflow-scrolling: touch,
+		focus: (
+			box-shadow: $component-focus-inset-box-shadow,
+		),
+		sidebar-header: (
+			padding-bottom: $sidebar-padding-bottom,
+			padding-left: $sidebar-padding-left,
+			padding-right: $sidebar-padding-right,
+			padding-top: $sidebar-padding-top,
+			component-title: $sidebar-header-component-title,
+			component-subtitle: $sidebar-header-component-subtitle,
+		),
+		sidebar-footer: (
+			padding-bottom: $sidebar-padding-bottom,
+			padding-left: $sidebar-padding-left,
+			padding-right: $sidebar-padding-right,
+			padding-top: $sidebar-padding-top,
+		),
+		sidebar-body: (
+			overflow: auto,
+			-webkit-overflow-scrolling: touch,
+			padding-bottom: $sidebar-padding-bottom,
+			padding-left: $sidebar-padding-left,
+			padding-right: $sidebar-padding-right,
+			padding-top: $sidebar-padding-top,
+		),
+		sidebar-list-group: (
+			display: flex,
+			flex-direction: column,
+			font-size: $sidebar-list-group-font-size,
+			margin-bottom: 0,
+			padding-left: 0,
+			list-group-item: (
+				background-color: $sidebar-list-group-bg,
+				border-color: $sidebar-list-group-border-color,
+				padding: $sidebar-list-group-item-padding,
+			),
+			sticker: $sidebar-list-group-sticker-size,
+		),
+		sidebar-panel: (
+			margin-bottom: $sidebar-panel-margin-bottom,
+			position: relative,
+		),
+		sidebar-dt: $sidebar-dt,
+		sidebar-dd: $sidebar-dd,
+	),
+	$sidebar
+);
+
 // Sidebar Light
 
 $sidebar-light-navigation-bar: () !default;

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,14 +366,15 @@ $subnav-tbar: map-deep-merge(
 $subnav-tbar-light: () !default;
 $subnav-tbar-light: map-deep-merge(
 	(
-		bg-color: $light,
+		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-y: 0.125rem,
+		padding-bottom: 0.125rem,
+		padding-top: 0.125rem,
 	),
 	$subnav-tbar-light
 );
@@ -328,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
 );
@@ -340,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
 );
@@ -360,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
@@ -370,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
 );
@@ -399,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/_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, contents, table, table-row,
+	table-cell, flex, inline-flex !default;
 
 // Overflow