switch.css 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. /*!
  2. * Licensed to the Apache Software Foundation (ASF) under one
  3. * or more contributor license agreements. See the NOTICE file
  4. * distributed with this work for additional information
  5. * regarding copyright ownership. The ASF licenses this file
  6. * to you under the Apache License, Version 2.0 (the
  7. * "License"); you may not use this file except in compliance
  8. * with the License. You may obtain a copy of the License at
  9. *
  10. * http://www.apache.org/licenses/LICENSE-2.0
  11. *
  12. * Unless required by applicable law or agreed to in writing,
  13. * software distributed under the License is distributed on an
  14. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  15. * KIND, either express or implied. See the License for the
  16. * specific language governing permissions and limitations
  17. * under the License.
  18. */
  19. .switch-label {
  20. display: inline-block;
  21. margin: 0;
  22. cursor: pointer;
  23. font-weight: normal;
  24. }
  25. .switch-label.disabled {
  26. cursor: not-allowed;
  27. }
  28. .switch-input {
  29. /* Visually hidden input but still accessible */
  30. position: absolute;
  31. overflow: hidden;
  32. clip: rect(1px, 1px, 1px, 1px);
  33. border: 0;
  34. width: 1px;
  35. height: 1px;
  36. padding: 0;
  37. white-space: nowrap;
  38. clip-path: inset(50%);
  39. }
  40. .switch {
  41. box-sizing: content-box;
  42. display: inline-flex;
  43. align-items: center;
  44. vertical-align: middle;
  45. border-radius: 999px;
  46. width: 2.5rem;
  47. padding: 2px;
  48. background-color: #c4c2c1;
  49. cursor: pointer;
  50. }
  51. .switch::before {
  52. border-radius: 50%;
  53. width: 1.5rem;
  54. height: 1.5rem;
  55. content: "";
  56. background-color: #edecec;
  57. transition-timing-function: ease-in-out;
  58. transition-duration: 0.25s;
  59. transition-property: transform, background-color;
  60. }
  61. .switch-input:disabled + .switch {
  62. opacity: 0.4;
  63. cursor: not-allowed;
  64. }
  65. .switch-input:checked + .switch {
  66. background-color: #017cee;
  67. }
  68. .switch-input:checked + .switch::before {
  69. background-color: #fffefd;
  70. transform: translateX(1rem);
  71. }
  72. .switch-input:focus + .switch {
  73. box-shadow: 0 0 0 3px rgba(1, 124, 238, 0.4);
  74. }
  75. .switch-input:not(:checked) + .switch:hover {
  76. background-color: #9e9e9c;
  77. }
  78. .switch-input:checked.switch-input--error + .switch {
  79. background-color: #e43921;
  80. }
  81. .switch-input:not(:checked).switch-input--error + .switch {
  82. background-color: #824840;
  83. }
  84. .switch-input:focus + .switch::before {
  85. background-color: #fff;
  86. }
  87. .switch-input:not(:checked) + .switch:hover::before {
  88. background-color: #f5f5f5;
  89. }