_slider.scss 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. @mixin extjs-slider {
  2. .#{$prefix}slider {
  3. // @tag iezoomhack
  4. }
  5. .#{$prefix}slider-inner {
  6. position:relative;
  7. left:0;
  8. top:0;
  9. overflow:visible;
  10. // @tag iezoomhack
  11. }
  12. .#{$prefix}slider-focus {
  13. position:absolute;
  14. left:0;
  15. top:0;
  16. width:1px;
  17. height:1px;
  18. line-height:1px;
  19. font-size:1px;
  20. display:block;
  21. overflow:hidden;
  22. @extend .outline-none;
  23. @extend .no-select;
  24. }
  25. /* Horizontal styles */
  26. .#{$prefix}slider-horz {
  27. padding-left:7px;
  28. background:transparent no-repeat 0 -24px;
  29. }
  30. .#{$prefix}slider-horz .#{$prefix}slider-end {
  31. padding-right:7px;
  32. // @tag iezoomhack
  33. background:transparent no-repeat right -46px;
  34. }
  35. .#{$prefix}slider-horz .#{$prefix}slider-inner {
  36. background:transparent repeat-x 0 -2px;
  37. height:18px;
  38. }
  39. .#{$prefix}slider-horz .#{$prefix}slider-thumb {
  40. width: $horizontal-slider-thumb-width;
  41. height: $horizontal-slider-thumb-height;
  42. margin-left: -($horizontal-slider-thumb-width / 2);
  43. position: absolute;
  44. left: 0;
  45. top: 1px;
  46. background: transparent no-repeat 0 0;
  47. }
  48. .#{$prefix}slider-horz .#{$prefix}slider-thumb-over {
  49. background-position: -14px -15px;
  50. }
  51. .#{$prefix}slider-horz .#{$prefix}slider-thumb-drag {
  52. background-position: -28px -30px;
  53. }
  54. /* Vertical styles */
  55. .#{$prefix}slider-vert {
  56. padding-top:7px;
  57. background:transparent no-repeat -44px 0;
  58. }
  59. .#{$prefix}slider-vert .#{$prefix}slider-end {
  60. padding-bottom:7px;
  61. // @tag iezoomhack
  62. background:transparent no-repeat -22px bottom;
  63. width:22px;
  64. }
  65. .#{$prefix}slider-vert .#{$prefix}slider-inner {
  66. background:transparent repeat-y 0 0;
  67. width:22px;
  68. }
  69. .#{$prefix}slider-vert .#{$prefix}slider-thumb {
  70. width: $vertical-slider-thumb-width;
  71. height: $vertical-slider-thumb-height;
  72. margin-bottom: -($vertical-slider-thumb-height / 2);
  73. position: absolute;
  74. left: 3px;
  75. bottom: 0;
  76. background:transparent no-repeat 0 0;
  77. }
  78. .#{$prefix}slider-vert .#{$prefix}slider-thumb-over {
  79. background-position: -15px -14px;
  80. }
  81. .#{$prefix}slider-vert .#{$prefix}slider-thumb-drag {
  82. background-position: -30px -28px;
  83. }
  84. .#{$prefix}slider-horz,
  85. .#{$prefix}slider-horz .#{$prefix}slider-end,
  86. .#{$prefix}slider-horz .#{$prefix}slider-inner {
  87. background-image: theme-background-image($theme-name, 'slider/slider-bg.png');
  88. }
  89. .#{$prefix}slider-horz .#{$prefix}slider-thumb {
  90. background-image: theme-background-image($theme-name, 'slider/slider-thumb.png');
  91. }
  92. .#{$prefix}slider-vert,
  93. .#{$prefix}slider-vert .#{$prefix}slider-end,
  94. .#{$prefix}slider-vert .#{$prefix}slider-inner {
  95. background-image: theme-background-image($theme-name, 'slider/slider-v-bg.png');
  96. }
  97. .#{$prefix}slider-vert .#{$prefix}slider-thumb {
  98. background-image: theme-background-image($theme-name, 'slider/slider-v-thumb.png');
  99. }
  100. @if $include-ie {
  101. .#{$prefix}ie6 {
  102. .#{$prefix}slider-horz,
  103. .#{$prefix}slider-horz .#{$prefix}slider-end,
  104. .#{$prefix}slider-horz .#{$prefix}slider-inner {
  105. background-image: theme-background-image($theme-name, 'slider/slider-bg.gif');
  106. }
  107. .#{$prefix}slider-horz .#{$prefix}slider-thumb {
  108. background-image: theme-background-image($theme-name, 'slider/slider-thumb.gif');
  109. }
  110. .#{$prefix}slider-vert,
  111. .#{$prefix}slider-vert .#{$prefix}slider-end,
  112. .#{$prefix}slider-vert .#{$prefix}slider-inner {
  113. background-image: theme-background-image($theme-name, 'slider/slider-v-bg.gif');
  114. }
  115. .#{$prefix}slider-vert .#{$prefix}slider-thumb {
  116. background-image: theme-background-image($theme-name, 'slider/slider-v-thumb.gif');
  117. }
  118. }
  119. }
  120. }