@jecloud/ui/es/panel/style/index.less

JECloud UI库，基于ant-design-vue封装

.je-panel{
  width: 100%;
  height: 100%;
  background-color: @component-background;
  & &-body{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    .je-panel-wrapper{
      position: absolute;
    }
    .je-panel-item{
      position: absolute;
      &-region-default{
        overflow: auto;
        &>*{
          height: 100%;
          width: 100%;
        }
      }
      
      &.is--hidden{
        display: none !important;
      }
      &.is--collapsed.is--collapsible{
        display: none;
      }

      &.is--collapsed.is--drawer{
        display: initial;
        z-index: 10;
        &:hover{
          z-index: 11;
        }
        &.je-panel-item-region-left,
        &.je-panel-item-region-right{
          &.is--transition{
          transition: width .2s ease .2s;
            &:hover{
              width:var(--drawer-size ) !important;
            }
          }
        }
        &.je-panel-item-region-top,
        &.je-panel-item-region-bottom{
          &.is--transition{
          transition: height .2s ease .2s;
            &.is--hover{
              height:var(--drawer-size ) !important;
            }
          }
        }
      }
    }
  
    .je-panel-splitter{
      position: absolute;
      min-width:4px;
      min-height:4px;
      // &:hover{
      //   transition: background-color .2s ease .5s;
      //   background-color: @border-color-base;
      // }
      &.is--split{
        cursor: col-resize;
      }
      &-top.is--split,
      &-bottom.is--split{
        cursor: row-resize;
      }
      &.dragging{
        background-color: @border-color-base;
        cursor: auto;
        z-index: 1;
      }
      
      // 调整器变量
      @arrow-split-size:8px;
      @arrow-border-angle:6px solid transparent;
      @arrow-border-face:@arrow-split-size solid @border-color-base;
      @arrow-border-hover:20px solid @border-color-base;
      @arrow-size:50px;
      @arrow-size-margin:-25px;
      @arrow-size-hover:18px;
      .arrow{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width:@arrow-split-size;
        height:@arrow-split-size;
        cursor: pointer;
        position: absolute;
        transition: width .1s ease, height .1s ease;
        overflow: hidden;
        // 图标
        &-icon{
          font-size: 12px;
          position: absolute;
        }
        // 梯形背景
        &-bg{
          border:@arrow-border-angle;
          transition:border .1s ease;
        }
        &:hover{
          .arrow-icon{
            font-size: 16px;
          }
        }

        // 收起，旋转图标
        &.arrow-is--collapsed{
          transform:rotate(180deg);
        }
        // 上下左右 公共样式
        &.arrow-left,
        &.arrow-right{
          height:@arrow-size;
          top:50%;
          left:0;
          right:0;
          margin-top: @arrow-size-margin;
          .arrow-bg{
            height:@arrow-size;
          }
          &:hover{
            width:@arrow-size-hover;
            z-index: 11;
          }
        }
        &.arrow-top,
        &.arrow-bottom{
          width:@arrow-size;
          left:50%;
          top:0;
          bottom:0;
          margin-left: @arrow-size-margin;
          .arrow-bg{
            width:@arrow-size;
          }
          &:hover{
            height:@arrow-size-hover;
            z-index: 11;
          }
        }

        // 上下左右 单独样式
        &.arrow-left{
          .arrow-bg{
            border-left: none;
            border-right:@arrow-border-face;
          }
          &:hover{
            .arrow-bg{
              border-right:@arrow-border-hover;
            }
          }
          &.arrow-is--expand{
            left:auto;
          }
        }
        &.arrow-right{
          .arrow-icon{
            transform:rotate(180deg);
          }
          .arrow-bg{
            border-right: none;
            border-left: @arrow-border-face;
          }
          &:hover{
            .arrow-bg{
              border-left:@arrow-border-hover;
            }
          }
          left:auto;
          &.arrow-is--expand{
            right:auto;
          }
        }
        &.arrow-top{
          .arrow-icon{
            transform:rotate(90deg);
          }
          .arrow-bg{
            border-top: none;
            border-bottom: @arrow-border-face;
          }
          &:hover{
            .arrow-bg{
              border-bottom:@arrow-border-hover;
            }
          }
          &.arrow-is--expand{
            top:auto;
          }
        }
        &.arrow-bottom{
          .arrow-icon{
            transform:rotate(-90deg);
          }
          .arrow-bg{
            border-bottom: none;
            border-top: @arrow-border-face;
          }
          &:hover{
            .arrow-bg{
              border-top:@arrow-border-hover;
            }
          }
          top:auto;
          &.arrow-is--expand{
            bottom:auto;
          }
        }
      }
      &.is--collapsed{
        cursor: auto;
      }
      &.is--hidden{
        display: none;
      }
    }
  
  }
}