round-switch.scss

/**
 * Copyright © 2016-2019 The Thingsboard Authors
 *
 * 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 "~compass-sass-mixins/lib/compass";

$error-height: 14px !default;

$background-color: #e6e7e8 !default;

.tb-round-switch {
  width: 100%;
  height: 100%;
  background: $background-color;

  .title-container {
    .switch-title {
      font-weight: 500;
      color: #757575;
      white-space: nowrap;
    }
  }

  .error-container {
    position: absolute;
    top: 1%;
    right: 0;
    left: 0;
    z-index: 4;
    height: $error-height;

    .switch-error {
      color: #ff3315;
      white-space: nowrap;
    }
  }

  #text-measure {
    position: absolute;
    width: auto;
    height: auto;
    white-space: nowrap;
    visibility: hidden;
  }

  #switch-container {
    padding: 10px;

    .switch {
      position: relative;

      box-sizing: border-box;
      width: 260px;
      min-width: 260px;
      height: 260px;
      min-height: 260px;
      padding: 25px;
      font-family: sans-serif;
      font-size: 48px;

      color: #424242;
      cursor: pointer;
      background: #ddd;
      background: linear-gradient(180deg, #bbb, #ddd);
      border-radius: 130px;

      box-shadow:
        0 0 0 8px rgba(0, 0, 0, .1),
        0 0 3px 1px rgba(0, 0, 0, .1),
        inset 0 8px  3px -8px rgba(255, 255, 255, .4);

      input {
        display: none;
      }

      .on,
      .off {
        position: absolute;
        width: 100%;
        text-align: center;

        text-shadow: 1px 1px 4px #4a4a4a;
      }

      .on {
        top: 10px;
        font-family: sans-serif;
        color: #444;

        transition: all .1s;
      }

      .off {
        bottom: 5px;

        transition: all .1s;

        transform: scaleY(.85);
      }

      .but {
        position: relative;
        display: block;
        width: 200px;
        height: 178px;
        font-size: 48px;
        cursor: pointer;
        background-color: #d8d8d8;
        border-bottom-width: 0;
        border-radius: 400px 400px 400px 400px / 400px 400px 300px 300px;

        box-shadow:
          inset 8px 6px 5px -7px #a2a2a2,
          inset -8px 6px 5px -7px #a2a2a2,
          inset 0 -3px 2px -2px rgba(200, 200, 200, .5),
          0 3px 3px -2px #fff,
          inset 0 -230px 60px -200px rgba(255, 255, 255, .2),
          inset 0 220px 40px -200px rgba(0, 0, 0, .3);

        transition: all .2s;
      }

      .back {

        box-sizing: border-box;
        width: 210px;
        height: 210px;
        padding: 4px 4px;
        cursor: pointer;
        background-color: #888787;
        background-image: linear-gradient(-90deg, transparent 30%, transparent 70%), linear-gradient(0deg, rgba(150, 150, 150, 0) 30%, rgba(150, 150, 150, .2) 50%, rgba(150, 150, 150, 0) 70%);
        border-radius: 105px;

        box-shadow:
          30px 30px 30px -20px rgba(58, 58, 58, .3),
          -30px 30px 30px -20px rgba(58, 58, 58, .3),
          0 30px 30px 0 rgba(16, 16, 16, .3),
          inset 0 -1px 0 0 #484848;

        transition: all .2s;
      }


      input:checked + .back .on,
      input:checked + .back .off{
        text-shadow: 1px 1px 4px #4a4a4a;
      }

      input:checked + .back .on{
        top: 10px;
        color: #4c4c4c;

        transform: scaleY(.85);
      }

      input:checked + .back .off{
        bottom: 5px;
        color: #444;

        transform: scaleY(1);
      }

      input:checked + .back .but{
        margin-top: 20px;
        background: #dcdcdc;
        background-image: radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, .3), transparent);
        border-radius: 400px 400px 400px 400px / 300px 300px 400px 400px;

        box-shadow:
          inset 8px -4px 5px -7px #a9a9a9,
          inset -8px -4px 5px -7px #808080,
          0 -3px 8px -4px rgba(50, 50, 50, .4),
          inset 0 3px 4px -2px #9c9c9c,
          inset 0 280px 40px -200px rgba(0, 0, 0, .2),
          inset 0 -200px 40px -200px rgba(180, 180, 180, .2);
      }

      input:checked + .back{
        padding: 2px 4px;

        background-image: linear-gradient(0deg, #868686 30%, transparent 70%), linear-gradient(90deg, rgba(115, 115, 115, 0) 0%, rgba(255, 255, 255, .74) 50%, rgba(105, 105, 105, 0) 100%);

        box-shadow:
          30px 30px 30px -20px rgba(49, 49, 49, .1),
          -30px 30px 30px -20px rgba(111, 111, 111, .1),
          0 30px 30px 0 rgba(0, 0, 0, .2),
          inset 0 1px 2px 0 rgba(167, 167, 167, .6);
      }
    }
  }
}