@clayui/css 3.38.0 → 3.41.0

package/src/scss/components/_labels.scss

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

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

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

package/src/scss/components/_modals.scss

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

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

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

package/src/scss/components/_navbar.scss

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

package/src/scss/components/_popovers.scss

@@ -56,15 +56,15 @@
 
 		&::before {
 			border-bottom-color: $popover-arrow-outer-color;
-			border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height
-				($popover-arrow-width / 2);
+			border-width: 0 ($popover-arrow-width * 0.5) $popover-arrow-height
+				($popover-arrow-width * 0.5);
 			top: 0;
 		}
 
 		&::after {
 			border-bottom-color: $popover-bottom-arrow-color;
-			border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height
-				($popover-arrow-width / 2);
+			border-width: 0 ($popover-arrow-width * 0.5) $popover-arrow-height
+				($popover-arrow-width * 0.5);
 			top: $popover-border-width;
 		}
 	}
@@ -96,15 +96,15 @@
 
 		&::before {
 			border-left-color: $popover-arrow-outer-color;
-			border-width: ($popover-arrow-width / 2) 0
-				($popover-arrow-width / 2) $popover-arrow-height;
+			border-width: ($popover-arrow-width * 0.5) 0
+				($popover-arrow-width * 0.5) $popover-arrow-height;
 			right: 0;
 		}
 
 		&::after {
 			border-left-color: $popover-left-arrow-color;
-			border-width: ($popover-arrow-width / 2) 0
-				($popover-arrow-width / 2) $popover-arrow-height;
+			border-width: ($popover-arrow-width * 0.5) 0
+				($popover-arrow-width * 0.5) $popover-arrow-height;
 			right: $popover-border-width;
 		}
 	}
@@ -123,15 +123,15 @@
 
 		&::before {
 			border-right-color: $popover-arrow-outer-color;
-			border-width: ($popover-arrow-width / 2) $popover-arrow-height
-				($popover-arrow-width / 2) 0;
+			border-width: ($popover-arrow-width * 0.5) $popover-arrow-height
+				($popover-arrow-width * 0.5) 0;
 			left: 0;
 		}
 
 		&::after {
 			border-right-color: $popover-right-arrow-color;
-			border-width: ($popover-arrow-width / 2) $popover-arrow-height
-				($popover-arrow-width / 2) 0;
+			border-width: ($popover-arrow-width * 0.5) $popover-arrow-height
+				($popover-arrow-width * 0.5) 0;
 			left: $popover-border-width;
 		}
 	}
@@ -147,13 +147,13 @@
 
 		&::before {
 			border-top-color: $popover-arrow-outer-color;
-			border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
+			border-width: $popover-arrow-height ($popover-arrow-width * 0.5) 0;
 			bottom: 0;
 		}
 
 		&::after {
 			border-top-color: $popover-top-arrow-color;
-			border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
+			border-width: $popover-arrow-height ($popover-arrow-width * 0.5) 0;
 			bottom: $popover-border-width;
 		}
 	}
@@ -233,13 +233,13 @@
 
 		&::after {
 			border-top-color: $popover-arrow-color;
-			border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
+			border-width: $popover-arrow-height ($popover-arrow-width * 0.5) 0;
 			bottom: $popover-border-width;
 		}
 
 		&::before {
 			border-top-color: $popover-arrow-outer-color;
-			border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
+			border-width: $popover-arrow-height ($popover-arrow-width * 0.5) 0;
 			bottom: 0;
 		}
 	}
@@ -272,15 +272,15 @@
 
 		&::after {
 			border-right-color: $popover-arrow-color;
-			border-width: ($popover-arrow-width / 2) $popover-arrow-height
-				($popover-arrow-width / 2) 0;
+			border-width: ($popover-arrow-width * 0.5) $popover-arrow-height
+				($popover-arrow-width * 0.5) 0;
 			left: $popover-border-width;
 		}
 
 		&::before {
 			border-right-color: $popover-arrow-outer-color;
-			border-width: ($popover-arrow-width / 2) $popover-arrow-height
-				($popover-arrow-width / 2) 0;
+			border-width: ($popover-arrow-width * 0.5) $popover-arrow-height
+				($popover-arrow-width * 0.5) 0;
 			left: 0;
 		}
 	}
