@gravityforms/components/dist/css/admin/toggle.css

UI components for use in Gravity Forms development. Both React and vanilla js flavors.

.gform-admin .gform-toggle {
		align-items: flex-start;
		display: inline-flex;
		gap: 0.5rem;
	}

		.gform-admin .gform-toggle, .gform-admin .gform-toggle *, .gform-admin .gform-toggle *::before, .gform-admin .gform-toggle *::after {
			box-sizing: border-box;
		}

		.gform-admin .gform-toggle.gform-toggle--disabled {
			opacity: 0.5;
		}

	.gform-admin .gform-toggle--size-m, .gform-admin .gform-toggle--size-l {
		gap: 0.75rem;
	}

	.gform-admin .gform-toggle--width-full {
		display: flex;
		justify-content: space-between;
	}

	.gform-admin .gform-toggle--label-left {
		flex-direction: row-reverse;
	}

	.gform-admin .gform-toggle--width-full.gform-toggle--label-right {
		text-align: end;
	}

	.gform-admin input[type="checkbox"].gform-toggle__toggle {
		-webkit-appearance: none;
		   -moz-appearance: none;
		        appearance: none;
		background: none;
		border: 0;
		box-shadow: none;
		cursor: pointer;
		display: block;
		flex: none;
		margin: 0;
		outline: none;
		position: relative;
		width: auto;
	}

	.gform-admin input[type="checkbox"].gform-toggle__toggle::before {
			background: #d5d7e9;
			content: "";
			display: block;
			margin: 0;
			outline: 2px solid transparent;
			outline-offset: 2px;
			transition: all 0.15s ease;
		}

	.gform-admin input[type="checkbox"].gform-toggle__toggle::after {
			background-color: #fff;
			border-radius: 50%;
			box-shadow: 0 3px 8px rgba(18, 25, 97, 0.15), 0 1px 1px rgba(18, 25, 97, 0.16), 0 2px 1px rgba(18, 25, 97, 0.04);
			content: "";
			position: absolute;
			transition: all 0.15s ease;
		}

	.gform-admin input[type="checkbox"].gform-toggle__toggle.gform-toggle__toggle--has-icons::after {
				background-image: url('data:image/svg+xml,<svg viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.264466 0.514405C0.0656531 0.713217 0.0656538 1.03556 0.264466 1.23437L1.70439 2.6743L0.264466 4.11422C0.0656534 4.31304 0.0656532 4.63538 0.264466 4.83419C0.463278 5.033 0.785617 5.033 0.98443 4.83419L2.42436 3.39426L3.86428 4.83418C4.06309 5.033 4.38543 5.033 4.58425 4.83418C4.78306 4.63537 4.78306 4.31303 4.58424 4.11422L3.14432 2.6743L4.58425 1.23437C4.78306 1.03556 4.78306 0.713222 4.58425 0.51441C4.38543 0.315597 4.06309 0.315597 3.86428 0.51441L2.42436 1.95433L0.984429 0.514405C0.785617 0.315592 0.463278 0.315592 0.264466 0.514405Z" fill="%239092B0"/></svg>'); /* stylelint-disable-line */
				background-position: center;
				background-repeat: no-repeat;
				background-size: 35%;
			}

	.gform-admin input[type="checkbox"].gform-toggle__toggle.gform-toggle__toggle--has-icons:checked::after {
				background-image: url('data:image/svg+xml,<svg viewBox="0 0 7 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.33655 4.5513L5.99787 0.889985C6.22509 0.66277 6.59347 0.66277 6.82069 0.889985C7.0479 1.1172 7.0479 1.48559 6.82069 1.7128L2.33655 6.19693L0.179688 4.04007C-0.0475262 3.81286 -0.0475262 3.44447 0.179688 3.21726C0.406902 2.99004 0.775289 2.99004 1.0025 3.21726L2.33655 4.5513Z" fill="%233e7da6"/></svg>'); /* stylelint-disable-line */
				background-position: center;
				background-repeat: no-repeat;
				background-size: 45%;
			}

	.gform-admin input[type="checkbox"].gform-toggle__toggle:focus-visible::before {
				outline-color: #d5d7e9;
				outline-offset: 2px;
			}

	.gform-admin input[type="checkbox"].gform-toggle__toggle:focus-visible:checked::before {
				outline-color: #3e7da6;
			}

	.gform-admin input[type="checkbox"].gform-toggle__toggle:checked::before {
			background: #3e7da6;
		}

	.gform-admin .gform-toggle--theme-cosmos input[type="checkbox"].gform-toggle__toggle::before {
				background: #9092b0;
			}

	.gform-admin .gform-toggle--theme-cosmos input[type="checkbox"].gform-toggle__toggle:focus-visible::before {
					outline-color: #9092b0;
				}

	.gform-admin .gform-toggle--theme-cosmos input[type="checkbox"].gform-toggle__toggle:focus-visible:checked::before {
					outline-color: #0f3d6c;
				}

	.gform-admin .gform-toggle--theme-cosmos input[type="checkbox"].gform-toggle__toggle:focus-visible:hover:checked::before {
						outline-color: #242748;
					}

	.gform-admin .gform-toggle--theme-cosmos input[type="checkbox"].gform-toggle__toggle:focus-visible:hover:checked ~ .gform-toggle__icon {
						color: #242748;
					}

	.gform-admin .gform-toggle--theme-cosmos input[type="checkbox"].gform-toggle__toggle:checked::before {
					background: #0f3d6c;
				}

	.gform-admin .gform-toggle--theme-cosmos input[type="checkbox"].gform-toggle__toggle:checked.gform-toggle__toggle--has-icons::after {
						background-image: url('data:image/svg+xml,<svg viewBox="0 0 7 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.33655 4.5513L5.99787 0.889985C6.22509 0.66277 6.59347 0.66277 6.82069 0.889985C7.0479 1.1172 7.0479 1.48559 6.82069 1.7128L2.33655 6.19693L0.179688 4.04007C-0.0475262 3.81286 -0.0475262 3.44447 0.179688 3.21726C0.406902 2.99004 0.775289 2.99004 1.0025 3.21726L2.33655 4.5513Z" fill="%230f3d6c"/></svg>'); /* stylelint-disable-line */
					}

	.gform-admin .gform-toggle--theme-cosmos input[type="checkbox"].gform-toggle__toggle:checked:hover::before {
						background: #242748;
					}

	.gform-admin .gform-toggle--theme-cosmos input[type="checkbox"].gform-toggle__toggle:disabled {
				opacity: 1;
			}

	.gform-admin .gform-toggle--theme-cosmos input[type="checkbox"].gform-toggle__toggle:disabled::before {
					background: #ecedf8;
				}

	.gform-admin .gform-toggle--theme-cosmos input[type="checkbox"].gform-toggle__toggle:disabled:checked::before {
						opacity: 1;
					}

	.gform-admin .gform-toggle--theme-cosmos input[type="checkbox"].gform-toggle__toggle:disabled:checked:hover::before {
							background: #ecedf8;
						}

	.gform-admin .gform-toggle--size-s input[type="checkbox"].gform-toggle__toggle {
			height: 1.25rem;
		}

	.gform-admin .gform-toggle--size-s input[type="checkbox"].gform-toggle__toggle::before {
				border-radius: 0.625rem;
				height: 1.25rem;
				width: 2.5625rem;
			}

	.gform-admin .gform-toggle--size-s input[type="checkbox"].gform-toggle__toggle::after {
				height: 0.875rem;
				inset-inline-start: 0.1875rem;
				top: 0.1875rem;
				width: 0.875rem;
			}

	.gform-admin .gform-toggle--size-s input[type="checkbox"].gform-toggle__toggle:checked::after {
				transform: translateX(1.3125rem);
			}

	.gform-admin .gform-toggle--size-m input[type="checkbox"].gform-toggle__toggle {
			height: 1.5rem;
		}

	.gform-admin .gform-toggle--size-m input[type="checkbox"].gform-toggle__toggle::before {
				border-radius: 0.75rem;
				height: 1.5rem;
				width: 3rem;
			}

	.gform-admin .gform-toggle--size-m input[type="checkbox"].gform-toggle__toggle::after {
				height: 1.125rem;
				inset-inline-start: 0.1875rem;
				top: 0.1875rem;
				width: 1.125rem;
			}

	.gform-admin .gform-toggle--size-m input[type="checkbox"].gform-toggle__toggle:checked::after {
				transform: translateX(1.5rem);
			}

	.gform-admin .gform-toggle--size-l input[type="checkbox"].gform-toggle__toggle {
			height: 1.75rem;
		}

	.gform-admin .gform-toggle--size-l input[type="checkbox"].gform-toggle__toggle::before {
				border-radius: 0.875rem;
				height: 1.75rem;
				width: 3.4375rem;
			}

	.gform-admin .gform-toggle--size-l input[type="checkbox"].gform-toggle__toggle::after {
				height: 1.25rem;
				inset-inline-start: 0.25rem;
				top: 0.25rem;
				width: 1.25rem;
			}

	.gform-admin .gform-toggle--size-l input[type="checkbox"].gform-toggle__toggle:checked::after {
				transform: translateX(1.6875rem);
			}

	.gform-admin .gform-toggle__label {
		cursor: pointer;
	}

html[dir="rtl"] .gform-admin .gform-toggle--size-s input[type="checkbox"].gform-toggle__toggle:checked::after {
			transform: translateX(-1.3125rem);
		}

html[dir="rtl"] .gform-admin .gform-toggle--size-m input[type="checkbox"].gform-toggle__toggle:checked::after {
			transform: translateX(-1.5rem);
		}

html[dir="rtl"] .gform-admin .gform-toggle--size-l input[type="checkbox"].gform-toggle__toggle:checked::after {
			transform: translateX(-1.6875rem);
		}

/*# sourceMappingURL=toggle.css.map */