JG-BASE-SERVICE-WEB/packages/Basic/assets/styles/thinco.scss

// thinco样式库

/* ============ 初始化 ============*/

/* ============ 样式 ============*/
// 页面最外层
.wrap-page {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px 20px;
  background-color: #f4f6f6;
}
// 内容盒子
.wrap-box {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 10px;
}

// 标签tag
.wrap-tag-blue {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  .tag {
    color: #616df2;
    border: 2px solid #616df2;
    padding: 5px 10px;
    border-radius: 2px;
    margin: auto 10px;
    flex-shrink: 0;

    &.active {
      background-color: #616df2;
      color: #fff;
    }
  }
}

// 标签
.wrap-tag-gray {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  .tag {
    color: #939393;
    border: 2px solid #f4f4f4;
    background-color: #f4f4f4;
    padding: 5px 10px;
    border-radius: 2px;
    margin: auto 10px;
    flex-shrink: 0;

    &.active {
      color: #898ce7;
      background-color: #f3f1fd;
    }
  }
}

/* ============ 颜色 ============*/
// 常用颜色
$border-color: #d1d5db; // 主边框颜色(灰色)
$icon-color: #616df2; // 主图标颜色(蓝色)
.icon-color {
  color: $icon-color;
}
.border-color {
  color: $border-color;
}
// 其他颜色
$color: (
  // 灰色
  gray-50: #f9fafb,
  gray-100: #f3f4f6,
  gray-200: #e5e7eb,
  gray-300: #d1d5db,
  gray-400: #9ca3af,
  gray-500: #6b7280,
  gray-600: #4b5563,
  gray-700: #374151,
  gray-800: #1f2937,
  gray-900: #111827,
  // 红色
  red-50: #fef2f2,
  red-100: #fee2e2,
  red-200: #fecaca,
  red-300: #fca5a5,
  red-400: #f87171,
  red-500: #ef4444,
  red-600: #dc2626,
  red-700: #b91c1c,
  red-800: #991b1b,
  red-900: #7f1d1d,
  // 黄色
  yellow-50: #fffbeb,
  yellow-100: #fef3c7,
  yellow-200: #fde68a,
  yellow-300: #fcd34d,
  yellow-400: #fbbf24,
  yellow-500: #f59e0b,
  yellow-600: #d97706,
  yellow-700: #b45309,
  yellow-800: #92400e,
  yellow-900: #78350f,
  // 绿色
  green-50: #ecfdf5,
  green-100: #d1fae5,
  green-200: #a7f3d0,
  green-300: #6ee7b7,
  green-400: #34d399,
  green-500: #10b981,
  green-600: #059669,
  green-700: #047857,
  green-800: #065f46,
  green-900: #064e3b,
  // 蓝色
  blue-50: #eff6ff,
  blue-100: #dbeafe,
  blue-200: #bfdbfe,
  blue-300: #93c5fd,
  blue-400: #60a5fa,
  blue-500: #3b82f6,
  blue-600: #2563eb,
  blue-700: #1d4ed8,
  blue-800: #1e40af,
  blue-900: #1e3a8a,
  // 紫色
  purple-50: #f5f3ff,
  purple-100: #ede9fe,
  purple-200: #ddd6fe,
  purple-300: #c4b5fd,
  purple-400: #a78bfa,
  purple-500: #8b5cf6,
  purple-600: #7c3aed,
  purple-700: #6d28d9,
  purple-800: #5b21b6,
  purple-900: #4c1d95
);
// 文本、边框、背景
@each $key, $val in $color {
  //文本颜色
  .text-#{$key} {
    color: #{$val} !important;
  }
  //边框颜色
  .border-#{$key} {
    border-color: #{$val} !important;
  }
  //背景颜色
  .bg-#{$key} {
    background-color: #{$val} !important;
  }
}
// 文本/图标/背景
.text-white {
  color: #fff;
}
.text-black {
  color: #000;
}
.text-blue {
  color: #616df2;
}
.text-gray {
  color: #9ca3af;
}
.text-yellow {
  color: #faad14;
}
.icon-blue {
  color: #616df2;
}
.bg-white {
  background-color: #fff;
}
.bg-gray {
  background-color: #f2f2f2;
}

