@clayui/css 3.158.0 → 3.160.0

package/src/scss/cadmin/components/_sheets.scss

@@ -82,18 +82,18 @@
 	}
 
 	> fieldset {
-		margin-bottom: math-sign($cadmin-sheet-section-margin-bottom);
+		margin-bottom: calc(#{$cadmin-sheet-section-margin-bottom} * -1);
 
 		@include clay-scale-component {
-			margin-bottom: math-sign(
-				$cadmin-sheet-section-margin-bottom-mobile
+			margin-bottom: calc(
+				#{$cadmin-sheet-section-margin-bottom-mobile} * -1
 			);
 		}
 	}
 
 	> .card-page:last-child,
 	.card-page-last {
-		margin-bottom: math-sign($cadmin-card-margin-bottom);
+		margin-bottom: calc(#{$cadmin-card-margin-bottom} * -1);
 	}
 
 	&::after {
@@ -192,10 +192,26 @@ fieldset {
 
 	@if ($cadmin-enable-c-inner) {
 		.c-inner {
-			margin-bottom: #{math-sign($cadmin-sheet-subtitle-padding-y)};
-			margin-left: #{math-sign($cadmin-sheet-subtitle-padding-x)};
-			margin-right: #{math-sign($cadmin-sheet-subtitle-padding-x)};
-			margin-top: #{math-sign($cadmin-sheet-subtitle-padding-y)};
+			margin-bottom: if(
+				$cadmin-sheet-subtitle-padding-y,
+				calc(#{$cadmin-sheet-subtitle-padding-y} * -1),
+				null
+			);
+			margin-left: if(
+				$cadmin-sheet-subtitle-padding-x,
+				calc(#{$cadmin-sheet-subtitle-padding-x} * -1),
+				null
+			);
+			margin-right: if(
+				$cadmin-sheet-subtitle-padding-x,
+				calc(#{$cadmin-sheet-subtitle-padding-x} * -1),
+				null
+			);
+			margin-top: if(
+				$cadmin-sheet-subtitle-padding-y,
+				calc(#{$cadmin-sheet-subtitle-padding-y} * -1),
+				null
+			);
 		}
 	}
 
@@ -213,12 +229,22 @@ fieldset {
 
 		@if ($cadmin-enable-c-inner) {
 			.c-inner {
-				margin-left: #{math-sign(
-						$cadmin-sheet-subtitle-collapse-icon-padding-left
-					)};
-				margin-right: #{math-sign(
-						$cadmin-sheet-subtitle-collapse-icon-padding-right
-					)};
+				margin-left: if(
+					$cadmin-sheet-subtitle-collapse-icon-padding-left,
+					calc(
+						#{$cadmin-sheet-subtitle-collapse-icon-padding-left} *
+							-1
+					),
+					null
+				);
+				margin-right: if(
+					$cadmin-sheet-subtitle-collapse-icon-padding-right,
+					calc(
+						#{$cadmin-sheet-subtitle-collapse-icon-padding-right} *
+							-1
+					),
+					null
+				);
 			}
 		}
 	}

package/src/scss/cadmin/components/_time.scss

@@ -35,11 +35,15 @@
 	@include clay-css($cadmin-clay-time-edit);
 
 	&:first-child {
-		margin-left: math-sign(map-get($cadmin-clay-time-edit, padding-left));
+		margin-left: calc(
+			#{map-get($cadmin-clay-time-edit, padding-left)} * -1
+		);
 	}
 
 	&:last-child {
-		margin-right: math-sign(map-get($cadmin-clay-time-edit, padding-left));
+		margin-right: calc(
+			#{map-get($cadmin-clay-time-edit, padding-left)} * -1
+		);
 	}
 }
 

package/src/scss/cadmin/components/_timelines.scss

@@ -21,7 +21,11 @@
 
 .timeline-increment {
 	background-color: $cadmin-timeline-increment-bg;
-	left: -($cadmin-timeline-inner-spacing - $cadmin-timeline-border-modifier);
+	left: calc(
+		(
+				#{$cadmin-timeline-inner-spacing} - #{$cadmin-timeline-border-modifier}
+			) * -1
+	);
 	position: absolute;
 	text-align: center;
 	top: 50%;
@@ -32,7 +36,9 @@
 
 .timeline-increment-text {
 	display: block;
-	max-width: $cadmin-timeline-inner-spacing + $cadmin-timeline-outer-spacing;
+	max-width: calc(
+		#{$cadmin-timeline-inner-spacing} + #{$cadmin-timeline-outer-spacing}
+	);
 }
 
 .timeline-item-label {
@@ -70,7 +76,7 @@
 
 	.panel {
 		.timeline-increment {
-			margin-left: math-sign($cadmin-panel-border-left-width);
+			margin-left: calc(#{$cadmin-panel-border-left-width} * -1);
 		}
 	}
 }
@@ -109,7 +115,7 @@
 
 			.timeline-item-label {
 				left: -100%;
-				margin-left: -($cadmin-timeline-inner-spacing * 2);
+				margin-left: calc($cadmin-timeline-inner-spacing * -2);
 				position: absolute;
 				text-align: right;
 				top: 50%;
@@ -126,7 +132,7 @@
 
 			.timeline-item-label {
 				margin-left: auto;
-				margin-right: -($cadmin-timeline-inner-spacing * 2);
+				margin-right: calc($cadmin-timeline-inner-spacing * -2);
 				right: -100%;
 				text-align: left;
 			}
@@ -143,7 +149,7 @@
 
 		.timeline-item-label {
 			margin-left: auto;
-			margin-right: -($cadmin-timeline-inner-spacing * 2);
+			margin-right: calc($cadmin-timeline-inner-spacing * -2);
 			right: -100%;
 			text-align: left;
 		}
@@ -158,7 +164,8 @@
 	);
 
 	.timeline-increment-text {
-		max-width: $cadmin-timeline-inner-spacing-xl +
-			$cadmin-timeline-outer-spacing-xl;
+		max-width: calc(
+			#{$cadmin-timeline-inner-spacing-xl} + #{$cadmin-timeline-outer-spacing-xl}
+		);
 	}
 }

package/src/scss/cadmin/components/_tooltip.scss

@@ -23,7 +23,7 @@
 		&::before {
 			border-top-color: $cadmin-tooltip-arrow-color;
 			border-width: $cadmin-tooltip-arrow-height
-				($cadmin-tooltip-arrow-width * 0.5) 0;
+				calc(#{$cadmin-tooltip-arrow-width} * 0.5) 0;
 			top: 0;
 		}
 	}
@@ -39,9 +39,9 @@
 
 		&::before {
 			border-right-color: $cadmin-tooltip-arrow-color;
-			border-width: ($cadmin-tooltip-arrow-width * 0.5)
-				$cadmin-tooltip-arrow-height ($cadmin-tooltip-arrow-width * 0.5)
-				0;
+			border-width: calc(#{$cadmin-tooltip-arrow-width} * 0.5)
+				$cadmin-tooltip-arrow-height
+				calc(#{$cadmin-tooltip-arrow-width} * 0.5) 0;
 			right: 0;
 		}
 	}
@@ -55,7 +55,7 @@
 
 		&::before {
 			border-bottom-color: $cadmin-tooltip-arrow-color;
-			border-width: 0 ($cadmin-tooltip-arrow-width * 0.5)
+			border-width: 0 calc(#{$cadmin-tooltip-arrow-width} * 0.5)
 				$cadmin-tooltip-arrow-height;
 			bottom: 0;
 		}
@@ -72,8 +72,9 @@
 
 		&::before {
 			border-left-color: $cadmin-tooltip-arrow-color;
-			border-width: ($cadmin-tooltip-arrow-width * 0.5) 0
-				($cadmin-tooltip-arrow-width * 0.5) $cadmin-tooltip-arrow-height;
+			border-width: calc(#{$cadmin-tooltip-arrow-width} * 0.5) 0
+				calc(#{$cadmin-tooltip-arrow-width} * 0.5)
+				$cadmin-tooltip-arrow-height;
 			left: 0;
 		}
 	}

package/src/scss/cadmin/components/_treeview.scss

@@ -5,8 +5,15 @@
 		@include clay-button-variant(map-get($cadmin-treeview, btn));
 	}
 
+	$_btn-monospaced: map-get($cadmin-treeview, btn-monospaced);
+
 	.btn-monospaced {
-		@include clay-button-variant(map-get($cadmin-treeview, btn-monospaced));
+		@include clay-button-variant($_btn-monospaced);
+
+		&.sr-only-focusable {
+			height: map-get($_btn-monospaced, height);
+			width: map-get($_btn-monospaced, width);
+		}
 	}
 
 	.custom-control {

package/src/scss/cadmin/components/_type.scss

@@ -229,11 +229,13 @@ strong {
 			padding: inherit;
 
 			&:first-child {
-				margin-left: math-sign(map-get($cadmin-c-kbd, padding-left));
+				margin-left: calc(#{map-get($cadmin-c-kbd, padding-left)} * -1);
 			}
 
 			&:last-child {
-				margin-right: math-sign(map-get($cadmin-c-kbd, padding-right));
+				margin-right: calc(
+					#{map-get($cadmin-c-kbd, padding-right)} * -1
+				);
 			}
 		}
 	}

package/src/scss/cadmin/components/_utilities-functional-important.scss

@@ -602,27 +602,27 @@
 		@each $cadmin-size, $cadmin-length in $cadmin-spacers {
 			@if $cadmin-size != 0 {
 				.m#{$cadmin-infix}-n#{$cadmin-size} {
-					margin: math-sign($cadmin-length) !important;
+					margin: calc(#{$cadmin-length} * -1) !important;
 				}
 
 				.mt#{$cadmin-infix}-n#{$cadmin-size},
 				.my#{$cadmin-infix}-n#{$cadmin-size} {
-					margin-top: math-sign($cadmin-length) !important;
+					margin-top: calc(#{$cadmin-length} * -1) !important;
 				}
 
 				.mr#{$cadmin-infix}-n#{$cadmin-size},
 				.mx#{$cadmin-infix}-n#{$cadmin-size} {
-					margin-right: math-sign($cadmin-length) !important;
+					margin-right: calc(#{$cadmin-length} * -1) !important;
 				}
 
 				.mb#{$cadmin-infix}-n#{$cadmin-size},
 				.my#{$cadmin-infix}-n#{$cadmin-size} {
-					margin-bottom: math-sign($cadmin-length) !important;
+					margin-bottom: calc(#{$cadmin-length} * -1) !important;
 				}
 
 				.ml#{$cadmin-infix}-n#{$cadmin-size},
 				.mx#{$cadmin-infix}-n#{$cadmin-size} {
-					margin-left: math-sign($cadmin-length) !important;
+					margin-left: calc(#{$cadmin-length} * -1) !important;
 				}
 			}
 		}

package/src/scss/cadmin/components/_utilities.scss

@@ -81,8 +81,8 @@
 }
 
 %autofit-padded-no-gutters-x {
-	margin-left: math-sign($cadmin-autofit-padded-col-padding-x);
-	margin-right: math-sign($cadmin-autofit-padded-col-padding-x);
+	margin-left: calc(#{$cadmin-autofit-padded-col-padding-x} * -1);
+	margin-right: calc(#{$cadmin-autofit-padded-col-padding-x} * -1);
 	width: auto;
 
 	> .autofit-col {
@@ -98,8 +98,8 @@
 }
 
 %autofit-padded-no-gutters-y {
-	margin-bottom: math-sign($cadmin-autofit-padded-col-padding-y);
-	margin-top: math-sign($cadmin-autofit-padded-col-padding-y);
+	margin-bottom: calc(#{$cadmin-autofit-padded-col-padding-y} * -1);
+	margin-top: calc(#{$cadmin-autofit-padded-col-padding-y} * -1);
 	width: auto;
 
 	> .autofit-col {
@@ -115,10 +115,10 @@
 }
 
 %autofit-padded-no-gutters {
-	margin-bottom: math-sign($cadmin-autofit-padded-col-padding-y);
-	margin-left: math-sign($cadmin-autofit-padded-col-padding-x);
-	margin-right: math-sign($cadmin-autofit-padded-col-padding-x);
-	margin-top: math-sign($cadmin-autofit-padded-col-padding-y);
+	margin-bottom: calc(#{$cadmin-autofit-padded-col-padding-y} * -1);
+	margin-left: calc(#{$cadmin-autofit-padded-col-padding-x} * -1);
+	margin-right: calc(#{$cadmin-autofit-padded-col-padding-x} * -1);
+	margin-top: calc(#{$cadmin-autofit-padded-col-padding-y} * -1);
 	width: auto;
 
 	> .autofit-col {
@@ -392,27 +392,27 @@
 		@each $cadmin-size, $cadmin-length in $cadmin-spacers {
 			@if $cadmin-size != 0 {
 				.c-m#{$cadmin-infix}-n#{$cadmin-size} {
-					margin: math-sign($cadmin-length);
+					margin: calc(#{$cadmin-length} * -1);
 				}
 
 				.c-mt#{$cadmin-infix}-n#{$cadmin-size},
 				.c-my#{$cadmin-infix}-n#{$cadmin-size} {
-					margin-top: math-sign($cadmin-length);
+					margin-top: calc(#{$cadmin-length} * -1);
 				}
 
 				.c-mr#{$cadmin-infix}-n#{$cadmin-size},
 				.c-mx#{$cadmin-infix}-n#{$cadmin-size} {
-					margin-right: math-sign($cadmin-length);
+					margin-right: calc(#{$cadmin-length} * -1);
 				}
 
 				.c-mb#{$cadmin-infix}-n#{$cadmin-size},
 				.c-my#{$cadmin-infix}-n#{$cadmin-size} {
-					margin-bottom: math-sign($cadmin-length);
+					margin-bottom: calc(#{$cadmin-length} * -1);
 				}
 
 				.c-ml#{$cadmin-infix}-n#{$cadmin-size},
 				.c-mx#{$cadmin-infix}-n#{$cadmin-size} {
-					margin-left: math-sign($cadmin-length);
+					margin-left: calc(#{$cadmin-length} * -1);
 				}
 			}
 		}