@clayui/css 3.40.1 → 3.44.0

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

@@ -6,14 +6,14 @@ $toggle-switch-transition: background-color 100ms ease-in,
 
 // must all be same units--start
 $toggle-switch-bar-padding: 0 !default; // space between button and bar, can be negative value
-$toggle-switch-bar-padding-mobile: $toggle-switch-bar-padding !default;
 $toggle-switch-button-width: 25px !default;
-$toggle-switch-button-width-mobile: $toggle-switch-button-width !default;
-
 $toggle-switch-bar-height: ($toggle-switch-bar-padding * 2) +
 	$toggle-switch-button-width !default;
-$toggle-switch-bar-height-mobile: $toggle-switch-bar-height !default;
 $toggle-switch-bar-width: 50px !default; // width of switch bar
+
+$toggle-switch-bar-padding-mobile: $toggle-switch-bar-padding !default;
+$toggle-switch-button-width-mobile: $toggle-switch-button-width !default;
+$toggle-switch-bar-height-mobile: $toggle-switch-bar-height !default;
 $toggle-switch-bar-width-mobile: $toggle-switch-bar-width !default;
 // must all be same units--end
 
@@ -60,7 +60,406 @@ $toggle-switch-text-font-size: 0.75rem !default;
 
 $toggle-switch-text-disabled-color: $input-label-disabled-color !default;
 
