partkeepr

fork of partkeepr
git clone https://git.e1e0.net/partkeepr.git
Log | Files | Refs | Submodules | README | LICENSE

_resizable.scss (5046B)

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