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

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