resources/themes/stylesheets/ext4/default/util/_resizable.scss

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