129 lines
3.0 KiB
SCSS
129 lines
3.0 KiB
SCSS
// ============================================
|
|
// 榴莲认种管理后台 - CSS 变量定义
|
|
// ============================================
|
|
|
|
// 主色调
|
|
$primary-color: #1565C0;
|
|
$primary-light: #1E88E5;
|
|
$primary-dark: #0D47A1;
|
|
|
|
// 辅助色
|
|
$success-color: #4CAF50;
|
|
$warning-color: #F5A623;
|
|
$error-color: #E53935;
|
|
$info-color: #2196F3;
|
|
|
|
// 中性色
|
|
$text-primary: #212121;
|
|
$text-secondary: #757575;
|
|
$text-disabled: #BDBDBD;
|
|
$border-color: #E0E0E0;
|
|
$background-color: #F5F5F5;
|
|
$card-background: #FFFFFF;
|
|
$sidebar-background: #1565C0;
|
|
|
|
// 语义色
|
|
$increase-color: #4CAF50;
|
|
$decrease-color: #E53935;
|
|
|
|
// 字体族
|
|
$font-family-base: 'PingFang SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
$font-family-number: 'DIN Alternate', 'Roboto', $font-family-base;
|
|
|
|
// 字号
|
|
$font-size-xs: 12px;
|
|
$font-size-sm: 13px;
|
|
$font-size-base: 14px;
|
|
$font-size-md: 16px;
|
|
$font-size-lg: 18px;
|
|
$font-size-xl: 20px;
|
|
$font-size-xxl: 24px;
|
|
$font-size-display: 32px;
|
|
|
|
// 行高
|
|
$line-height-tight: 1.25;
|
|
$line-height-base: 1.5;
|
|
$line-height-loose: 1.75;
|
|
|
|
// 字重
|
|
$font-weight-regular: 400;
|
|
$font-weight-medium: 500;
|
|
$font-weight-semibold: 600;
|
|
$font-weight-bold: 700;
|
|
|
|
// 间距
|
|
$spacing-xs: 4px;
|
|
$spacing-sm: 8px;
|
|
$spacing-md: 12px;
|
|
$spacing-base: 16px;
|
|
$spacing-lg: 20px;
|
|
$spacing-xl: 24px;
|
|
$spacing-xxl: 32px;
|
|
$spacing-xxxl: 48px;
|
|
|
|
// 组件内间距
|
|
$padding-card: 24px;
|
|
$padding-modal: 24px;
|
|
$padding-input: 12px 16px;
|
|
$padding-button: 10px 24px;
|
|
|
|
// 页面边距
|
|
$page-padding: 24px;
|
|
$sidebar-width: 256px;
|
|
$sidebar-collapsed-width: 64px;
|
|
$header-height: 64px;
|
|
|
|
// 圆角
|
|
$border-radius-sm: 4px;
|
|
$border-radius-base: 8px;
|
|
$border-radius-lg: 12px;
|
|
$border-radius-xl: 16px;
|
|
$border-radius-round: 50%;
|
|
$border-radius-pill: 999px;
|
|
|
|
// 阴影
|
|
$shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
$shadow-base: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
$shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
$shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
|
|
$shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.15);
|
|
|
|
// 动画时长
|
|
$duration-fast: 150ms;
|
|
$duration-base: 250ms;
|
|
$duration-slow: 350ms;
|
|
|
|
// 缓动函数
|
|
$ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
|
$ease-out: cubic-bezier(0, 0, 0.2, 1);
|
|
$ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
|
|
// z-index 层级
|
|
$z-index-dropdown: 1000;
|
|
$z-index-sticky: 1020;
|
|
$z-index-fixed: 1030;
|
|
$z-index-modal-backdrop: 1040;
|
|
$z-index-modal: 1050;
|
|
$z-index-popover: 1060;
|
|
$z-index-tooltip: 1070;
|
|
$z-index-toast: 1080;
|
|
|
|
// 基础颜色
|
|
$white: #FFFFFF;
|
|
$black: #000000;
|
|
|
|
// 边框颜色变体
|
|
$border-color-light: #F0F0F0;
|
|
|
|
// 文本颜色
|
|
$text-placeholder: #9E9E9E;
|
|
|
|
// ============================================
|
|
// 语义化颜色别名 (用于骨架屏/加载状态等)
|
|
// ============================================
|
|
$color-bg-secondary: $background-color;
|
|
$color-bg-tertiary: lighten($background-color, 3%);
|
|
$color-border: $border-color;
|
|
$color-text-secondary: $text-secondary;
|
|
$color-text-tertiary: $text-disabled;
|