@@ -311,15 +311,15 @@
 
 		&:after {
 			border-bottom-color: $popover-arrow-color;
-			border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height
-				($popover-arrow-width / 2);
+			border-width: 0 ($popover-arrow-width * 0.5) $popover-arrow-height
+				($popover-arrow-width * 0.5);
 			top: $popover-border-width;
 		}
 
 		&:before {
 			border-bottom-color: $popover-arrow-outer-color;
-			border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height
-				($popover-arrow-width / 2);
+			border-width: 0 ($popover-arrow-width * 0.5) $popover-arrow-height
+				($popover-arrow-width * 0.5);
 			top: 0;
 		}
 	}
@@ -352,15 +352,15 @@
 
 		&::after {
 			border-left-color: $popover-arrow-color;
-			border-width: ($popover-arrow-width / 2) 0
-				($popover-arrow-width / 2) $popover-arrow-height;
+			border-width: ($popover-arrow-width * 0.5) 0
+				($popover-arrow-width * 0.5) $popover-arrow-height;
 			right: $popover-border-width;
 		}
 
 		&::before {
 			border-left-color: $popover-arrow-outer-color;
-			border-width: ($popover-arrow-width / 2) 0
-				($popover-arrow-width / 2) $popover-arrow-height;
+			border-width: ($popover-arrow-width * 0.5) 0
+				($popover-arrow-width * 0.5) $popover-arrow-height;
 			right: 0;
 		}
 	}
@@ -384,7 +384,7 @@
 .clay-popover-top {
 	.arrow {
 		left: 50%;
-		margin-left: -($popover-arrow-width / 2);
+		margin-left: math-sign($popover-arrow-width * 0.5);
 	}
 }
 
@@ -407,7 +407,7 @@
 .clay-popover-left,
 .clay-popover-right {
 	.arrow {
-		margin-top: -($popover-arrow-height / 2);
+		margin-top: math-sign($popover-arrow-height * 0.5);
 		top: 50%;
 	}
 }

package/src/scss/components/_reboot.scss

@@ -134,14 +134,7 @@ sup {
 }
 
 a {
-	color: $link-color;
-	cursor: $link-cursor;
-	text-decoration: $link-decoration;
-
-	&:hover {
-		color: $link-hover-color;
-		text-decoration: $link-hover-decoration;
-	}
+	@include clay-link($link);
 }
 
 // Code
