@clayui/css 3.41.0 → 3.44.1

package/src/scss/components/_pagination.scss

@@ -1,133 +1,49 @@
 .pagination {
-	@include border-radius();
-
-	display: flex;
-	flex-wrap: wrap;
-	font-size: $pagination-font-size;
-	list-style: none;
-	margin-bottom: $pagination-margin-bottom;
-	padding-left: 0;
+	@include clay-pagination-variant($pagination);
 }
 
 .pagination-bar {
-	align-items: center;
-	display: flex;
-	flex-wrap: wrap;
-
-	@include clay-scale-component {
-		flex-direction: column;
-		justify-content: center;
-	}
-
-	.pagination {
-		@include clay-scale-component {
-			margin-top: $pagination-margin-top-mobile;
-		}
-	}
+	@include clay-pagination-variant($pagination-bar);
 }
 
 // Pagination Link
 
 .page-link {
 	@include clay-link($pagination-link);
+}
 
-	&:hover {
-		@include clay-link($pagination-link-hover);
-	}
+// Pagination Item
 
-	&:focus {
-		@include clay-link($pagination-link-focus);
-	}
+.page-item {
+	@include clay-css($pagination-item);
 
-	&:active,
 	&.active {
-		@include clay-link($pagination-link-active);
+		.page-link {
+			@include clay-link(map-get($pagination-link, active));
+		}
 	}
 
-	&:disabled,
 	&.disabled {
-		@include clay-link($pagination-link-disabled);
-	}
-}
-
-.page-item.active,
-.page-item.show {
-	.page-link {
-		@include clay-link($pagination-link-active);
-	}
-}
-
-.page-item.disabled {
-	.page-link {
-		@include clay-link($pagination-link-disabled);
+		.page-link {
+			@include clay-link(map-get($pagination-link, disabled));
+		}
 	}
 }
 
-// Pagination Item
-
-.page-item {
-	@include clay-container($pagination-item);
-}
-
 .page-item:first-child .page-link,
 .page-link-first {
-	border-radius: $pagination-link-first-border-radius;
+	@include clay-css($pagination-link-first);
 }
 
 .page-item:last-child .page-link,
 .page-link-last {
-	border-radius: $pagination-link-last-border-radius;
+	@include clay-css($pagination-link-last);
 }
 
 // Pagination Items Per Page
 
 .pagination-items-per-page {
-	font-size: $pagination-items-per-page-font-size;
-	margin-bottom: $pagination-margin-bottom;
-
-	> a,
-	> button {
-		@include clay-link($pagination-items-per-page-link);
-
-		&:hover {
-			@include clay-link($pagination-items-per-page-link-hover);
-		}
-
-		&:focus {
-			@include clay-link($pagination-items-per-page-link-focus);
-		}
-
-		&:active,
-		&.active {
-			@include clay-link($pagination-items-per-page-link-active);
-		}
-
-		&:disabled,
-		&.disabled {
-			@include clay-link($pagination-items-per-page-link-disabled);
-		}
-	}
-
-	&.active,
-	&.show {
-		> a,
-		> button {
-			@include clay-link($pagination-items-per-page-link-active);
-		}
-	}
-
-	&.disabled {
-		> a,
-		> button {
-			@include clay-link($pagination-items-per-page-link-disabled);
-		}
-	}
-
-	+ .pagination-results {
-		@include clay-scale-component {
-			margin-left: auto;
-		}
-	}
+	@include clay-pagination-items-per-page-variant($pagination-items-per-page);
 }
 
 .page-item .dropdown-menu,
