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
  25 .toggle-input-wrapper {
  26   $toggle-width: 40px;
  27   $toggle-height: 20px;
  28   display: table;
  29   .toggle-switch, .toggle-input-label {
  30     display: table-cell;
  31     vertical-align: middle;
  32     padding-left: 10px;
  33   }
  34   .toggle {
  35     position: absolute;
  36     margin-left: -9999px;
  37     visibility: hidden;
  38   }
  39   .toggle + label {
  40     @extend %noselect;
  41     display: block;
  42     position: relative;
  43     cursor: pointer;
  44     outline: none;
  45   }
  46
  47   input.toggle-round-flat + label {
  48     padding: 1px;
  49     width: $toggle-width;
  50     height: $toggle-height;
  51     background-color: $dark-gray;
  52     border-radius: $toggle-height;
  53     transition: background 0.4s;
  54   }
  55   input.toggle-round-flat + label:before,
  56   input.toggle-round-flat + label:after {
  57     display: block;
  58     position: absolute;
  59     content: "";
  60   }
  61   input.toggle-round-flat + label:before {
  62     top: 1px;
  63     left: 1px;
  64     bottom: 1px;
  65     right: 1px;
  66     background-color: $white;
  67     border-radius: $toggle-height;
  68     transition: background 0.4s;
  69   }
  70   input.toggle-round-flat + label:after {
  71     top: 4px;
  72     left: 4px;
  73     bottom: 4px;
  74     width: $toggle-height - 8;
  75     background-color: $dark-gray;
  76     border-radius: $toggle-height - 8;
  77     transition: margin 0.4s, background 0.4s;
  78   }
  79   input.toggle-round-flat:checked + label {
  80     background-color: $link-blue;
  81   }
  82   input.toggle-round-flat:checked + label:after {
  83     margin-left: $toggle-height;
  84     background-color: $link-blue;
  85   }
  86 }