ꦫꦣꦺꦤ꧀ꦄꦤ꧀ꦠꦱꦺꦤ

PATH: home / letacommog / camarsac / wp-content / plugins / jet-engine / framework / vue-ui / assets / src / scss / components

$color__switcher-panel-off: #ECECEC;
$color__switcher-panel-on: $color__accent-light;

$color__switcher-trigger-off: #fff;
$color__switcher-trigger-on: $color__accent;

.cx-vui-switcher {
	width: 36px;
	position: relative;
	cursor: pointer;
	padding: 3px 0;
	&__panel {
		width: 100%;
		height: 12px;
		border-radius: 6px;
		background: $color__switcher-panel-off;
		transition: all 150ms linear;
		.cx-vui-switcher--on & {
			background: $color__switcher-panel-on;
		}
	}
	&__trigger {
		width: 18px;
		height: 18px;
		left: 0;
		top: 50%;
		margin-top: -9px;
		box-shadow: 0px 1px 4px rgba(35, 40, 45, 0.24);
		transition: all 150ms linear;
		background: $color__switcher-trigger-off;
		border-radius: 100%;
		position: absolute;
		.cx-vui-switcher--on & {
			background: $color__switcher-trigger-on;
			left: calc( 100% - 18px );
		}
		.cx-vui-switcher--in-focus & {
			box-shadow: 0px 1px 4px rgba(35, 40, 45, 0.24), 0 0 0 9px rgba(166,167,168, .2);
		}
		.cx-vui-switcher--on.cx-vui-switcher--in-focus & {
			box-shadow: 0px 1px 4px rgba(35, 40, 45, 0.24), 0 0 0 9px rgba(0,124,186, .2);
		}
	}
}

[+] ..
[-] _radio.scss [edit]
[-] _repeater.scss [edit]
[-] _switcher.scss [edit]
[-] _colorpicker.scss [edit]
[-] _checkbox.scss [edit]
[-] _wp-media.scss [edit]
[-] _tabs.scss [edit]
[-] _notice.scss [edit]
[-] _collapse.scss [edit]
[-] _input.scss [edit]
[-] _f-select.scss [edit]
[-] _list-table.scss [edit]
[-] _pagination.scss [edit]
[-] _textarea.scss [edit]
[-] _iconpicker.scss [edit]
[-] _button.scss [edit]
[-] _select.scss [edit]
[-] _dimensions.scss [edit]