@@ -137,147 +53,15 @@
 }
 
 .pagination-results {
-	border-color: transparent;
-	border-style: solid;
-	border-width: $pagination-border-width;
-	color: $pagination-results-color;
-	font-size: $pagination-font-size;
-	line-height: $pagination-line-height;
-	margin-bottom: $pagination-margin-bottom;
-	margin-right: auto;
-	max-width: 100%;
-	padding: $pagination-padding-y $pagination-padding-x;
-	word-wrap: break-word;
+	@include clay-css($pagination-results);
 }
 
 // Pagination Sizes
 
 .pagination-sm {
-	.pagination-items-per-page {
-		@include border-radius($pagination-link-border-radius-sm);
-
-		.lexicon-icon {
-			margin-left: $pagination-items-per-page-lexicon-icon-margin-left-sm;
-			margin-right: $pagination-items-per-page-lexicon-icon-margin-top-sm;
-		}
-	}
-
-	.pagination-items-per-page > a,
-	.pagination-items-per-page > .btn-unstyled {
-		font-size: $pagination-font-size-sm;
-		height: $pagination-item-height-sm;
-		line-height: $pagination-line-height-sm;
-		padding: $pagination-padding-y-sm $pagination-padding-x;
-
-		@if ($enable-c-inner) {
-			.c-inner {
-				margin: math-sign($pagination-padding-y-sm)
-					math-sign($pagination-padding-x);
-			}
-		}
-	}
-
-	.pagination-results {
-		font-size: $pagination-font-size-sm;
-		line-height: $pagination-line-height-sm;
-		padding: $pagination-padding-y-sm $pagination-padding-x;
-	}
-
-	.page-link {
-		font-size: $pagination-font-size-sm;
-		height: $pagination-item-height-sm;
-		line-height: $pagination-line-height-sm;
-		padding-bottom: $pagination-padding-y-sm;
-		padding-right: $pagination-padding-x-sm;
-		padding-left: $pagination-padding-x-sm;
-		padding-top: $pagination-padding-y-sm;
-
-		@if ($enable-c-inner) {
-			.c-inner {
-				margin: math-sign($pagination-padding-y-sm)
-					math-sign($pagination-padding-x-sm);
-			}
-		}
-
-		&.btn-unstyled {
-			padding: $pagination-padding-y-sm $pagination-padding-x-sm;
-		}
-	}
-
-	.page-item:first-child .page-link,
-	.page-link-first {
-		border-bottom-left-radius: $pagination-link-border-radius-sm;
-		border-top-left-radius: $pagination-link-border-radius-sm;
-	}
-
-	.page-item:last-child .page-link,
-	.page-link-last {
-		border-bottom-right-radius: $pagination-link-border-radius-sm;
-		border-top-right-radius: $pagination-link-border-radius-sm;
-	}
+	@include clay-pagination-variant($pagination-sm);
 }
 
 .pagination-lg {
-	.pagination-items-per-page {
-		@include border-radius($pagination-link-border-radius-lg);
-
-		.lexicon-icon {
-			margin-left: $pagination-items-per-page-lexicon-icon-margin-left-lg;
-			margin-right: $pagination-items-per-page-lexicon-icon-margin-top-lg;
-		}
-	}
-
-	.pagination-items-per-page > a,
-	.pagination-items-per-page > .btn-unstyled {
-		font-size: $pagination-font-size-lg;
-		height: $pagination-item-height-lg;
-		line-height: $pagination-line-height-lg;
-		padding: $pagination-padding-y-lg $pagination-padding-x;
-
-		@if ($enable-c-inner) {
-			.c-inner {
-				margin: math-sign($pagination-padding-y-lg)
-					math-sign($pagination-padding-x);
-			}
-		}
-	}
-
-	.pagination-results {
-		font-size: $pagination-font-size-lg;
-		line-height: $pagination-line-height-lg;
-		padding: $pagination-padding-y-lg $pagination-padding-x;
-	}
-
-	.page-link {
-		font-size: $pagination-font-size-lg;
-		height: $pagination-item-height-lg;
-		line-height: $pagination-line-height-lg;
-		padding-bottom: $pagination-padding-y-lg;
-		padding-left: $pagination-padding-x-lg;
-		padding-right: $pagination-padding-x-lg;
-		padding-top: $pagination-padding-y-lg;
-
-		@if ($enable-c-inner) {
-			.c-inner {
-				margin: math-sign($pagination-padding-y-lg)
-					math-sign($pagination-padding-x-lg);
-			}
-		}
-
-		&.btn-unstyled {
-			padding: $pagination-padding-y-lg $pagination-padding-x-lg;
-		}
-	}
-
-	.page-item:first-child .page-link,
-	.page-link-first {
-		border-bottom-left-radius: $pagination-link-border-radius-lg;
-		border-top-left-radius: $pagination-link-border-radius-lg;
-	}
-
-	.page-item:last-child .page-link,
-	.page-link-last {
-		border-bottom-right-radius: $pagination-link-border-radius-lg;
-		border-top-right-radius: $pagination-link-border-radius-lg;
-	}
+	@include clay-pagination-variant($pagination-lg);
 }

package/src/scss/components/_popovers.scss

