skyquake/framework/widgets/sq-input-range-slider/sq-input-range-slider.scss

   1 @import '../../style/_colors.scss';
   2 $slider-background: rgba(19, 82, 150, 0.2);
   3 $disabled-slider-background: $dark-gray;
   4 //Generates ticks on bar. Not currently used
   5 $slider-background-ticks: repeating-linear-gradient(to right, $slider-background, $slider-background 0%, #fff 0%, #fff 1%, $slider-background 1%, $slider-background 25%);
   6 $thumb-color: rgba(0, 119, 200, 1);
   7 $disabled-thumb-color: $dark-gray;
   8 $track-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
   9 $thumb-height: 50;
  10 $track-height: 3;
  11 $input-margin: 20;
  12 $-webkit-handle-offset: ($track-height - $thumb-height) / 2;
  13
  14 //(thH-ttW) / 2
  15
  16 @mixin thumbStyling {
  17     box-shadow: $track-shadow;
  18     border: 0px solid #000000;
  19     background: $thumb-color;
  20     box-shadow: 2px 2px 2px 0px #ccc;
  21     height: $thumb-height + px;
  22     width: 20px;
  23     cursor: pointer;
  24 }
  25 @mixin inputTrack {
  26     width: 100%;
  27     height: $track-height + px;
  28     cursor: pointer;
  29     animate: 0.2s;
  30 }
  31 @mixin infoBase {
  32     display: flex;
  33     justify-content: space-between;
  34 }
  35 @mixin sliderBase {
  36     input[type=range] {
  37         position:absolute;
  38         -webkit-appearance: none;
  39         margin: $input-margin + px 0;
  40         width: 100%;
  41         &:focus {
  42             outline: none;
  43         }
  44         &::-webkit-slider-thumb {
  45             @include thumbStyling;
  46             -webkit-appearance: none;
  47             margin-top: $-webkit-handle-offset + px;
  48
  49         }
  50         &::-moz-range-thumb {
  51             @include thumbStyling;
  52         }
  53         &::-ms-thumb {
  54             @include thumbStyling;
  55         }
  56         &::-webkit-slider-runnable-track {
  57             @include inputTrack;
  58             box-shadow: $track-shadow;
  59             background: $slider-background;
  60             border: 0px solid #000101;
  61         }
  62         &:focus::-webkit-slider-runnable-track {
  63             background: $slider-background;
  64         }
  65         &::-moz-range-track {
  66             @include inputTrack;
  67             box-shadow: $track-shadow;
  68             background: $slider-background;
  69             border: 0px solid #000101;
  70         }
  71         &::-ms-track {
  72             @include inputTrack;
  73             background: transparent;
  74             border-color: transparent;
  75             border-width: 39px 0;
  76             color: transparent;
  77         }
  78         &::-ms-fill-lower {
  79             background: $slider-background;
  80             border: 0px solid #000101;
  81             box-shadow: $track-shadow;
  82         }
  83         &::-ms-fill-upper {
  84             background: #ac51b5;
  85             border: 0px solid #000101;
  86             box-shadow: $track-shadow;
  87         }
  88         &:focus::-ms-fill-lower {
  89             background: $slider-background;
  90         }
  91         &:focus::-ms-fill-upper {
  92             background: $slider-background;
  93         }
  94     }
  95     &-info {
  96         @include infoBase
  97     }
  98 }
  99 .SqRangeInput {
 100     &--container {
 101         background:white;
 102         border: 1px solid #ccc;
 103     }
 104     &--horizontal {
 105         @include sliderBase;
 106         position: relative;
 107         height:$thumb-height + px;
 108         margin: $input-margin / 2 + px;
 109     }
 110     &--vertical {
 111         @include sliderBase;
 112         position: relative;
 113
 114         input[type=range] {
 115             -webkit-appearance: none;
 116             height: 100%;
 117             width: $track-height + px;
 118             transform: rotate(270deg);
 119             transform-origin: right;
 120             &::-webkit-slider-thumb {
 121                 box-shadow: -2px 2px 2px 0px #ccc;
 122             }
 123             &::-moz-range-thumb {
 124                 box-shadow: -2px 2px 2px 0px #ccc;
 125             }
 126             &::-ms-thumb {
 127                 box-shadow: -2px 2px 2px 0px #ccc;
 128             }
 129         }
 130         &-info {
 131             @include infoBase;
 132
 133             div {
 134                 transform: translateY(10px) rotate(90deg);
 135             }
 136         }
 137     }
 138     &.is-disabled {
 139         input[type=range] {
 140             &:disabled {
 141                 &::-webkit-slider-thumb {
 142                     background: $disabled-thumb-color;
 143                 }
 144                 &::-moz-range-thumb {
 145                     background: $disabled-thumb-color;
 146                 }
 147                 &::-ms-thumb {
 148                     background: $disabled-thumb-color;
 149                 }
 150                 &::-webkit-slider-runnable-track {
 151                     background: $disabled-slider-background;
 152                 }
 153                 &:focus::-webkit-slider-runnable-track {
 154                     background: $disabled-slider-background;
 155                 }
 156                 &::-moz-range-track {
 157                     background: $disabled-slider-background;
 158                 }
 159                 &::-ms-track {
 160                 }
 161                 &::-ms-fill-upper {
 162                     background: $disabled-slider-background;
 163                 }
 164                 &::-ms-fill-lower {
 165                     background: $disabled-slider-background;
 166                 }
 167                 &:focus::-ms-fill-lower {
 168                     background: $disabled-slider-background;
 169                 }
 170                 &:focus::-ms-fill-upper {
 171                     background: $disabled-slider-background;
 172                 }
 173             }
 174         }
 175     }
 176 }