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

body {
  height: 100%;
  margin: 0;
  -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%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.no-padding {
  padding: 0px !important;
}

.padding-content {
  padding: 4px 0;
}

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

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

div:focus {
  outline: none;
}

.fr {
  float: right;
}

.fl {
  float: left;
}

.pr-5 {
  padding-right: 5px;
}

.pl-5 {
  padding-left: 5px;
}

.block {
  display: block;
}

.pointer {
  cursor: pointer;
}

.inlineBlock {
  display: block;
}

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

aside {
  background: #eef1f6;
  padding: 8px 24px;
  margin-bottom: 20px;
  border-radius: 2px;
  display: block;
  line-height: 32px;
  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  color: #2c3e50;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  a {
    color: #337ab7;
    cursor: pointer;

    &:hover {
      color: rgb(32, 160, 255);
    }
  }
}

//main-container全局样式
.app-container {
  padding: 20px;
}

.components-container {
  margin: 30px 50px;
  position: relative;
}

.pagination-container {
  margin-top: 30px;
}

.text-center {
  text-align: center
}

.sub-navbar {
  height: 50px;
  line-height: 50px;
  position: relative;
  width: 100%;
  text-align: right;
  padding-right: 20px;
  transition: 600ms ease position;
  background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);

  .subtitle {
    font-size: 20px;
    color: #fff;
  }

  &.draft {
    background: #d0d0d0;
  }

  &.deleted {
    background: #d0d0d0;
  }
}

.link-type,
.link-type:focus {
  color: #337ab7;
  cursor: pointer;

  &:hover {
    color: rgb(32, 160, 255);
  }
}

.filter-container {
  padding-bottom: 10px;

  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }
}