-// Simple Toggle Switch
+// .toggle-switch
+
+$toggle-switch: () !default;
+$toggle-switch: map-deep-merge(
+	(
+		breakpoint-down: sm,
+		cursor: $toggle-switch-cursor,
+		display: inline-block,
+		font-weight: $toggle-switch-font-weight,
+		max-width: 100%,
+		position: relative,
+		disabled: (
+			cursor: $toggle-switch-disabled-cursor,
+			toggle-switch-label: (
+				color: $toggle-switch-label-disabled-color,
+				cursor: $toggle-switch-disabled-cursor,
+			),
+			toggle-switch-text: (
+				color: $toggle-switch-text-disabled-color,
+			),
+		),
+	),
+	$toggle-switch
+);
+
+// .toggle-switch-check-bar
+
+$toggle-switch-check-bar: () !default;
+$toggle-switch-check-bar: map-merge(
+	(
+		display: inline-flex,
+		position: relative,
+	),
+	$toggle-switch-check-bar
+);
+
+// .toggle-switch-bar
+
+$toggle-switch-bar: () !default;
+$toggle-switch-bar: map-deep-merge(
+	(
+		toggle-switch-handle: (
+			display: block,
+			min-width: $toggle-switch-bar-width,
+			text-transform: uppercase,
+		),
+		toggle-switch-icon: (
+			font-size: $toggle-switch-bar-font-size,
+			lexicon-icon: (
+				margin-top: -0.2em,
+			),
+		),
+		button-icon: (
+			font-size: $toggle-switch-button-font-size,
+		),
+	),
+	$toggle-switch-bar
+);
+
+// .toggle-switch-check
+
+$toggle-switch-check: () !default;
+$toggle-switch-check: map-deep-merge(
+	(
+		breakpoint-down: sm,
+		bottom: 0,
+		font-size: 62.5%,
+		height: $toggle-switch-bar-height,
+		opacity: 0,
+		position: absolute,
+		width: $toggle-switch-bar-width,
+		z-index: 2,
+		toggle-switch-bar: (
+			display: inline-flex,
+			font-size: $toggle-switch-bar-font-size,
+			height: $toggle-switch-bar-height,
+			line-height: $toggle-switch-bar-height,
+			position: relative,
+			text-indent: 0,
+			user-select: none,
+			before: (
+				background-color: $toggle-switch-bar-bg,
+				border-color: $toggle-switch-bar-border-color,
+				border-radius:
+					clay-enable-rounded($toggle-switch-bar-border-radius),
+				border-style: solid,
+				border-width: $toggle-switch-bar-border-width,
+				bottom: 0,
+				content: ' ',
+				display: block,
+				left: 0,
+				position: absolute,
+				top: 0,
+				transition: $toggle-switch-transition,
+				width: $toggle-switch-bar-width,
+			),
+			after: (
+				background-color: $toggle-switch-button-bg,
+				border-color: $toggle-switch-button-border-color,
+				border-radius:
+					clay-enable-rounded($toggle-switch-button-border-radius),
+				border-style: solid,
+				border-width: $toggle-switch-button-border-width,
+				bottom: $toggle-switch-bar-padding,
+				content: '',
+				display: block,
+				height: $toggle-switch-button-width,
+				left: $toggle-switch-bar-padding,
+				position: absolute,
+				top: $toggle-switch-bar-padding,
+				transition: $toggle-switch-transition,
+				width: $toggle-switch-button-width,
+			),
+			toggle-switch-handle: (
+				before: (
+					transition:
+						clay-enable-transitions($toggle-switch-transition),
+				),
+				after: (
+					content: attr(data-label-off),
+					margin-left:
+						clay-data-label-text-position(
+							$toggle-switch-bar-width,
+							$toggle-switch-bar-padding
+						),
+					transition: $toggle-switch-transition,
+					white-space: nowrap,
+				),
+			),
+			toggle-switch-icon: (
+				color: $toggle-switch-bar-icon-color,
+				left: $toggle-switch-bar-padding,
+				line-height: $toggle-switch-button-width,
+				position: absolute,
+				text-align: center,
+				text-indent: 0,
+				top: $toggle-switch-bar-padding,
+				transition: $toggle-switch-transition,
+				width: $toggle-switch-button-width,
+				z-index: 1,
+			),
+			toggle-switch-icon-on: (
+				left: $toggle-switch-bar-padding,
+				opacity: 0,
+			),
+			toggle-switch-icon-off: (
+				left: $toggle-switch-bar-width - $toggle-switch-bar-padding -
+					$toggle-switch-button-width,
+			),
+			button-icon: (
+				color: $toggle-switch-button-icon-color,
+			),
+			button-icon-on: (
+				opacity: 0,
+			),
+		),
+		focus: (
+			toggle-switch-bar: (
+				before: (
+					box-shadow: $toggle-switch-bar-focus-box-shadow,
+				),
+			),
+		),
+		disabled: (
+			toggle-switch-bar: (
+				cursor: $toggle-switch-disabled-cursor,
+				opacity: $toggle-switch-disabled-opacity,
+			),
+		),
+		checked: (
+			toggle-switch-bar: (
+				before: (
+					background-color: $toggle-switch-bar-on-bg,
+					border-color: $toggle-switch-bar-on-border-color,
+					border-radius:
+						clay-enable-rounded($toggle-switch-bar-border-radius),
+					border-style: solid,
+					border-width: $toggle-switch-bar-border-width,
+				),
+				after: (
+					background-color: $toggle-switch-button-on-bg,
+					border-color: $toggle-switch-button-on-border-color,
+					border-radius:
+						clay-enable-rounded(
+							$toggle-switch-button-on-border-radius
+						),
+					border-style: solid,
+					border-width: $toggle-switch-button-border-width,
+					left: $toggle-switch-bar-width - $toggle-switch-bar-padding -
+						$toggle-switch-button-width,
+				),
+				toggle-switch-handle: (
+					after: (
+						content: attr(data-label-on),
+					),
+				),
+				toggle-switch-icon: (
+					color: $toggle-switch-bar-on-icon-color,
+				),
+				toggle-switch-icon-on: (
+					opacity: 1,
+				),
+				toggle-switch-icon-off: (
+					opacity: 0,
+				),
+				button-icon: (
+					color: $toggle-switch-button-on-icon-color,
+					left: $toggle-switch-bar-width - $toggle-switch-bar-padding -
+						$toggle-switch-button-width,
+				),
+				button-icon-on: (
+					opacity: 1,
+				),
+				button-icon-off: (
+					opacity: 0,
+				),
+			),
+		),
+		mobile: (
+			height: $toggle-switch-bar-height-mobile,
+			width: $toggle-switch-bar-width-mobile,
+			toggle-switch-bar: (
+				height: $toggle-switch-bar-height-mobile,
+				line-height: $toggle-switch-bar-height-mobile,
+				text-indent: 0,
+				before: (
+					width: $toggle-switch-bar-width-mobile,
+				),
+				after: (
+					bottom: $toggle-switch-bar-padding-mobile,
+					height: $toggle-switch-button-width-mobile,
+					left: $toggle-switch-bar-padding-mobile,
+					top: $toggle-switch-bar-padding-mobile,
+					width: $toggle-switch-button-width-mobile,
+				),
+				toggle-switch-handle: (
+					min-width: $toggle-switch-bar-width-mobile,
+					after: (
+						margin-left:
+							clay-data-label-text-position(
+								$toggle-switch-bar-width-mobile,
+								$toggle-switch-bar-padding-mobile
+							),
+					),
+				),
+				toggle-switch-icon: (
+					font-size: $toggle-switch-bar-font-size-mobile,
+					left: $toggle-switch-bar-padding-mobile,
+					line-height: $toggle-switch-button-width-mobile,
+					top: $toggle-switch-bar-padding-mobile,
+					width: $toggle-switch-button-width-mobile,
+				),
+				toggle-switch-icon-on: (
+					left: $toggle-switch-bar-padding-mobile,
+				),
+				toggle-switch-icon-off: (
+					left: $toggle-switch-bar-width-mobile -
+						$toggle-switch-bar-padding-mobile -
+						$toggle-switch-button-width-mobile,
+				),
+				button-icon: (
+					font-size: $toggle-switch-button-font-size-mobile,
+				),
+			),
+			checked: (
+				toggle-switch-bar: (
+					after: (
+						left: $toggle-switch-bar-width-mobile -
+							$toggle-switch-bar-padding-mobile -
+							$toggle-switch-button-width-mobile,
+					),
+					toggle-switch-handle: (
+						after: (
+							margin-left:
+								clay-data-label-text-position(
+									$toggle-switch-bar-width-mobile,
+									$toggle-switch-bar-padding-mobile
+								),
+						),
+					),
+					button-icon: (
+						left: $toggle-switch-bar-width-mobile -
+							$toggle-switch-bar-padding-mobile -
+							$toggle-switch-button-width-mobile,
+					),
+				),
+			),
+		),
+	),
+	$toggle-switch-check
+);
+
+// .toggle-switch-label
+
+$toggle-switch-label: () !default;
+$toggle-switch-label: map-merge(
+	(
+		display: block,
+		margin-bottom: 2px,
+	),
+	$toggle-switch-label
+);
+
+// .toggle-switch-text
+
+$toggle-switch-text: () !default;
+$toggle-switch-text: map-merge(
+	(
+		display: block,
+		font-size: $toggle-switch-text-font-size,
+	),
+	$toggle-switch-text
+);
+
+// .toggle-switch-text-left
+
+$toggle-switch-text-left: () !default;
+$toggle-switch-text-left: map-merge(
+	(
+		breakpoint-down: sm,
+		display: inline-flex,
+		line-height: $toggle-switch-bar-height,
+		margin-right: 8px,
+		mobile: (
+			line-height: $toggle-switch-bar-height-mobile,
+		),
+	),
+	$toggle-switch-text-left
+);
+
+// .toggle-switch-text-right
+
+$toggle-switch-text-right: () !default;
+$toggle-switch-text-right: map-deep-merge(
+	(
+		breakpoint-down: sm,
+		display: inline-flex,
+		line-height: $toggle-switch-bar-height,
+		margin-left: 8px,
+		mobile: (
+			line-height: $toggle-switch-bar-height-mobile,
+		),
+	),
+	$toggle-switch-text-right
+);
+
+// .simple-toggle-switch
 
 $simple-toggle-switch-label-line-height: 1 !default;
 $simple-toggle-switch-label-spacer-x: 0.5rem !default;