/* ============ 布局 ============*/

// box
.box-border {
  box-sizing: border-box;
}
.box-content {
  box-sizing: content-box;
}
// 显示
.block {
  display: block !important;
}
.inline-block {
  display: inline-block !important;
}
.inline {
  display: inline;
}
.flex {
  display: flex !important;
}
.hidden {
  display: none !important;
}
// 溢出
.overflow-hidden {
  overflow: hidden;
}
.overflow-scroll {
  overflow: scroll;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.overflow-y-hidden {
  overflow-y: hidden;
}
.overflow-x-scroll {
  overflow-x: scroll;
}
.overflow-y-scroll {
  overflow-y: scroll;
}
// 定位
.static {
  position: static;
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.fixed {
  position: fixed;
}
.sticky {
  position: static;
}
.left-0 {
  left: 0;
}
.top-0 {
  top: 0;
}
.bottom-0 {
  bottom: 0;
}
.right-0 {
  right: 0;
}
// 可见性
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
// 优先级
.z-0 {
  z-index: 0;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-30 {
  z-index: 30;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.z-auto {
  z-index: auto;
}

// FLEXBOX 布局

// 方向
.flex-row {
  flex-direction: row !important;
}
.flex-row-reverse {
  flex-direction: row-reverse !important;
}
.flex-col {
  flex-direction: column !important;
}
.flex-col-reverse {
  flex-direction: column-reverse !important;
}
// 换行
.flex-wrap {
  flex-wrap: wrap !important;
}
.flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}
.flex-nowrap {
  flex-wrap: nowrap !important;
}
// 控制 flex 项目放大和缩小
.flex-1 {
  flex: 1 1 0% !important;
}
// 控制 flex 项目放大的功能类
.flex-grow-0 {
  flex-grow: 0 !important;
}
.flex-grow {
  flex-grow: 1 !important;
}
// 控制 flex 项目缩小的功能类
.flex-shrink-0 {
  flex-shrink: 0 !important;
}
.flex-shrink {
  flex-shrink: 1 !important;
}
// justify-content用于控制 flex 和 grid 项目如何沿着容器的主轴定位的功能类
.justify-start {
  justify-content: flex-start !important;
}
.justify-end {
  justify-content: flex-end !important;
}
.justify-center {
  justify-content: center !important;
}
.justify-between {
  justify-content: space-between !important;
}
.justify-around {
  justify-content: space-around !important;
}
.justify-evenly {
  justify-content: space-evenly !important;
}
// align-items用于控制 Flex 和网格项如何沿着容器的横轴定位的功能类
.items-start {
  align-items: flex-start !important;
}
.items-end {
  align-items: flex-end !important;
}
.items-center {
  align-items: center !important;
}
.items-baseline {
  align-items: baseline !important;
}
.items-stretch {
  align-items: stretch !important;
}

/* ============ 间距 ============*/

// 上下左右的内外边距：0 - 80（递增数：2，含尾数为5的数）
@for $i from 0 through 80 {
  // 只要双数和能被5除尽的数
  @if $i % 2 == 0 or $i % 5 == 0 {
    // 定义外边距，结果如：m-30
    .m-#{$i} {
      margin: $i + px !important;
    }
    // 定义内边距，结果如：p-30
    .p-#{$i} {
      padding: $i + px !important;
    }
    @each $short, $long in l left, t top, r right, b bottom {
      // 定义外边距，结果如： ml-30
      .m#{$short}-#{$i} {
        margin-#{$long}: $i + px !important;
      }
      // 定义内边距
      .p#{$short}-#{$i} {
        padding-#{$long}: $i + px !important;
      }
    }
  }
}
// 水平和垂直的内外边距：0 - 80（递增数：5）
@for $i from 0 through 16 {
  $var: $i * 5;
  .mx-#{$var} {
    margin-left: $var + px !important;
    margin-right: $var + px !important;
  }
  .my-#{$var} {
    margin-top: $var + px !important;
    margin-bottom: $var + px !important;
  }
  .px-#{$var} {
    padding-left: $var + px !important;
    padding-right: $var + px !important;
  }
  .py-#{$var} {
    padding-top: $var + px !important;
    padding-bottom: $var + px !important;
  }
}
// 自动填充的内外边距
@each $short, $long in l left, t top, r right, b bottom {
  // 定义外边距
  .m#{$short}-auto {
    margin-#{$long}: auto !important;
  }
  // 定义内边距
  .p#{$short}-auto {
    padding-#{$long}: auto !important;
  }
}

