shiny-knob.scss

/**
 * Copyright © 2016-2017 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.
 */

$knob-img: url('./knob.svg');

$bars-margin-pct: percentage(0.08);
$value-background-margin-pct: percentage(0.30);
$shadow-size: 0;
$shadow-size-px: $shadow-size+px;
$shadow-offset-px: $shadow-size/2+px;

.tb-shiny-knob {
  width:100%;
  height:100%;
  &.dark {
    background: #000;
  }

  .knob {
    position: relative;
    &[draggable] {
      -moz-user-select: none;
      -webkit-user-select: none;
      user-select: none;
    }
    #canvasBar {
      position:absolute;
      top:0;
      left:0;
      bottom: 0;
      right: 0;
    }
    .value-background {
      position:absolute;
      top: $value-background-margin-pct;
      left: $value-background-margin-pct;
      bottom: $value-background-margin-pct;
      right: $value-background-margin-pct;
      border-radius: 50%;
      background: #000;
      color: #fff;
      font-weight: 500;
      z-index:4;
    }
    .top-pointer-container {
      position:absolute;
      top: calc(#{$bars-margin-pct} - #{$shadow-offset-px});
      left: $bars-margin-pct;
      bottom: calc(#{$bars-margin-pct} + #{$shadow-offset-px});
      right: $bars-margin-pct;
      z-index:3;
      cursor:default !important;
      .top-pointer {
        content:'';
        width:5%;
        height:5%;
        background-color:#b5b5b5;
        position:absolute;
        top:50%;
        left:5%;
        margin-top:-2.5%;
        border-radius: 50%;
        cursor:default !important;
        box-shadow: 1px 0 2px #040404;
      }
    }
    .top{
      position:absolute;
      top: calc(#{$bars-margin-pct} - #{$shadow-offset-px});
      left: $bars-margin-pct;
      bottom: calc(#{$bars-margin-pct} + #{$shadow-offset-px});
      right: $bars-margin-pct;
      background:$knob-img no-repeat;
      background-size: contain;
      z-index:2;
      cursor:default !important;
    }
    .base{
      top: calc(#{$bars-margin-pct} - #{$shadow-offset-px});
      left: $bars-margin-pct;
      bottom: calc(#{$bars-margin-pct} + #{$shadow-offset-px});
      right: $bars-margin-pct;
      border-radius:50%;
      box-shadow:0 $shadow-size-px 0 #4a5056,$shadow-size-px $shadow-size-px $shadow-size-px #000;
      position:absolute;
      z-index:1;
    }
  }
}