Updating versions of Sparky FE files
[aai/sparky-fe.git] / 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 }

© 2017 ONAP. Copyright © The Linux Foundation ®. All Rights Reserved.
The Linux Foundation has registered trademarks and uses trademarks.
For a list of trademarks of The Linux Foundation, please see our Trademark Usage page.
Linux is a registered trademark of Linus Torvalds.
Privacy Policy and Terms of Use