128 lines
3.0 KiB
SCSS
128 lines
3.0 KiB
SCSS
// 全局通用样式变量和混入
|
|
// 字体相关
|
|
$font-family-primary: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !default;
|
|
|
|
// 颜色相关
|
|
$color-primary: #000000 !default;
|
|
$color-primary-light: rgba(0, 0, 0, 0.85) !default;
|
|
$color-primary-medium: rgba(0, 0, 0, 0.65) !default;
|
|
$color-primary-lightest: rgba(0, 0, 0, 0.35) !default;
|
|
$color-primary-lightest-2: rgba(0, 0, 0, 0.2) !default;
|
|
$color-primary-lightest-3: rgba(0, 0, 0, 0.16) !default;
|
|
$color-primary-lightest-4: rgba(0, 0, 0, 0.1) !default;
|
|
$color-primary-lightest-5: rgba(0, 0, 0, 0.06) !default;
|
|
$color-primary-lightest-6: rgba(0, 0, 0, 0.08) !default;
|
|
|
|
$color-text-secondary: rgba(60, 60, 67, 0.6) !default;
|
|
$color-text-tertiary: rgba(60, 60, 67, 0.3) !default;
|
|
|
|
$color-white: #FFFFFF !default;
|
|
$color-background: #FAFAFA !default;
|
|
|
|
|
|
|
|
// 字体大小和行高混入
|
|
@mixin text-style($size: 14px, $weight: 400, $line-height: 1.4em, $letter-spacing: 0) {
|
|
font-family: $font-family-primary;
|
|
font-size: $size;
|
|
font-weight: $weight;
|
|
line-height: $line-height;
|
|
letter-spacing: $letter-spacing;
|
|
}
|
|
|
|
// 常用文本样式
|
|
@mixin text-primary {
|
|
@include text-style(20px, 600, 1.4em, 1.9%);
|
|
color: $color-primary;
|
|
}
|
|
|
|
@mixin text-secondary {
|
|
@include text-style(14px, 400, 1.4em, 2.7%);
|
|
color: $color-primary-lightest;
|
|
}
|
|
|
|
@mixin text-small {
|
|
@include text-style(12px, 500, 1.4em, 3.2%);
|
|
color: $color-primary-lightest;
|
|
}
|
|
|
|
@mixin text-medium {
|
|
@include text-style(18px, 600, 1.4em, 2.1%);
|
|
color: $color-primary-light;
|
|
}
|
|
|
|
@mixin text-body {
|
|
@include text-style(14px, 400, 1.571em, 2.7%);
|
|
color: $color-primary-medium;
|
|
}
|
|
|
|
@mixin text-caption {
|
|
@include text-style(12px, 400, 1.5em);
|
|
color: $color-text-secondary;
|
|
}
|
|
|
|
@mixin text-tag {
|
|
@include text-style(11px, 500, 1.8em, -2.1%);
|
|
color: $color-primary;
|
|
}
|
|
|
|
// 按钮样式混入
|
|
@mixin button-base {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
border: none;
|
|
outline: none;
|
|
}
|
|
|
|
@mixin button-primary {
|
|
@include button-base;
|
|
background: $color-primary;
|
|
border: 0.5px solid $color-primary-lightest-5;
|
|
border-radius: 999px;
|
|
color: $color-white;
|
|
}
|
|
|
|
@mixin button-secondary {
|
|
@include button-base;
|
|
background: $color-white;
|
|
border: 0.5px solid $color-primary-lightest-3;
|
|
border-radius: 999px;
|
|
color: $color-primary;
|
|
}
|
|
|
|
// 卡片样式混入
|
|
@mixin card-base {
|
|
background: $color-white;
|
|
border: 0.5px solid $color-primary-lightest-6;
|
|
border-radius: 20px;
|
|
box-shadow: 0px 4px 36px 0px $color-primary-lightest-5;
|
|
}
|
|
|
|
// 标签样式混入
|
|
@mixin tag-base {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 6px 8px;
|
|
height: 20px;
|
|
background: $color-white;
|
|
border: 0.5px solid $color-primary-lightest-3;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
// 头像样式混入
|
|
@mixin avatar-base($size: 64px) {
|
|
width: $size;
|
|
height: $size;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.12), 0px 0px 1px 0px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.avatar
|
|
{
|
|
border: none;
|
|
} |