slider.css 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  1. /*!
  2. * Angular Material Design
  3. * https://github.com/angular/material
  4. * @license MIT
  5. * v0.11.4
  6. */
  7. @-webkit-keyframes sliderFocusThumb {
  8. 0% {
  9. opacity: 0;
  10. -webkit-transform: scale(0);
  11. transform: scale(0); }
  12. 50% {
  13. -webkit-transform: scale(1);
  14. transform: scale(1);
  15. opacity: 1; }
  16. 100% {
  17. opacity: 0; } }
  18. @keyframes sliderFocusThumb {
  19. 0% {
  20. opacity: 0;
  21. -webkit-transform: scale(0);
  22. transform: scale(0); }
  23. 50% {
  24. -webkit-transform: scale(1);
  25. transform: scale(1);
  26. opacity: 1; }
  27. 100% {
  28. opacity: 0; } }
  29. md-slider {
  30. height: 48px;
  31. position: relative;
  32. display: block;
  33. margin-left: 4px;
  34. margin-right: 4px;
  35. padding: 0;
  36. /**
  37. * Track
  38. */
  39. /**
  40. * Slider thumb
  41. */
  42. /* The sign that's focused in discrete mode */
  43. /**
  44. * The border/background that comes in when focused in non-discrete mode
  45. */
  46. /* Don't animate left/right while panning */ }
  47. md-slider *, md-slider *:after {
  48. box-sizing: border-box; }
  49. md-slider .md-slider-wrapper {
  50. position: relative; }
  51. md-slider .md-track-container {
  52. width: 100%;
  53. position: absolute;
  54. top: 23px;
  55. height: 2px; }
  56. md-slider .md-track {
  57. position: absolute;
  58. left: 0;
  59. right: 0;
  60. height: 100%; }
  61. md-slider .md-track-fill {
  62. transition: width 0.05s linear; }
  63. md-slider .md-track-ticks {
  64. position: absolute;
  65. left: 0;
  66. right: 0;
  67. height: 100%; }
  68. md-slider .md-track-ticks canvas {
  69. width: 100%; }
  70. md-slider .md-thumb-container {
  71. position: absolute;
  72. left: 0;
  73. top: 50%;
  74. -webkit-transform: translate3d(-50%, -50%, 0);
  75. transform: translate3d(-50%, -50%, 0);
  76. transition: left 0.1s linear; }
  77. md-slider .md-thumb {
  78. z-index: 1;
  79. position: absolute;
  80. left: -19px;
  81. top: 5px;
  82. width: 38px;
  83. height: 38px;
  84. border-radius: 38px;
  85. -webkit-transform: scale(0.5);
  86. transform: scale(0.5);
  87. transition: all 0.1s linear; }
  88. md-slider .md-thumb:after {
  89. content: '';
  90. position: absolute;
  91. left: 3px;
  92. top: 3px;
  93. width: 32px;
  94. height: 32px;
  95. border-radius: 32px;
  96. border-width: 3px;
  97. border-style: solid; }
  98. md-slider .md-sign {
  99. /* Center the children (slider-thumb-text) */
  100. display: -webkit-flex;
  101. display: -ms-flexbox;
  102. display: flex;
  103. -webkit-align-items: center;
  104. -ms-flex-align: center;
  105. align-items: center;
  106. -webkit-justify-content: center;
  107. -ms-flex-pack: center;
  108. justify-content: center;
  109. position: absolute;
  110. left: -14px;
  111. top: -20px;
  112. width: 28px;
  113. height: 28px;
  114. border-radius: 28px;
  115. -webkit-transform: scale(0.4) translate3d(0, 70px, 0);
  116. transform: scale(0.4) translate3d(0, 70px, 0);
  117. transition: all 0.2s ease-in-out;
  118. /* The arrow pointing down under the sign */ }
  119. md-slider .md-sign:after {
  120. position: absolute;
  121. content: '';
  122. left: 0px;
  123. border-radius: 16px;
  124. top: 19px;
  125. border-left: 14px solid transparent;
  126. border-right: 14px solid transparent;
  127. border-top-width: 16px;
  128. border-top-style: solid;
  129. opacity: 0;
  130. -webkit-transform: translate3d(0, -8px, 0);
  131. transform: translate3d(0, -8px, 0);
  132. transition: all 0.2s ease-in-out; }
  133. md-slider .md-sign .md-thumb-text {
  134. z-index: 1;
  135. font-size: 12px;
  136. font-weight: bold; }
  137. md-slider .md-focus-thumb {
  138. position: absolute;
  139. left: -24px;
  140. top: 0px;
  141. width: 48px;
  142. height: 48px;
  143. border-radius: 48px;
  144. display: none;
  145. opacity: 0;
  146. background-color: #C0C0C0;
  147. -webkit-animation: sliderFocusThumb 0.4s linear;
  148. animation: sliderFocusThumb 0.4s linear; }
  149. md-slider .md-focus-ring {
  150. position: absolute;
  151. left: -24px;
  152. top: 0px;
  153. width: 48px;
  154. height: 48px;
  155. border-radius: 48px;
  156. -webkit-transform: scale(0);
  157. transform: scale(0);
  158. transition: all 0.2s linear;
  159. opacity: 0.26; }
  160. md-slider .md-disabled-thumb {
  161. position: absolute;
  162. left: -22px;
  163. top: 2px;
  164. width: 44px;
  165. height: 44px;
  166. border-radius: 44px;
  167. -webkit-transform: scale(0.35);
  168. transform: scale(0.35);
  169. border-width: 6px;
  170. border-style: solid;
  171. display: none; }
  172. md-slider.md-min .md-thumb:after {
  173. background-color: white; }
  174. md-slider.md-min .md-sign {
  175. opacity: 0; }
  176. md-slider:focus {
  177. outline: none; }
  178. md-slider.md-dragging .md-thumb-container, md-slider.md-dragging .md-track-fill {
  179. transition: none; }
  180. md-slider:not([md-discrete]) {
  181. /* Hide the sign and ticks in non-discrete mode */ }
  182. md-slider:not([md-discrete]) .md-track-ticks, md-slider:not([md-discrete]) .md-sign {
  183. display: none; }
  184. md-slider:not([md-discrete]):not([disabled]):hover .md-thumb {
  185. -webkit-transform: scale(0.6);
  186. transform: scale(0.6); }
  187. md-slider:not([md-discrete]):not([disabled]):focus .md-focus-thumb, md-slider:not([md-discrete]):not([disabled]).md-active .md-focus-thumb {
  188. display: block; }
  189. md-slider:not([md-discrete]):not([disabled]):focus .md-focus-ring, md-slider:not([md-discrete]):not([disabled]).md-active .md-focus-ring {
  190. -webkit-transform: scale(1);
  191. transform: scale(1); }
  192. md-slider:not([md-discrete]):not([disabled]):focus .md-thumb, md-slider:not([md-discrete]):not([disabled]).md-active .md-thumb {
  193. -webkit-transform: scale(0.85);
  194. transform: scale(0.85); }
  195. md-slider[md-discrete] {
  196. /* Hide the focus thumb in discrete mode */ }
  197. md-slider[md-discrete] .md-focus-thumb, md-slider[md-discrete] .md-focus-ring {
  198. display: none; }
  199. md-slider[md-discrete]:not([disabled]):focus .md-sign, md-slider[md-discrete]:not([disabled]):focus .md-sign:after, md-slider[md-discrete]:not([disabled]).md-active .md-sign, md-slider[md-discrete]:not([disabled]).md-active .md-sign:after {
  200. opacity: 1;
  201. -webkit-transform: translate3d(0, 0, 0) scale(1);
  202. transform: translate3d(0, 0, 0) scale(1); }
  203. md-slider[disabled] .md-track-fill {
  204. display: none; }
  205. md-slider[disabled] .md-sign {
  206. display: none; }
  207. md-slider[disabled] .md-thumb {
  208. -webkit-transform: scale(0.35);
  209. transform: scale(0.35); }
  210. md-slider[disabled] .md-disabled-thumb {
  211. display: block; }
  212. @media screen and (-ms-high-contrast: active) {
  213. md-slider.md-default-theme .md-track {
  214. border-bottom: 1px solid #fff; } }