_resizable.scss 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
  1. @mixin extjs-resizable {
  2. .#{$prefix}resizable-handle {
  3. position: absolute;
  4. z-index: 100;
  5. font-size: 1px;
  6. line-height: 6px;
  7. overflow: hidden;
  8. @include opacity(0);
  9. // @tag iezoomhack
  10. }
  11. .#{$prefix}resizable-handle-east {
  12. width: 6px;
  13. height: 100%;
  14. right: 0;
  15. top: 0;
  16. }
  17. // @tag question Wrapper seems unnecessary?
  18. .#{$prefix}resizable-over {
  19. .#{$prefix}resizable-handle-east {
  20. cursor: e-resize;
  21. }
  22. .#{$prefix}resizable-handle-south {
  23. cursor: s-resize;
  24. }
  25. .#{$prefix}resizable-handle-west {
  26. cursor: w-resize;
  27. }
  28. .#{$prefix}resizable-handle-north {
  29. cursor: n-resize;
  30. }
  31. .#{$prefix}resizable-handle-southeast {
  32. cursor: se-resize;
  33. }
  34. .#{$prefix}resizable-handle-northwest {
  35. cursor: nw-resize;
  36. }
  37. .#{$prefix}resizable-handle-northeast {
  38. cursor: ne-resize;
  39. }
  40. .#{$prefix}resizable-handle-southwest {
  41. cursor: sw-resize;
  42. }
  43. }
  44. .#{$prefix}resizable-handle-south {
  45. width: 100%;
  46. height: 6px;
  47. left: 0;
  48. bottom: 0;
  49. }
  50. .#{$prefix}resizable-handle-west {
  51. width: 6px;
  52. height: 100%;
  53. left: 0;
  54. top: 0;
  55. }
  56. .#{$prefix}resizable-handle-north {
  57. width: 100%;
  58. height: 6px;
  59. left: 0;
  60. top: 0;
  61. }
  62. .#{$prefix}resizable-handle-southeast {
  63. width: 6px;
  64. height: 6px;
  65. right: 0;
  66. bottom: 0;
  67. z-index: 101;
  68. }
  69. .#{$prefix}resizable-handle-northwest {
  70. width: 6px;
  71. height: 6px;
  72. left: 0;
  73. top: 0;
  74. z-index: 101;
  75. }
  76. .#{$prefix}resizable-handle-northeast {
  77. width: 6px;
  78. height: 6px;
  79. right: 0;
  80. top: 0;
  81. z-index: 101;
  82. }
  83. .#{$prefix}resizable-handle-southwest {
  84. width: 6px;
  85. height: 6px;
  86. left: 0;
  87. bottom: 0;
  88. z-index: 101;
  89. }
  90. // IE rounding error
  91. .#{$prefix}ie {
  92. .#{$prefix}resizable-handle-east {
  93. margin-right: -1px; /*IE rounding error*/
  94. }
  95. .#{$prefix}resizable-handle-south {
  96. margin-bottom: -1px;
  97. }
  98. }
  99. .#{$prefix}resizable-over .#{$prefix}resizable-handle, .#{$prefix}resizable-pinned .#{$prefix}resizable-handle{
  100. @include opacity(1);
  101. }
  102. .#{$prefix}window .#{$prefix}window-handle {
  103. @include opacity(0);
  104. }
  105. .#{$prefix}window-collapsed .#{$prefix}window-handle {
  106. display: none;
  107. }
  108. .#{$prefix}resizable-proxy {
  109. border: 1px dashed #3b5a82;
  110. position: absolute;
  111. left: 0;
  112. top: 0;
  113. overflow: hidden;
  114. z-index: 50000;
  115. }
  116. .#{$prefix}resizable-overlay {
  117. position: absolute;
  118. left: 0;
  119. top: 0;
  120. width: 100%;
  121. height: 100%;
  122. display: none;
  123. z-index: 200000;
  124. background-color: #fff;
  125. @include opacity(0);
  126. }
  127. .#{$prefix}resizable-over,
  128. .#{$prefix}resizable-pinned {
  129. .#{$prefix}resizable-handle-east,
  130. .#{$prefix}resizable-handle-west {
  131. background-position: left;
  132. background-image: theme-background-image($theme-name, 'sizer/e-handle.gif');
  133. }
  134. .#{$prefix}resizable-handle-south,
  135. .#{$prefix}resizable-handle-north {
  136. background-position: top;
  137. background-image: theme-background-image($theme-name, 'sizer/s-handle.gif');
  138. }
  139. .#{$prefix}resizable-handle-southeast {
  140. background-position: top left;
  141. background-image: theme-background-image($theme-name, 'sizer/se-handle.gif');
  142. }
  143. .#{$prefix}resizable-handle-northwest {
  144. background-position: bottom right;
  145. background-image: theme-background-image($theme-name, 'sizer/nw-handle.gif');
  146. }
  147. .#{$prefix}resizable-handle-northeast {
  148. background-position: bottom left;
  149. background-image: theme-background-image($theme-name, 'sizer/ne-handle.gif');
  150. }
  151. .#{$prefix}resizable-handle-southwest {
  152. background-position: top right;
  153. background-image: theme-background-image($theme-name, 'sizer/sw-handle.gif');
  154. }
  155. }
  156. }