/* ============ 尺寸 ============*/

// 高度
.h-1-2 {
  height: 50%;
}
.h-1-3 {
  height: 33.333333%;
}
.h-2-3 {
  height: 66.666667%;
}
.h-1-4 {
  height: 25%;
}
.h-2-4 {
  height: 50%;
}
.h-3-4 {
  height: 75%;
}
.h-1-5 {
  height: 20%;
}
.h-2-5 {
  height: 40%;
}
.h-3-5 {
  height: 60%;
}
.h-4-5 {
  height: 80%;
}
.h-1-6 {
  height: 16.666667%;
}
.h-2-6 {
  height: 33.333333%;
}
.h-3-6 {
  height: 50%;
}
.h-4-6 {
  height: 66.666667%;
}
.h-5-6 {
  height: 83.333333%;
}
.h-full {
  height: 100% !important;
}
.h-screen {
  height: 100vh;
}
// 宽度
.w-1-2 {
  width: 50%;
}
.w-1-3 {
  width: 33.333333%;
}
.w-2-3 {
  width: 66.666667%;
}
.w-1-4 {
  width: 25%;
}
.w-2-4 {
  width: 50%;
}
.w-3-4 {
  width: 75%;
}
.w-1-5 {
  width: 20%;
}
.w-2-5 {
  width: 40%;
}
.w-3-5 {
  width: 60%;
}
.w-4-5 {
  width: 80%;
}
.w-1-6 {
  width: 16.666667%;
}
.w-2-6 {
  width: 33.333333%;
}
.w-3-6 {
  width: 50%;
}
.w-4-6 {
  width: 66.666667%;
}
.w-5-6 {
  width: 83.333333%;
}
.w-1-12 {
  width: 8.333333%;
}
.w-2-12 {
  width: 16.666667%;
}
.w-3-12 {
  width: 25%;
}
.w-4-12 {
  width: 33.333333%;
}
.w-5-12 {
  width: 41.666667%;
}
.w-6-12 {
  width: 50%;
}
.w-7-12 {
  width: 58.333333%;
}
.w-8-12 {
  width: 66.666667%;
}
.w-9-12 {
  width: 75%;
}
.w-10-12 {
  width: 83.333333%;
}
.w-11-12 {
  width: 91.666667%;
}
.w-full {
  width: 100% !important;
}
.w-screen {
  width: 100vh;
}

@for $i from 1 through 10 {
  $var: $i * 10;
  .w-#{$var} {
    width: #{$var + '%'};
  }
}
@for $i from 1 through 19 {
  $var: $i * 5;
  .w-#{$var} {
    width: #{$var + '%'};
  }
}

/* ============ 字体文本 ============*/

