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;
+ }
+ }
+}