rwadurian/frontend/admin-web/src/styles/typography.scss

147 lines
2.8 KiB
SCSS

// ============================================
// 榴莲认种管理后台 - 字体样式
// ============================================
@use 'variables' as *;
// 标题样式
.heading-display {
font-family: $font-family-number;
font-size: $font-size-display;
font-weight: $font-weight-bold;
line-height: $line-height-tight;
color: $text-primary;
}
.heading-xxl {
font-family: $font-family-base;
font-size: $font-size-xxl;
font-weight: $font-weight-semibold;
line-height: $line-height-tight;
color: $text-primary;
}
.heading-xl {
font-family: $font-family-base;
font-size: $font-size-xl;
font-weight: $font-weight-semibold;
line-height: $line-height-tight;
color: $text-primary;
}
.heading-lg {
font-family: $font-family-base;
font-size: $font-size-lg;
font-weight: $font-weight-semibold;
line-height: $line-height-base;
color: $text-primary;
}
.heading-md {
font-family: $font-family-base;
font-size: $font-size-md;
font-weight: $font-weight-medium;
line-height: $line-height-base;
color: $text-primary;
}
// 正文样式
.text-base {
font-family: $font-family-base;
font-size: $font-size-base;
font-weight: $font-weight-regular;
line-height: $line-height-base;
color: $text-primary;
}
.text-sm {
font-family: $font-family-base;
font-size: $font-size-sm;
font-weight: $font-weight-regular;
line-height: $line-height-base;
color: $text-secondary;
}
.text-xs {
font-family: $font-family-base;
font-size: $font-size-xs;
font-weight: $font-weight-regular;
line-height: $line-height-base;
color: $text-secondary;
}
// 数字样式
.number-display {
font-family: $font-family-number;
font-size: $font-size-display;
font-weight: $font-weight-bold;
line-height: 1;
color: $text-primary;
}
.number-lg {
font-family: $font-family-number;
font-size: $font-size-xxl;
font-weight: $font-weight-semibold;
line-height: 1;
color: $text-primary;
}
.number-base {
font-family: $font-family-number;
font-size: $font-size-base;
font-weight: $font-weight-medium;
line-height: 1;
color: $text-primary;
}
// 文本颜色
.text-primary {
color: $text-primary;
}
.text-secondary {
color: $text-secondary;
}
.text-disabled {
color: $text-disabled;
}
.text-success {
color: $success-color;
}
.text-warning {
color: $warning-color;
}
.text-error {
color: $error-color;
}
.text-info {
color: $info-color;
}
.text-increase {
color: $increase-color;
}
.text-decrease {
color: $decrease-color;
}
// 链接样式
.link {
color: $primary-color;
text-decoration: none;
cursor: pointer;
transition: color $duration-fast $ease-in-out;
&:hover {
color: $primary-light;
text-decoration: underline;
}
}