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

PATH: home / cf7x / public_html / wp-content_ / themes / consultstreet / inc / customizer / controls / scss / modules

/* Control: Switch. */

.customize-control-consultstreet-toggle {
	position: relative;

label {
		display: flex;
		flex-wrap: wrap;

.customize-control-title {
			width: calc(100% - 55px);
		}

.description {
			order: 99;
		}
	}

.switch {
		border: 1px solid #b4b9be;
		display: inline-block;
		width: 35px;
		height: 12px;
		border-radius: 8px;
		background: #b4b9be;
		vertical-align: middle;
		position: relative;
		top: 4px;
		cursor: pointer;
		user-select: none;
		transition: background 350ms ease;

&::after {
			content: "";
			display: block;
			width: 20px;
			height: 20px;
			border-radius: 50%;
			position: absolute;
			top: 50%;
			left: -3px;
			transition:
				all 350ms cubic-bezier(0, 0.95, 0.38, 0.98),
				background 150ms ease;
			background: #999;
			border: 1px solid rgba(0, 0, 0, 0.1);
			transform: translate3d(0, -50%, 0);
		}

&::before {
			content: "";
			display: block;
			width: 20px;
			height: 20px;
			border-radius: 50%;
			position: absolute;
			top: 50%;
			left: -3px;
			transition:
				all 350ms cubic-bezier(0, 0.95, 0.38, 0.98),
				background 150ms ease;
			background: rgba(0, 0, 0, 0.2);
			transform: translate3d(0, -50%, 0) scale(0);
		}

&:active::before {
			transform: translate3d(0, -50%, 0) scale(3);
		}
	}

input:checked + .switch {

&::before {
			background: rgba(0, 115, 170, 0.075);
			transform: translate3d(100%, -50%, 0) scale(1);
		}

&::after {
			background: $c-primary;
			transform: translate3d(100%, -50%, 0);
		}

&:active::before {
			background: rgba(0, 115, 170, 0.075);
			transform: translate3d(100%, -50%, 0) scale(3);
		}
	}
}

[+] ..
[-] _color.scss [open]
[-] _control-colors.scss [open]
[-] _radio-image.scss [open]
[-] _toggle.scss [open]
[-] _slider.scss [open]
[-] _sortable.scss [open]
[-] _radio-buttonset.scss [open]