@clayui/css 3.160.0 → 3.162.0

package/src/scss/atlas-custom-properties/variables/_toggle-switch.scss

@@ -0,0 +1,702 @@
+$toggle-switch-cursor: $link-cursor !default;
+$toggle-switch-font-weight: var(
+	--toggle-switch-font-weight,
+	$input-label-font-weight
+) !default;
+$toggle-switch-transition:
+	background-color 100ms ease-in,
+	border-color 100ms ease-in,
+	box-shadow 150ms ease-in-out,
+	color 100ms ease-in,
+	left 100ms ease-in,
+	opacity 100ms ease-in,
+	right 100ms ease-in !default;
+
+// must all be same units--start
+$toggle-switch-bar-padding: var(--toggle-switch-bar-padding, 4px) !default;
+$toggle-switch-button-width: var(--toggle-switch-button-width, 16px) !default;
+
+$toggle-switch-bar-padding-mobile: var(
+	--toggle-switch-bar-padding-mobile,
+	4px
+) !default;
+$toggle-switch-button-width-mobile: var(
+	--toggle-switch-button-width-mobile,
+	16px
+) !default;
+
+$toggle-switch-bar-height: calc(
+	#{$toggle-switch-bar-padding} * 2 + #{$toggle-switch-button-width}
+) !default;
+
+$toggle-switch-bar-height-mobile: calc(
+	#{$toggle-switch-bar-padding-mobile} * 2 + #{$toggle-switch-button-width-mobile}
+) !default;
+
+$toggle-switch-bar-width: var(--toggle-switch-bar-width, 48px) !default;
+
+$toggle-switch-bar-width-mobile: var(
+	--toggle-switch-bar-width-mobile,
+	40px
+) !default;
+// must all be same units--end
+
+$toggle-switch-bar-bg: var(
+	--toggle-switch-bar-background-color,
+	$gray-500
+) !default;
+$toggle-switch-bar-border-color: var(
+	--toggle-switch-bar-border-color,
+	$toggle-switch-bar-bg
+) !default;
+$toggle-switch-bar-border-radius: var(
+	--toggle-switch-bar-border-radius,
+	20px
+) !default;
+$toggle-switch-bar-border-width: var(
+	--toggle-switch-bar-border-width,
+	1px
+) !default;
+$toggle-switch-bar-font-size: var(--toggle-switch-bar-font-size, 10px) !default;
+$toggle-switch-bar-icon-color: var(
+	--toggle-switch-bar-icon-color,
+	$white
+) !default;
+
+$toggle-switch-bar-focus-box-shadow: $custom-control-indicator-focus-box-shadow !default;
+
+$toggle-switch-button-bg: var(
+	--toggle-switch-button-background-color,
+	$white
+) !default;
+$toggle-switch-button-border-color: var(
+	--toggle-switch-button-border-color,
+	$toggle-switch-button-bg
+) !default;
+$toggle-switch-button-border-radius: var(
+	--toggle-switch-button-border-radius,
+	50%
+) !default;
+$toggle-switch-button-border-width: var(
+	--toggle-switch-button-border-width,
+	1px
+) !default;
+$toggle-switch-button-font-size: var(
+	--toggle-switch-button-font-size,
+	$toggle-switch-bar-font-size
+) !default;
+$toggle-switch-button-icon-color: var(
+	--toggle-switch-button-icon-color,
+	$gray-900
+) !default;
+
+$toggle-switch-bar-font-size-mobile: var(
+	--toggle-switch-bar-font-size-mobile,
+	10px
+) !default;
+
+$toggle-switch-button-font-size-mobile: var(
+	--toggle-switch-button-font-size-mobile,
+	$toggle-switch-bar-font-size-mobile
+) !default;
+
+// Toggle Switch On
+
+$toggle-switch-bar-on-bg: var(
+	--toggle-switch-bar-on-background-color,
+	$component-active-bg
+) !default;
+$toggle-switch-bar-on-border-color: var(
+	--toggle-switch-bar-on-border-color,
+	$toggle-switch-bar-on-bg
+) !default;
+$toggle-switch-bar-on-icon-color: var(
+	--toggle-switch-bar-on-icon-color,
+	$white
+) !default;
+
+$toggle-switch-button-on-bg: var(
+	--toggle-switch-button-on-background-color,
+	$white
+) !default;
+$toggle-switch-button-on-border-color: var(
+	--toggle-switch-button-on-border-color,
+	$white
+) !default;
+$toggle-switch-button-on-border-radius: var(
+	--toggle-switch-button-on-border-radius,
+	$toggle-switch-button-border-radius
+) !default;
+$toggle-switch-button-on-icon-color: var(
+	--toggle-switch-button-on-icon-color,
+	$primary
+) !default;
+
+// Toggle Switch Disabled
+
+$toggle-switch-disabled-cursor: $disabled-cursor !default;
+$toggle-switch-disabled-opacity: var(
+	--toggle-switch-disabled-opacity,
+	0.4
+) !default;
+
+// Toggle Switch Label
+
+$toggle-switch-label-disabled-color: var(
+	--toggle-switch-label-disabled-color,
+	$input-label-disabled-color
+) !default;
+
+// Toggle Switch Text
+
+$toggle-switch-text-font-size: var(
+	--toggle-switch-text-font-size,
+	12px
+) !default;
+
+$toggle-switch-text-disabled-color: var(
+	--toggle-switch-text-disabled-color,
+	$input-label-disabled-color
+) !default;
+
+// .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: var(--togle-switch-check-font-size, 62.5%),
+		height: var(--togle-switch-check-height, $toggle-switch-bar-height),
+		opacity: 0,
+		position: absolute,
+		width: var(--togle-switch-check-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: $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:
+					calc(
+						#{$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:
+						calc(
+							#{$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:
+						calc(
+							#{$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:
+						calc(
+							#{$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:
+							calc(
+								#{$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:
+							calc(
+								#{$toggle-switch-bar-width-mobile} - #{$toggle-switch-bar-padding-mobile} -
+									#{$toggle-switch-button-width-mobile}
+							),
+					),
+				),
+			),
+
+			toggle-switch-text-left: (
+				line-height: $toggle-switch-bar-height-mobile,
+			),
+
+			toggle-switch-text-right: (
+				line-height: $toggle-switch-bar-height-mobile,
+			),
+		),
+	),
+	$toggle-switch-check
+);
+
+// .toggle-switch-label
+
+$toggle-switch-label: () !default;
+$toggle-switch-label: map-merge(
+	(
+		display: block,
+		margin-bottom: var(--toggle-switch-label-margin-bottom, 2px),
+	),
+	$toggle-switch-label
+);
+
+// .toggle-switch-text
+
+$toggle-switch-text: () !default;
+$toggle-switch-text: map-merge(
+	(
+		display: block,
+		font-size:
+			var(--toggle-switch-text-font-size, $toggle-switch-text-font-size),
+	),
+	$toggle-switch-text
+);
+
+// .toggle-switch-text-left
+
+$toggle-switch-text-left: () !default;
+$toggle-switch-text-left: map-deep-merge(
+	(
+		display: inline-flex,
+		line-height: $toggle-switch-bar-height,
+		margin-right: 8px,
+	),
+	$toggle-switch-text-left
+);
+
+// .toggle-switch-text-right
+
+$toggle-switch-text-right: () !default;
+$toggle-switch-text-right: map-merge(
+	(
+		display: inline-flex,
+		line-height: $toggle-switch-bar-height,
+		margin-left: 8px,
+	),
+	$toggle-switch-text-right
+);
+
+// .simple-toggle-switch
+
+$simple-toggle-switch-label-line-height: 1 !default;
+$simple-toggle-switch-label-spacer-x: 8px !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-label: (
+			margin-right: $simple-toggle-switch-label-spacer-x,
+		),
+
+		toggle-switch-check-bar: (
+			order: 5,
+		),
+
+		toggle-switch-check: (
+			toggle-switch-bar: (
+				order: 5,
+			),
+		),
+	),
+	$simple-toggle-switch-reverse
+);
+
+// .toggle-switch-sm
+
+$toggle-switch-sizes: () !default;
+$toggle-switch-sizes: map-deep-merge(
+	(
+		toggle-switch-sm: (
+			simple-toggle-switch: (
+				toggle-switch-label: (
+					max-width: calc(100% - 34px),
+				),
+			),
+
+			toggle-switch-check: (
+				height: 16px,
+				width: 30px,
+
+				toggle-switch-bar: (
+					height: 16px,
+					line-height: 16px,
+
+					before: (
+						width: 30px,
+					),
+
+					after: (
+						bottom: 0,
+						height: 12px,
+						left: 2px,
+						top: 2px,
+						width: 12px,
+					),
+
+					toggle-switch-handle: (
+						min-width: 30px,
+
+						after: (
+							margin-left: 34px,
+						),
+					),
+
+					toggle-switch-icon: (
+						font-size: 8px,
+						height: 16px,
+						left: 0,
+						line-height: 16px,
+						top: 0px,
+						width: 16px,
+					),
+
+					toggle-switch-icon-off: (
+						left: 13px,
+					),
+				),
+
+				checked: (
+					toggle-switch-bar: (
+						after: (
+							left: 16px,
+						),
+
+						button-icon: (
+							left: 14px,
+						),
+					),
+				),
+			),
+
+			toggle-switch-label: (
+				font-size: 12px,
+				max-width: calc(100% - 38px),
+			),
+		),
+	),
+	$toggle-switch-sizes
+);