| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103 |
- /*!
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements. See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership. The ASF licenses this file
- * to you 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.
- */
- .switch-label {
- display: inline-block;
- margin: 0;
- cursor: pointer;
- font-weight: normal;
- }
- .switch-label.disabled {
- cursor: not-allowed;
- }
- .switch-input {
- /* Visually hidden input but still accessible */
- position: absolute;
- overflow: hidden;
- clip: rect(1px, 1px, 1px, 1px);
- border: 0;
- width: 1px;
- height: 1px;
- padding: 0;
- white-space: nowrap;
- clip-path: inset(50%);
- }
- .switch {
- box-sizing: content-box;
- display: inline-flex;
- align-items: center;
- vertical-align: middle;
- border-radius: 999px;
- width: 2.5rem;
- padding: 2px;
- background-color: #c4c2c1;
- cursor: pointer;
- }
- .switch::before {
- border-radius: 50%;
- width: 1.5rem;
- height: 1.5rem;
- content: "";
- background-color: #edecec;
- transition-timing-function: ease-in-out;
- transition-duration: 0.25s;
- transition-property: transform, background-color;
- }
- .switch-input:disabled + .switch {
- opacity: 0.4;
- cursor: not-allowed;
- }
- .switch-input:checked + .switch {
- background-color: #017cee;
- }
- .switch-input:checked + .switch::before {
- background-color: #fffefd;
- transform: translateX(1rem);
- }
- .switch-input:focus + .switch {
- box-shadow: 0 0 0 3px rgba(1, 124, 238, 0.4);
- }
- .switch-input:not(:checked) + .switch:hover {
- background-color: #9e9e9c;
- }
- .switch-input:checked.switch-input--error + .switch {
- background-color: #e43921;
- }
- .switch-input:not(:checked).switch-input--error + .switch {
- background-color: #824840;
- }
- .switch-input:focus + .switch::before {
- background-color: #fff;
- }
- .switch-input:not(:checked) + .switch:hover::before {
- background-color: #f5f5f5;
- }
|