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