@@ -1,49 +1,5 @@
 .popover {
-	background-clip: padding-box;
-	background-color: $popover-bg;
-	border: $popover-border-width solid $popover-border-color;
-
-	@include border-radius($popover-border-radius);
-	@include box-shadow($popover-box-shadow);
-
-	display: block;
-	font-family: $font-family-base;
-	font-size: $popover-font-size;
-	font-style: normal;
-	font-weight: $font-weight-normal;
-	left: 0;
-	letter-spacing: normal;
-	line-break: auto;
-	line-height: $line-height-base;
-	max-width: $popover-max-width;
-	position: absolute;
-	text-align: left;
-	text-decoration: none;
-	text-shadow: none;
-	text-transform: none;
-	top: 0;
-	white-space: normal;
-	word-break: normal;
-	word-spacing: normal;
-	word-wrap: break-word;
-	z-index: $zindex-popover;
-
-	.arrow {
-		display: block;
-		height: $popover-arrow-height;
-		margin: 0 $popover-border-radius;
-		position: absolute;
-		width: $popover-arrow-width;
-
-		&::before,
-		&::after {
-			border-color: transparent;
-			border-style: solid;
-			content: '';
-			display: block;
-			position: absolute;
-		}
-	}
+	@include clay-popover-variant($popover);
 }
 
 %bs-popover-bottom {
@@ -179,43 +135,24 @@
 	@extend %bs-popover-top !optional;
 }
 
-.popover {
-	.inline-scroller {
-		max-height: $popover-inline-scroller-max-height;
-	}
-}
-
-.popover-header {
-	color: $popover-header-color;
-	background-color: $popover-header-bg;
-	border-bottom: $popover-border-width solid
-		clay-darken($popover-header-bg, 5%);
-	@include border-top-radius($popover-inner-border-radius);
-}
-
 .popover-header {
-	border-color: $popover-header-border-color;
+	@include clay-css($popover-header);
 
-	@include border-top-radius($popover-offset-border-width);
+	&::before {
+		@include clay-css(map-get($popover-header, before));
+	}
 
-	font-size: $popover-header-font-size;
-	font-weight: $popover-header-font-weight;
-	margin-bottom: $popover-header-margin-y;
-	margin-left: $popover-header-margin-x;
-	margin-right: $popover-header-margin-x;
-	margin-top: $popover-header-margin-y;
-	padding: $popover-header-padding-y $popover-header-padding-x;
+	&::after {
+		@include clay-css(map-get($popover-header, after));
+	}
 
 	&:empty {
-		display: none;
+		@include clay-css(map-get($popover-header, empty));
 	}
 }
 
 .popover-body {
-	@include border-bottom-radius($popover-offset-border-width);
-
-	color: $popover-body-color;
-	padding: $popover-body-padding-y $popover-body-padding-x;
+	@include clay-css($popover-body);
 }
 
 // Top
@@ -223,38 +160,15 @@
 .clay-popover-top,
 .clay-popover-top-left,
 .clay-popover-top-right {
-	margin-bottom: $popover-arrow-height;
-
-	.arrow {
-		bottom: calc(
-			(#{$popover-arrow-height} + #{$popover-border-width}) * -1
-		);
-		margin: 0;
-
-		&::after {
-			border-top-color: $popover-arrow-color;
-			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 * 0.5) 0;
-			bottom: 0;
-		}
-	}
-}
-
-.clay-popover-top .arrow::after {
-	border-top-color: $popover-top-arrow-color;
+	@include clay-popover-variant($clay-popover-top);
 }
 
