range.css 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. /*!
  2. * # Semantic UI 2.6.4 - Range
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Released under the MIT license
  7. * http://opensource.org/licenses/MIT
  8. *
  9. */
  10. /*******************************
  11. Range
  12. *******************************/
  13. .ui.range {
  14. height: 20px;
  15. width: 100%;
  16. }
  17. .ui.range .inner {
  18. margin: 0 10px 0 10px;
  19. height: 20px;
  20. position: relative;
  21. }
  22. .ui.range .inner:hover {
  23. cursor: pointer;
  24. }
  25. .ui.range .inner .track {
  26. position: absolute;
  27. height: 4px;
  28. width: 100%;
  29. border-radius: 0.28571429rem;
  30. top: 9px;
  31. left: 0;
  32. background-color: rgba(0, 0, 0, 0.05);
  33. }
  34. .ui.range .inner .track-fill {
  35. position: absolute;
  36. height: 4px;
  37. width: 0;
  38. border-radius: 0.28571429rem;
  39. top: 9px;
  40. left: 0;
  41. background-color: #1B1C1D;
  42. }
  43. .ui.range .inner .thumb {
  44. position: absolute;
  45. top: 0;
  46. left: 0;
  47. height: 20px;
  48. width: 20px;
  49. background: #fff -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.05)));
  50. background: #fff -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  51. background: #fff linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  52. border-radius: 100%;
  53. -webkit-box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
  54. box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
  55. }
  56. /*--------------
  57. Inverted
  58. ---------------*/
  59. .ui.inverted.range .inner .track {
  60. background-color: rgba(255, 255, 255, 0.08);
  61. }
  62. .ui.inverted.range .inner .track-fill {
  63. background-color: #545454;
  64. }
  65. /*--------------
  66. Colors
  67. ---------------*/
  68. /* Red */
  69. .ui.red.range .inner .track-fill {
  70. background-color: #DB2828;
  71. }
  72. .ui.red.inverted.range .inner .track-fill {
  73. background-color: #FF695E;
  74. }
  75. /* Orange */
  76. .ui.orange.range .inner .track-fill {
  77. background-color: #F2711C;
  78. }
  79. .ui.orange.inverted.range .inner .track-fill {
  80. background-color: #FF851B;
  81. }
  82. /* Yellow */
  83. .ui.yellow.range .inner .track-fill {
  84. background-color: #FBBD08;
  85. }
  86. .ui.yellow.inverted.range .inner .track-fill {
  87. background-color: #FFE21F;
  88. }
  89. /* Olive */
  90. .ui.olive.range .inner .track-fill {
  91. background-color: #B5CC18;
  92. }
  93. .ui.olive.inverted.range .inner .track-fill {
  94. background-color: #D9E778;
  95. }
  96. /* Green */
  97. .ui.green.range .inner .track-fill {
  98. background-color: #21BA45;
  99. }
  100. .ui.green.inverted.range .inner .track-fill {
  101. background-color: #2ECC40;
  102. }
  103. /* Teal */
  104. .ui.teal.range .inner .track-fill {
  105. background-color: #00B5AD;
  106. }
  107. .ui.teal.inverted.range .inner .track-fill {
  108. background-color: #6DFFFF;
  109. }
  110. /* Blue */
  111. .ui.blue.range .inner .track-fill {
  112. background-color: #2185D0;
  113. }
  114. .ui.blue.inverted.range .inner .track-fill {
  115. background-color: #54C8FF;
  116. }
  117. /* Violet */
  118. .ui.violet.range .inner .track-fill {
  119. background-color: #6435C9;
  120. }
  121. .ui.violet.inverted.range .inner .track-fill {
  122. background-color: #A291FB;
  123. }
  124. /* Purple */
  125. .ui.purple.range .inner .track-fill {
  126. background-color: #A333C8;
  127. }
  128. .ui.purple.inverted.range .inner .track-fill {
  129. background-color: #DC73FF;
  130. }
  131. /* Pink */
  132. .ui.pink.range .inner .track-fill {
  133. background-color: #E03997;
  134. }
  135. .ui.pink.inverted.range .inner .track-fill {
  136. background-color: #FF8EDF;
  137. }
  138. /* Brown */
  139. .ui.brown.range .inner .track-fill {
  140. background-color: #A5673F;
  141. }
  142. .ui.brown.inverted.range .inner .track-fill {
  143. background-color: #D67C1C;
  144. }
  145. /* Grey */
  146. .ui.grey.range .inner .track-fill {
  147. background-color: #767676;
  148. }
  149. .ui.grey.inverted.range .inner .track-fill {
  150. background-color: #DCDDDE;
  151. }
  152. /* Black */
  153. .ui.black.range .inner .track-fill {
  154. background-color: #1B1C1D;
  155. }
  156. .ui.black.inverted.range .inner .track-fill {
  157. background-color: #545454;
  158. }
  159. /*--------------
  160. Disabled
  161. ---------------*/
  162. .ui.range.disabled {
  163. opacity: 0.5;
  164. }
  165. .ui.range.disabled .inner:hover {
  166. cursor: auto;
  167. }
  168. .ui.range.disabled .inner .track-fill {
  169. background: #767676;
  170. }