@clayui/css 3.159.0 → 3.161.0

package/src/scss/components/_custom-forms.scss

@@ -178,12 +178,14 @@ label.custom-control-label {
 	// Bootstrap 4 Custom Switch
 
 	.custom-switch {
-		padding-left: $custom-switch-width + $custom-control-gutter;
+		padding-left: calc(#{$custom-switch-width} + #{$custom-control-gutter});
 
 		.custom-control-label {
 			&::before {
 				border-radius: $custom-switch-indicator-border-radius;
-				left: -($custom-switch-width + $custom-control-gutter);
+				left: calc(
+					(#{$custom-switch-width} + #{$custom-control-gutter}) * -1
+				);
 				pointer-events: all;
 				width: $custom-switch-width;
 			}
@@ -222,7 +224,10 @@ label.custom-control-label {
 			&::after {
 				background-color: $custom-control-indicator-bg;
 				transform: translateX(
-					$custom-switch-width - $custom-control-indicator-size
+					calc(
+						#{$custom-switch-width} -
+							#{$custom-control-indicator-size}
+					)
 				);
 			}
 		}
@@ -255,7 +260,10 @@ label.custom-control-label {
 		height: $custom-select-height;
 		line-height: $custom-select-line-height;
 		padding: $custom-select-padding-y
-			($custom-select-padding-x + $custom-select-indicator-padding)
+			calc(
+				#{$custom-select-padding-x} +
+					#{$custom-select-indicator-padding}
+			)
 			$custom-select-padding-y
 			$custom-select-padding-x;
 		vertical-align: middle;
@@ -425,9 +433,9 @@ label.custom-control-label {
 	.custom-range {
 		appearance: none;
 		background-color: transparent;
-		height: add(
-			$custom-range-thumb-height,
-			$custom-range-thumb-focus-box-shadow-width * 2
+		height: calc(
+			#{$custom-range-thumb-height} +
+				(#{$custom-range-thumb-focus-box-shadow-width} * 2)
 		);
 		padding: 0;
 		width: 100%;
@@ -467,10 +475,13 @@ label.custom-control-label {
 			@include box-shadow($custom-range-thumb-box-shadow);
 
 			height: $custom-range-thumb-height;
-			margin-top: (
-					$custom-range-track-height - $custom-range-thumb-height
-				) *
-				0.5; // Webkit specific
+			margin-top: calc(
+				(
+						#{$custom-range-track-height} -
+							#{$custom-range-thumb-height}
+					) *
+					0.5
+			); // Webkit specific
 
 			@include transition($custom-forms-transition);
 
@@ -560,7 +571,7 @@ label.custom-control-label {
 		&::-ms-track {
 			background-color: transparent;
 			border-color: transparent;
-			border-width: $custom-range-thumb-height * 0.5;
+			border-width: calc(#{$custom-range-thumb-height} * 0.5);
 
 			@include box-shadow($custom-range-track-box-shadow);
 

package/src/scss/components/_drilldown.scss

@@ -64,8 +64,11 @@
 		}
 
 		.dropdown-item-indicator-text-end {
-			margin-left: math-sign(
-				map-get($drilldown-dropdown-menu-indicator-start, padding-left)
+			margin-left: calc(
+				#{map-get(
+						$drilldown-dropdown-menu-indicator-start,
+						padding-left
+					)} * -1
 			);
 		}
 	}
@@ -79,8 +82,9 @@
 		@include clay-css($drilldown-dropdown-menu-indicator-end);
 
 		.dropdown-item-indicator-text-start {
-			margin-right: math-sign(
-				map-get($drilldown-dropdown-menu-indicator-end, padding-right)
+			margin-right: calc(
+				#{map-get($drilldown-dropdown-menu-indicator-end, padding-right)} *
+					-1
 			);
 		}
 

package/src/scss/components/_forms.scss

@@ -370,7 +370,7 @@ textarea.form-control-plaintext,
 }
 
 .form-check-input {
-	margin-left: math-sign($form-check-input-gutter);
+	margin-left: calc(#{$form-check-input-gutter} * -1);
 	margin-top: $form-check-input-margin-y;
 	position: static;
 
@@ -614,13 +614,13 @@ textarea.form-control-sm,
 	.form-row {
 		display: flex;
 		flex-wrap: wrap;
-		margin-left: math-sign($form-grid-gutter-width * 0.5);
-		margin-right: math-sign($form-grid-gutter-width * 0.5);
+		margin-left: calc(#{$form-grid-gutter-width} * -0.5);
+		margin-right: calc(#{$form-grid-gutter-width} * -0.5);
 
 		> .col,
 		> [class*='col-'] {
-			padding-left: $form-grid-gutter-width * 0.5;
-			padding-right: $form-grid-gutter-width * 0.5;
+			padding-left: calc(#{$form-grid-gutter-width} * 0.5);
+			padding-right: calc(#{$form-grid-gutter-width} * 0.5);
 		}
 	}
 
@@ -755,7 +755,7 @@ textarea.form-control-sm,
 	> .form-group-item:not(:last-child) {
 		@include media-breakpoint-up(sm) {
 			margin-bottom: 0;
-			margin-right: $grid-gutter-width * 0.5;
+			margin-right: calc(#{$grid-gutter-width} * 0.5);
 		}
 	}
 

package/src/scss/components/_grid.scss

@@ -61,8 +61,8 @@
 	.row {
 		display: flex;
 		flex-wrap: wrap;
-		margin-left: math-sign($grid-gutter-width * 0.5);
-		margin-right: math-sign($grid-gutter-width * 0.5);
+		margin-left: calc(#{$grid-gutter-width} * -0.5);
+		margin-right: calc(#{$grid-gutter-width} * -0.5);
 	}
 
 	// Remove the negative margin from default .row, then the horizontal padding
@@ -84,8 +84,8 @@
 
 @if $enable-grid-classes {
 	%grid-column {
-		padding-left: $grid-gutter-width * 0.5;
-		padding-right: $grid-gutter-width * 0.5;
+		padding-left: calc(#{$grid-gutter-width} * 0.5);
+		padding-right: calc(#{$grid-gutter-width} * 0.5);
 		position: relative;
 		width: 100%;
 	}
@@ -147,7 +147,7 @@
 			}
 
 			.order#{$infix}-last {
-				order: $grid-columns + 1;
+				order: calc(#{$grid-columns} + 1);
 			}
 
 			@for $i from 0 through $grid-columns {
@@ -210,8 +210,8 @@
 
 		.container &,
 		.container-fluid & {
-			margin-left: math-sign($grid-gutter-width * 0.5);
-			margin-right: math-sign($grid-gutter-width * 0.5);
+			margin-left: calc(#{$grid-gutter-width} * -0.5);
+			margin-right: calc(#{$grid-gutter-width} * -0.5);
 		}
 	}
 

package/src/scss/components/_icons.scss

@@ -36,8 +36,16 @@ button.collapse-icon,
 
 	@if ($enable-c-inner) {
 		.c-inner {
-			margin-left: math-sign($collapse-icon-padding-left);
-			margin-right: math-sign($collapse-icon-padding-right);
+			margin-left: if(
+				$collapse-icon-padding-left,
+				calc(#{$collapse-icon-padding-left} * -1),
+				null
+			);
+			margin-right: if(
+				$collapse-icon-padding-right,
+				calc(#{$collapse-icon-padding-right} * -1),
+				null
+			);
 		}
 	}
 }

package/src/scss/components/_images.scss

@@ -34,7 +34,7 @@
 
 .figure-img {
 	line-height: 1;
-	margin-bottom: $spacer * 0.5;
+	margin-bottom: calc(#{$spacer} * 0.5);
 }
 
 .figure-caption {

package/src/scss/components/_input-groups.scss

@@ -22,7 +22,7 @@
 		+ .form-control,
 		+ .custom-select,
 		+ .custom-file {
-			margin-left: math-sign($input-border-width);
+			margin-left: calc(#{$input-border-width} * -1);
 		}
 	}
 
@@ -88,7 +88,9 @@
 
 .input-group-lg > .custom-select,
 .input-group-sm > .custom-select {
-	padding-right: $custom-select-padding-x + $custom-select-indicator-padding;
+	padding-right: calc(
+		#{$custom-select-padding-x} + #{$custom-select-indicator-padding}
+	);
 }
 
 .input-group-prepend,
@@ -97,7 +99,7 @@
 	> .btn + .input-group-text,
 	> .input-group-text + .input-group-text,
 	> .input-group-text + .btn {
-		margin-left: math-sign($input-border-width);
+		margin-left: calc(#{$input-border-width} * -1);
 	}
 
 	.btn {
@@ -325,7 +327,7 @@
 		&.input-group-prepend {
 			align-items: stretch;
 			display: flex;
-			margin-right: math-sign($input-border-left-width);
+			margin-right: calc(#{$input-border-left-width} * -1);
 		}
 
 		&.input-group-prepend:not(:last-child) {
@@ -362,7 +364,7 @@
 		&.input-group-append {
 			align-items: stretch;
 			display: flex;
-			margin-right: math-sign($input-border-left-width);
+			margin-right: calc(#{$input-border-left-width} * -1);
 		}
 
 		&.input-group-append:first-child {

package/src/scss/components/_jumbotron.scss

@@ -6,10 +6,10 @@
 
 		color: $jumbotron-color;
 		margin-bottom: $jumbotron-padding;
-		padding: $jumbotron-padding ($jumbotron-padding * 0.5);
+		padding: $jumbotron-padding calc(#{$jumbotron-padding} * 0.5);
 
 		@include media-breakpoint-up(sm) {
-			padding: ($jumbotron-padding * 2) $jumbotron-padding;
+			padding: calc(#{$jumbotron-padding} * 2) $jumbotron-padding;
 		}
 	}
 

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

@@ -41,7 +41,7 @@
 	.autofit-col {
 		border-left: $list-group-border-width solid $list-group-border-color;
 		border-right: $list-group-border-width solid $list-group-border-color;
-		margin-left: math-sign($list-group-border-width);
+		margin-left: calc(#{$list-group-border-width} * -1);
 		padding: $list-group-item-padding-y $list-group-item-padding-x;
 
 		&:first-child,
@@ -85,7 +85,7 @@
 
 					&.active {
 						border-left-width: $list-group-border-width;
-						margin-left: math-sign($list-group-border-width);
+						margin-left: calc(#{$list-group-border-width} * -1);
 					}
 				}
 			}
@@ -101,7 +101,7 @@
 	border: $list-group-border-width solid $list-group-border-color;
 	display: flex;
 	justify-content: space-between;
-	margin-bottom: math-sign($list-group-border-width);
+	margin-bottom: calc(#{$list-group-border-width} * -1);
 	padding: $list-group-header-padding-y $list-group-header-padding-x;
 
 	&:first-child {
@@ -231,7 +231,7 @@
 
 		&.active {
 			border-top-width: $list-group-border-width;
-			margin-top: math-sign($list-group-border-width);
+			margin-top: calc(#{$list-group-border-width} * -1);
 		}
 	}
 }
@@ -303,8 +303,16 @@
 .list-group-item-action {
 	@if ($enable-c-inner) {
 		.c-inner {
-			margin: #{math-sign($list-group-item-padding-y)}
-				#{math-sign($list-group-item-padding-x)};
+			@if ($list-group-item-padding-y) {
+				margin-bottom: calc(#{$list-group-item-padding-y} * -1);
+				margin-top: calc(#{$list-group-item-padding-y} * -1);
+			}
+
+			@if ($list-group-item-padding-x) {
+				margin-left: calc(#{$list-group-item-padding-x} * -1);
+				margin-right: calc(#{$list-group-item-padding-x} * -1);
+			}
+
 			width: auto;
 		}
 	}
@@ -441,8 +449,8 @@
 	.quick-action-menu {
 		align-items: $list-group-item-flex-align-items;
 		background-color: $list-group-bg;
-		margin-bottom: -$list-group-item-padding-y;
-		margin-top: -$list-group-item-padding-y;
+		margin-bottom: calc(#{$list-group-item-padding-y} * -1);
+		margin-top: calc(#{$list-group-item-padding-y} * -1);
 		padding-bottom: $list-group-item-padding-y;
 		padding-top: $list-group-item-padding-y;
 	}
@@ -498,15 +506,22 @@
 	}
 
 	.quick-action-menu {
-		margin-bottom: -$list-group-item-padding-y +
-			$list-group-notification-item-border-bottom-width;
-		margin-top: -$list-group-item-padding-y +
-			$list-group-notification-item-border-top-width;
+		margin-bottom: calc(
+			(
+					#{$list-group-item-padding-y} + #{$list-group-notification-item-border-bottom-width}
+				) * -1
+		);
+		margin-top: calc(
+			(
+					#{$list-group-item-padding-y} + #{$list-group-notification-item-border-top-width}
+				) * -1
+		);
 	}
 
 	.autofit-col .quick-action-item {
-		margin-top: $list-group-notification-item-border-top-width -
-			$list-group-item-flex-offset-top;
+		margin-top: calc(
+			#{$list-group-notification-item-border-top-width} - #{$list-group-item-flex-offset-top}
+		);
 	}
 }
 

package/src/scss/components/_modals.scss

@@ -402,7 +402,7 @@
 			height: 100%;
 			left: 50%;
 			margin-bottom: 0;
-			margin-left: calc(#{math-sign($modal-md)} / 2);
+			margin-left: calc(#{$modal-md} / -2);
 			margin-right: 0;
 			margin-top: 0;
 			top: 0;
@@ -410,23 +410,23 @@
 
 		&.modal-sm {
 			@include media-breakpoint-up(sm) {
-				margin-left: calc(#{math-sign($modal-sm)} / 2);
+				margin-left: calc(#{$modal-sm} / -2);
 			}
 		}
 
 		&.modal-lg {
 			@include media-breakpoint-up(lg) {
-				margin-left: calc(#{math-sign($modal-lg)} / 2);
+				margin-left: calc(#{$modal-lg} / -2);
 			}
 		}
 
 		&.modal-xl {
 			@include media-breakpoint-up(lg) {
-				margin-left: calc(#{math-sign($modal-lg)} / 2);
+				margin-left: calc(#{$modal-lg} / -2);
 			}
 
 			@include media-breakpoint-up(xl) {
-				margin-left: calc(#{math-sign($modal-xl)} / 2);
+				margin-left: calc(#{$modal-xl} / -2);
 			}
 		}
 	}

package/src/scss/components/_multi-step-nav.scss

@@ -219,7 +219,7 @@
 	background-color: $multi-step-divider-bg;
 	height: $multi-step-divider-height;
 	margin-left: $multi-step-icon-size;
-	margin-top: math-sign($multi-step-divider-height);
+	margin-top: calc(#{$multi-step-divider-height} * -1);
 	position: relative;
 	top: $multi-step-divider-top;
 }
@@ -259,7 +259,6 @@
 	border-style: $multi-step-icon-border-style;
 	border-width: $multi-step-icon-border-width;
 	color: $multi-step-icon-color;
-	cursor: $multi-step-icon-cursor;
 	display: flex;
 	font-size: $multi-step-icon-font-size;
 	font-weight: $multi-step-icon-font-weight;
@@ -275,12 +274,6 @@
 
 	width: $multi-step-icon-size;
 
-	&:hover {
-		background-color: $multi-step-icon-hover-bg;
-		color: $multi-step-icon-hover-color;
-		text-decoration: $multi-step-icon-hover-text-decoration;
-	}
-
 	@at-root {
 		&.focus,
 		#{$focus-visible-selector},
@@ -291,6 +284,17 @@
 			outline: $multi-step-icon-focus-outline;
 			text-decoration: $multi-step-icon-focus-text-decoration;
 		}
+
+		&[role='button'],
+		button#{&} {
+			cursor: $multi-step-icon-cursor;
+
+			&:hover {
+				background-color: $multi-step-icon-hover-bg;
+				color: $multi-step-icon-hover-color;
+				text-decoration: $multi-step-icon-hover-text-decoration;
+			}
+		}
 	}
 
 	&[data-multi-step-icon]::before {
@@ -303,10 +307,26 @@
 
 	@if ($enable-c-inner) {
 		.c-inner {
-			margin-bottom: #{math-sign($multi-step-icon-padding-bottom)};
-			margin-left: #{math-sign($multi-step-icon-padding-left)};
-			margin-right: #{math-sign($multi-step-icon-padding-right)};
-			margin-top: #{math-sign($multi-step-icon-padding-top)};
+			margin-bottom: if(
+				$multi-step-icon-padding-bottom,
+				calc(#{$multi-step-icon-padding-bottom} * -1),
+				null
+			);
+			margin-left: if(
+				$multi-step-icon-padding-left,
+				calc(#{$multi-step-icon-padding-left} * -1),
+				null
+			);
+			margin-right: if(
+				$multi-step-icon-padding-right,
+				calc(#{$multi-step-icon-padding-right} * -1),
+				null
+			);
+			margin-top: if(
+				$multi-step-icon-padding-top,
+				calc(#{$multi-step-icon-padding-top} * -1),
+				null
+			);
 			position: absolute;
 		}
 	}

package/src/scss/components/_navbar.scss

@@ -275,8 +275,10 @@
 
 							.container,
 							.container-fluid {
-								padding-left: $grid-gutter-width * 0.5;
-								padding-right: $grid-gutter-width * 0.5;
+								padding-left: calc(#{$grid-gutter-width} * 0.5);
+								padding-right: calc(
+									#{$grid-gutter-width} * 0.5
+								);
 							}
 
 							.navbar-nav,
@@ -308,8 +310,8 @@
 							}
 
 							.dropdown-divider {
-								margin-left: math-sign($navbar-padding-x);
-								margin-right: math-sign($navbar-padding-x);
+								margin-left: calc(#{$navbar-padding-x} * -1);
+								margin-right: calc(#{$navbar-padding-x} * -1);
 							}
 
 							.dropdown-item {
@@ -384,8 +386,10 @@
 						width: auto;
 
 						.dropdown-toggle .navbar-text-truncate {
-							max-width: $navbar-text-truncate-max-width -
-								$navbar-text-truncate-spacer-right;
+							max-width: calc(
+								#{$navbar-text-truncate-max-width} -
+									#{$navbar-text-truncate-spacer-right}
+							);
 						}
 					}