-.clay-popover-top-left .arrow::after {
-	border-top-color: $popover-top-left-arrow-color;
+.clay-popover-top-left {
+	@include clay-popover-variant($clay-popover-top-left);
 }
 
-.clay-popover-top-right .arrow::after {
-	border-top-color: $popover-top-right-arrow-color;
+.clay-popover-top-right {
+	@include clay-popover-variant($clay-popover-top-right);
 }
 
 // Right
@@ -262,40 +176,15 @@
 .clay-popover-right,
 .clay-popover-right-bottom,
 .clay-popover-right-top {
-	margin-left: $popover-arrow-height;
-
-	.arrow {
-		height: $popover-arrow-width;
-		left: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
-		margin: 0;
-		width: $popover-arrow-height;
-
-		&::after {
-			border-right-color: $popover-arrow-color;
-			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 * 0.5) $popover-arrow-height
-				($popover-arrow-width * 0.5) 0;
-			left: 0;
-		}
-	}
+	@include clay-popover-variant($clay-popover-right);
 }
 
-.clay-popover-right .arrow::after {
-	border-right-color: $popover-right-arrow-color;
-}
-
-.clay-popover-right-bottom .arrow::after {
-	border-right-color: $popover-right-bottom-arrow-color;
+.clay-popover-right-bottom {
+	@include clay-popover-variant($clay-popover-right-bottom);
 }
 
-.clay-popover-right-top .arrow::after {
-	border-right-color: $popover-right-top-arrow-color;
+.clay-popover-right-top {
+	@include clay-popover-variant($clay-popover-right-top);
 }
 
 // Bottom
@@ -303,38 +192,15 @@
 .clay-popover-bottom,
 .clay-popover-bottom-left,
 .clay-popover-bottom-right {
-	margin-top: $popover-arrow-height;
-
-	.arrow {
-		margin: 0;
-		top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
-
-		&:after {
-			border-bottom-color: $popover-arrow-color;
-			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 * 0.5) $popover-arrow-height
-				($popover-arrow-width * 0.5);
-			top: 0;
-		}
-	}
-}
-
-.clay-popover-bottom .arrow::after {
-	border-bottom-color: $popover-bottom-arrow-color;
+	@include clay-popover-variant($clay-popover-bottom);
 }
 
-.clay-popover-bottom-left .arrow::after {
-	border-bottom-color: $popover-bottom-left-arrow-color;
+.clay-popover-bottom-left {
+	@include clay-popover-variant($clay-popover-bottom-left);
 }
 
-.clay-popover-bottom-right .arrow::after {
-	border-bottom-color: $popover-bottom-right-arrow-color;
+.clay-popover-bottom-right {
+	@include clay-popover-variant($clay-popover-bottom-right);
 }
 
 // Left
@@ -342,86 +208,13 @@
 .clay-popover-left,
 .clay-popover-left-bottom,
 .clay-popover-left-top {
-	margin-right: $popover-arrow-height;
-
-	.arrow {
-		height: $popover-arrow-width;
-		margin: 0;
-		right: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
-		width: $popover-arrow-height;
-
-		&::after {
-			border-left-color: $popover-arrow-color;
-			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 * 0.5) 0
-				($popover-arrow-width * 0.5) $popover-arrow-height;
-			right: 0;
-		}
-	}
+	@include clay-popover-variant($clay-popover-left);
 }
 
-.clay-popover-left .arrow::after {
-	border-left-color: $popover-left-arrow-color;
+.clay-popover-left-bottom {
+	@include clay-popover-variant($clay-popover-left-bottom);
 }
 
-.clay-popover-left-bottom .arrow::after {
-	border-left-color: $popover-left-bottom-arrow-color;
-}
-
-.clay-popover-left-top .arrow::after {
-	border-left-color: $popover-left-top-arrow-color;
-}
-
-// Bottom / Top
-
-.clay-popover-bottom,
-.clay-popover-top {
-	.arrow {
-		left: 50%;
-		margin-left: math-sign($popover-arrow-width * 0.5);
-	}
-}
-
-.clay-popover-bottom-left,
-.clay-popover-top-left {
-	.arrow {
-		left: $popover-arrow-offset;
-	}
-}
-
-.clay-popover-bottom-right,
-.clay-popover-top-right {
-	.arrow {
-		right: $popover-arrow-offset;
-	}
-}
-
-// Right / Left
-
-.clay-popover-left,
-.clay-popover-right {
-	.arrow {
-		margin-top: math-sign($popover-arrow-height * 0.5);
-		top: 50%;
-	}
-}
-
-.clay-popover-left-bottom,
-.clay-popover-right-bottom {
-	.arrow {
-		bottom: $popover-arrow-offset;
-	}
-}
-
-.clay-popover-left-top,
-.clay-popover-right-top {
-	.arrow {
-		top: $popover-arrow-offset;
-	}
+.clay-popover-left-top {
+	@include clay-popover-variant($clay-popover-left-top);
 }

package/src/scss/components/_toggle-switch.scss

@@ -52,7 +52,7 @@
 
 // Simple Toggle Switch
 
-.simple-toggle-switch {
+.simple-toggle-switch.toggle-switch {
 	@include clay-toggle-switch-variant($simple-toggle-switch);
 
 	// deprecated
@@ -66,6 +66,6 @@
 	}
 }
 
-.simple-toggle-switch-reverse {
+.simple-toggle-switch-reverse.simple-toggle-switch {
 	@include clay-toggle-switch-variant($simple-toggle-switch-reverse);
 }