angular-flex-splitter.scss

 @import 'flexbox';
 @import 'compass/css3/user-interface';
 @import 'compass/css3/box';
 @import 'compass/css3/transition';
$splitter-border-size : 5px !default;
$splitter-color : #EFEFEF !default;
$splitter-ghost-color : $splitter-color - #010;

.flexbox-active {
  @include user-select(none);
}

.flexbox-content{
  width:100%;
  height:100%;
  position:absolute;  
  // &.active{
  //   @include user-select(none);
  // }

  > div{
    overflow: auto;
  }

}

.flexbox{
  > * {
    @include transition(width 0.5s, height 0.5s);
  }
  @include display-flex();

  &.column{
    @include box-orient(vertica);
    @include flex-direction(column);
  }
  .ghost{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 99;
    &.active {
      background-color: $splitter-ghost-color;
    }
  }
  [splitter]{
    box-shadow: ($splitter-color - #333333) 0px 0px 2px 1px inset;
    position: relative;
    overflow: initial;

  }

  [splitter=left],[splitter=right]{
    width:$splitter-border-size;
    height: auto;
    background: $splitter-color;
    cursor: col-resize;
  }

  [splitter=up],[splitter=down]{
    width: auto;
    height:$splitter-border-size;
    background: $splitter-color;
    cursor: row-resize;
  }

  [splitter][fixed=fixed]{
    cursor: default;
  }

  .flex{
    @include box-flex(1);
    -webkit-flex : 1;
    flex: 1;
    position: relative;
  }
}