label { margin-top: 1ex; } .custom-check { display: table; width: auto; > * { visibility: hidden; } &.checked > * { visibility: visible; } } .custom-toggle { display: inline-block; width: auto; height: 2.25rem; min-width: 58px; background: $input-bg; border: $input-border-width solid $input-border-color; border-radius: 1.25rem; transition: background 200ms ease, padding 200ms ease; text-align: left; padding: 3px 3px 3px 24px; &.is-toggled { background: $success; padding: 3px 24px 3px 3px; } &.is-invalid, &.is-valid { background-image: none; padding: 3px 24px 3px 3px; &.is-toggled { padding: 3px 24px 3px 3px; } } &.is-invalid.is-toggled { background: red; .handle-label { color: red; } } &:hover { cursor: pointer; } &:focus { border-color: #ced4da; } .handle { display: inline-block; min-width: 40px; height: 28px; background: #fff; border-radius: 1rem; text-transform: uppercase; color: green; text-align: center; padding: 0 10px; .handle-label { display: inline-block; margin-top: 2px; font-size: 18px; font-weight: 600; white-space: nowrap; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: #495057; } } }