File "_switch-mdc.scss"

Full Path: /home/vantageo/public_html/cache/.wp-cli/wp-content/plugins/material-design-for-contact-form-7/v1/scss/_switch-mdc.scss
File size: 5.03 KB
MIME-type: text/plain
Charset: utf-8

// Copyright 2016 Google Inc. All Rights Reserved.
//
// 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.

// @import ./mixins
@function mdc-switch-transition($property, $timing-function, $duration: $mdc-switch-transition-duration) {
  @return $property $duration $timing-function;
}

@function mdc-switch-transition($property) {
  @return $property 90ms $mdc-switch-transition-curve;
}

/* Start switch */

// postcss-bem-linter: define switch
.mdc-switch {
  display: inline-block;
  position: relative;

  &__native-control {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: $mdc-switch-track-width;
    height: $mdc-switch-track-height;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
  }

  &__background {
    display: block;
    position: relative;
    width: $mdc-switch-track-width;
    height: $mdc-switch-track-height;
    border-radius: 7px;
    outline: none;
    background-color: transparent;
    cursor: pointer;
    user-select: none;

    @include mdc-theme-dark(".mdc-switch") {
      background-color: transparent;
    }

    &::before {
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      transition:
        mdc-switch-transition(opacity),
        mdc-switch-transition(background-color);
      border-radius: 7px;
      background-color: $mdc-switch-unchecked-track-color;
      content: "";
      opacity: .38;

      @include mdc-theme-dark(".mdc-switch") {
        background-color: $mdc-switch-unchecked-track-color-dark;
        opacity: .3;
      }
    }

    // postcss-bem-linter: ignore
    .mdc-switch__knob {
      display: block;
      position: absolute;
      top: -3px;
      left: 0;
      width: $mdc-switch-knob-diameter;
      height: $mdc-switch-knob-diameter;
      transform: translateX(0);
      transition:
        mdc-switch-transition(transform),
        mdc-switch-transition(background-color);
      border-radius: $mdc-switch-knob-diameter / 2;
      background-color: $mdc-switch-unchecked-knob-color;

      @include mdc-theme-dark(".mdc-switch") {
        background-color: $mdc-switch-unchecked-knob-color-dark;
      }

      @include mdc-elevation(2);

      z-index: 1;

      // postcss-bem-linter: ignore
      &::before {
        position: absolute;
        top: -14px;
        left: -14px;
        width: $mdc-switch-focus-ring-diameter;
        height: $mdc-switch-focus-ring-diameter;
        transform: scale(0);
        transition:
          mdc-switch-transition(transform),
          mdc-switch-transition(background-color);
        border-radius: $mdc-switch-focus-ring-diameter / 2;
        background-color: transparent;
        content: "";
        opacity: .2;
      }
    }
  }
}

.mdc-switch__native-control:focus ~ .mdc-switch__background {
  .mdc-switch__knob {
    &::before {
      position: absolute;
      width: $mdc-switch-focus-ring-diameter;
      height: $mdc-switch-focus-ring-diameter;
      transform: scale(1);
      transition:
        mdc-switch-transition(transform),
        mdc-switch-transition(background-color);
      border-radius: $mdc-switch-focus-ring-diameter / 2;
      background-color: $mdc-switch-unchecked-focus-ring-color;

      @include mdc-theme-dark(".mdc-switch") {
        background-color: $mdc-switch-unchecked-focus-ring-color-dark;
        opacity: .14;
      }
    }
  }
}

.mdc-switch__native-control:checked ~ .mdc-switch__background {
  &::before {
    @include mdc-theme-prop(background-color, primary);

    opacity: .5;
  }

  .mdc-switch__knob {
    transform: translateX($mdc-switch-track-width - $mdc-switch-knob-diameter);
    transition:
      mdc-switch-transition(transform),
      mdc-switch-transition(background-color);

    @include mdc-theme-prop(background-color, primary);

    &::before {
      @include mdc-theme-prop(background-color, primary);

      @include mdc-theme-dark(".mdc-switch") {
        @include mdc-theme-prop(background-color, primary);
      }

      opacity: .15;
    }
  }
}

// postcss-bem-linter: end

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

.mdc-switch__native-control:disabled ~ .mdc-switch__background {
  &::before {
    background-color: $mdc-switch-unchecked-track-color;
    opacity: .12;

    @include mdc-theme-dark(".mdc-switch") {
      background-color: $mdc-switch-unchecked-track-color-dark;
      opacity: .1;
    }
  }

  .mdc-switch__knob {
    background-color: $mdc-switch-disabled-knob-color;

    @include mdc-theme-dark(".mdc-switch") {
      background-color: $mdc-switch-disabled-knob-color-dark;
    }
  }
}
/* End switch */