@import 'public';

// 补丁 base
@import '~@/assets/style/fixed/base.scss';
// 补丁 element
@import '~@/assets/style/fixed/element.scss';
// 补丁 n-progress
@import '~@/assets/style/fixed/n-progress.scss';

// 动画
@import '~@/assets/style/animate/vue-transition.scss';

// 在这里写公用的class
// 注意 这个文件里只写class
// mixin等内容请在 public.scss 里书写

// 文字相关
.#{$prefix}-text-center {
  text-align: center;
}

// 浮动相关
.#{$prefix}-fl {
  float: left;
}
.#{$prefix}-fr {
  float: right;
}
.#{$prefix}-clearfix:before,
.#{$prefix}-clearfix:after {
  display: table;
  content: "";
}
.#{$prefix}-clearfix:after {
  clear: both
}

// 边距相关
$sizes: (0, 5, 10, 15, 20);

@for $index from 1 to 6 {
  .#{$prefix}-m-#{nth($sizes, $index)} { margin: #{nth($sizes, $index)}px !important; }
  .#{$prefix}-mt-#{nth($sizes, $index)} { margin-top: #{nth($sizes, $index)}px !important; }
  .#{$prefix}-mr-#{nth($sizes, $index)} { margin-right: #{nth($sizes, $index)}px !important; }
  .#{$prefix}-mb-#{nth($sizes, $index)} { margin-bottom: #{nth($sizes, $index)}px !important; }
  .#{$prefix}-ml-#{nth($sizes, $index)} { margin-left: #{nth($sizes, $index)}px !important; }

  .#{$prefix}-p-#{nth($sizes, $index)} { padding: #{nth($sizes, $index)}px !important; }
  .#{$prefix}-pt-#{nth($sizes, $index)} { padding-top: #{nth($sizes, $index)}px !important; }
  .#{$prefix}-pr-#{nth($sizes, $index)} { padding-right: #{nth($sizes, $index)}px !important; }
  .#{$prefix}-pb-#{nth($sizes, $index)} { padding-bottom: #{nth($sizes, $index)}px !important; }
  .#{$prefix}-pl-#{nth($sizes, $index)} { padding-left: #{nth($sizes, $index)}px !important; }
}

// 快速使用

.#{$prefix}-m { margin: 20px !important; }
.#{$prefix}-mt { margin-top: 20px !important; }
.#{$prefix}-mr { margin-right: 20px !important; }
.#{$prefix}-mb { margin-bottom: 20px !important; }
.#{$prefix}-ml { margin-left: 20px !important; }

.#{$prefix}-p { padding: 20px !important; }
.#{$prefix}-pt { padding-top: 20px !important; }
.#{$prefix}-pr { padding-right: 20px !important; }
.#{$prefix}-pb { padding-bottom: 20px !important; }
.#{$prefix}-pl { padding-left: 20px !important; }

.#{$prefix}-tree-view{
  //padding: 10px;
  position: relative;
  width: calc(18% - 20px);
  height: calc(100vh - 141px);
  border-right: 1px solid #f2f2f2;
  box-sizing: border-box;
  margin-right: 20px;
  overflow: auto;
}

.#{$prefix}-tree-view-none{
  //padding: 10px;
  position: relative;
  width: 11px;
  height: calc(100vh - 141px);
  overflow: auto;
}

.#{$prefix}-table-view{
  display: flex;
  flex-direction: column;
  width: 82%;
  //min-width: 60%;
  overflow: auto;
  //height: calc(100vh - 141px);
}

.#{$prefix}-table-view-full{
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 60%;
  overflow: auto;
  //height: calc(100vh - 141px);
}

.#{$prefix}-table-view-header{
  width: 100%;
  max-width: 1600px;
  min-width: 1000px;
  display: flex;
  flex-direction: row;
  //margin-bottom: 20px;

}
.#{$prefix}-table-view-content{
  flex-grow: 1;
  //min-width: 1000px;
  width: 100%;
  overflow: auto;
  position: relative;
}
.#{$prefix}-table-view-handle{
	text-align: right;
 // flex-grow: 1;
  //min-width: 1000px;
  width: 100%;
  overflow: auto;
  position: relative;
}
.#{$prefix}-table-view-footer{
  //min-width: 1000px;
  height: 40px;
  margin-top: 1px;
  width: 100%;
}

.angle-view {
  position: absolute;
  height: 40px;
  width: 15px;
  top: 46%;
  left: calc(18% - 10px);
  border: 1px solid #f2f2f2;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: #666;
  border-radius: 3px;
  border-left: none;
  cursor: pointer;
}

.angle-view-none {
  position: absolute;
  height: 40px;
  width: 15px;
  top: 46%;
  left: 0;
  border: 1px solid #f2f2f2;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: #666;
  border-radius: 3px;
  border-left: none;
  cursor: pointer;
}
.import-button{
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #67c23a;
  border: 1px solid #67c23a;
  color: #fff;
  -webkit-appearance: none;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: 0;
  margin: 0 5px;
  -webkit-transition: .1s;
  transition: .1s;
  font-weight: 500;
  padding: 9px 15px;
  font-size: 12px;
  border-radius: 3px;
}
.double-tree {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-around;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .3s ease;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

.icon-tree{
	font-size: 14px;
	color: #666;
  i {
    color: #1e90ff;
  }
}