/** * Copyright (c) HashiCorp, Inc. * SPDX-License-Identifier: MPL-2.0 */ // This file defines the style for switch, with the nested classes: is-small, is-rounded, is-success .switch[type='checkbox'] { display: inline-block; outline: 0; opacity: 0; position: absolute; user-select: none; + label { align-items: center; cursor: pointer; display: inline-flex; font-size: $size-6; justify-content: flex-start; line-height: 1.5; padding-left: 3.5rem; position: relative; &::before { position: absolute; display: block; top: calc(50% - 1.5rem * 0.5); left: 0; width: $size-1; height: $size-4; border: 0.1rem solid transparent; border-radius: $radius-large; background: $ui-gray-300; content: ''; } &::after { background: $white; border-radius: $radius-large; content: ''; display: block; height: $size-6; left: $size-11; position: absolute; top: calc(50% - 1rem * 0.5); transform: translate3d(0, 0, 0); transition: all 0.25s ease-out; width: $size-6; } &:checked::after { left: 1.625rem; } } } // is-rounded .switch[type='checkbox'].is-rounded { + label { &::before { border-radius: 16px; } &::after { border-radius: 50%; } } &.is-small { + label { &::before { border-radius: 16px; } &::after { border-radius: 50%; } } } } // is-small .switch[type='checkbox'].is-small { + label { cursor: pointer; display: inline-block; font-size: $size-8; font-weight: bold; height: 18px; padding-left: $size-8 * 2.5; position: relative; margin: 0 $size-11; &::before { border: 0.1rem solid transparent; border-radius: $radius-large; background: $ui-gray-300; display: block; content: ''; height: $size-8; position: absolute; top: calc($size-8 / 5); width: $size-8 * 2; } &::after { background: $white; border-radius: $radius-large; content: ''; display: block; height: $size-8 * 0.8; left: 0; position: absolute; top: calc($size-8 / 4); transform: translateX(0.15rem); transition: all 0.25s ease-out; width: $size-8 * 0.8; will-change: left; &:checked { left: $size-5; } } } &:checked + label::after { left: 0; transform: translateX(($size-8 * 2) - ($size-8 * 0.94)); } } // is-success .switch[type='checkbox'].is-success:checked + label::before { background: $blue; } // focus .switch[type='checkbox']:focus + label { box-shadow: 0 0 1px $blue; } // disabled .switch[type='checkbox'][disabled] { cursor: not-allowed; } .switch[type='checkbox'][disabled] + label { opacity: 0.5; } .switch[type='checkbox'][disabled] + label:hover { cursor: not-allowed; } // misc. .field-body .switch[type='checkbox'] + label { margin-top: 0.375em; }