third_party/polymer/v1_0/components-chromium/paper-slider/paper-slider.css

   1 /**
   2 @license
   3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
   4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7 Code distributed by Google as part of the polymer project is also
   8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9 */
  10
  11 :host {
  12   display: inline-block;
  13   width: 200px;
  14   cursor: default;
  15   -webkit-user-select: none;
  16   -moz-user-select: none;
  17   -ms-user-select: none;
  18   user-select: none;
  19   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  20   --paper-progress-active-color: var(--paper-slider-active-color, --google-blue-700);
  21   --paper-progress-secondary-color: var(--paper-slider-secondary-color, --google-blue-300);
  22   --paper-progress-disabled-active-color: var(--paper-slider-disabled-active-color, --google-grey-500);
  23   --paper-progress-disabled-secondary-color: var(--paper-slider-disabled-secondary-color, --google-grey-300);
  24 }
  25
  26 /* focus shows the ripple */
  27 :host(:focus) {
  28   outline: none;
  29 }
  30
  31 #sliderContainer {
  32   position: relative;
  33   width: calc(100% - 32px);
  34   height: 32px;
  35 }
  36
  37 #sliderContainer.editable {
  38   float: left;
  39   width: calc(100% - 72px);
  40   margin: 12px 0;
  41 }
  42
  43 .bar-container {
  44   position: absolute;
  45   top: 0;
  46   left: 16px;
  47   height: 100%;
  48   width: 100%;
  49   overflow: hidden;
  50 }
  51
  52 .ring > .bar-container {
  53   left: 20px;
  54   width: calc(100% - 4px);
  55   transition: left 0.18s ease, width 0.18s ease;
  56 }
  57
  58 .ring.expand:not(.pin) > .bar-container {
  59   left: 30px;
  60   width: calc(100% - 14px);
  61 }
  62
  63 .ring.expand.dragging > .bar-container {
  64   transition: none;
  65 }
  66
  67 #sliderBar {
  68   position: absolute;
  69   top: 15px;
  70   left: 0;
  71   width: 100%;
  72   padding: 8px 0;
  73   margin: -8px 0;
  74   background-color: var(--paper-slider-bar-color, transparent);
  75   --paper-progress-height: var(--paper-slider-height, 2px);
  76 }
  77
  78 .ring #sliderBar {
  79   left: -4px;
  80   width: calc(100% + 4px);
  81 }
  82
  83 .ring.expand:not(.pin) #sliderBar {
  84   left: -14px;
  85   width: calc(100% + 14px);
  86 }
  87
  88 .slider-markers {
  89   position: absolute;
  90   top: 15px;
  91   left: 15px;
  92   height: 2px;
  93   width: calc(100% + 2px);
  94   box-sizing: border-box;
  95   pointer-events: none;
  96 }
  97
  98 .slider-markers::after,
  99 .slider-marker::after {
 100   content: "";
 101   display: block;
 102   width: 2px;
 103   height: 2px;
 104   border-radius: 50%;
 105   background-color: black;
 106 }
 107
 108 #sliderKnob {
 109   @apply(--layout-center-justified);
 110   @apply(--layout-center);
 111   @apply(--layout-horizontal);
 112
 113   position: absolute;
 114   left: 0;
 115   top: 0;
 116   width: 32px;
 117   height: 32px;
 118 }
 119
 120 .transiting > #sliderKnob {
 121   transition: left 0.08s ease;
 122 }
 123
 124 #sliderKnob:focus {
 125   outline: none;
 126 }
 127
 128 #sliderKnob.dragging {
 129   transition: none;
 130 }
 131
 132 .snaps > #sliderKnob.dragging {
 133   transition: -webkit-transform 0.08s ease;
 134   transition: transform 0.08s ease;
 135 }
 136
 137 #sliderKnobInner {
 138   width: 12px;
 139   height: 12px;
 140   border-radius: 50%;
 141   background-color: var(--paper-slider-knob-color, --google-blue-700);
 142
 143   -moz-box-sizing: border-box;
 144   box-sizing: border-box;
 145
 146   transition-property: height, width, background-color, border;
 147   transition-duration: 0.1s;
 148   transition-timing-function: ease;
 149 }
 150
 151 .expand:not(.pin) > #sliderKnob > #sliderKnobInner {
 152   width: 100%;
 153   height: 100%;
 154
 155   -webkit-transform: translateZ(0);
 156   transform: translateZ(0);
 157 }
 158
 159 .ring > #sliderKnob > #sliderKnobInner {
 160   background-color: var(--paper-slider-knob-start-color, transparent);
 161   border: 2px solid var(--paper-slider-knob-start-border-color, #c8c8c8);
 162 }
 163
 164 #sliderKnobInner::before {
 165   background-color: var(--paper-slider-pin-color, --google-blue-700);
 166 }
 167
 168 .pin > #sliderKnob > #sliderKnobInner::before {
 169   content: "";
 170   position: absolute;
 171   top: 0;
 172   left: 0;
 173   width: 26px;
 174   height: 26px;
 175   margin-left: 3px;
 176   border-radius: 50% 50% 50% 0;
 177
 178   -webkit-transform: rotate(-45deg) scale(0) translate(0);
 179   transform: rotate(-45deg) scale(0) translate(0);
 180 }
 181
 182 #sliderKnobInner::before,
 183 #sliderKnobInner::after {
 184   transition: -webkit-transform .2s ease, background-color .18s ease;
 185   transition: transform .2s ease, background-color .18s ease;
 186 }
 187
 188 .pin.ring > #sliderKnob > #sliderKnobInner::before {
 189   background-color: var(--paper-slider-pin-start-color, #c8c8c8);
 190 }
 191
 192 .pin.expand > #sliderKnob > #sliderKnobInner::before {
 193   -webkit-transform: rotate(-45deg) scale(1) translate(17px, -17px);
 194   transform: rotate(-45deg) scale(1) translate(17px, -17px);
 195 }
 196
 197 .pin > #sliderKnob > #sliderKnobInner::after {
 198   content: attr(value);
 199   position: absolute;
 200   top: 0;
 201   left: 0;
 202   width: 32px;
 203   height: 26px;
 204   text-align: center;
 205   color: var(--paper-slider-font-color, #fff);
 206   font-size: 10px;
 207
 208   -webkit-transform: scale(0) translate(0);
 209   transform: scale(0) translate(0);
 210 }
 211
 212 .pin.expand > #sliderKnob > #sliderKnobInner::after {
 213   -webkit-transform: scale(1) translate(0, -17px);
 214   transform: scale(1) translate(0, -17px);
 215 }
 216
 217 /* editable: paper-input */
 218 .slider-input {
 219   width: 40px;
 220   float: right;
 221   overflow: hidden;
 222 }
 223
 224 .slider-input {
 225   --paper-input-container-input: {
 226     text-align: center;
 227   };
 228 }
 229
 230 /* disabled state */
 231 #sliderContainer.disabled {
 232   pointer-events: none;
 233 }
 234
 235 .disabled > #sliderKnob > #sliderKnobInner {
 236   width: 8px;
 237   height: 8px;
 238   background-color: var(--paper-slider-disabled-knob-color, --google-grey-500);
 239 }
 240
 241 .disabled.ring > #sliderKnob > #sliderKnobInner {
 242   background-color: transparent;
 243 }
 244
 245 paper-ripple {
 246   color: var(--paper-slider-knob-color, --google-blue-700);
 247 }