src/chrome/common/extensions/docs/examples/api/fontSettings/slider.css

   1 /* Copyright 2013 The Chromium Authors. All rights reserved.
   2  * Use of this source code is governed by a BSD-style license that can be
   3  * found in the LICENSE file.
   4  */
   5
   6 /* Customize the standard input[type='range']. */
   7 .slider > input[type='range'] {
   8   -webkit-appearance: none !important;  /* Hide the default thumb icon. */
   9   background: transparent;  /* Hide the standard slider bar */
  10   height: 100%;
  11   left: -2px;  /* Required to align the input element with the parent. */
  12   position: absolute;
  13   top: -2px;
  14   width: 100%;
  15 }
  16
  17 /* Custom thumb icon. */
  18 .slider > input[type='range']::-webkit-slider-thumb {
  19   -webkit-appearance: none;
  20   background-position: center center;
  21   background-repeat: no-repeat;
  22   height: 24px;
  23   position: relative;
  24   z-index: 2;
  25 }
  26
  27 /* Custom slider bar (we hide the standard one). */
  28 .slider > .bar {
  29   /* In order to match the horizontal position of the standard slider bar
  30      left and right must be equal to 1/2 of the thumb icon width. */
  31   left: 8px;
  32   right: 8px;
  33   bottom: 10px;
  34   pointer-events: none;  /* Mouse events pass through to the standard input. */
  35   position: absolute;
  36   top: 10px;
  37   background-image: url(../images/slider/slide_bar_center.png);
  38   height: 4px;
  39 }
  40
  41 .slider > .bar > .filled,
  42 .slider > .bar > .cap {
  43   position: absolute;
  44 }
  45
  46 /* The filled portion of the slider bar to the left of the thumb. */
  47 .slider > .bar > .filled {
  48   border-left-style: none;
  49   border-right-style: none;
  50   left: 0;
  51   width: 0; /* The element style.width is manipulated from the code. */
  52 }
  53
  54 .slider > .bar > .cap.right {
  55   background-image: url(../images/slider/slider_bar_right.png);
  56   height: 4px;
  57   width: 4px;
  58   left: 100%;
  59 }
  60
  61 .slider > .bar > .filled {
  62   background-image: url(../images/slider/slide_bar_fill_center.png);
  63   height: 4px;
  64 }
  65
  66 .slider > .bar > .cap.left {
  67   background-image: url(../images/slider/slide_bar_fill_left.png);
  68   height: 4px;
  69   width: 4px;
  70   right: 100%;
  71 }
  72
  73 .slider.disabled  > .bar {
  74   background-image: url(../images/slider/slide_bar_disabled_center.png);
  75 }
  76
  77 .slider.disabled  > .bar > .filled {
  78   background-image: url(../images/slider/slide_bar_disabled_center.png);
  79 }
  80
  81 .slider.disabled  > .bar > .cap.left {
  82   background-image: url(../images/slider/slide_bar_disabled_left.png);
  83 }
  84
  85 .slider.disabled  > .bar > .cap.right {
  86   background-image: url(../images/slider/slide_bar_disabled_right.png);
  87 }
  88
  89 .slider.disabled,
  90 .slider.readonly {
  91   pointer-events: none;
  92 }
  93
  94 .slider {
  95   -webkit-box-flex: 1;
  96 }
  97
  98 .slider > input[type='range']::-webkit-slider-thumb {
  99   background-image: url(../images/slider/slider_thumb.png);
 100   width: 16px;
 101 }
 102
 103 .slider > input[type='range']::-webkit-slider-thumb:hover {
 104   background-image: url(../images/slider/slider_thumb_hover.png);
 105 }
 106
 107 .slider > input[type='range']::-webkit-slider-thumb:active {
 108   background-image: url(../images/slider/slider_thumb_down.png);
 109 }
 110
 111 .slider.disabled > input[type='range']::-webkit-slider-thumb {
 112   background-image: url(../images/slider/slider_thumb_disabled.png);
 113 }