@clayui/css 3.159.0 → 3.161.0

package/src/scss/variables/_tbar.scss

@@ -10,20 +10,24 @@ $tbar-stacked: map-deep-merge(
 		height: 100%,
 		padding-bottom: 0.5rem,
 		padding-top: 0.5rem,
+
 		tbar-nav: (
 			flex-direction: column,
-			min-width: 0,
+			min-width: 0rem,
 		),
+
 		tbar-item: (
 			align-items: center,
 			justify-content: flex-start,
-			padding-left: 0,
-			padding-right: 0,
+			padding-left: 0rem,
+			padding-right: 0rem,
 		),
+
 		tbar-item-expand: (
 			flex-shrink: 0,
-			min-width: 0,
+			min-width: 0rem,
 		),
+
 		tbar-divider-before: (
 			before: (
 				background-color: $body-color,
@@ -35,6 +39,7 @@ $tbar-stacked: map-deep-merge(
 				width: 2.5rem,
 			),
 		),
+
 		tbar-divider-after: (
 			after: (
 				background-color: $body-color,
@@ -46,25 +51,28 @@ $tbar-stacked: map-deep-merge(
 				width: 2.5rem,
 			),
 		),
+
 		tbar-btn-monospaced: (
 			border-color: transparent,
 			border-radius: 0px,
 			border-width: 0px,
 			color: inherit,
 			height: 2.5rem,
-			margin-bottom: 0,
-			margin-top: 0,
+			margin-bottom: 0rem,
+			margin-top: 0rem,
 			overflow: visible,
-			padding-bottom: 0,
-			padding-left: 0,
-			padding-right: 0,
-			padding-top: 0,
+			padding-bottom: 0rem,
+			padding-left: 0rem,
+			padding-right: 0rem,
+			padding-top: 0rem,
 			position: relative,
 			width: 2.5rem,
+
 			focus: (
 				box-shadow: #{inset 0 0 0 0.125rem $primary-l0,
 				inset 0 0 0 0.25rem $white},
 			),
+
 			active-focus: (
 				box-shadow: #{inset 0 0 0 0.125rem $primary-l0,
 				inset 0 0 0 0.25rem $white},
@@ -79,9 +87,9 @@ $tbar-stacked: map-deep-merge(
 $tbar-inline-xs-down: () !default;
 $tbar-inline-xs-down: map-deep-merge(
 	(
-		breakpoint-down: nth(map-keys($grid-breakpoints), 1),
+		breakpoint-down: 'xs',
 		tbar-item: (
-			padding-left: 0,
+			padding-left: 0rem,
 		),
 	),
 	$tbar-inline-xs-down
@@ -90,9 +98,9 @@ $tbar-inline-xs-down: map-deep-merge(
 $tbar-inline-sm-down: () !default;
 $tbar-inline-sm-down: map-deep-merge(
 	(
-		breakpoint-down: nth(map-keys($grid-breakpoints), 2),
+		breakpoint-down: 'sm',
 		tbar-item: (
-			padding-left: 0,
+			padding-left: 0rem,
 		),
 	),
 	$tbar-inline-sm-down
@@ -101,9 +109,9 @@ $tbar-inline-sm-down: map-deep-merge(
 $tbar-inline-md-down: () !default;
 $tbar-inline-md-down: map-deep-merge(
 	(
-		breakpoint-down: nth(map-keys($grid-breakpoints), 3),
+		breakpoint-down: 'md',
 		tbar-item: (
-			padding-left: 0,
+			padding-left: 0rem,
 		),
 	),
 	$tbar-inline-md-down
@@ -112,9 +120,9 @@ $tbar-inline-md-down: map-deep-merge(
 $tbar-inline-lg-down: () !default;
 $tbar-inline-lg-down: map-deep-merge(
 	(
-		breakpoint-down: nth(map-keys($grid-breakpoints), 4),
+		breakpoint-down: 'lg',
 		tbar-item: (
-			padding-left: 0,
+			padding-left: 0rem,
 		),
 	),
 	$tbar-inline-lg-down
@@ -123,9 +131,9 @@ $tbar-inline-lg-down: map-deep-merge(
 $tbar-inline-xl-down: () !default;
 $tbar-inline-xl-down: map-deep-merge(
 	(
-		breakpoint-down: nth(map-keys($grid-breakpoints), 5),
+		breakpoint-down: 'xl',
 		tbar-item: (
-			padding-left: 0,
+			padding-left: 0rem,
 		),
 	),
 	$tbar-inline-xl-down
@@ -138,7 +146,7 @@ $component-tbar: map-deep-merge(
 	(
 		border-color: $gray-300,
 		border-style: solid,
-		border-width: 0 0 0.0625rem 0,
+		border-width: 0rem 0rem 0.0625rem 0rem,
 		height: 3.5rem,
 	),
 	$component-tbar
@@ -153,26 +161,32 @@ $tbar-light: map-deep-merge(
 		box-shadow: #{inset 1px 0 0 0 $gray-200,
 		inset -1px 0 0 0 $gray-200},
 		color: $secondary,
+
 		tbar-divider-before: (
 			before: (
 				background-color: $gray-200,
 			),
 		),
+
 		tbar-divider-after: (
 			after: (
 				background-color: $gray-200,
 			),
 		),
+
 		tbar-btn-monospaced: (
 			hover: (
 				color: $dark,
 			),
+
 			focus: (
 				color: $dark,
 			),
+
 			disabled: (
 				color: inherit,
 			),
+
 			active: (
 				background-color: $gray-200,
 				color: $dark,
@@ -189,39 +203,46 @@ $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,
+
 		tbar-divider-before: (
 			before: (
 				background-color: rgba($white, 0.06),
 			),
 		),
+
 		tbar-divider-after: (
 			after: (
 				background-color: rgba($white, 0.06),
 			),
 		),
+
 		tbar-btn-monospaced: (
 			hover: (
 				color: $white,
 			),
+
 			focus: (
 				color: $white,
 			),
+
 			disabled: (
 				color: inherit,
 			),
+
 			active: (
 				background-color: rgba($white, 0.06),
 				color: $white,
 			),
+
 			active-class: (
 				after: (
 					background-color: $primary-l1,
-					bottom: 0,
+					bottom: 0rem,
 					content: '',
 					display: block,
-					left: 0,
+					left: 0rem,
 					position: absolute,
-					top: 0,
+					top: 0rem,
 					width: 0.25rem,
 				),
 			),
@@ -238,30 +259,36 @@ $tbar-dark-l2: map-deep-merge(
 		inset -1px 0 0 0 rgba($white, 0.06)},
 		border-color: rgba($white, 0.06),
 		color: $gray-500,
+
 		tbar-divider-before: (
 			before: (
 				background-color: rgba($white, 0.06),
 			),
 		),
+
 		tbar-divider-after: (
 			after: (
 				background-color: rgba($white, 0.06),
 			),
 		),
+
 		tbar-btn-monospaced: (
 			hover: (
 				color: $white,
 			),
+
 			focus: (
 				color: $white,
 			),
-			disabled: (
-				color: inherit,
-			),
+
 			active: (
 				background-color: rgba($white, 0.06),
 				color: $white,
 			),
+
+			disabled: (
+				color: inherit,
+			),
 		),
 	),
 	$tbar-dark-l2
@@ -288,9 +315,11 @@ $subnav-tbar-component-link: map-deep-merge(
 	(
 		color: $link-color,
 		font-weight: $font-weight-semi-bold,
+
 		hover: (
 			color: $link-hover-color,
 		),
+
 		disabled: (
 			box-shadow: none,
 		),
@@ -314,35 +343,45 @@ $subnav-tbar: () !default;
 $subnav-tbar: map-deep-merge(
 	(
 		font-size: 0.875rem,
+
 		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,
+			padding-left: 0rem,
+			padding-right: 0rem,
 		),
+
 		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,
 		),
+
 		tbar-link: (
 			margin-bottom: 0.125rem,
 			margin-top: 0.125rem,
@@ -351,6 +390,7 @@ $subnav-tbar: map-deep-merge(
 			padding-right: 0.25rem,
 			padding-top: 0.09375rem,
 		),
+
 		tbar-link-monospaced: (
 			height: 1.5rem,
 			margin-bottom: 0.125rem,
@@ -385,9 +425,11 @@ $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,
 			cursor: $disabled-cursor,
@@ -404,6 +446,7 @@ $subnav-tbar-primary-component-label-close: map-deep-merge(
 		focus: (
 			color: inherit,
 		),
+
 		disabled: (
 			color: $gray-600,
 			opacity: $component-disabled-opacity,
@@ -424,7 +467,7 @@ $subnav-tbar-primary-tbar-label-size: () !default;
 $subnav-tbar-primary-tbar-label-size: map-deep-merge(
 	(
 		font-size: 0.75rem,
-		margin-right: 0,
+		margin-right: 0rem,
 		padding-bottom: 0.3125rem,
 		padding-left: 0.625rem,
 		padding-right: 0.625rem,
@@ -443,11 +486,13 @@ $subnav-tbar-primary: map-deep-merge(
 		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,
@@ -456,8 +501,11 @@ $subnav-tbar-primary: map-deep-merge(
 			margin-top: -0.625rem,
 			width: 3rem,
 		),
+
 		component-link: $subnav-tbar-primary-component-link,
+
 		component-label: $subnav-tbar-primary-component-label,
+
 		tbar-label: $subnav-tbar-primary-tbar-label-size,
 	),
 	$subnav-tbar-primary
@@ -482,6 +530,7 @@ $subnav-tbar-primary-disabled: map-deep-merge(
 				clay-lighten(clay-desaturate($primary, 27.03), 37.06)
 			),
 		color: #6c757d,
+
 		component-label: $subnav-tbar-primary-disabled-component-label,
 	),
 	$subnav-tbar-primary-disabled

package/src/scss/variables/_time.scss

@@ -6,10 +6,10 @@ $clay-time-btn: map-deep-merge(
 		font-size: 0.75rem,
 		height: 1.5rem,
 		justify-content: center,
-		padding-bottom: 0,
-		padding-left: 0,
-		padding-right: 0,
-		padding-top: 0,
+		padding-bottom: 0rem,
+		padding-left: 0rem,
+		padding-right: 0rem,
+		padding-top: 0rem,
 		width: 1.5rem,
 	),
 	$clay-time-btn
@@ -30,14 +30,16 @@ $clay-time-form-control: map-deep-merge(
 $clay-time-form-control-inset: () !default;
 $clay-time-form-control-inset: map-deep-merge(
 	(
-		margin-bottom: 0,
-		margin-left: 0,
-		margin-top: 0,
+		margin-bottom: 0rem,
+		margin-left: 0rem,
+		margin-top: 0rem,
 		text-align: center,
 		width: 1.25rem,
+
 		selection: (
 			background-color: transparent,
 		),
+
 		focus: (
 			background-color: #b3d8fd,
 		),
@@ -62,10 +64,10 @@ $clay-time-input-group-text: map-merge(
 		background-color:
 			setter(map-get($clay-time-input-group-text, bg), transparent),
 		border-color: transparent,
-		padding-bottom: 0,
-		padding-left: 0,
-		padding-right: 0,
-		padding-top: 0,
+		padding-bottom: 0rem,
+		padding-left: 0rem,
+		padding-right: 0rem,
+		padding-top: 0rem,
 	),
 	$clay-time-input-group-text
 );

package/src/scss/variables/_timelines.scss

@@ -1,7 +1,7 @@
 $timeline-border-color: $gray-300 !default;
 $timeline-border-width: 2px !default;
 
-$timeline-border-modifier: ceil($timeline-border-width * 0.5) !default;
+$timeline-border-modifier: calc(#{$timeline-border-width} * 0.5) !default;
 
 $timeline-icon-active-bg: $component-active-bg !default;
 $timeline-icon-active-border-color: $timeline-icon-active-bg !default;
@@ -26,4 +26,5 @@ $timeline-item-padding-top: 5px !default;
 
 $timeline-inner-spacing-xl: 50px !default;
 $timeline-outer-spacing-xl: 25px !default;
+
 $timeline-item-padding-y-xl: 15px !default;