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: #e9ecef;
  22         border: 1px solid #ced4da;
  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: #4f94d9;
  30                 padding: 3px 24px 3px 3px;
  31
  32                 .handle-label {
  33                         color: #4f94d9;
  34                 }
  35         }
  36
  37         &.is-invalid,
  38         &.is-valid {
  39                 background-image: none;
  40                 padding: 3px 24px 3px 3px;
  41                 &.is-toggled {
  42                         padding: 3px 24px 3px 3px;
  43                 }
  44         }
  45         &.is-invalid.is-toggled {
  46                 background: red;
  47
  48                 .handle-label {
  49                         color: red;
  50                 }
  51         }
  52
  53         &:hover {
  54                 cursor: pointer;
  55         }
  56
  57         &:focus {
  58                 background-color: #e9ecef;
  59                 border-color: #ced4da;
  60                 &.is-toggled {
  61                         background-color: #4f94d9;
  62                 }
  63         }
  64
  65         .handle {
  66                 display: inline-block;
  67                 min-width: 40px;
  68                 height: 28px;
  69                 background: #fff;
  70                 border-radius: 1rem;
  71                 text-transform: uppercase;
  72                 color: green;
  73                 text-align: center;
  74                 padding: 0 10px;
  75
  76                 .handle-label {
  77                         display: inline-block;
  78                         margin-top: 2px;
  79                         font-size: 18px;
  80                         font-weight: 600;
  81                         white-space: nowrap;
  82                         -webkit-touch-callout: none;
  83                         -webkit-user-select: none;
  84                         -khtml-user-select: none;
  85                         -moz-user-select: none;
  86                         -ms-user-select: none;
  87                         user-select: none;
  88                         color: #495057;
  89                 }
  90         }
  91 }