1/* 2 * Copyright (C) 2021 The Android Open Source Project 3 * 4 * Licensed under the Apache License, Version 2.0 (the "License"); 5 * you may not use this file except in compliance with the License. 6 * You may obtain a copy of the License at 7 * 8 * http://www.apache.org/licenses/LICENSE-2.0 9 * 10 * Unless required by applicable law or agreed to in writing, software 11 * distributed under the License is distributed on an "AS IS" BASIS, 12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 * See the License for the specific language governing permissions and 14 * limitations under the License. 15 */ 16 17.toggle-control { 18 padding-left: 2px; 19 padding-right: 7px; 20 border-radius: 10px; 21 background-color: #5f6368; /* Google grey 700 */ 22 width: 80px; 23 height: 44px; 24} 25 26.toggle-control .toggle-control-icon { 27 position: relative; 28 display: inline-block; 29 float: left; 30 font-size: 44px; 31 color: #e8eaed; 32} 33 34.toggle-control .toggle-control-switch { 35 position: relative; 36 display: inline-block; 37 float:left; 38 width: 36px; 39 height: 21px; 40 top: 11px; 41} 42 43.toggle-control .toggle-control-switch input { 44 opacity: 0; 45 width: 0; 46 height: 0; 47} 48 49.toggle-control .toggle-control-slider { 50 position: absolute; 51 cursor: pointer; 52 top: 0; 53 left: 0; 54 right: 0; 55 bottom: 0; 56 -webkit-transition: .4s; 57 transition: .4s; 58 border-radius: 21px; 59 border: solid 4px; 60 border-color: #e8eaed; 61} 62 63.toggle-control .toggle-control-slider:before { 64 position: absolute; 65 content: ""; 66 height: 12px; 67 width: 12px; 68 left: 1px; 69 bottom: 1px; 70 background-color: #e8eaed; 71 -webkit-transition: .4s; 72 transition: .4s; 73 border-radius: 50%; 74} 75 76.toggle-control input:checked + .toggle-control-slider { 77 background-color: #1c4587; 78} 79 80.toggle-control input:focus + .toggle-control-slider { 81 box-shadow: 0 0 1px #2196F3; 82} 83 84.toggle-control input:checked + .toggle-control-slider:before { 85 -webkit-transform: translateX(15px); 86 -ms-transform: translateX(15px); 87 transform: translateX(15px); 88} 89