+
+$simple-toggle-switch: () !default;
+$simple-toggle-switch: map-deep-merge(
+	(
+		breakpoint-down: sm,
+		align-items: center,
+		display: inline-flex,
+		toggle-switch-label: (
+			line-height: $simple-toggle-switch-label-line-height,
+			margin-bottom: 0,
+			max-width:
+				calc(
+					100% - #{clay-data-label-text-position(
+							$toggle-switch-bar-width,
+							$toggle-switch-bar-padding
+						)}
+				),
+		),
+		mobile: (
+			toggle-switch-label: (
+				max-width:
+					calc(
+						100% - #{clay-data-label-text-position(
+								$toggle-switch-bar-width-mobile,
+								$toggle-switch-bar-padding-mobile
+							)}
+					),
+			),
+		),
+	),
+	$simple-toggle-switch
+);
+
+// .simple-toggle-switch-reverse
+
+$simple-toggle-switch-reverse: () !default;
+$simple-toggle-switch-reverse: map-deep-merge(
+	(
+		breakpoint-down: sm,
+		toggle-switch-check-bar: (
+			order: 5,
+		),
+		toggle-switch-check: (
+			toggle-switch-bar: (
+				order: 5,
+			),
+		),
+		toggle-switch-label: (
+			margin-right: $simple-toggle-switch-label-spacer-x,
+		),
+	),
+	$simple-toggle-switch-reverse
+);

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