resources/scss/components/_toggleInput.scss

   1 /**
   2  * ============LICENSE_START=======================================================
   3  * org.onap.aai
   4  * ================================================================================
   5  * Copyright © 2017-2018 AT&T Intellectual Property. All rights reserved.
   6  * Copyright © 2017-2018 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 .toggle-input-wrapper {
  22   $toggle-width: 40px;
  23   $toggle-height: 20px;
  24   display: table;
  25   .toggle-switch, .toggle-input-label {
  26     display: table-cell;
  27     vertical-align: middle;
  28     padding-left: 10px;
  29   }
  30   .toggle {
  31     position: absolute;
  32     margin-left: -9999px;
  33     visibility: hidden;
  34   }
  35   .toggle + label {
  36     @extend %noselect;
  37     display: block;
  38     position: relative;
  39     cursor: pointer;
  40     outline: none;
  41   }
  42
  43   input.toggle-round-flat + label {
  44     padding: 1px;
  45     width: $toggle-width;
  46     height: $toggle-height;
  47     background-color: $background-color2;
  48     border-radius: $toggle-height;
  49     transition: background 0.4s;
  50   }
  51   input.toggle-round-flat + label:before,
  52   input.toggle-round-flat + label:after {
  53     display: block;
  54     position: absolute;
  55     content: "";
  56   }
  57   input.toggle-round-flat + label:before {
  58     top: 1px;
  59     left: 1px;
  60     bottom: 1px;
  61     right: 1px;
  62     background-color: $primary-background-color;
  63     border-radius: $toggle-height;
  64     transition: background 0.4s;
  65   }
  66   input.toggle-round-flat + label:after {
  67     top: 4px;
  68     left: 4px;
  69     bottom: 4px;
  70     width: $toggle-height - 8;
  71     background-color: $background-color2;
  72     border-radius: $toggle-height - 8;
  73     transition: margin 0.4s, background 0.4s;
  74   }
  75   input.toggle-round-flat:checked + label {
  76     background-color: $background-color3;
  77   }
  78   input.toggle-round-flat:checked + label:after {
  79     margin-left: $toggle-height;
  80     background-color: $background-color3;
  81   }
  82 }