docs/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: theme-image($theme-name, 'util/splitter/mini-left.gif') no-repeat top right;
  35     }
  36
  37     .#{$prefix}layout-split-right {
  38         background: theme-image($theme-name, 'util/splitter/mini-right.gif') no-repeat top left;
  39     }
  40
  41     .#{$prefix}layout-split-top {
  42         background: theme-image($theme-name, 'util/splitter/mini-top.gif') no-repeat top left;
  43     }
  44
  45     .#{$prefix}layout-split-bottom {
  46         background: theme-image($theme-name, 'util/splitter/mini-bottom.gif') no-repeat top left;
  47     }
  48
  49     .#{$prefix}splitter-collapsed {
  50         .#{$prefix}layout-split-left {
  51             background: theme-image($theme-name, 'util/splitter/mini-right.gif') no-repeat top left;
  52         }
  53
  54         .#{$prefix}layout-split-right {
  55             background: theme-image($theme-name, 'util/splitter/mini-left.gif') no-repeat top right;
  56         }
  57
  58         .#{$prefix}layout-split-top {
  59             background: theme-image($theme-name, 'util/splitter/mini-bottom.gif') no-repeat top left;
  60         }
  61
  62         .#{$prefix}layout-split-bottom {
  63             background: theme-image($theme-name, 'util/splitter/mini-top.gif') no-repeat top left;
  64         }
  65     }
  66
  67     .#{$prefix}splitter-horizontal {
  68         cursor: e-resize;
  69         cursor: row-resize;
  70         font-size:1px;
  71     }
  72     .#{$prefix}splitter-vertical {
  73         cursor: e-resize;
  74         cursor: col-resize;
  75         font-size:1px;
  76     }
  77     .#{$prefix}splitter-collapsed {
  78         cursor: default;
  79     }
  80
  81     .#{$prefix}splitter-active {
  82         z-index: 4;
  83         font-size:1px;
  84         background-color: rgb(180, 180, 180);
  85         @include opacity(0.8);
  86     }
  87     .#{$prefix}splitter-active {
  88         .#{$prefix}collapse-el {
  89             @include opacity(0.3);
  90         }
  91     }
  92
  93     .#{$prefix}proxy-el {
  94         position: absolute;
  95         background: rgb(180, 180, 180);
  96         @include opacity(0.8);
  97     }
  98 }