@clayui/css 3.41.0 → 3.42.0

package/src/scss/cadmin/variables/_tooltip.scss

@@ -20,3 +20,302 @@ $cadmin-form-feedback-tooltip-line-height: $cadmin-line-height-base !default;
 $cadmin-form-feedback-tooltip-opacity: $cadmin-tooltip-opacity !default;
 $cadmin-form-feedback-tooltip-padding-x: $cadmin-tooltip-padding-x !default;
 $cadmin-form-feedback-tooltip-padding-y: $cadmin-tooltip-padding-y !default;
+
+// .tooltip
+
+$cadmin-tooltip: () !default;
+$cadmin-tooltip: map-deep-merge(
+	(
+		display: block,
+		font-family: $cadmin-font-family-base,
+		font-size: $cadmin-tooltip-font-size,
+		font-style: normal,
+		font-weight: $cadmin-font-weight-normal,
+		letter-spacing: normal,
+		line-break: auto,
+		line-height: $cadmin-line-height-base,
+		margin: $cadmin-tooltip-margin,
+		opacity: 0,
+		position: absolute,
+		text-align: left,
+		text-decoration: none,
+		text-shadow: none,
+		text-transform: none,
+		white-space: normal,
+		word-break: normal,
+		word-spacing: normal,
+		word-wrap: break-word,
+		z-index: $cadmin-zindex-tooltip,
+		show: (
+			opacity: $cadmin-tooltip-opacity,
+		),
+		arrow: (
+			display: block,
+			height: $cadmin-tooltip-arrow-height,
+			position: absolute,
+			width: $cadmin-tooltip-arrow-width,
+			before: (
+				border-color: transparent,
+				border-style: solid,
+				content: '',
+				position: absolute,
+			),
+		),
+	),
+	$cadmin-tooltip
+);
+
+// .tooltip-inner
+
+$cadmin-tooltip-inner: () !default;
+$cadmin-tooltip-inner: map-merge(
+	(
+		background-color: $cadmin-tooltip-bg,
+		border-radius: clay-enable-rounded($cadmin-tooltip-border-radius),
+		box-shadow: clay-enable-shadows([$cadmin-tooltip-box-shadow]),
+		color: $cadmin-tooltip-color,
+		max-width: $cadmin-tooltip-max-width,
+		padding: $cadmin-tooltip-padding-y $cadmin-tooltip-padding-x,
+		text-align: center,
+		white-space: pre-line,
+	),
+	$cadmin-tooltip-inner
+);
+
+// .clay-tooltip-bottom, .clay-tooltip-bottom-left, .clay-tooltip-bottom-right
+
+$cadmin-clay-tooltip-bottom: () !default;
+$cadmin-clay-tooltip-bottom: map-deep-merge(
+	(
+		padding-top: $cadmin-tooltip-arrow-height,
+		arrow: (
+			left: 50%,
+			margin-left: math-sign($cadmin-tooltip-arrow-width * 0.5),
+			top: 0,
+			before: (
+				border-bottom-color: $cadmin-tooltip-arrow-color,
+				border-width: 0
+					(
+						$cadmin-tooltip-arrow-width * 0.5,
+					)
+					$cadmin-tooltip-arrow-height,
+				bottom: 0,
+			),
+		),
+		tooltip-arrow: (
+			border-bottom-color: transparent,
+			border-right-color: transparent,
+			left: 50%,
+			top: 0,
+		),
+	),
+	$cadmin-clay-tooltip-bottom
+);
+
+// .clay-tooltip-bottom-left
+
+$cadmin-clay-tooltip-bottom-left: () !default;
+$cadmin-clay-tooltip-bottom-left: map-deep-merge(
+	(
+		arrow: (
+			left: $cadmin-tooltip-arrow-offset,
+			margin-left: 0,
+		),
+	),
+	$cadmin-clay-tooltip-bottom-left
+);
+
+// .clay-tooltip-bottom-right
+
+$cadmin-clay-tooltip-bottom-right: () !default;
+$cadmin-clay-tooltip-bottom-right: map-deep-merge(
+	(
+		arrow: (
+			left: auto,
+			margin-left: 0,
+			right: $cadmin-tooltip-arrow-offset,
+		),
+	),
+	$cadmin-clay-tooltip-bottom-right
+);
+
+// .clay-tooltip-left, .clay-tooltip-left-bottom, .clay-tooltip-left-top
+
+$cadmin-clay-tooltip-left: () !default;
+$cadmin-clay-tooltip-left: map-deep-merge(
+	(
+		padding-right: $cadmin-tooltip-arrow-height,
+		arrow: (
+			height: $cadmin-tooltip-arrow-width,
+			margin-top: math-sign($cadmin-tooltip-arrow-width * 0.5),
+			right: 0,
+			top: 50%,
+			width: $cadmin-tooltip-arrow-height,
+			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,
+				left: 0,
+			),
+		),
+		tooltip-arrow: (
+			border-bottom-color: transparent,
+			border-left-color: transparent,
+			right: 0,
+			top: 50%,
+		),
+	),
+	$cadmin-clay-tooltip-left
+);
+
+// .clay-tooltip-left-bottom
+
+$cadmin-clay-tooltip-left-bottom: () !default;
+$cadmin-clay-tooltip-left-bottom: map-deep-merge(
+	(
+		arrow: (
+			bottom: $cadmin-tooltip-arrow-offset,
+			margin-top: 0,
+			top: auto,
+		),
+	),
+	$cadmin-clay-tooltip-left-bottom
+);
+
+// .clay-tooltip-left-top
+
+$cadmin-clay-tooltip-left-top: () !default;
+$cadmin-clay-tooltip-left-top: map-deep-merge(
+	(
+		arrow: (
+			margin-top: 0,
+			top: $cadmin-tooltip-arrow-offset,
+		),
+	),
+	$cadmin-clay-tooltip-left-top
+);
+
+// .clay-tooltip-right, .clay-tooltip-right-bottom, .clay-tooltip-right-top
+
+$cadmin-clay-tooltip-right: () !default;
+$cadmin-clay-tooltip-right: map-deep-merge(
+	(
+		padding-left: $cadmin-tooltip-arrow-height,
+		arrow: (
+			height: $cadmin-tooltip-arrow-width,
+			left: 0,
+			margin-top: math-sign($cadmin-tooltip-arrow-width * 0.5),
+			top: 50%,
+			width: $cadmin-tooltip-arrow-height,
+			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,
+				right: 0,
+			),
+		),
+		tooltip-arrow: (
+			border-right-color: transparent,
+			border-top-color: transparent,
+			left: 0,
+			top: 50%,
+		),
+	),
+	$cadmin-clay-tooltip-right
+);
+
+// .clay-tooltip-right-bottom
+
+$cadmin-clay-tooltip-right-bottom: () !default;
+$cadmin-clay-tooltip-right-bottom: map-deep-merge(
+	(
+		arrow: (
+			bottom: $cadmin-tooltip-arrow-offset,
+			margin-top: 0,
+			top: auto,
+		),
+	),
+	$cadmin-clay-tooltip-right-bottom
+);
+
+// .clay-tooltip-right-top
+
+$cadmin-clay-tooltip-right-top: () !default;
+$cadmin-clay-tooltip-right-top: map-deep-merge(
+	(
+		arrow: (
+			margin-top: 0,
+			top: $cadmin-tooltip-arrow-offset,
+		),
+	),
+	$cadmin-clay-tooltip-right-top
+);
+
+// .clay-tooltip-top, .clay-tooltip-top-left, .clay-tooltip-top-right
+
+$cadmin-tooltip-top: () !default;
+$cadmin-tooltip-top: map-deep-merge(
+	(
+		padding-bottom: $cadmin-tooltip-arrow-height,
+		arrow: (
+			bottom: 0,
+			left: 50%,
+			margin-left: math-sign($cadmin-tooltip-arrow-width * 0.5),
+			before: (
+				border-top-color: $cadmin-tooltip-arrow-color,
+				border-width: $cadmin-tooltip-arrow-height
+					(
+						$cadmin-tooltip-arrow-width * 0.5,
+					)
+					0,
+				top: 0,
+			),
+		),
+		tooltip-arrow: (
+			border-left-color: transparent,
+			border-top-color: transparent,
+			bottom: 0,
+			left: 50%,
+		),
+	),
+	$cadmin-tooltip-top
+);
+
+// .clay-tooltip-top-left
+
+$cadmin-tooltip-top-left: () !default;
+$cadmin-tooltip-top-left: map-deep-merge(
+	(
+		arrow: (
+			left: $cadmin-tooltip-arrow-offset,
+			margin-left: 0,
+		),
+	),
+	$cadmin-tooltip-top-left
+);
+
+// .clay-tooltip-top-right
+
+$cadmin-tooltip-top-right: () !default;
+$cadmin-tooltip-top-right: map-deep-merge(
+	(
+		arrow: (
+			left: auto,
+			margin-left: 0,
+			right: $cadmin-tooltip-arrow-offset,
+		),
+	),
+	$cadmin-tooltip-top-right
+);

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

