_slider.scss.html 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>The source code</title>
  6. <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  7. <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  8. <style type="text/css">
  9. .highlight { display: block; background-color: #ddd; }
  10. </style>
  11. <script type="text/javascript">
  12. function highlight() {
  13. document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14. }
  15. </script>
  16. </head>
  17. <body onload="prettyPrint(); highlight();">
  18. <pre class="prettyprint lang-js"><span id='Ext-slider-Multi-css_mixin-extjs-slider'>/**
  19. </span> * Creates the base structure of slider.
  20. * @member Ext.slider.Multi
  21. */
  22. @mixin extjs-slider {
  23. .#{$prefix}slider {
  24. zoom:1;
  25. }
  26. .#{$prefix}slider-inner {
  27. position:relative;
  28. left:0;
  29. top:0;
  30. overflow:visible;
  31. zoom:1;
  32. }
  33. .#{$prefix}slider-focus {
  34. position:absolute;
  35. left:0;
  36. top:0;
  37. width:1px;
  38. height:1px;
  39. line-height:1px;
  40. font-size:1px;
  41. -moz-outline:0 none;
  42. outline:0 none;
  43. @include no-select;
  44. display:block;
  45. overflow:hidden;
  46. }
  47. /* Horizontal styles */
  48. .#{$prefix}slider-horz {
  49. padding-left:7px;
  50. background:transparent no-repeat 0 -24px;
  51. width: 100%;
  52. }
  53. .#{$prefix}slider-horz .#{$prefix}slider-end {
  54. padding-right:7px;
  55. zoom:1;
  56. background:transparent no-repeat right -46px;
  57. }
  58. .#{$prefix}slider-horz .#{$prefix}slider-inner {
  59. background:transparent repeat-x 0 -2px;
  60. height:18px;
  61. }
  62. .#{$prefix}slider-horz .#{$prefix}slider-thumb {
  63. width: $horizontal-slider-thumb-width;
  64. height: $horizontal-slider-thumb-height;
  65. margin-left: -($horizontal-slider-thumb-width / 2);
  66. position: absolute;
  67. left: 0;
  68. top: 1px;
  69. background: transparent no-repeat 0 0;
  70. }
  71. .#{$prefix}slider-horz .#{$prefix}slider-thumb-over {
  72. background-position: -14px -15px;
  73. }
  74. .#{$prefix}slider-horz .#{$prefix}slider-thumb-drag {
  75. background-position: -28px -30px;
  76. }
  77. /* Vertical styles */
  78. .#{$prefix}slider-vert {
  79. padding-top:7px;
  80. background:transparent no-repeat -44px 0;
  81. }
  82. .#{$prefix}slider-vert .#{$prefix}slider-end {
  83. padding-bottom:7px;
  84. zoom:1;
  85. background:transparent no-repeat -22px bottom;
  86. width:22px;
  87. }
  88. .#{$prefix}slider-vert .#{$prefix}slider-inner {
  89. background:transparent repeat-y 0 0;
  90. width:22px;
  91. }
  92. .#{$prefix}slider-vert .#{$prefix}slider-thumb {
  93. width: $vertical-slider-thumb-width;
  94. height: $vertical-slider-thumb-height;
  95. margin-bottom: -($vertical-slider-thumb-height / 2);
  96. position: absolute;
  97. left: 3px;
  98. bottom: 0;
  99. background:transparent no-repeat 0 0;
  100. }
  101. .#{$prefix}slider-vert .#{$prefix}slider-thumb-over {
  102. background-position: -15px -14px;
  103. }
  104. .#{$prefix}slider-vert .#{$prefix}slider-thumb-drag {
  105. background-position: -30px -28px;
  106. }
  107. .#{$prefix}slider-horz,
  108. .#{$prefix}slider-horz .#{$prefix}slider-end,
  109. .#{$prefix}slider-horz .#{$prefix}slider-inner {
  110. background-image: theme-background-image($theme-name, 'slider/slider-bg.png');
  111. }
  112. .#{$prefix}slider-horz .#{$prefix}slider-thumb {
  113. background-image: theme-background-image($theme-name, 'slider/slider-thumb.png');
  114. }
  115. .#{$prefix}slider-vert,
  116. .#{$prefix}slider-vert .#{$prefix}slider-end,
  117. .#{$prefix}slider-vert .#{$prefix}slider-inner {
  118. background-image: theme-background-image($theme-name, 'slider/slider-v-bg.png');
  119. }
  120. .#{$prefix}slider-vert .#{$prefix}slider-thumb {
  121. background-image: theme-background-image($theme-name, 'slider/slider-v-thumb.png');
  122. }
  123. @if $include-ie {
  124. .#{$prefix}ie6 {
  125. .#{$prefix}slider-horz,
  126. .#{$prefix}slider-horz .#{$prefix}slider-end,
  127. .#{$prefix}slider-horz .#{$prefix}slider-inner {
  128. background-image: theme-background-image($theme-name, 'slider/slider-bg.gif');
  129. }
  130. .#{$prefix}slider-horz .#{$prefix}slider-thumb {
  131. background-image: theme-background-image($theme-name, 'slider/slider-thumb.gif');
  132. }
  133. .#{$prefix}slider-vert,
  134. .#{$prefix}slider-vert .#{$prefix}slider-end,
  135. .#{$prefix}slider-vert .#{$prefix}slider-inner {
  136. background-image: theme-background-image($theme-name, 'slider/slider-v-bg.gif');
  137. }
  138. .#{$prefix}slider-vert .#{$prefix}slider-thumb {
  139. background-image: theme-background-image($theme-name, 'slider/slider-v-thumb.gif');
  140. }
  141. }
  142. }
  143. }</pre>
  144. </body>
  145. </html>