.background-color-F1F2F6 { background-color: #F1F2F6; }
  .background-color-fff { background-color: #fff; }
  .background-color-67c23a { background-color: #67c23a; }
  .background-color-909399 { background-color: #909399; }
  .background-color-e6a23c { background-color: #e6a23c; }
  .background-color-f56c6c { background-color: #f56c6c; }
  .background-color-009999 { background-color: #009999; }
  .background-color-f7f7f7 { background-color: #f7f7f7; }
  .background-color-EFB227 { background-color: #EFB227; }
  .line-clamp-1 {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
  }
  .line-clamp-2 {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      word-break: break-all;
  }
  .line-clamp-3 {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      word-break: break-all;
  }
  .line-clamp-4 {
      display:block;		/* 设置为 块元素*/
      white-space:pre;    /* white-space 属性 pre 会将空白一同算作文本,nowrap 规定不换行，且忽略其中的空白符*/
      overflow:hidden; 
      text-overflow:ellipsis;
  }
  .line-clamp-5 {
      display:block;		/* 设置为 块元素*/
      white-space:nowrap;    /* white-space 属性 pre 会将空白一同算作文本,nowrap 规定不换行，且忽略其中的空白符*/
      overflow:hidden; 
      text-overflow:ellipsis;
  }
  .display-flex-1 { 
      display: flex;
      justify-content: flex-start;  /*从左到右*/
      align-items: center;
   }
   .display-flex-2 {
       display: flex;
       justify-content: space-between;  /*间距相同*/
       align-items: center;
  }
  .display-flex-3 { 
      display: flex;
      justify-content: center;  /*居中*/
      align-items: center;
   }
   .flex-1{
      flex: 1;
   }
   .flex-2{
       flex: 2;
   }
   .flex-wrap {
       flex-wrap: wrap;
   }
   .border-radius-4px {
      border-radius: 4px;
  }
  .border-radius-6px {
      border-radius: 6px;
  }
  .border-radius-8px {
      border-radius: 8px;
  }
  .border-radius-18px {
      border-radius: 18px;
  }
  /* 间距 */
  .padding-10 { padding: 10px; }
  .padding-20 { padding: 20px; }
  .padding-24 { padding: 24px; }
  .padding-30 { padding: 30px; }
  .padding-40 { padding: 40px; }
  .padding-48 { padding: 48px; }
  /* 左间距 */
  .padding-left-5 { padding-left: 5px; }
  .padding-left-8 { padding-left: 8px; }
  .padding-left-10 { padding-left: 10px; }
  .padding-left-20 { padding-left: 20px; }
  .padding-left-24 { padding-left: 24px; }
  .padding-left-30 { padding-left: 30px; }
  .padding-left-40 { padding-left: 40px; }
  /* 右间距 */
  .padding-right-5 { padding-right: 5px; }
  .padding-right-8 { padding-right: 8px; }
  .padding-right-10 { padding-right: 10px; }
  .padding-right-20 { padding-right: 20px; }
  .padding-right-24 { padding-right: 24px; }
  .padding-right-30 { padding-right: 30px; }
  .padding-right-40 { padding-right: 40px; }
  /* 上间距 */
  .padding-top-5 { padding-top: 5px; }
  .padding-top-8 { padding-top: 8px; }
  .padding-top-10 { padding-top: 10px; }
  .padding-top-20 { padding-top: 20px; }
  .padding-top-24 { padding-top: 24px; }
  .padding-top-30 { padding-top: 30px; }
  .padding-top-40 { padding-top: 40px; }
  .padding-top-48 { padding-top: 48px; }
  /* 下间距 */
  .padding-bottom-5 { padding-bottom: 5px; }
  .padding-bottom-8 { padding-bottom: 8px; }
  .padding-bottom-10 { padding-bottom: 10px; }
  .padding-bottom-20 { padding-bottom: 20px; }
  .padding-bottom-24 { padding-bottom: 24px; }
  .padding-bottom-30 { padding-bottom: 30px; }
  .padding-bottom-40 { padding-bottom: 40px; }
  .padding-bottom-48 { padding-bottom: 48px; }
  .margin-10 { margin: 10px; }
  .margin-20 { margin: 20px; }
  .margin-24 { margin: 24px; }
  .margin-30 { margin: 30px; }
  .margin-40 { margin: 40px; }
  .margin-auto { margin: 0 auto; }
  .margin-left-5 { margin-left: 5px; }
  .margin-left-8 { margin-left: 8px; }
  .margin-left-10 { margin-left: 10px; }
  .margin-left-20 { margin-left: 20px; }
  .margin-left-24 { margin-left: 24px; }
  .margin-left-30 { margin-left: 30px; }
  .margin-left-40 { margin-left: 40px; }
  .margin-right-5 { margin-right: 5px; }
  .margin-right-8 { margin-right: 8px; }
  .margin-right-10 { margin-right: 10px; }
  .margin-right-20 { margin-right: 20px; }
  .margin-right-24 { margin-right: 24px; }
  .margin-right-30 { margin-right: 30px; }
  .margin-right-40 { margin-right: 40px; }
  .margin-top-5 { margin-top: 5px; }
  .margin-top-8 { margin-top: 8px; }
  .margin-top-10 { margin-top: 10px; }
  .margin-top-20 { margin-top: 20px; }
  .margin-top-24 { margin-top: 24px; }
  .margin-top-30 { margin-top: 30px; }
  .margin-top-40 { margin-top: 40px; }
  .margin-top-48 { margin-top: 48px; }
  .margin-bottom-5 { margin-bottom: 5px; }
  .margin-bottom-8 { margin-bottom: 8px; }
  .margin-bottom-10 { margin-bottom: 10px; }
  .margin-bottom-20 { margin-bottom: 20px; }
  .margin-bottom-24 { margin-bottom: 24px; }
  .margin-bottom-30 { margin-bottom: 30px; }
  .margin-bottom-40 { margin-bottom: 40px; }
  .f-w-600{
    font-weight: 600;
  }
  
// 单行文本显示
  .ellipsis-text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }