openecomp-ui/resources/scss/components/_toggleInput.scss

   1 .toggle-input-wrapper {
   2     $toggle-width: 40px;
   3     $toggle-height: 20px;
   4     display: table;
   5     .toggle-switch,
   6     .toggle-input-label {
   7         display: table-cell;
   8         vertical-align: middle;
   9         padding-left: 10px;
  10     }
  11     .toggle {
  12         position: absolute;
  13         margin-left: -9999px;
  14         visibility: hidden;
  15     }
  16     .toggle + label {
  17         @extend %noselect;
  18         display: block;
  19         position: relative;
  20         cursor: pointer;
  21         outline: none;
  22     }
  23
  24     input.toggle-round-flat + label {
  25         padding: 1px;
  26         width: $toggle-width;
  27         height: $toggle-height;
  28         background-color: $dark-gray;
  29         border-radius: $toggle-height;
  30         transition: background 0.4s;
  31     }
  32     input.toggle-round-flat + label:before,
  33     input.toggle-round-flat + label:after {
  34         display: block;
  35         position: absolute;
  36         content: '';
  37     }
  38     input.toggle-round-flat + label:before {
  39         top: 1px;
  40         left: 1px;
  41         bottom: 1px;
  42         right: 1px;
  43         background-color: $white;
  44         border-radius: $toggle-height;
  45         transition: background 0.4s;
  46     }
  47     input.toggle-round-flat + label:after {
  48         top: 4px;
  49         left: 4px;
  50         bottom: 4px;
  51         width: $toggle-height - 8;
  52         background-color: $dark-gray;
  53         border-radius: $toggle-height - 8;
  54         transition: margin 0.4s, background 0.4s;
  55     }
  56     input.toggle-round-flat:checked + label {
  57         background-color: $link-blue;
  58     }
  59     input.toggle-round-flat:checked + label:after {
  60         margin-left: $toggle-height;
  61         background-color: $link-blue;
  62     }
  63 }