vant-react/src/styles/variables.scss at 1fc69c70194fd1917065ef265e3e4f55f612392c · mxdi9i7/vant-react · GitHub

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
// Color Palette
$black: #000;
$white: #fff;
$gray-1: #f7f8fa;
$gray-2: #f2f3f5;
$gray-3: #ebedf0;
$gray-4: #dcdee0;
$gray-5: #c8c9cc;
$gray-6: #969799;
$gray-7: #646566;
$gray-8: #323233;
$red: #ee0a24;
$blue: #1989fa;
$orange: #ff976a;
$orange-dark: #ed6a0c;
$orange-light: #fffbe8;
$green: #07c160;

// Gradient Colors
$gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
$gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);

// Component Colors
$text-color: $gray-8;
$active-color: $gray-2;
$active-opacity: 0.7;
$disabled-opacity: 0.5;
$background-color: $gray-1;
$background-color-light: #fafafa;
$text-link-color: #576b95;

// Padding
$padding-base: 4px;
$padding-xs: $padding-base * 2;
$padding-sm: $padding-base * 3;
$padding-md: $padding-base * 4;
$padding-lg: $padding-base * 6;
$padding-xl: $padding-base * 8;

// Font
$font-size-xs: 10px;
$font-size-sm: 12px;
$font-size-md: 14px;
$font-size-lg: 16px;
$font-weight-bold: 500;
$line-height-xs: 14px;
$line-height-sm: 18px;
$line-height-md: 20px;
$line-height-lg: 22px;
$base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
  Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB',
  'Microsoft Yahei', sans-serif;
$price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial,
  sans-serif;

// Animation
$animation-duration-base: 0.3s;
$animation-duration-fast: 0.2s;
$animation-timing-function-enter: ease-out;
$animation-timing-function-leave: ease-in;

// Border
$border-color: $gray-3;
$border-width-base: 1px;
$border-radius-sm: 2px;
$border-radius-md: 4px;
$border-radius-lg: 8px;
$border-radius-max: 999px;

// loaders
$loader-size: 20px;
$loader-animation-duration: 2s;
$loader-circular-duration: 1.4s;

// buttons
$button-height: 44px;

// navbar
$navbar-height: 56px;

// icons
$icon-container-size: 32px;
$icon-dot-size: 8px;

// popups
$popup-alpha: 0.5;
$popup-background-color: #000;

// badge
$badge-size:	16px;
$badge-color:	$white;
$badge-padding:	0 3px;
$badge-font-size:	$font-size-sm;
$badge-font-weight:	$font-weight-bold;
$badge-border-width:	$border-width-base;
$badge-background-color:	$red;
$badge-dot-color:	$red;
$badge-dot-size:	8px;
$badge-font-family:	-apple-system-font, Helvetica Neue, Arial, sans-serif