[Summary view] [Print] [Text view]

   1  $off-background-colour: #d3d3d3;
   2  $on-background-colour: #2f7d32;
   3  $switcher-width: 62px;
   4  $switcher-height: 28px;
   5  
   6  .switcher {
   7    position: relative;
   8    width: 18rem;
   9    height: 28px;
  10    margin: 0;
  11  }
  12  
  13  .switcher input {
  14    position: absolute;
  15    top: 0;
  16    inset-inline-start: 0;
  17    z-index: 2;
  18    width: $switcher-width;
  19    height: $switcher-height;
  20    margin: 0;
  21    cursor: pointer;
  22    opacity: 0;
  23  }
  24  
  25  .switcher input:checked {
  26    z-index: 1;
  27  }
  28  
  29  .switcher input:checked + label {
  30    z-index: 0;
  31    opacity: 1;
  32  }
  33  
  34  .switcher input:not(:checked) + label {
  35    z-index: 3;
  36    opacity: 0;
  37  }
  38  
  39  .switcher input:focus ~ .toggle-outside {
  40    border-color: var(--focus);
  41    box-shadow: 0 0 0 .2rem rgba(26, 70, 107, .25);
  42  }
  43  
  44  .switcher label {
  45    position: absolute;
  46    inset-inline-start: 0;
  47    display: inline-block;
  48    width: auto;
  49    min-width: 6rem;
  50    height: 100%;
  51    margin-bottom: 0;
  52    margin-inline-start: 70px;
  53    line-height: $switcher-height;
  54    text-align: start;
  55    transition: opacity .25s ease;
  56  }
  57  
  58  .switcher .toggle-outside {
  59    position: absolute;
  60    inset-inline-start: 0;
  61    box-sizing: border-box;
  62    width: 58px;
  63    height: 100%;
  64    overflow: hidden;
  65    background: $off-background-colour;
  66    border: 1px solid rgba(0, 0, 0, .18);
  67    transition: .2s ease all;
  68    transform: translate3d(0, 0, 0);
  69  }
  70  
  71  .switcher input ~ input:checked ~ .toggle-outside {
  72    background: $on-background-colour;
  73  }
  74  
  75  .switcher .toggle-inside {
  76    position: absolute;
  77    left: 0;
  78    width: ($switcher-width - 6) * .5;
  79    height: $switcher-height;
  80    background: #fff;
  81    transition: .4s ease all;
  82  }
  83  
  84  .switcher input ~ input:checked ~ .toggle-outside .toggle-inside {
  85    left: ($switcher-width * .5) - 1;
  86  }