_resizable.scss.html 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
  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">@mixin extjs-resizable {
  19. .#{$prefix}resizable-handle {
  20. position: absolute;
  21. z-index: 100;
  22. font-size: 1px;
  23. line-height: 6px;
  24. overflow: hidden;
  25. zoom: 1;
  26. @include opacity(0);
  27. background-color: #fff;
  28. }
  29. // Collapsed Components cannot be resized
  30. .#{$prefix}collapsed .#{$prefix}resizable-handle {
  31. display: none;
  32. }
  33. .#{$prefix}resizable-handle-east {
  34. width: 6px;
  35. height: 100%;
  36. right: 0;
  37. top: 0;
  38. }
  39. .#{$prefix}resizable-over {
  40. .#{$prefix}resizable-handle-east {
  41. cursor: e-resize;
  42. }
  43. }
  44. .#{$prefix}resizable-handle-south {
  45. width: 100%;
  46. height: 6px;
  47. left: 0;
  48. bottom: 0;
  49. }
  50. .#{$prefix}resizable-over {
  51. .#{$prefix}resizable-handle-south {
  52. cursor: s-resize;
  53. }
  54. }
  55. .#{$prefix}resizable-handle-west {
  56. width: 6px;
  57. height: 100%;
  58. left: 0;
  59. top: 0;
  60. }
  61. .#{$prefix}resizable-over {
  62. .#{$prefix}resizable-handle-west {
  63. cursor: w-resize;
  64. }
  65. }
  66. .#{$prefix}resizable-handle-north {
  67. width: 100%;
  68. height: 6px;
  69. left: 0;
  70. top: 0;
  71. }
  72. .#{$prefix}resizable-over {
  73. .#{$prefix}resizable-handle-north {
  74. cursor: n-resize;
  75. }
  76. }
  77. .#{$prefix}resizable-handle-southeast {
  78. width: 6px;
  79. height: 6px;
  80. right: 0;
  81. bottom: 0;
  82. z-index: 101;
  83. }
  84. .#{$prefix}resizable-over {
  85. .#{$prefix}resizable-handle-southeast {
  86. cursor: se-resize;
  87. }
  88. }
  89. .#{$prefix}resizable-handle-northwest {
  90. width: 6px;
  91. height: 6px;
  92. left: 0;
  93. top: 0;
  94. z-index: 101;
  95. }
  96. .#{$prefix}resizable-over {
  97. .#{$prefix}resizable-handle-northwest {
  98. cursor: nw-resize;
  99. }
  100. }
  101. .#{$prefix}resizable-handle-northeast {
  102. width: 6px;
  103. height: 6px;
  104. right: 0;
  105. top: 0;
  106. z-index: 101;
  107. }
  108. .#{$prefix}resizable-over {
  109. .#{$prefix}resizable-handle-northeast {
  110. cursor: ne-resize;
  111. }
  112. }
  113. .#{$prefix}resizable-handle-southwest {
  114. width: 6px;
  115. height: 6px;
  116. left: 0;
  117. bottom: 0;
  118. z-index: 101;
  119. }
  120. .#{$prefix}resizable-over {
  121. .#{$prefix}resizable-handle-southwest {
  122. cursor: sw-resize;
  123. }
  124. }
  125. /*IE rounding error*/
  126. .#{$prefix}ie {
  127. .#{$prefix}resizable-handle-east {
  128. margin-right: -1px; /*IE rounding error*/
  129. }
  130. .#{$prefix}resizable-handle-south {
  131. margin-bottom: -1px;
  132. }
  133. }
  134. .#{$prefix}resizable-over .#{$prefix}resizable-handle, .#{$prefix}resizable-pinned .#{$prefix}resizable-handle{
  135. @include opacity(1);
  136. }
  137. .#{$prefix}window .#{$prefix}window-handle {
  138. @include opacity(0);
  139. }
  140. .#{$prefix}window-collapsed .#{$prefix}window-handle {
  141. display: none;
  142. }
  143. .#{$prefix}resizable-proxy {
  144. border: 1px dashed #3b5a82;
  145. position: absolute;
  146. left: 0;
  147. top: 0;
  148. overflow: hidden;
  149. z-index: 50000;
  150. }
  151. .#{$prefix}resizable-overlay {
  152. position: absolute;
  153. left: 0;
  154. top: 0;
  155. width: 100%;
  156. height: 100%;
  157. display: none;
  158. z-index: 200000;
  159. background-color: #fff;
  160. @include opacity(0);
  161. }
  162. .#{$prefix}resizable-over,
  163. .#{$prefix}resizable-pinned {
  164. .#{$prefix}resizable-handle-east,
  165. .#{$prefix}resizable-handle-west {
  166. background-position: left;
  167. background-image: theme-background-image($theme-name, 'sizer/e-handle.gif');
  168. }
  169. .#{$prefix}resizable-handle-south,
  170. .#{$prefix}resizable-handle-north {
  171. background-position: top;
  172. background-image: theme-background-image($theme-name, 'sizer/s-handle.gif');
  173. }
  174. .#{$prefix}resizable-handle-southeast {
  175. background-position: top left;
  176. background-image: theme-background-image($theme-name, 'sizer/se-handle.gif');
  177. }
  178. .#{$prefix}resizable-handle-northwest {
  179. background-position: bottom right;
  180. background-image: theme-background-image($theme-name, 'sizer/nw-handle.gif');
  181. }
  182. .#{$prefix}resizable-handle-northeast {
  183. background-position: bottom left;
  184. background-image: theme-background-image($theme-name, 'sizer/ne-handle.gif');
  185. }
  186. .#{$prefix}resizable-handle-southwest {
  187. background-position: top right;
  188. background-image: theme-background-image($theme-name, 'sizer/sw-handle.gif');
  189. }
  190. }
  191. }</pre>
  192. </body>
  193. </html>