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

   1 @mixin extjs-splitter {
   2     .#{$prefix}splitter {
   3         .#{$prefix}collapse-el {
   4             position: absolute;
   5
   6             cursor: pointer;
   7
   8             background-color: transparent;
   9             background-repeat: no-repeat !important;
  10         }
  11     }
  12
  13     .#{$prefix}layout-split-left,
  14     .#{$prefix}layout-split-right {
  15         top: 50%;
  16
  17         margin-top: -17px;
  18
  19         width: 5px;
  20         height: 35px;
  21     }
  22
  23     .#{$prefix}layout-split-top,
  24     .#{$prefix}layout-split-bottom {
  25         left: 50%;
  26
  27         width: 35px;
  28         height: 5px;
  29
  30         margin-left: -17px;
  31     }
  32
  33     .#{$prefix}layout-split-left {
  34         background: no-repeat top right;
  35         @include theme-background-image($theme-name, 'util/splitter/mini-left.gif');
  36     }
  37
  38     .#{$prefix}layout-split-right {
  39         background: no-repeat top left;
  40         @include theme-background-image($theme-name, 'util/splitter/mini-right.gif');
  41     }
  42
  43     .#{$prefix}layout-split-top {
  44         background: no-repeat top left;
  45         @include theme-background-image($theme-name, 'util/splitter/mini-top.gif');
  46     }
  47
  48     .#{$prefix}layout-split-bottom {
  49         background: no-repeat top left;
  50         @include theme-background-image($theme-name, 'util/splitter/mini-bottom.gif');
  51     }
  52
  53     .#{$prefix}splitter-collapsed {
  54         .#{$prefix}layout-split-left {
  55             background: no-repeat top left;
  56             @include theme-background-image($theme-name, 'util/splitter/mini-right.gif');
  57         }
  58
  59         .#{$prefix}layout-split-right {
  60             background: no-repeat top right;
  61             @include theme-background-image($theme-name, 'util/splitter/mini-left.gif');
  62         }
  63
  64         .#{$prefix}layout-split-top {
  65             background: no-repeat top left;
  66             @include theme-background-image($theme-name, 'util/splitter/mini-bottom.gif');
  67         }
  68
  69         .#{$prefix}layout-split-bottom {
  70             background: no-repeat top left;
  71             @include theme-background-image($theme-name, 'util/splitter/mini-top.gif');
  72         }
  73     }
  74
  75     .#{$prefix}splitter-horizontal {
  76         cursor: e-resize;
  77         cursor: row-resize;
  78         font-size:1px;
  79     }
  80     .#{$prefix}splitter-vertical {
  81         cursor: e-resize;
  82         cursor: col-resize;
  83         font-size:1px;
  84     }
  85     .#{$prefix}splitter-collapsed {
  86         cursor: default;
  87     }
  88
  89     .#{$prefix}splitter-active {
  90         z-index: 4;
  91         font-size:1px;
  92         background-color: rgb(180, 180, 180);
  93         @include opacity(0.8);
  94     }
  95     .#{$prefix}splitter-active {
  96         .#{$prefix}collapse-el {
  97             @include opacity(0.3);
  98         }
  99     }
 100
 101     .#{$prefix}proxy-el {
 102         position: absolute;
 103         background: rgb(180, 180, 180);
 104         @include opacity(0.8);
 105     }
 106 }