resources/scss/components/_toggleInput.scss

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