_variables.scss 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839
  1. // 共享样式变量文件
  2. // 此文件包含应用程序中常用的样式变量,用于保持设计一致性并减少重复代码
  3. // 颜色变量\$primary-color: #165DFF; // 主色调 - 蓝色
  4. $secondary-color: #6B7280; // 次要颜色 - 灰色
  5. $success-color: #00B42A; // 成功颜色 - 绿色
  6. $warning-color: #FFAA00; // 警告颜色 - 黄色
  7. $error-color: #F53F3F; // 错误颜色 - 红色
  8. $text-primary: #333333; // 主要文本颜色
  9. $text-secondary: #666666; // 次要文本颜色
  10. $text-tertiary: #999999; // 三级文本颜色
  11. $border-color: #E5E7EB; // 边框颜色
  12. $bg-light: #F9FAFB; // 浅色背景
  13. $bg-white: #FFFFFF; // 白色背景
  14. // 阴影变量
  15. $shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  16. $shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  17. $shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  18. // 过渡动画
  19. $transition-fast: 0.2s ease;
  20. $transition-normal: 0.3s ease;
  21. $transition-slow: 0.5s ease;
  22. // 圆角
  23. $border-radius-sm: 6px;
  24. $border-radius-md: 8px;
  25. $border-radius-lg: 12px;
  26. $border-radius-xl: 16px;
  27. $border-radius-full: 9999px;
  28. // 间距
  29. $spacing-xs: 4px;
  30. $spacing-sm: 8px;
  31. $spacing-md: 16px;
  32. $spacing-lg: 24px;
  33. $spacing-xl: 32px;
  34. $spacing-xxl: 48px;