_variables.scss 3.7 KB
Newer Older
杜庆泉's avatar
杜庆泉 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146
// @use "sass:math";
@import  '../tools/functions.scss';
// 间距基础倍数
$uni-space-root: 2 !default;
// 边框半径默认值
$uni-radius-root:5px !default;
$uni-radius: () !default;
// 边框半径断点
$uni-radius: map-deep-merge(
  (
    0: 0,
		// TODO 当前版本暂时不支持 sm 属性
    // 'sm': math.div($uni-radius-root, 2),
    null: $uni-radius-root,
    'lg': $uni-radius-root * 2,
    'xl': $uni-radius-root * 6,
    'pill': 9999px,
    'circle': 50%
  ),
  $uni-radius
);
// 字体家族
$body-font-family: 'Roboto', sans-serif !default;
// 文本
$heading-font-family: $body-font-family !default;
$uni-headings: () !default;
$letterSpacing: -0.01562em;
$uni-headings: map-deep-merge(
  (
    'h1': (
      size: 32px,
			weight: 300,
			line-height: 50px,
			// letter-spacing:-0.01562em
    ),
    'h2': (
      size: 28px,
      weight: 300,
      line-height: 40px,
      // letter-spacing: -0.00833em
    ),
    'h3': (
      size: 24px,
      weight: 400,
      line-height: 32px,
      // letter-spacing: normal
    ),
    'h4': (
      size: 20px,
      weight: 400,
      line-height: 30px,
      // letter-spacing: 0.00735em
    ),
    'h5': (
      size: 16px,
      weight: 400,
      line-height: 24px,
      // letter-spacing: normal
    ),
    'h6': (
      size: 14px,
      weight: 500,
      line-height: 18px,
      // letter-spacing: 0.0125em
    ),
    'subtitle': (
      size: 12px,
      weight: 400,
      line-height: 20px,
      // letter-spacing: 0.00937em
    ),
    'body': (
      font-size: 14px,
			font-weight: 400,
			line-height: 22px,
			// letter-spacing: 0.03125em
    ),
    'caption': (
      'size': 12px,
      'weight': 400,
      'line-height': 20px,
      // 'letter-spacing': 0.03333em,
      // 'text-transform': false
    )
  ),
  $uni-headings
);



// 主色
$uni-primary: #2979ff !default;
$uni-primary-disable:lighten($uni-primary,20%) !default;
$uni-primary-light: lighten($uni-primary,25%) !default;

// 辅助色
// 除了主色外的场景色,需要在不同的场景中使用(例如危险色表示危险的操作)。
$uni-success: #18bc37 !default;
$uni-success-disable:lighten($uni-success,20%) !default;
$uni-success-light: lighten($uni-success,25%) !default;

$uni-warning: #f3a73f !default;
$uni-warning-disable:lighten($uni-warning,20%) !default;
$uni-warning-light: lighten($uni-warning,25%) !default;

$uni-error: #e43d33 !default;
$uni-error-disable:lighten($uni-error,20%) !default;
$uni-error-light: lighten($uni-error,25%) !default;

$uni-info: #8f939c !default;
$uni-info-disable:lighten($uni-info,20%) !default;
$uni-info-light: lighten($uni-info,25%) !default;

// 中性色
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色,来表现层次结构。
$uni-main-color: #3a3a3a !default; 			// 主要文字
$uni-base-color: #6a6a6a !default;			// 常规文字
$uni-secondary-color: #909399 !default;	// 次要文字
$uni-extra-color: #c7c7c7 !default;			// 辅助说明

// 边框颜色
$uni-border-1: #F0F0F0 !default;
$uni-border-2: #EDEDED !default;
$uni-border-3: #DCDCDC !default;
$uni-border-4: #B9B9B9 !default;

// 常规色
$uni-black: #000000 !default;
$uni-white: #ffffff !default;
$uni-transparent: rgba($color: #000000, $alpha: 0) !default;

// 背景色
$uni-bg-color: #f7f7f7 !default;

/* 水平间距 */
$uni-spacing-sm: 8px !default;
$uni-spacing-base: 15px !default;
$uni-spacing-lg: 30px !default;

// 阴影
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default;
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default;

// 蒙版
$uni-mask: rgba($color: #000000, $alpha: 0.4) !default;