@@ -262,40 +255,11 @@ textarea {
 }
 
 fieldset {
-	border: 0;
-	margin: 0;
-
-	// Browsers set a default `min-width: min-content;` on fieldsets,
-	// unlike e.g. `<div>`s, which have `min-width: 0;` by default.
-	// So we reset that to ensure fieldsets behave more like a standard block element.
-	// See https://github.com/twbs/bootstrap/issues/12359
-	// and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
-
-	min-width: 0;
-
-	// Reset the default outline behavior of fieldsets so they don't affect page layout.
-
-	padding: 0;
+	@include clay-css($fieldset);
 }
 
 legend {
-	// Correct the color inheritance from `fieldset` elements in IE
-
-	color: inherit;
-	display: block;
-	font-size: 1.5rem;
-	line-height: inherit;
-	margin-bottom: 0.5rem;
-
-	// Correct the text wrapping in Edge and IE
-
-	max-width: 100%;
-	padding: 0;
-
-	// Correct the text wrapping in Edge and IE
-
-	white-space: normal;
-	width: 100%;
+	@include clay-css($legend);
 }
 
 progress {

package/src/scss/components/_side-navigation.scss

@@ -1,6 +1,6 @@
 .container-fluid-1280.sidenav-container {
-	padding-left: floor(($grid-gutter-width / 2));
-	padding-right: floor(($grid-gutter-width / 2));
+	padding-left: floor(($grid-gutter-width * 0.5));
+	padding-right: floor(($grid-gutter-width * 0.5));
 }
 
 .sidenav-container {

package/src/scss/components/_sidebar.scss

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

package/src/scss/components/_stickers.scss

@@ -1,44 +1,5 @@
 .sticker {
-	align-items: center;
-	border-color: $sticker-border-color;
-
-	@include border-radius($sticker-border-radius);
-
-	border-style: $sticker-border-style;
-	border-width: $sticker-border-width;
-	color: $sticker-color;
-
-	@include clay-monospace($sticker-size);
-
-	display: inline-flex;
-	font-size: $sticker-font-size;
-	font-weight: $sticker-font-weight;
-	justify-content: center;
-	position: relative;
-	text-align: center;
-	vertical-align: middle;
-
-	> .inline-item {
-		font-size: $sticker-inline-item-font-size;
-		justify-content: center;
-	}
-
-	> .inline-item .lexicon-icon,
-	.lexicon-icon {
-		margin-top: 0;
-	}
-
-	&.rounded .sticker-overlay {
-		border-radius: $rounded-border-radius;
-	}
-
-	&.rounded-circle .sticker-overlay {
-		border-radius: $rounded-circle-border-radius;
-	}
-
-	&.rounded-0 .sticker-overlay {
-		border-radius: 0;
-	}
+	@include clay-sticker-variant($sticker);
 }
 
 .sticker-img {
@@ -47,70 +8,52 @@
 }
 
 .sticker-overlay {
-	align-items: center;
-
-	@include border-radius($sticker-border-radius);
-
-	bottom: 0;
-	display: flex;
-	justify-content: center;
-	left: 0;
-	overflow: hidden;
-	position: absolute;
-	right: 0;
-	top: 0;
+	@include clay-css($sticker-overlay);
 }
 
 // Sticker Positions
 
 .sticker-bottom-left {
-	bottom: $sticker-inside-offset;
-	left: $sticker-inside-offset;
-	position: absolute;
-	right: auto;
-	top: auto;
+	@include clay-css($sticker-bottom-left);
 }
 
 .sticker-bottom-right {
-	bottom: $sticker-inside-offset;
-	left: auto;
-	position: absolute;
-	right: $sticker-inside-offset;
-	top: auto;
+	@include clay-css($sticker-bottom-right);
 }
 
 .sticker-top-left {
-	left: $sticker-inside-offset;
-	position: absolute;
-	top: $sticker-inside-offset;
+	@include clay-css($sticker-top-left);
 }
 
 .sticker-top-right {
-	left: auto;
-	position: absolute;
-	right: $sticker-inside-offset;
-	top: $sticker-inside-offset;
+	@include clay-css($sticker-top-right);
 }
 
 .sticker-outside {
-	left: $sticker-outside-offset;
-	top: $sticker-outside-offset;
+	@include clay-css($sticker-outside);
 
 	&.sticker-bottom-left {
-		bottom: $sticker-outside-offset;
-		top: auto;
+		$bottom-left: setter(
+			map-get($sticker-outside, sticker-bottom-left),
+			()
+		);
+
+		@include clay-css($bottom-left);
 	}
 
 	&.sticker-bottom-right {
-		bottom: $sticker-outside-offset;
-		left: auto;
-		right: $sticker-outside-offset;
-		top: auto;
+		$bottom-right: setter(
+			map-get($sticker-outside, sticker-bottom-right),
+			()
+		);
+
+		@include clay-css($bottom-right);
 	}
 
 	&.sticker-top-right {
-		left: auto;
-		right: $sticker-outside-offset;
+		$top-right: setter(map-get($sticker-outside, sticker-top-right), ());
+
+		@include clay-css($top-right);
 	}
 }
 
@@ -122,31 +65,30 @@
 
 // Sticker Sizes
 
-.sticker-sm {
-	@include clay-sticker-size($sticker-sm);
-}
-
-.sticker-lg {
-	@include clay-sticker-size($sticker-lg);
-}
+@each $selector, $value in $sticker-sizes {
+	%#{$selector} {
+		@include clay-sticker-variant($value);
+	}
 
-.sticker-xl {
-	@include clay-sticker-size($sticker-xl);
+	.#{$selector} {
+		@extend %#{$selector} !optional;
+	}
 }
 
 // Sticker Variants
 
 @each $color, $value in $sticker-palette {
+	%sticker-#{$color} {
+		@include clay-sticker-variant($value);
+	}
+
 	.sticker-#{$color} {
-		background-color: map-get($value, bg);
-		border-color: map-get($value, border-color);
-		color: map-get($value, color);
+		@extend %sticker-#{$color} !optional;
 	}
 }
 
 // Sticker Circle
 
-.sticker-circle,
-.sticker-circle .sticker-overlay {
-	@include border-radius($sticker-circle-border-radius);
+.sticker-circle {
+	@include clay-sticker-variant($sticker-circle);
 }