resources/scss/components/_toggleInput.scss

   1 /*
   2 * ============LICENSE_START=======================================================
   3 * SPARKY (AAI UI service)
   4 * ================================================================================
   5 * Copyright © 2017 AT&T Intellectual Property.
   6 * Copyright © 2017 Amdocs
   7 * All rights reserved.
   8 * ================================================================================
   9 * Licensed under the Apache License, Version 2.0 (the "License");
  10 * you may not use this file except in compliance with the License.
  11 * You may obtain a copy of the License at
  12 *
  13 *      http://www.apache.org/licenses/LICENSE-2.0
  14 *
  15 * Unless required by applicable law or agreed to in writing, software
  16 * distributed under the License is distributed on an "AS IS" BASIS,
  17 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  18 * See the License for the specific language governing permissions and
  19 * limitations under the License.
  20 * ============LICENSE_END=========================================================
  21 *
  22 * ECOMP and OpenECOMP are trademarks
  23 * and service marks of AT&T Intellectual Property.
  24 */
  25
  26 .toggle-input-wrapper {
  27   $toggle-width: 40px;
  28   $toggle-height: 20px;
  29   display: table;
  30   .toggle-switch, .toggle-input-label {
  31     display: table-cell;
  32     vertical-align: middle;
  33     padding-left: 10px;
  34   }
  35   .toggle {
  36     position: absolute;
  37     margin-left: -9999px;
  38     visibility: hidden;
  39   }
  40   .toggle + label {
  41     @extend %noselect;
  42     display: block;
  43     position: relative;
  44     cursor: pointer;
  45     outline: none;
  46   }
  47
  48   input.toggle-round-flat + label {
  49     padding: 1px;
  50     width: $toggle-width;
  51     height: $toggle-height;
  52     background-color: $dark-gray;
  53     border-radius: $toggle-height;
  54     transition: background 0.4s;
  55   }
  56   input.toggle-round-flat + label:before,
  57   input.toggle-round-flat + label:after {
  58     display: block;
  59     position: absolute;
  60     content: "";
  61   }
  62   input.toggle-round-flat + label:before {
  63     top: 1px;
  64     left: 1px;
  65     bottom: 1px;
  66     right: 1px;
  67     background-color: $white;
  68     border-radius: $toggle-height;
  69     transition: background 0.4s;
  70   }
  71   input.toggle-round-flat + label:after {
  72     top: 4px;
  73     left: 4px;
  74     bottom: 4px;
  75     width: $toggle-height - 8;
  76     background-color: $dark-gray;
  77     border-radius: $toggle-height - 8;
  78     transition: margin 0.4s, background 0.4s;
  79   }
  80   input.toggle-round-flat:checked + label {
  81     background-color: $link-blue;
  82   }
  83   input.toggle-round-flat:checked + label:after {
  84     margin-left: $toggle-height;
  85     background-color: $link-blue;
  86   }
  87 }