@gravityforms/components
Version:
UI components for use in Gravity Forms development. Both React and vanilla js flavors.
279 lines (217 loc) • 6.14 kB
CSS
.gform-admin {
.gform-toggle {
align-items: flex-start;
display: inline-flex;
gap: 0.5rem;
&,
*,
*::before,
*::after {
box-sizing: border-box;
}
&.gform-toggle--disabled {
opacity: 0.5;
}
}
.gform-toggle--size-m,
.gform-toggle--size-l {
gap: 0.75rem;
}
.gform-toggle--width-full {
display: flex;
justify-content: space-between;
}
.gform-toggle--label-left {
flex-direction: row-reverse;
}
.gform-toggle--width-full.gform-toggle--label-right {
text-align: end;
}
input[type="checkbox"].gform-toggle__toggle {
appearance: none;
background: none;
border: 0;
box-shadow: none;
cursor: pointer;
display: block;
flex: none;
margin: 0;
outline: none;
position: relative;
width: auto;
&::before {
background: var(--gform-admin-color-snuff);
content: "";
display: block;
margin: 0;
outline: 2px solid transparent;
outline-offset: 2px;
transition: var(--gform-admin-transition-hover);
}
&::after {
background-color: var(--gform-admin-color-white);
border-radius: 50%;
box-shadow: var(--gform-admin-box-shadow-toggle);
content: "";
position: absolute;
transition: var(--gform-admin-transition-hover);
}
&.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%;
}
&: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%;
}
}
&:focus-visible {
&::before {
outline-color: var(--gform-admin-color-snuff);
outline-offset: 2px;
}
&:checked::before {
outline-color: var(--gform-admin-color-gravity-blue);
}
}
&:checked::before {
background: var(--gform-admin-color-gravity-blue);
}
}
.gform-toggle--theme-cosmos {
input[type="checkbox"].gform-toggle__toggle {
&::before {
background: var(--gform-admin-color-santas);
}
&:focus-visible {
&::before {
outline-color: var(--gform-admin-color-santas);
}
&:checked::before {
outline-color: var(--gform-admin-color-chathams);
}
&:hover:checked {
&::before {
outline-color: var(--gform-admin-color-port);
}
& ~ .gform-toggle__icon {
color: var(--gform-admin-color-port);
}
}
}
&:checked {
&::before {
background: var(--gform-admin-color-chathams);
}
&.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 */
}
}
&:hover {
&::before {
background: var(--gform-admin-color-port);
}
}
}
&:disabled {
opacity: 1;
&::before {
background: var(--gform-admin-color-white-lilac);
}
&:checked {
&::before {
opacity: 1;
}
&:hover {
&::before {
background: var(--gform-admin-color-white-lilac);
}
}
}
}
}
}
.gform-toggle--size-s {
input[type="checkbox"].gform-toggle__toggle {
height: 1.25rem;
&::before {
border-radius: 0.625rem;
height: 1.25rem;
width: 2.5625rem;
}
&::after {
height: 0.875rem;
inset-inline-start: 0.1875rem;
top: 0.1875rem;
width: 0.875rem;
}
&:checked::after {
transform: translateX(1.3125rem);
}
}
}
.gform-toggle--size-m {
input[type="checkbox"].gform-toggle__toggle {
height: 1.5rem;
&::before {
border-radius: 0.75rem;
height: 1.5rem;
width: 3rem;
}
&::after {
height: 1.125rem;
inset-inline-start: 0.1875rem;
top: 0.1875rem;
width: 1.125rem;
}
&:checked::after {
transform: translateX(1.5rem);
}
}
}
.gform-toggle--size-l {
input[type="checkbox"].gform-toggle__toggle {
height: 1.75rem;
&::before {
border-radius: 0.875rem;
height: 1.75rem;
width: 3.4375rem;
}
&::after {
height: 1.25rem;
inset-inline-start: 0.25rem;
top: 0.25rem;
width: 1.25rem;
}
&:checked::after {
transform: translateX(1.6875rem);
}
}
}
.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);
}
}
.gform-toggle--size-m input[type="checkbox"].gform-toggle__toggle {
&:checked::after {
transform: translateX(-1.5rem);
}
}
.gform-toggle--size-l input[type="checkbox"].gform-toggle__toggle {
&:checked::after {
transform: translateX(-1.6875rem);
}
}
}