| /* |
| * Copyright (C) 2021 The Android Open Source Project |
| * |
| * Licensed under the Apache License, Version 2.0 (the "License"); |
| * you may not use this file except in compliance with the License. |
| * You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, software |
| * distributed under the License is distributed on an "AS IS" BASIS, |
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| * See the License for the specific language governing permissions and |
| * limitations under the License. |
| */ |
| |
| .toggle-control { |
| padding-left: 2px; |
| padding-right: 7px; |
| border-radius: 10px; |
| background-color: #5f6368; /* Google grey 700 */ |
| width: 80px; |
| height: 44px; |
| } |
| |
| .toggle-control .toggle-control-icon { |
| position: relative; |
| display: inline-block; |
| float: left; |
| font-size: 44px; |
| color: #e8eaed; |
| } |
| |
| .toggle-control .toggle-control-switch { |
| position: relative; |
| display: inline-block; |
| float:left; |
| width: 36px; |
| height: 21px; |
| top: 11px; |
| } |
| |
| .toggle-control .toggle-control-switch input { |
| opacity: 0; |
| width: 0; |
| height: 0; |
| } |
| |
| .toggle-control .toggle-control-slider { |
| position: absolute; |
| cursor: pointer; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| -webkit-transition: .4s; |
| transition: .4s; |
| border-radius: 21px; |
| border: solid 4px; |
| border-color: #e8eaed; |
| } |
| |
| .toggle-control .toggle-control-slider:before { |
| position: absolute; |
| content: ""; |
| height: 12px; |
| width: 12px; |
| left: 1px; |
| bottom: 1px; |
| background-color: #e8eaed; |
| -webkit-transition: .4s; |
| transition: .4s; |
| border-radius: 50%; |
| } |
| |
| .toggle-control input:checked + .toggle-control-slider { |
| background-color: #1c4587; |
| } |
| |
| .toggle-control input:focus + .toggle-control-slider { |
| box-shadow: 0 0 1px #2196F3; |
| } |
| |
| .toggle-control input:checked + .toggle-control-slider:before { |
| -webkit-transform: translateX(15px); |
| -ms-transform: translateX(15px); |
| transform: translateX(15px); |
| } |