_slider.scss 4.2 KB

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