@@ -106,8 +106,8 @@
 // Makes .btn narrower
 
 .dropdown-toggle-split {
-	padding-left: $btn-padding-x * 0.75;
-	padding-right: $btn-padding-x * 0.75;
+	padding-left: calc(#{$btn-padding-x} * 0.75);
+	padding-right: calc(#{$btn-padding-x} * 0.75);
 
 	@if ($enable-caret) {
 		&::after,
@@ -123,13 +123,13 @@
 }
 
 .btn-sm + .dropdown-toggle-split {
-	padding-right: $btn-padding-x-sm * 0.75;
-	padding-left: $btn-padding-x-sm * 0.75;
+	padding-right: calc(#{$btn-padding-x-sm} * 0.75);
+	padding-left: calc(#{$btn-padding-x-sm} * 0.75);
 }
 
 .btn-lg + .dropdown-toggle-split {
-	padding-right: $btn-padding-x-lg * 0.75;
-	padding-left: $btn-padding-x-lg * 0.75;
+	padding-right: calc(#{$btn-padding-x-lg} * 0.75);
+	padding-left: calc(#{$btn-padding-x-lg} * 0.75);
 }
 
 // Button Group Vertical

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

@@ -10,8 +10,9 @@
 
 .multi-step-indicator-label-bottom {
 	.multi-step-item {
-		padding-bottom: $multi-step-indicator-label-font-size *
-			$line-height-base;
+		padding-bottom: calc(
+			#{$multi-step-indicator-label-font-size} * #{$line-height-base}
+		);
 	}
 
 	.multi-step-indicator-label {
@@ -21,17 +22,19 @@
 
 .multi-step-indicator-label-top {
 	.multi-step-item {
-		padding-top: $multi-step-indicator-label-font-size * $line-height-base;
+		padding-top: calc(
+			#{$multi-step-indicator-label-font-size} * #{$line-height-base}
+		);
 	}
 
 	.multi-step-indicator-label {
-		bottom: $multi-step-icon-size + $multi-step-divider-height;
+		bottom: calc(#{$multi-step-icon-size} + #{$multi-step-divider-height});
 	}
 }
 
 .multi-step-title-center {
 	.multi-step-title {
-		margin-left: $multi-step-icon-size * 0.5;
+		margin-left: calc(#{$multi-step-icon-size} * 0.5);
 		max-width: $multi-step-title-max-width;
 		overflow: hidden;
 		position: relative;
@@ -337,9 +340,10 @@
 		.multi-step-item {
 			margin-bottom: 0;
 			min-width: $multi-step-icon-size;
-			padding-top: $multi-step-title-font-size +
-				$multi-step-title-margin-bottom +
-				($multi-step-divider-height * 0.5);
+			padding-top: calc(
+				#{$multi-step-title-font-size} + #{$multi-step-title-margin-bottom} +
+					(#{$multi-step-divider-height} * 0.5)
+			);
 		}
 
 		.multi-step-title {

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);
 }