tianmucloudmobile/static/scss/custom-theme.scss

// 自定义主题变量
$custom-primary: #667eea;
$custom-secondary: #764ba2;
$custom-success: #4cd964;
$custom-warning: #f0ad4e;
$custom-error: #dd524d;
$custom-info: #5bc0de;

// 背景色
$custom-bg-primary: #ffffff;
$custom-bg-secondary: #f8f8f8;
$custom-bg-tertiary: #f5f5f5;
$custom-bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

// 文字颜色
$custom-text-primary: #333333;
$custom-text-secondary: #666666;
$custom-text-tertiary: #999999;
$custom-text-white: #ffffff;

// 边框颜色
$custom-border-primary: #e5e5e5;
$custom-border-secondary: #ddd;
$custom-border-disabled: #ccc;

// 禁用状态
$custom-bg-disabled: #f5f5f5;
$custom-text-disabled: #999999;

// 按钮样式
$custom-btn-height: 32px;
$custom-btn-radius: 4px;
$custom-btn-font-size: 12px;

// 输入框样式
$custom-input-height: 32px;
$custom-input-radius: 4px;
$custom-input-border: 1px solid #e5e5e5;

// 导航栏样式
$custom-nav-height: 50px;
$custom-nav-bg: #ffffff;
$custom-nav-active-bg: #e0e0e0;

// 状态栏样式
$custom-status-height: 44px;
$custom-footer-height: 40px;

// 间距
$custom-spacing-xs: 5px;
$custom-spacing-sm: 10px;
$custom-spacing-md: 15px;
$custom-spacing-lg: 20px;

// 圆角
$custom-radius-sm: 4px;
$custom-radius-md: 8px;
$custom-radius-lg: 12px;

// 阴影
$custom-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
$custom-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.15);
$custom-shadow-heavy: 0 8px 16px rgba(0, 0, 0, 0.2);

// 动画
$custom-transition: all 0.3s ease;

// 响应式断点
$custom-breakpoint-sm: 576px;
$custom-breakpoint-md: 768px;
$custom-breakpoint-lg: 992px;
$custom-breakpoint-xl: 1200px;

// 混合器
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@mixin flex-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

@mixin gradient-bg {
  background: $custom-bg-gradient;
}

@mixin card-style {
  background-color: $custom-bg-primary;
  border-radius: $custom-radius-md;
  box-shadow: $custom-shadow-light;
  padding: $custom-spacing-md;
}

@mixin button-style($type: 'default') {
  height: $custom-btn-height;
  border-radius: $custom-btn-radius;
  font-size: $custom-btn-font-size;
  transition: $custom-transition;
  
  @if $type == 'primary' {
    background-color: $custom-primary;
    color: $custom-text-white;
  } @else if $type == 'secondary' {
    background-color: $custom-secondary;
    color: $custom-text-white;
  } @else if $type == 'success' {
    background-color: $custom-success;
    color: $custom-text-white;
  } @else if $type == 'warning' {
    background-color: $custom-warning;
    color: $custom-text-white;
  } @else if $type == 'error' {
    background-color: $custom-error;
    color: $custom-text-white;
  } @else if $type == 'info' {
    background-color: $custom-info;
    color: $custom-text-white;
  } @else {
    background-color: $custom-bg-secondary;
    color: $custom-text-secondary;
    border: 1px solid $custom-border-secondary;
  }
}

@mixin input-style {
  height: $custom-input-height;
  border-radius: $custom-input-radius;
  border: $custom-input-border;
  padding: 0 $custom-spacing-sm;
  font-size: 14px;
  transition: $custom-transition;
  
  &:focus {
    border-color: $custom-primary;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
  }
}

// 响应式工具类
@mixin responsive($breakpoint) {
  @if $breakpoint == sm {
    @media (min-width: $custom-breakpoint-sm) { @content; }
  } @else if $breakpoint == md {
    @media (min-width: $custom-breakpoint-md) { @content; }
  } @else if $breakpoint == lg {
    @media (min-width: $custom-breakpoint-lg) { @content; }
  } @else if $breakpoint == xl {
    @media (min-width: $custom-breakpoint-xl) { @content; }
  }
}