@clayui/css 3.38.0 → 3.41.0

package/src/scss/cadmin/components/_grid.scss

@@ -4,8 +4,8 @@
 	.container {
 		margin-left: auto;
 		margin-right: auto;
-		padding-left: $cadmin-grid-gutter-width / 2;
-		padding-right: $cadmin-grid-gutter-width / 2;
+		padding-left: $cadmin-grid-gutter-width * 0.5;
+		padding-right: $cadmin-grid-gutter-width * 0.5;
 		width: 100%;
 
 		@each $cadmin-breakpoint,
@@ -25,8 +25,8 @@
 	%container-fluid {
 		margin-left: auto;
 		margin-right: auto;
-		padding-left: $cadmin-grid-gutter-width / 2;
-		padding-right: $cadmin-grid-gutter-width / 2;
+		padding-left: $cadmin-grid-gutter-width * 0.5;
+		padding-right: $cadmin-grid-gutter-width * 0.5;
 		width: 100%;
 	}
 
@@ -75,8 +75,8 @@
 	&.row {
 		display: flex;
 		flex-wrap: wrap;
-		margin-left: math-sign($cadmin-grid-gutter-width / 2);
-		margin-right: math-sign($cadmin-grid-gutter-width / 2);
+		margin-left: math-sign($cadmin-grid-gutter-width * 0.5);
+		margin-right: math-sign($cadmin-grid-gutter-width * 0.5);
 	}
 
 	// Remove the negative margin from default .row, then the horizontal padding
@@ -98,8 +98,8 @@
 
 @if $cadmin-enable-grid-classes {
 	%grid-column {
-		padding-left: $cadmin-grid-gutter-width / 2;
-		padding-right: $cadmin-grid-gutter-width / 2;
+		padding-left: $cadmin-grid-gutter-width * 0.5;
+		padding-right: $cadmin-grid-gutter-width * 0.5;
 		position: relative;
 		width: 100%;
 	}
@@ -138,8 +138,8 @@
 			@for $cadmin-i from 1 through $cadmin-grid-row-columns {
 				.row-cols#{$cadmin-infix}-#{$cadmin-i} {
 					& > * {
-						flex: 0 0 100% / $cadmin-i;
-						max-width: 100% / $cadmin-i;
+						flex: 0 0 calc(100% / #{$cadmin-i});
+						max-width: calc(100% / #{$cadmin-i});
 					}
 				}
 			}
@@ -152,13 +152,17 @@
 
 			@for $cadmin-i from 1 through $cadmin-grid-columns {
 				.col#{$cadmin-infix}-#{$cadmin-i} {
-					flex: 0 0 percentage($cadmin-i / $cadmin-grid-columns);
+					flex: 0
+						0
+						calc(#{$cadmin-i} / #{$cadmin-grid-columns} * 100%);
 
 					// Add a `max-width` to ensure content within each column does not blow out
 					// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
 					// do not appear to require this.
 
-					max-width: percentage($cadmin-i / $cadmin-grid-columns);
+					max-width: calc(
+						#{$cadmin-i} / #{$cadmin-grid-columns} * 100%
+					);
 				}
 			}
 
@@ -182,12 +186,8 @@
 
 				@if not($cadmin-infix == '' and $cadmin-i == 0) {
 					.offset#{$cadmin-infix}-#{$cadmin-i} {
-						$cadmin-num: $cadmin-i / $cadmin-grid-columns;
-
-						margin-left: if(
-							$cadmin-num == 0,
-							0,
-							percentage($cadmin-num)
+						margin-left: calc(
+							#{$cadmin-i} / #{$cadmin-grid-columns} * 100%
 						);
 					}
 				}
@@ -243,8 +243,8 @@
 
 		.container &,
 		.container-fluid & {
-			margin-left: -($cadmin-grid-gutter-width / 2);
-			margin-right: -($cadmin-grid-gutter-width / 2);
+			margin-left: math-sign($cadmin-grid-gutter-width * 0.5);
+			margin-right: math-sign($cadmin-grid-gutter-width * 0.5);
 		}
 	}
 

package/src/scss/cadmin/components/_icons.scss

@@ -1,10 +1,5 @@
 .lexicon-icon {
-	display: inline-block;
-	fill: currentColor;
-	height: $cadmin-lexicon-icon-size;
-	margin-top: -3px;
-	vertical-align: middle;
-	width: $cadmin-lexicon-icon-size;
+	@include clay-css(setter($cadmin-lexicon-icon, ()));
 }
 
 .order-arrow-down-active {

package/src/scss/cadmin/components/_images.scss

@@ -34,7 +34,7 @@
 
 .figure-img {
 	line-height: 1;
-	margin-bottom: $cadmin-spacer / 2;
+	margin-bottom: $cadmin-spacer * 0.5;
 }
 
 .figure-caption {

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

@@ -47,19 +47,8 @@
 	> .input-group-text + .btn {
 		margin-left: math-sign($cadmin-input-border-width);
 	}
-}
-
-// Input Group
-
-.input-group {
-	align-items: stretch;
-	display: flex;
-	flex-wrap: wrap;
-	position: relative;
-	width: 100%;
 
 	.btn {
-		position: relative;
 		z-index: 1;
 
 		&:hover {
@@ -67,10 +56,24 @@
 		}
 	}
 
-	.btn:focus,
-	.form-control:focus {
-		z-index: $cadmin-zindex-input-group-focus;
+	.btn,
+	.form-control {
+		position: relative;
+
+		&:focus {
+			z-index: $cadmin-zindex-input-group-focus;
+		}
 	}
+}
+
+// Input Group
+
+.input-group {
+	align-items: stretch;
+	display: flex;
+	flex-wrap: wrap;
+	position: relative;
+	width: 100%;
 
 	.btn-unstyled {
 		color: inherit;

package/src/scss/cadmin/components/_labels.scss

@@ -1,147 +1,79 @@
 .label {
-	border-color: $cadmin-label-border-color;
-
-	@include border-radius($cadmin-label-border-radius);
-
-	border-style: $cadmin-label-border-style;
-	border-width: $cadmin-label-border-width;
-	color: $cadmin-label-color;
-	display: inline-flex;
-	font-size: $cadmin-label-font-size;
-	font-weight: $cadmin-label-font-weight;
-	height: $cadmin-label-height;
-	line-height: $cadmin-label-line-height;
-	margin-bottom: $cadmin-label-spacer-y;
-	margin-right: $cadmin-label-spacer-x;
-	margin-top: $cadmin-label-spacer-y;
-	max-width: 100%;
-	padding-bottom: $cadmin-label-padding-y;
-	padding-left: $cadmin-label-padding-x;
-	padding-right: $cadmin-label-padding-x;
-	padding-top: $cadmin-label-padding-y;
-	text-transform: $cadmin-label-text-transform;
-	white-space: inherit;
-	word-wrap: break-word;
-
-	@include clay-label-variant($cadmin-label-base);
-
-	a {
-		color: $cadmin-label-link-color;
-		display: inline-block;
-		text-decoration: $cadmin-label-link-text-decoration;
-
-		&:hover,
-		&:focus {
-			color: $cadmin-label-link-hover-color;
-			text-decoration: $cadmin-label-link-hover-text-decoration;
-		}
-	}
-
-	@if ($cadmin-enable-c-inner) {
-		> .c-inner {
-			margin-bottom: math-sign($cadmin-label-padding-y);
-			margin-left: math-sign($cadmin-label-padding-x);
-			margin-right: math-sign($cadmin-label-padding-x);
-			margin-top: math-sign($cadmin-label-padding-y);
-			max-width: none;
-		}
-	}
-
-	.sticker {
-		border-radius: $cadmin-label-sticker-border-radius;
-		height: $cadmin-label-sticker-size;
-		line-height: $cadmin-label-sticker-size;
-		width: $cadmin-label-sticker-size;
-	}
-
-	.sticker-overlay {
-		border-radius: $cadmin-label-sticker-border-radius;
-	}
-}
-
-a.label,
-button.label {
-	text-decoration: $cadmin-label-anchor-text-decoration;
-
-	&:hover,
-	&:focus {
-		text-decoration: $cadmin-label-anchor-hover-text-decoration;
-	}
-}
-
-button.label {
-	cursor: $cadmin-btn-cursor;
+	@include clay-label-variant($cadmin-label);
 }
 
 .label-dismissible {
-	text-transform: $cadmin-label-dismissible-text-transform;
+	@include clay-css($cadmin-label-dismissible);
 }
 
 .label-item {
-	display: flex;
-	flex-direction: column;
-	flex-shrink: 0;
-	justify-content: center;
-	margin-bottom: $cadmin-label-item-spacer-y;
-	margin-top: $cadmin-label-item-spacer-y;
-	min-height: 0;
-	position: relative;
+	@include clay-css($cadmin-label-item);
 
 	a {
-		display: inline-flex;
+		@include clay-link(setter(map-get($cadmin-label-item, link), ()));
 	}
 
 	.btn-unstyled {
-		color: inherit;
-		display: inline-flex;
+		@include clay-button-variant(
+			setter(map-get($cadmin-label-item, btn-unstyled), ())
+		);
 	}
 
 	.close {
-		@include clay-close($cadmin-label-close);
+		@include clay-close(setter(map-get($cadmin-label-item, close), ()));
 	}
 
 	.lexicon-icon {
-		height: $cadmin-label-lexicon-icon-height;
-		margin-top: $cadmin-label-lexicon-icon-margin-top;
-		width: $cadmin-label-lexicon-icon-width;
+		@include clay-css(
+			setter(map-get($cadmin-label-item, lexicon-icon), ())
+		);
 	}
 
 	.text-truncate-inline {
-		display: inline-flex;
+		@include clay-css(
+			setter(map-get($cadmin-label-item, text-truncate-inline), ())
+		);
 	}
 }
 
 .label-item-expand {
-	flex-grow: 1;
-	flex-shrink: 1;
-	min-width: 16px;
-	word-wrap: break-word;
+	@include clay-css($cadmin-label-item-expand);
 
 	a {
-		flex-direction: column;
+		@include clay-link(
+			setter(map-get($cadmin-label-item-expand, link), ())
+		);
 	}
 }
 
 .label-item-before {
-	margin-right: $cadmin-label-item-spacer-x;
+	@include clay-css($cadmin-label-item-before);
 }
 
 .label-item-after {
-	margin-left: $cadmin-label-item-spacer-x;
+	@include clay-css($cadmin-label-item-after);
 }
 
 // Label Sizes
 
-.label-lg {
-	@include clay-label-size($cadmin-label-lg);
+@each $cadmin-selector, $cadmin-value in $cadmin-label-sizes {
+	%#{$cadmin-selector} {
+		@include clay-label-variant($cadmin-value);
+	}
+
+	.#{$cadmin-selector} {
+		@extend %#{$cadmin-selector} !optional;
+	}
 }
 
 // Label Variants
 
 @each $cadmin-color, $cadmin-value in $cadmin-label-palette {
+	%label-#{$cadmin-color} {
+		@include clay-label-variant($cadmin-value);
+	}
+
 	.label-#{$cadmin-color} {
-		@include clay-label-variant(
-			map-get($cadmin-label-palette, $cadmin-color)
-		);
+		@extend %label-#{$cadmin-color} !optional;
 	}
 }

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

@@ -214,8 +214,8 @@
 .list-group-item-flex {
 	display: flex;
 	margin-bottom: math-sign($cadmin-list-group-border-width);
-	padding-left: $cadmin-list-group-item-padding-x / 2;
-	padding-right: $cadmin-list-group-item-padding-x / 2;
+	padding-left: $cadmin-list-group-item-padding-x * 0.5;
+	padding-right: $cadmin-list-group-item-padding-x * 0.5;
 
 	&:last-child {
 		margin-bottom: 0;
@@ -231,8 +231,8 @@
 
 	.autofit-col {
 		justify-content: $cadmin-list-group-item-flex-align-items;
-		padding-left: $cadmin-list-group-item-padding-x / 2;
-		padding-right: $cadmin-list-group-item-padding-x / 2;
+		padding-left: $cadmin-list-group-item-padding-x * 0.5;
+		padding-right: $cadmin-list-group-item-padding-x * 0.5;
 
 		.custom-control:only-child {
 			margin-bottom: 0;

package/src/scss/cadmin/components/_modals.scss

@@ -216,7 +216,7 @@
 	}
 
 	> * {
-		margin: $cadmin-modal-footer-margin-between / 2;
+		margin: $cadmin-modal-footer-margin-between * 0.5;
 	}
 }
 

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

@@ -32,7 +32,7 @@
 
 .multi-step-title-center {
 	.multi-step-title {
-		margin-left: $cadmin-multi-step-icon-size / 2;
+		margin-left: $cadmin-multi-step-icon-size * 0.5;
 		max-width: $cadmin-multi-step-title-max-width;
 		overflow: hidden;
 		position: relative;
@@ -340,7 +340,7 @@
 			min-width: $cadmin-multi-step-icon-size;
 			padding-top: $cadmin-multi-step-title-font-size +
 				$cadmin-multi-step-title-margin-bottom +
-				($cadmin-multi-step-divider-height / 2);
+				($cadmin-multi-step-divider-height * 0.5);
 		}
 
 		.multi-step-title {

package/src/scss/cadmin/components/_navbar.scss

@@ -284,8 +284,8 @@
 
 							.container,
 							.container-fluid {
-								padding-left: $cadmin-grid-gutter-width / 2;
-								padding-right: $cadmin-grid-gutter-width / 2;
+								padding-left: $cadmin-grid-gutter-width * 0.5;
+								padding-right: $cadmin-grid-gutter-width * 0.5;
 							}
 
 							.navbar-nav,

package/src/scss/cadmin/components/_popovers.scss

@@ -56,15 +56,15 @@
 
 		&::before {
 			border-bottom-color: $cadmin-popover-arrow-outer-color;
-			border-width: 0 ($cadmin-popover-arrow-width / 2)
-				$cadmin-popover-arrow-height ($cadmin-popover-arrow-width / 2);
+			border-width: 0 ($cadmin-popover-arrow-width * 0.5)
+				$cadmin-popover-arrow-height ($cadmin-popover-arrow-width * 0.5);
 			top: 0;
 		}
 
 		&::after {
 			border-bottom-color: $cadmin-popover-bottom-arrow-color;
-			border-width: 0 ($cadmin-popover-arrow-width / 2)
-				$cadmin-popover-arrow-height ($cadmin-popover-arrow-width / 2);
+			border-width: 0 ($cadmin-popover-arrow-width * 0.5)
+				$cadmin-popover-arrow-height ($cadmin-popover-arrow-width * 0.5);
 			top: $cadmin-popover-border-width;
 		}
 	}
@@ -97,15 +97,15 @@
 
 		&::before {
 			border-left-color: $cadmin-popover-arrow-outer-color;
-			border-width: ($cadmin-popover-arrow-width / 2) 0
-				($cadmin-popover-arrow-width / 2) $cadmin-popover-arrow-height;
+			border-width: ($cadmin-popover-arrow-width * 0.5) 0
+				($cadmin-popover-arrow-width * 0.5) $cadmin-popover-arrow-height;
 			right: 0;
 		}
 
 		&::after {
 			border-left-color: $cadmin-popover-left-arrow-color;
-			border-width: ($cadmin-popover-arrow-width / 2) 0
-				($cadmin-popover-arrow-width / 2) $cadmin-popover-arrow-height;
+			border-width: ($cadmin-popover-arrow-width * 0.5) 0
+				($cadmin-popover-arrow-width * 0.5) $cadmin-popover-arrow-height;
 			right: $cadmin-popover-border-width;
 		}
 	}
@@ -124,15 +124,17 @@
 
 		&::before {
 			border-right-color: $cadmin-popover-arrow-outer-color;
-			border-width: ($cadmin-popover-arrow-width / 2)
-				$cadmin-popover-arrow-height ($cadmin-popover-arrow-width / 2) 0;
+			border-width: ($cadmin-popover-arrow-width * 0.5)
+				$cadmin-popover-arrow-height ($cadmin-popover-arrow-width * 0.5)
+				0;
 			left: 0;
 		}
 
 		&::after {
 			border-right-color: $cadmin-popover-right-arrow-color;
-			border-width: ($cadmin-popover-arrow-width / 2)
-				$cadmin-popover-arrow-height ($cadmin-popover-arrow-width / 2) 0;
+			border-width: ($cadmin-popover-arrow-width * 0.5)
+				$cadmin-popover-arrow-height ($cadmin-popover-arrow-width * 0.5)
+				0;
 			left: $cadmin-popover-border-width;
 		}
 	}
@@ -149,14 +151,14 @@
 		&::before {
 			border-top-color: $cadmin-popover-arrow-outer-color;
 			border-width: $cadmin-popover-arrow-height
-				($cadmin-popover-arrow-width / 2) 0;
+				($cadmin-popover-arrow-width * 0.5) 0;
 			bottom: 0;
 		}
 
 		&::after {
 			border-top-color: $cadmin-popover-top-arrow-color;
 			border-width: $cadmin-popover-arrow-height
-				($cadmin-popover-arrow-width / 2) 0;
+				($cadmin-popover-arrow-width * 0.5) 0;
 			bottom: $cadmin-popover-border-width;
 		}
 	}
@@ -238,14 +240,14 @@
 		&::after {
 			border-top-color: $cadmin-popover-arrow-color;
 			border-width: $cadmin-popover-arrow-height
-				($cadmin-popover-arrow-width / 2) 0;
+				($cadmin-popover-arrow-width * 0.5) 0;
 			bottom: $cadmin-popover-border-width;
 		}
 
 		&::before {
 			border-top-color: $cadmin-popover-arrow-outer-color;
 			border-width: $cadmin-popover-arrow-height
-				($cadmin-popover-arrow-width / 2) 0;
+				($cadmin-popover-arrow-width * 0.5) 0;
 			bottom: 0;
 		}
 	}
@@ -281,15 +283,17 @@
 
 		&::after {
 			border-right-color: $cadmin-popover-arrow-color;
-			border-width: ($cadmin-popover-arrow-width / 2)
-				$cadmin-popover-arrow-height ($cadmin-popover-arrow-width / 2) 0;
+			border-width: ($cadmin-popover-arrow-width * 0.5)
+				$cadmin-popover-arrow-height ($cadmin-popover-arrow-width * 0.5)
+				0;
 			left: $cadmin-popover-border-width;
 		}
 
 		&::before {
 			border-right-color: $cadmin-popover-arrow-outer-color;
-			border-width: ($cadmin-popover-arrow-width / 2)
-				$cadmin-popover-arrow-height ($cadmin-popover-arrow-width / 2) 0;
+			border-width: ($cadmin-popover-arrow-width * 0.5)
+				$cadmin-popover-arrow-height ($cadmin-popover-arrow-width * 0.5)
+				0;
 			left: 0;
 		}
 	}
@@ -323,15 +327,15 @@
 
 		&:after {
 			border-bottom-color: $cadmin-popover-arrow-color;
-			border-width: 0 ($cadmin-popover-arrow-width / 2)
-				$cadmin-popover-arrow-height ($cadmin-popover-arrow-width / 2);
+			border-width: 0 ($cadmin-popover-arrow-width * 0.5)
+				$cadmin-popover-arrow-height ($cadmin-popover-arrow-width * 0.5);
 			top: $cadmin-popover-border-width;
 		}
 
 		&:before {
 			border-bottom-color: $cadmin-popover-arrow-outer-color;
-			border-width: 0 ($cadmin-popover-arrow-width / 2)
-				$cadmin-popover-arrow-height ($cadmin-popover-arrow-width / 2);
+			border-width: 0 ($cadmin-popover-arrow-width * 0.5)
+				$cadmin-popover-arrow-height ($cadmin-popover-arrow-width * 0.5);
 			top: 0;
 		}
 	}
