resources/sass/form.scss

   1 label {
   2         margin-top: 1ex;
   3 }
   4
   5 .custom-check {
   6         display: table;
   7         width: auto;
   8         > * {
   9                 visibility: hidden;
  10         }
  11         &.checked > * {
  12                 visibility: visible;
  13         }
  14 }
  15
  16 .custom-toggle {
  17         display: inline-block;
  18         width: auto;
  19         height: 2.25rem;
  20         min-width: 58px;
  21         background: $input-bg;
  22         border: $input-border-width solid $input-border-color;
  23         border-radius: 1.25rem;
  24         transition: background 200ms ease, padding 200ms ease;
  25         text-align: left;
  26         padding: 3px 3px 3px 24px;
  27
  28         &.is-toggled {
  29                 background: $success;
  30                 padding: 3px 24px 3px 3px;
  31         }
  32
  33         &.is-invalid,
  34         &.is-valid {
  35                 background-image: none;
  36                 padding: 3px 24px 3px 3px;
  37                 &.is-toggled {
  38                         padding: 3px 24px 3px 3px;
  39                 }
  40         }
  41         &.is-invalid.is-toggled {
  42                 background: red;
  43
  44                 .handle-label {
  45                         color: red;
  46                 }
  47         }
  48
  49         &:hover {
  50                 cursor: pointer;
  51         }
  52
  53         &:focus {
  54                 border-color: #ced4da;
  55         }
  56
  57         .handle {
  58                 display: inline-block;
  59                 min-width: 40px;
  60                 height: 28px;
  61                 background: #fff;
  62                 border-radius: 1rem;
  63                 text-transform: uppercase;
  64                 color: green;
  65                 text-align: center;
  66                 padding: 0 10px;
  67
  68                 .handle-label {
  69                         display: inline-block;
  70                         margin-top: 2px;
  71                         font-size: 18px;
  72                         font-weight: 600;
  73                         white-space: nowrap;
  74                         -webkit-touch-callout: none;
  75                         -webkit-user-select: none;
  76                         -khtml-user-select: none;
  77                         -moz-user-select: none;
  78                         -ms-user-select: none;
  79                         user-select: none;
  80                         color: #495057;
  81                 }
  82         }
  83 }