1 /* Copyright (c) 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 /* Base class rules, internal to value-bar */ 7 8 .value-bar { 9 -webkit-flex-wrap: nowrap; 10 color: gray; 11 display: -webkit-flex; 12 position: absolute; 13 z-index: 100; 14 } 15 16 .value-bar .value-control { 17 -webkit-user-select: none; 18 background-color: whitesmoke; 19 border: 1px solid gray; 20 cursor: pointer; 21 font-family: sans-serif; 22 font-size: 12px; 23 } 24 25 .value-bar .lowest-value-control { 26 position: relative; 27 z-index: 100; 28 } 29 30 .value-bar .highest-value-control { 31 position: relative; 32 z-index: 100; 33 } 34 35 .value-bar .value-range-control { 36 background-color: lightgray; 37 position: relative; 38 } 39 40 .value-bar .value-slider { 41 background-color: gray; 42 position: absolute; 43 z-index: 99; 44 } 45 46 .value-bar[orient='vertical'] .lowest-value-control { 47 border-bottom: none; 48 } 49 50 .value-bar[orient='vertical'] .value-slider { 51 cursor: row-resize; 52 width: 18px; 53 } 54 55 .value-bar[orient='vertical'] .value-slider-top { 56 border-bottom: 1px solid black; 57 height: 5px; 58 } 59 60 .value-bar[orient='vertical'] .value-slider-bottom { 61 border-top: 1px solid black; 62 height: 5px; 63 } 64 65 .value-bar[orient='vertical'] .value-range-control { 66 height: 100px; 67 } 68 69 .value-bar[orient='vertical'] .highest-value-control { 70 border-top: none; 71 } 72 73 .value-bar[orient='vertical'] .value-display { 74 left: 25px; 75 } 76 77 .value-bar[orient='horizontal'] .lowest-value-control { 78 border-right: none; 79 } 80 81 .value-bar[orient='horizontal'] .value-slider { 82 cursor: col-resize; 83 height: 18px; 84 white-space: nowrap; 85 } 86 87 .value-bar[orient='horizontal'] .value-slider-top { 88 border-right: 1px solid black; 89 display: inline-block; 90 height: 18px; 91 width: 5px; 92 } 93 94 .value-bar[orient='horizontal'] .value-slider-bottom { 95 border-left: 1px solid black; 96 display: inline-block; 97 height: 18px; 98 width: 5px; 99 } 100 101 102 .value-bar[orient='horizontal'] .value-range-control { 103 width: 100px; 104 } 105 106 .value-bar[orient='horizontal'] .highest-value-control { 107 border-left: none; 108 } 109 110 .value-bar[orient='horizontal'] .value-display { 111 left: 25px; 112 } 113