@@ -367,15 +371,15 @@
 
 		&::after {
 			border-left-color: $cadmin-popover-arrow-color;
-			border-width: ($cadmin-popover-arrow-width / 2) 0
-				($cadmin-popover-arrow-width / 2) $cadmin-popover-arrow-height;
+			border-width: ($cadmin-popover-arrow-width * 0.5) 0
+				($cadmin-popover-arrow-width * 0.5) $cadmin-popover-arrow-height;
 			right: $cadmin-popover-border-width;
 		}
 
 		&::before {
 			border-left-color: $cadmin-popover-arrow-outer-color;
-			border-width: ($cadmin-popover-arrow-width / 2) 0
-				($cadmin-popover-arrow-width / 2) $cadmin-popover-arrow-height;
+			border-width: ($cadmin-popover-arrow-width * 0.5) 0
+				($cadmin-popover-arrow-width * 0.5) $cadmin-popover-arrow-height;
 			right: 0;
 		}
 	}
@@ -399,7 +403,7 @@
 .clay-popover-top {
 	.arrow {
 		left: 50%;
-		margin-left: -($cadmin-popover-arrow-width / 2);
+		margin-left: math-sign($cadmin-popover-arrow-width * 0.5);
 	}
 }
 
@@ -422,7 +426,7 @@
 .clay-popover-left,
 .clay-popover-right {
 	.arrow {
-		margin-top: -($cadmin-popover-arrow-height / 2);
+		margin-top: math-sign($cadmin-popover-arrow-height * 0.5);
 		top: 50%;
 	}
 }

package/src/scss/cadmin/components/_reboot.scss

@@ -173,14 +173,7 @@ html#{$cadmin-selector} {
 		}
 
 		a {
-			color: $cadmin-link-color;
-			cursor: $cadmin-link-cursor;
-			text-decoration: $cadmin-link-decoration;
-
-			&:hover {
-				color: $cadmin-link-hover-color;
-				text-decoration: $cadmin-link-hover-decoration;
-			}
+			@include clay-link($cadmin-link);
 		}
 
 		// Code

package/src/scss/cadmin/components/_sidebar.scss

@@ -90,7 +90,7 @@
 	}
 
 	.sticker {
-		@include clay-sticker-size($cadmin-sidebar-list-group-sticker-size);
+		@include clay-sticker-variant($cadmin-sidebar-list-group-sticker-size);
 	}
 }