preact-material-components/Switch/style.css

preact wrapper for "Material Components for the web"

/*!
 Material Components for the Web
 Copyright (c) 2018 Google Inc.
 License: Apache-2.0
*/
.mdc-switch {
  display: inline-block;
  position: relative; }
  .mdc-switch__native-control {
    position: absolute;
    top: -14px;
    left: -14px;
    width: 48px;
    height: 48px;
    display: inline-block;
    margin-top: -3px;
    margin-left: 0;
    transition: -webkit-transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: transform 90ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    cursor: pointer;
    z-index: 2; }
    .mdc-switch__native-control:checked {
      -webkit-transform: translateX(14px);
              transform: translateX(14px); }
      [dir="rtl"] .mdc-switch__native-control:checked, .mdc-switch__native-control:checked[dir="rtl"] {
        -webkit-transform: translateX(-14px);
                transform: translateX(-14px); }

.mdc-switch__native-control:enabled:not(:checked) ~ .mdc-switch__background::before {
  background-color: #000;
  border-color: #000; }

.mdc-switch__native-control:enabled:not(:checked) ~ .mdc-switch__background .mdc-switch__knob {
  background-color: #fafafa;
  border-color: #fafafa; }

.mdc-switch__native-control:enabled:not(:checked) ~ .mdc-switch__background .mdc-switch__knob::before {
  background-color: #9e9e9e; }

.mdc-switch__native-control:enabled:checked ~ .mdc-switch__background::before {
  background-color: #018786;
  /* @alternate */
  background-color: var(--mdc-theme-secondary, #018786);
  border-color: #018786;
  /* @alternate */
  border-color: var(--mdc-theme-secondary, #018786); }

.mdc-switch__native-control:enabled:checked ~ .mdc-switch__background .mdc-switch__knob {
  background-color: #018786;
  /* @alternate */
  background-color: var(--mdc-theme-secondary, #018786);
  border-color: #018786;
  /* @alternate */
  border-color: var(--mdc-theme-secondary, #018786); }

.mdc-switch__native-control:enabled:checked ~ .mdc-switch__background .mdc-switch__knob::before {
  background-color: #018786;
  /* @alternate */
  background-color: var(--mdc-theme-secondary, #018786); }

.mdc-switch__background {
  display: block;
  position: relative;
  width: 34px;
  height: 14px;
  border-radius: 50%;
  outline: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }
  .mdc-switch__background::before {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: opacity 90ms cubic-bezier(0.4, 0, 0.2, 1), background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), border-color 90ms cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid;
    border-radius: 7px;
    opacity: .38;
    content: ""; }

.mdc-switch__knob {
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  /* @noflip */
  left: 0;
  /* @noflip */
  right: initial;
  display: block;
  position: absolute;
  top: -3px;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  transition: background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), border-color 90ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 90ms cubic-bezier(0.4, 0, 0.2, 1), background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), border-color 90ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 90ms cubic-bezier(0.4, 0, 0.2, 1), background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), border-color 90ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
  border: 10px solid;
  border-radius: 50%;
  z-index: 1; }
  [dir="rtl"] .mdc-switch__knob, .mdc-switch__knob[dir="rtl"] {
    /* @noflip */
    left: initial;
    /* @noflip */
    right: 0; }
  .mdc-switch__knob::before {
    position: absolute;
    top: -24px;
    left: -24px;
    width: 48px;
    height: 48px;
    -webkit-transform: scale(0);
            transform: scale(0);
    transition: background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: transform 90ms cubic-bezier(0.4, 0, 0.2, 1), background-color 90ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: transform 90ms cubic-bezier(0.4, 0, 0.2, 1), background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    opacity: .2;
    content: ""; }

.mdc-switch__native-control:focus ~ .mdc-switch__background .mdc-switch__knob::before {
  -webkit-transform: scale(1);
          transform: scale(1); }

.mdc-switch__native-control:checked ~ .mdc-switch__background::before {
  opacity: .5; }

.mdc-switch__native-control:checked ~ .mdc-switch__background .mdc-switch__knob {
  -webkit-transform: translateX(14px);
          transform: translateX(14px); }
  [dir="rtl"] .mdc-switch__native-control:checked ~ .mdc-switch__background .mdc-switch__knob, .mdc-switch__native-control:checked ~ .mdc-switch__background .mdc-switch__knob[dir="rtl"] {
    -webkit-transform: translateX(-14px);
            transform: translateX(-14px); }
  .mdc-switch__native-control:checked ~ .mdc-switch__background .mdc-switch__knob::before {
    opacity: .15; }

.mdc-switch__native-control:disabled {
  cursor: initial; }

.mdc-switch__native-control:disabled ~ .mdc-switch__background::before {
  background-color: #000;
  opacity: .12; }

.mdc-switch__native-control:disabled ~ .mdc-switch__background .mdc-switch__knob {
  border-width: 1px;
  border-color: #bdbdbd;
  background-color: #bdbdbd; }

/*# sourceMappingURL=mdc.switch.css.map*/