// 大小
// 数值形式（取偶数）
@for $i from 10 through 50 {
  @if $i % 2 == 0 {
    .text-#{$i} {
      font-size: $i + px;
    }
  }
}
// 粗细
.font-thin {
  font-weight: 100;
}
.font-extralight {
  font-weight: 200;
}
.font-light {
  font-weight: 300;
}
.font-normal {
  font-weight: 400;
}
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}
.font-bold {
  font-weight: 700;
}
.font-extrabold {
  font-weight: 800;
}
.font-black {
  font-weight: 900;
}
// 行高
.leading-0 {
  line-height: 0 !important;
}
.leading-05 {
  line-height: 0.5 !important;
}
.leading-10 {
  line-height: 1 !important;
}
.leading-12 {
  line-height: 1.2 !important;
}
.leading-15 {
  line-height: 1.5 !important;
}
.leading-20 {
  line-height: 2 !important;
}
.leading-30 {
  line-height: 3 !important;
}
// 文本对齐
.text-left {
  text-align: left !important;
}
.text-center {
  text-align: center !important;
}
.text-right {
  text-align: right !important;
}
.text-justify {
  text-align: justify !important;
}
// 文本溢出
.line-1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.line-2 {
  -webkit-line-clamp: 2;
}
.line-3 {
  -webkit-line-clamp: 3;
}
.line-4 {
  -webkit-line-clamp: 4;
}
.line-5 {
  -webkit-line-clamp: 5;
}
.line-2,
.line-3,
.line-4,
.line-5 {
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box; // 弹性伸缩盒
  -webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
}
// 换行
.break-normal {
  overflow-wrap: normal;
  word-break: normal;
}
.break-words {
  overflow-wrap: break-word;
} // 在长单词或 URL 地址内部进行换行
.break-all {
  word-break: break-all;
} // 在单词内换行
// 文本修饰
.underline {
  text-decoration-line: underline;
}
.overline {
  text-decoration-line: overline;
}
.line-through {
  text-decoration-line: line-through;
}
.no-underline {
  text-decoration-line: no-underline;
}
// 下划线位置
.underline-offset-auto {
  text-underline-offset: auto;
}
.underline-offset-0 {
  text-underline-offset: 0px;
}
.underline-offset-1 {
  text-underline-offset: 1px;
}
.underline-offset-2 {
  text-underline-offset: 2px;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.underline-offset-8 {
  text-underline-offset: 8px;
}

/* ============ 边框 ============*/

// 圆角
.rounded-none {
  border-radius: 0px;
}
.rounded {
  border-radius: 5px;
}
.rounded-10 {
  border-radius: 10px;
}
.rounded-20 {
  border-radius: 20px;
}
.rounded-30 {
  border-radius: 30px;
}
.rounded-50 {
  border-radius: 50px;
}
.rounded-circle {
  border-radius: 100%;
}
// 边框
@each $var in left, right, top, bottom {
  // 边框，结果如：border-l
  .border-#{str-slice($var,0,1)} {
    border-#{$var}-width: 1px;
    border-#{$var}-style: solid;
    border-#{$var}-color: $border-color;
  }
  // 边框为0，结果如：border-l-0
  .border-#{str-slice($var,0,1)}-0 {
    border-#{$var}-width: 0;
  }
}
.border {
  border-width: 1px;
  border-style: solid;
  border-color: $border-color;
}
.border-0 {
  border-width: 0;
}

/* ============ 效果 ============*/
// 阴影
.shadow-sm {
  box-shadow: 0 2px 4px rgba(114, 130, 138, 0.2) !important;
}
.shadow {
  box-shadow: 0 8px 16px rgba(114, 130, 138, 0.2) !important;
}
.shadow-lg {
  box-shadow: 0 16px 48px rgba(114, 130, 138, 0.2) !important;
}
// 透明度
.opacity-0 {
  opacity: 0;
}
.opacity-10 {
  opacity: 0.1;
}
.opacity-20 {
  opacity: 0.2;
}
.opacity-30 {
  opacity: 0.3;
}
.opacity-40 {
  opacity: 0.4;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-80 {
  opacity: 0.8;
}
.opacity-90 {
  opacity: 0.9;
}
.opacity-100 {
  opacity: 1;
}