ion.rangeSlider.skinHTML5.css 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. /* Ion.RangeSlider, Simple Skin
  2. // css version 2.0.3
  3. // © Denis Ineshin, 2014 https://github.com/IonDen
  4. // © guybowden, 2014 https://github.com/guybowden
  5. // ===================================================================================================================*/
  6. /* =====================================================================================================================
  7. // Skin details */
  8. .irs {
  9. height: 55px;
  10. }
  11. .irs-with-grid {
  12. height: 75px;
  13. }
  14. .irs-line {
  15. height: 10px; top: 33px;
  16. background: #EEE;
  17. background: linear-gradient(to bottom, #DDD -50%, #FFF 150%); /* W3C */
  18. border: 1px solid #CCC;
  19. border-radius: 16px;
  20. -moz-border-radius: 16px;
  21. }
  22. .irs-line-left {
  23. height: 8px;
  24. }
  25. .irs-line-mid {
  26. height: 8px;
  27. }
  28. .irs-line-right {
  29. height: 8px;
  30. }
  31. .irs-bar {
  32. height: 10px; top: 33px;
  33. border-top: 1px solid #428bca;
  34. border-bottom: 1px solid #428bca;
  35. background: #428bca;
  36. background: linear-gradient(to top, rgba(66,139,202,1) 0%,rgba(127,195,232,1) 100%); /* W3C */
  37. }
  38. .irs-bar-edge {
  39. height: 10px; top: 33px;
  40. width: 14px;
  41. border: 1px solid #428bca;
  42. border-right: 0;
  43. background: #428bca;
  44. background: linear-gradient(to top, rgba(66,139,202,1) 0%,rgba(127,195,232,1) 100%); /* W3C */
  45. border-radius: 16px 0 0 16px;
  46. -moz-border-radius: 16px 0 0 16px;
  47. }
  48. .irs-shadow {
  49. height: 2px; top: 38px;
  50. background: #000;
  51. opacity: 0.3;
  52. border-radius: 5px;
  53. -moz-border-radius: 5px;
  54. }
  55. .lt-ie9 .irs-shadow {
  56. filter: alpha(opacity=30);
  57. }
  58. .irs-slider {
  59. top: 25px;
  60. width: 27px; height: 27px;
  61. border: 1px solid #AAA;
  62. background: #DDD;
  63. background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(220,220,220,1) 20%,rgba(255,255,255,1) 100%); /* W3C */
  64. border-radius: 27px;
  65. -moz-border-radius: 27px;
  66. box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
  67. cursor: pointer;
  68. }
  69. .irs-slider.state_hover, .irs-slider:hover {
  70. background: #FFF;
  71. }
  72. .irs-min, .irs-max {
  73. color: #333;
  74. font-size: 12px; line-height: 1.333;
  75. text-shadow: none;
  76. top: 0;
  77. padding: 1px 5px;
  78. background: rgba(0,0,0,0.1);
  79. border-radius: 3px;
  80. -moz-border-radius: 3px;
  81. }
  82. .lt-ie9 .irs-min, .lt-ie9 .irs-max {
  83. background: #ccc;
  84. }
  85. .irs-from, .irs-to, .irs-single {
  86. color: #fff;
  87. font-size: 14px; line-height: 1.333;
  88. text-shadow: none;
  89. padding: 1px 5px;
  90. background: #428bca;
  91. border-radius: 3px;
  92. -moz-border-radius: 3px;
  93. }
  94. .lt-ie9 .irs-from, .lt-ie9 .irs-to, .lt-ie9 .irs-single {
  95. background: #999;
  96. }
  97. .irs-grid {
  98. height: 27px;
  99. }
  100. .irs-grid-pol {
  101. opacity: 0.5;
  102. background: #428bca;
  103. }
  104. .irs-grid-pol.small {
  105. background: #999;
  106. }
  107. .irs-grid-text {
  108. bottom: 5px;
  109. color: #99a4ac;
  110. }
  111. .irs-disabled {
  112. }