@import './variables.scss';
@import './mixin.scss';
@import './transition.scss';
@import './element-ui.scss';
@import './sidebar.scss';
@import './element-variables.scss';

html,body{
  margin: 0;
}


body {
  height: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}

label {
  font-weight: 700;
}

html {
  height: 100%;
  box-sizing: border-box;
}

#app {
  height: 100%;
}

// 空内容
.empty{
  color: #ccc;
}

*,
*:before,
*:after {
}

* {
  user-select: none;
  -webkit-user-drag: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  outline: none;
  text-decoration: none;
}

div:focus {
  outline: none;
}

a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

//main-container全局样式
.app-main {
  min-height: 100%
}

.app-container {
  padding: 10px;
  box-sizing: border-box;
}


[v-cloak]{display: none !important;}

/*通用按钮属性*/
.btn{ -webkit-transition-duration: .2s;   transition-duration: .2s; cursor: pointer;
  -webkit-touch-callout:none; /*系统默认菜单被禁用*/
  -webkit-user-select:none; /*webkit浏览器*/
  -khtml-user-select:none; /*早期浏览器*/
  -moz-user-select:none;/*火狐*/
  -ms-user-select:none; /*IE10*/
  user-select:none;

  &.primary{ background-color: $primary-color; text-align: center; color: white; 
    &:active{ background-color: $primary-color-active; }
  }
}

*{
  // 滚动条样式
  &::-webkit-scrollbar {
    width : 6px;  /*高宽分别对应横竖滚动条的尺寸*/
    height: 8px;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 20px;
    box-shadow: inset 0 0 5px #ccc;
  }
}


/*超出部分省略号*/
.inline{overflow:hidden !important;text-overflow:ellipsis;white-space:nowrap !important;}
.app_content{padding: 15px;}

// 头像上传样式
.avatar-uploader{
  cursor: pointer;
  .avatar-uploader-icon { border: 1px dashed #d9d9d9;  border-radius: 6px; position: relative;  overflow: hidden; cursor: pointer;
    &:hover{ border-color: #409EFF;}
  }
  .avatar-uploader-icon {  font-size: 28px;  color: #8c939d;  width: 78px;  height: 78px;  line-height: 78px;  text-align: center;}
  .avatar { width: 78px; height: 78px; display: block; position: relative;
    img{ width: 100%; height: 100%;}
    .del{ position: absolute; top: 2px; right: 2px; display: inline-block; width: 14px; height: 14px; color: white; padding: 1px;  border-radius: 10px;
      .icon{ display: block; font-size: 12px;}
    }
    &:hover{
      .del{ background-color: red;}
    }
  }
}

.upload_images{
  &.hidden{
    .el-upload--picture-card{ display: none;}
  }
}

// dialog内的表单样式
.dialog_form .el-dialog__body{ padding-bottom: 0;}

// 列表页头部筛选表单
.select-form{
  .header-input-item:not(:first-child){ margin-left: 20px; }
  .header-input-item { display: inline-block; color: #909399; font-size: 12px; margin-bottom: 5px;}
}

// 分页样式
.pagination{
  float: right;
}

.table{
  .el-button+.el-button {
    margin-left: 0px !important;
  }  
}

.success-row{ color: #009a2c;}
.warning-row{ color: #ff9400;}
.error-row,.notice{ color: red;}

// 下拉框宽度
.form-select{
  width: 100% !important;
}

// 开关
.switchStyle .el-switch__label {
  position: absolute;
  display: none;
  color: #fff;
}
.switchStyle .el-switch__label--left {
  z-index: 9;
  left: 6px;
}
.switchStyle .el-switch__label--right {
  z-index: 9;
  left: -14px;
}
.switchStyle .el-switch__label.is-active {
  display: block;
}
