@clayui/css 3.41.0 → 3.42.0

package/src/scss/cadmin/components/_tooltip.scss

@@ -1,56 +1,9 @@
 .tooltip {
-	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-align: start;
-	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;
-		}
-	}
+	@include clay-tooltip-variant($cadmin-tooltip);
 }
 
 .tooltip-inner {
-	background-color: $cadmin-tooltip-bg;
-
-	@include border-radius($cadmin-tooltip-border-radius);
-	@include box-shadow($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;
+	@include clay-css($cadmin-tooltip-inner);
 }
 
 .tooltip-arrow {
@@ -146,76 +99,20 @@
 	@extend %bs-tooltip-left !optional;
 }
 
-// Tooltip Positions
+// Bottom
 
 .clay-tooltip-bottom,
-.clay-tooltip-top {
-	.arrow {
-		left: 50%;
-		margin-left: math-sign($cadmin-tooltip-arrow-width * 0.5);
-	}
-}
-
 .clay-tooltip-bottom-left,
-.clay-tooltip-top-left {
-	.arrow {
-		left: $cadmin-tooltip-arrow-offset;
-	}
-}
-
-.clay-tooltip-bottom-right,
-.clay-tooltip-top-right {
-	.arrow {
-		right: $cadmin-tooltip-arrow-offset;
-	}
-}
-
-.clay-tooltip-left,
-.clay-tooltip-right {
-	.arrow {
-		margin-top: math-sign($cadmin-tooltip-arrow-width * 0.5);
-		top: 50%;
-	}
-}
-
-.clay-tooltip-left-bottom,
-.clay-tooltip-right-bottom {
-	.arrow {
-		bottom: $cadmin-tooltip-arrow-offset;
-	}
+.clay-tooltip-bottom-right {
+	@include clay-tooltip-variant($cadmin-clay-tooltip-bottom);
 }
 
-.clay-tooltip-left-top,
-.clay-tooltip-right-top {
-	.arrow {
-		top: $cadmin-tooltip-arrow-offset;
-	}
+.clay-tooltip-bottom-left {
+	@include clay-tooltip-variant($cadmin-clay-tooltip-bottom-left);
 }
 
-// Bottom
-
-.clay-tooltip-bottom,
-.clay-tooltip-bottom-left,
 .clay-tooltip-bottom-right {
-	padding-top: $cadmin-tooltip-arrow-height;
-
-	.arrow {
-		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;
-	}
+	@include clay-tooltip-variant($cadmin-clay-tooltip-bottom-right);
 }
 
 // Left
@@ -223,27 +120,15 @@
 .clay-tooltip-left,
 .clay-tooltip-left-bottom,
 .clay-tooltip-left-top {
-	padding-right: $cadmin-tooltip-arrow-height;
-
-	.arrow {
-		height: $cadmin-tooltip-arrow-width;
-		right: 0;
-		width: $cadmin-tooltip-arrow-height;
+	@include clay-tooltip-variant($cadmin-clay-tooltip-left);
+}
 
-		&::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;
-		}
-	}
+.clay-tooltip-left-bottom {
+	@include clay-tooltip-variant($cadmin-clay-tooltip-left-bottom);
+}
 
-	.tooltip-arrow {
-		border-bottom-color: transparent;
-		border-left-color: transparent;
-		right: 0;
-		top: 50%;
-	}
+.clay-tooltip-left-top {
+	@include clay-tooltip-variant($cadmin-clay-tooltip-left-top);
 }
 
 // Right
@@ -251,28 +136,15 @@
 .clay-tooltip-right,
 .clay-tooltip-right-bottom,
 .clay-tooltip-right-top {
-	padding-left: $cadmin-tooltip-arrow-height;
-
-	.arrow {
-		height: $cadmin-tooltip-arrow-width;
-		left: 0;
-		width: $cadmin-tooltip-arrow-height;
+	@include clay-tooltip-variant($cadmin-clay-tooltip-right);
+}
 
-		&::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;
-		}
-	}
+.clay-tooltip-right-bottom {
+	@include clay-tooltip-variant($cadmin-clay-tooltip-right-bottom);
+}
 
-	.tooltip-arrow {
-		border-right-color: transparent;
-		border-top-color: transparent;
-		left: 0;
-		top: 50%;
-	}
+.clay-tooltip-right-top {
+	@include clay-tooltip-variant($cadmin-clay-tooltip-right-top);
 }
 
 // Top
@@ -280,23 +152,13 @@
 .clay-tooltip-top,
 .clay-tooltip-top-left,
 .clay-tooltip-top-right {
-	padding-bottom: $cadmin-tooltip-arrow-height;
-
-	.arrow {
-		bottom: 0;
+	@include clay-tooltip-variant($cadmin-tooltip-top);
+}
 
-		&::before {
-			border-top-color: $cadmin-tooltip-arrow-color;
-			border-width: $cadmin-tooltip-arrow-height
-				($cadmin-tooltip-arrow-width * 0.5) 0;
-			top: 0;
-		}
-	}
+.clay-tooltip-top-left {
+	@include clay-tooltip-variant($cadmin-tooltip-top-left);
+}
 
-	.tooltip-arrow {
-		border-left-color: transparent;
-		border-top-color: transparent;
-		bottom: 0;
-		left: 50%;
-	}
+.clay-tooltip-top-right {
+	@include clay-tooltip-variant($cadmin-tooltip-top-right);
 }

package/src/scss/cadmin/variables/_management-bar.scss

@@ -1,11 +1,23 @@
 $cadmin-management-bar-base: () !default;
 $cadmin-management-bar-base: map-deep-merge(
 	(
-		link-border-radius: $cadmin-border-radius,
-		link-outline: 0,
-		link-transition: box-shadow 0.15s ease-in-out,
-		link-focus-box-shadow: $cadmin-btn-focus-box-shadow,
-		link-disabled-box-shadow: none,
+		border-color: transparent,
+		border-style: solid,
+		navbar-nav: (
+			nav-link: (
+				border-radius: $cadmin-border-radius,
+				outline: 0,
+				transition: box-shadow 0.15s ease-in-out,
+				focus: (
+					box-shadow: $cadmin-btn-focus-box-shadow,
+				),
+				disabled: (
+					box-shadow: none,
+				),
+			),
+		),
+		media-breakpoint-down: (),
+		media-breakpoint-up: (),
 	),
 	$cadmin-management-bar-base
 );
@@ -39,18 +51,32 @@ $cadmin-management-bar-size: map-deep-merge(
 $cadmin-management-bar-light: () !default;
 $cadmin-management-bar-light: map-deep-merge(
 	(
-		bg: $cadmin-white,
-		link-color: $cadmin-navbar-light-color,
-		link-font-weight: $cadmin-font-weight-semi-bold,
-		link-hover-color: $cadmin-gray-900,
-		link-hover-bg: rgba($cadmin-gray-900, 0.03),
-		link-focus-color: $cadmin-gray-900,
-		link-focus-bg: rgba($cadmin-gray-900, 0.03),
-		link-active-bg: rgba($cadmin-gray-900, 0.06),
-		link-active-color: $cadmin-navbar-light-active-color,
-		link-disabled-bg: transparent,
-		link-disabled-color: $cadmin-navbar-light-disabled-color,
-		link-disabled-opacity: 1,
+		background-color: $cadmin-white,
+		navbar-nav: (
+			nav-link: (
+				color: $cadmin-navbar-light-color,
+				font-weight: $cadmin-font-weight-semi-bold,
+				hover: (
+					color: $cadmin-gray-900,
+					background-color: rgba($cadmin-gray-900, 0.03),
+				),
+				focus: (
+					color: $cadmin-gray-900,
+					background-color: rgba($cadmin-gray-900, 0.03),
+				),
+				active: (
+					background-color: rgba($cadmin-gray-900, 0.06),
+					color: $cadmin-navbar-light-active-color,
+				),
+				disabled: (
+					background-color: transparent,
+					color: $cadmin-navbar-light-disabled-color,
+					opacity: 1,
+				),
+			),
+		),
+		media-breakpoint-down: (),
+		media-breakpoint-up: (),
 	),
 	$cadmin-management-bar-light
 );
@@ -58,21 +84,35 @@ $cadmin-management-bar-light: map-deep-merge(
 $cadmin-management-bar-primary: () !default;
 $cadmin-management-bar-primary: map-deep-merge(
 	(
-		bg: $cadmin-primary-l3,
+		background-color: $cadmin-primary-l3,
 		border-color: $cadmin-primary,
 		color: $cadmin-navbar-light-color,
-		link-border-radius: $cadmin-border-radius,
-		link-color: $cadmin-navbar-light-color,
-		link-font-weight: $cadmin-font-weight-semi-bold,
-		link-hover-color: $cadmin-gray-900,
-		link-hover-bg: rgba($cadmin-gray-900, 0.03),
-		link-focus-color: $cadmin-gray-900,
-		link-focus-bg: rgba($cadmin-gray-900, 0.03),
-		link-active-bg: rgba($cadmin-gray-900, 0.06),
-		link-active-color: $cadmin-navbar-light-active-color,
-		link-disabled-bg: transparent,
-		link-disabled-color: $cadmin-navbar-light-disabled-color,
-		link-disabled-opacity: 1,
+		navbar-nav: (
+			nav-link: (
+				border-radius: $cadmin-border-radius,
+				color: $cadmin-navbar-light-color,
+				font-weight: $cadmin-font-weight-semi-bold,
+				hover: (
+					color: $cadmin-gray-900,
+					background-color: rgba($cadmin-gray-900, 0.03),
+				),
+				focus: (
+					color: $cadmin-gray-900,
+					background-color: rgba($cadmin-gray-900, 0.03),
+				),
+				active: (
+					background-color: rgba($cadmin-gray-900, 0.06),
+					color: $cadmin-navbar-light-active-color,
+				),
+				disabled: (
+					background-color: transparent,
+					color: $cadmin-navbar-light-disabled-color,
+					opacity: 1,
+				),
+			),
+		),
+		media-breakpoint-down: (),
+		media-breakpoint-up: (),
 	),
 	$cadmin-management-bar-primary
 );

package/src/scss/cadmin/variables/_navigation-bar.scss

@@ -24,10 +24,22 @@ $cadmin-navigation-bar-size: map-deep-merge(
 $cadmin-navigation-bar-base: () !default;
 $cadmin-navigation-bar-base: map-deep-merge(
 	(
-		link-border-radius: 0,
-		link-outline: 0,
-		link-focus-box-shadow: $cadmin-btn-focus-box-shadow,
-		link-disabled-box-shadow: none,
+		border-color: transparent,
+		border-style: solid,
+		navbar-nav: (
+			nav-link: (
+				border-radius: 0,
+				outline: 0,
+				focus: (
+					box-shadow: $cadmin-btn-focus-box-shadow,
+				),
+				disabled: (
+					box-shadow: none,
+				),
+			),
+		),
+		media-breakpoint-down: (),
+		media-breakpoint-up: (),
 	),
 	$cadmin-navigation-bar-base
 );
@@ -35,15 +47,55 @@ $cadmin-navigation-bar-base: map-deep-merge(
 $cadmin-navigation-bar-light: () !default;
 $cadmin-navigation-bar-light: map-deep-merge(
 	(
-		bg: $cadmin-white,
+		background-color: $cadmin-white,
 		border-color: $cadmin-gray-200,
-		link-color: $cadmin-navbar-light-color,
-		link-font-weight: $cadmin-font-weight-semi-bold,
-		link-hover-color: $cadmin-gray-900,
-		link-focus-color: $cadmin-gray-900,
-		link-active-color: $cadmin-navbar-light-active-color,
-		link-disabled-color: $cadmin-gray-600,
-		link-disabled-opacity: $cadmin-btn-disabled-opacity,
+		navbar-nav: (
+			nav-link: (
+				color: $cadmin-navbar-light-color,
+				font-weight: $cadmin-font-weight-semi-bold,
+				hover: (
+					color: $cadmin-gray-900,
+				),
+				focus: (
+					color: $cadmin-gray-900,
+				),
+				active: (
+					color: $cadmin-navbar-light-active-color,
+				),
+				disabled: (
+					color: $cadmin-gray-600,
+					opacity: $cadmin-btn-disabled-opacity,
+				),
+			),
+		),
+		media-breakpoint-down: (
+			sm: (
+				navbar-expand-md: (
+					navbar-collapse: (
+						navbar-nav: (
+							dropdown-item: (
+								color: $cadmin-navbar-light-color,
+								font-weight: $cadmin-font-weight-semi-bold,
+								hover: (
+									color: $cadmin-gray-900,
+								),
+								focus: (
+									color: $cadmin-gray-900,
+								),
+								active: (
+									color: $cadmin-navbar-light-active-color,
+								),
+								disabled: (
+									color: $cadmin-gray-600,
+									opacity: $cadmin-btn-disabled-opacity,
+								),
+							),
+						),
+					),
+				),
+			),
+		),
+		media-breakpoint-up: (),
 	),
 	$cadmin-navigation-bar-light
 );
@@ -51,17 +103,61 @@ $cadmin-navigation-bar-light: map-deep-merge(
 $cadmin-navigation-bar-secondary: () !default;
 $cadmin-navigation-bar-secondary: map-deep-merge(
 	(
-		bg: $cadmin-secondary-d1,
+		background-color: $cadmin-secondary-d1,
 		color: $cadmin-white,
-		link-color: $cadmin-secondary-l2,
-		link-font-weight: $cadmin-font-weight-semi-bold,
-		link-hover-color: $cadmin-white,
-		link-focus-color: $cadmin-white,
-		link-active-color: $cadmin-white,
-		link-disabled-color: $cadmin-gray-400,
-		link-disabled-opacity: $cadmin-btn-disabled-opacity,
-		brand-color: rgba(255, 255, 255, 0.9),
-		brand-hover-color: rgba(255, 255, 255, 0.9),
+		navbar-nav: (
+			nav-link: (
+				color: $cadmin-secondary-l2,
+				font-weight: $cadmin-font-weight-semi-bold,
+				hover: (
+					color: $cadmin-white,
+				),
+				focus: (
+					color: $cadmin-white,
+				),
+				active: (
+					color: $cadmin-white,
+				),
+				disabled: (
+					color: $cadmin-gray-400,
+					opacity: $cadmin-btn-disabled-opacity,
+				),
+			),
+		),
+		navbar-brand: (
+			color: rgba(255, 255, 255, 0.9),
+			hover: (
+				color: rgba(255, 255, 255, 0.9),
+			),
+		),
+		media-breakpoint-down: (
+			sm: (
+				navbar-expand-md: (
+					navbar-collapse: (
+						navbar-nav: (
+							dropdown-item: (
+								color: $cadmin-secondary-l2,
+								font-weight: $cadmin-font-weight-semi-bold,
+								hover: (
+									color: $cadmin-white,
+								),
+								focus: (
+									color: $cadmin-white,
+								),
+								active: (
+									color: $cadmin-white,
+								),
+								disabled: (
+									color: $cadmin-gray-400,
+									opacity: $cadmin-btn-disabled-opacity,
+								),
+							),
+						),
+					),
+				),
+			),
+		),
+		media-breakpoint-up: (),
 	),
 	$cadmin-navigation-bar-secondary
 );