@clayui/css 3.41.0 → 3.42.0

package/src/scss/variables/_popovers.scss

@@ -46,3 +46,395 @@ $popover-right-top-arrow-color: $popover-header-bg !default;
 $popover-top-arrow-color: $popover-arrow-color !default;
 $popover-top-left-arrow-color: null !default;
 $popover-top-right-arrow-color: null !default;
+
+// .popover
+
+$popover: () !default;
+$popover: map-deep-merge(
+	(
+		background-clip: padding-box,
+		background-color: $popover-bg,
+		border: $popover-border-width solid $popover-border-color,
+		border-radius: clay-enable-rounded($popover-border-radius),
+		box-shadow: clay-enable-shadows($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: (
+				border-color: transparent,
+				border-style: solid,
+				content: '',
+				display: block,
+				position: absolute,
+			),
+			after: (
+				border-color: transparent,
+				border-style: solid,
+				content: '',
+				display: block,
+				position: absolute,
+			),
+		),
+		inline-scroller: (
+			max-height: $popover-inline-scroller-max-height,
+		),
+	),
+	$popover
+);
+
+// .popover-header
+
+$popover-header: () !default;
+$popover-header: map-deep-merge(
+	(
+		color: $popover-header-color,
+		background-color: $popover-header-bg,
+		border-bottom: $popover-border-width solid
+			clay-darken($popover-header-bg, 5%),
+		border-color: $popover-header-border-color,
+		border-top-left-radius:
+			clay-enable-rounded($popover-inner-border-radius),
+		border-top-right-radius:
+			clay-enable-rounded($popover-inner-border-radius),
+		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,
+		empty: (
+			display: none,
+		),
+	),
+	$popover-header
+);
+
+// .popover-body
+
+$popover-body: () !default;
+$popover-body: map-merge(
+	(
+		border-bottom-left-radius:
+			clay-enable-rounded($popover-offset-border-width),
+		border-bottom-right-radius:
+			clay-enable-rounded($popover-offset-border-width),
+		color: $popover-body-color,
+		padding: $popover-body-padding-y $popover-body-padding-x,
+	),
+	$popover-body
+);
+
+// .clay-popover-top, .clay-popover-top-left, .clay-popover-top-right
+
+$clay-popover-top: () !default;
+$clay-popover-top: map-deep-merge(
+	(
+		margin-bottom: $popover-arrow-height,
+		arrow: (
+			left: 50%,
+			margin-left: math-sign($popover-arrow-width * 0.5),
+			bottom:
+				calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1),
+			margin: 0,
+			before: (
+				border-top-color: $popover-arrow-outer-color,
+				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 * 0.5,
+					)
+					0,
+				bottom: $popover-border-width,
+			),
+		),
+	),
+	$clay-popover-top
+);
+
+// .clay-popover-top-left
+
+$clay-popover-top-left: () !default;
+$clay-popover-top-left: map-deep-merge(
+	(
+		arrow: (
+			left: $popover-arrow-offset,
+			margin: 0,
+			after: (
+				border-top-color: $popover-top-left-arrow-color,
+			),
+		),
+	),
+	$clay-popover-top-left
+);
+
+// .clay-popover-top-right
+
+$clay-popover-top-right: () !default;
+$clay-popover-top-right: map-deep-merge(
+	(
+		arrow: (
+			left: auto,
+			right: $popover-arrow-offset,
+			margin: 0,
+			after: (
+				border-top-color: $popover-top-right-arrow-color,
+			),
+		),
+	),
+	$clay-popover-top-right
+);
+
+// .clay-popover-right, .clay-popover-right-bottom, .clay-popover-right-top
+
+$clay-popover-right: () !default;
+$clay-popover-right: map-deep-merge(
+	(
+		margin-left: $popover-arrow-height,
+		arrow: (
+			height: $popover-arrow-width,
+			left:
+				calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1),
+			margin: math-sign($popover-arrow-height * 0.5) 0 0,
+			top: 50%,
+			width: $popover-arrow-height,
+			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,
+			),
+			after: (
+				border-right-color: $popover-right-arrow-color,
+				border-width: (
+					$popover-arrow-width * 0.5,
+				)
+				$popover-arrow-height
+				(
+					$popover-arrow-width * 0.5,
+				)
+				0,
+				left: $popover-border-width,
+			),
+		),
+	),
+	$clay-popover-right
+);
+
+// .clay-popover-right-bottom
+
+$clay-popover-right-bottom: () !default;
+$clay-popover-right-bottom: map-deep-merge(
+	(
+		arrow: (
+			bottom: $popover-arrow-offset,
+			margin: 0,
+			top: auto,
+			after: (
+				border-right-color: $popover-right-bottom-arrow-color,
+			),
+		),
+	),
+	$clay-popover-right-bottom
+);
+
+// .clay-popover-right-top
+
+$clay-popover-right-top: () !default;
+$clay-popover-right-top: map-deep-merge(
+	(
+		arrow: (
+			margin: 0,
+			top: $popover-arrow-offset,
+			after: (
+				border-right-color: $popover-right-top-arrow-color,
+			),
+		),
+	),
+	$clay-popover-right-top
+);
+
+// .clay-popover-bottom, .clay-popover-bottom-left, .clay-popover-bottom-right
+
+$clay-popover-bottom: () !default;
+$clay-popover-bottom: map-deep-merge(
+	(
+		margin-top: $popover-arrow-height,
+		arrow: (
+			left: 50%,
+			margin: 0 0 0 math-sign($popover-arrow-width * 0.5),
+			top:
+				calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1),
+			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,
+			),
+			after: (
+				border-bottom-color: $popover-bottom-arrow-color,
+				border-width: 0
+					(
+						$popover-arrow-width * 0.5,
+					)
+					$popover-arrow-height
+					(
+						$popover-arrow-width * 0.5,
+					),
+				top: $popover-border-width,
+			),
+		),
+	),
+	$clay-popover-bottom
+);
+
+// .clay-popover-bottom-left
+
+$clay-popover-bottom-left: () !default;
+$clay-popover-bottom-left: map-deep-merge(
+	(
+		arrow: (
+			left: $popover-arrow-offset,
+			margin: 0,
+			after: (
+				border-bottom-color: $popover-bottom-left-arrow-color,
+			),
+		),
+	),
+	$clay-popover-bottom-left
+);
+
+// .clay-popover-bottom-right
+
+$clay-popover-bottom-right: () !default;
+$clay-popover-bottom-right: map-deep-merge(
+	(
+		arrow: (
+			left: auto,
+			right: $popover-arrow-offset,
+			after: (
+				border-bottom-color: $popover-bottom-right-arrow-color,
+			),
+		),
+	),
+	$clay-popover-bottom-right
+);
+
+// .clay-popover-left, .clay-popover-left-bottom, .clay-popover-left-top
+
+$clay-popover-left: () !default;
+$clay-popover-left: map-deep-merge(
+	(
+		margin-right: $popover-arrow-height,
+		arrow: (
+			height: $popover-arrow-width,
+			margin: math-sign($popover-arrow-height * 0.5) 0 0,
+			right:
+				calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1),
+			top: 50%,
+			width: $popover-arrow-height,
+			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,
+			),
+			after: (
+				border-left-color: $popover-left-arrow-color,
+				border-width: (
+					$popover-arrow-width * 0.5,
+				)
+				0
+				(
+					$popover-arrow-width * 0.5,
+				)
+				$popover-arrow-height,
+				right: $popover-border-width,
+			),
+		),
+	),
+	$clay-popover-left
+);
+
+// .clay-popover-left-bottom
+
+$clay-popover-left-bottom: () !default;
+$clay-popover-left-bottom: map-deep-merge(
+	(
+		arrow: (
+			bottom: $popover-arrow-offset,
+			margin: 0,
+			top: auto,
+			after: (
+				border-left-color: $popover-left-bottom-arrow-color,
+			),
+		),
+	),
+	$clay-popover-left-bottom
+);
+
+// .clay-popover-left-top
+
+$clay-popover-left-top: () !default;
+$clay-popover-left-top: map-deep-merge(
+	(
+		arrow: (
+			margin: 0,
+			top: $popover-arrow-offset,
+			after: (
+				border-left-color: $popover-left-top-arrow-color,
+			),
+		),
+	),
+	$clay-popover-left-top
+);

package/src/scss/variables/_sidebar.scss

@@ -103,12 +103,24 @@ $sidebar-light: map-deep-merge(
 $sidebar-light-navigation-bar: () !default;
 $sidebar-light-navigation-bar: map-deep-merge(
 	(
-		bg: $light,
+		background-color: $light,
 		border-color: $gray-300,
-		link-color: $navbar-light-color,
-		link-hover-color: $navbar-light-hover-color,
-		link-active-color: $navbar-light-active-color,
-		link-disabled-color: $navbar-light-disabled-color,
+		navbar-nav: (
+			nav-link: (
+				color: $navbar-light-color,
+				hover: (
+					color: $navbar-light-hover-color,
+				),
+				active: (
+					color: $navbar-light-active-color,
+				),
+				disabled: (
+					color: $navbar-light-disabled-color,
+				),
+			),
+		),
+		media-breakpoint-down: (),
+		media-breakpoint-up: (),
 	),
 	$sidebar-light-navigation-bar
 );

package/src/scss/variables/_tooltip.scss

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