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
147
148
149
150
|
$base: (
font-family: (-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif),
font-family-code: (Menlo, Monaco, Consolas, Andale Mono, lucida console, Courier New, monospace),
font-size-root: 16px,
font-size-root-sm: 14px,
font-size-xl: 1.5rem,
font-size-lg: 1.25rem,
font-size: 1rem,
font-size-sm: .85rem,
font-size-xs: .7rem,
font-size-h1-xl: 3.5rem,
font-size-h2-xl: 2.5rem,
font-size-h3-xl: 2rem,
font-size-h4-xl: 1.75rem,
font-size-h5-xl: 1.5rem,
font-size-h6-xl: 1.5rem,
font-size-h1-lg: 3rem,
font-size-h2-lg: 2rem,
font-size-h3-lg: 1.75rem,
font-size-h4-lg: 1.5rem,
font-size-h5-lg: 1.25rem,
font-size-h6-lg: 1.25rem,
font-size-h1: 2.5rem,
font-size-h2: 1.9rem,
font-size-h3: 1.5rem,
font-size-h4: 1.2rem,
font-size-h5: 1rem,
font-size-h6: 1rem,
font-size-h1-sm: 2rem,
font-size-h2-sm: 1.5rem,
font-size-h3-sm: 1.35rem,
font-size-h4-sm: 1.15rem,
font-size-h5-sm: 1rem,
font-size-h6-sm: 1rem,
font-size-h1-xs: 1.05rem,
font-size-h2-xs: 1rem,
font-size-h3-xs: .95rem,
font-size-h4-xs: .9rem,
font-size-h5-xs: .85rem,
font-size-h6-xs: .85rem,
font-weight: 400,
font-weight-bold: 700,
line-height-xl: 2,
line-height-lg: 1.8,
line-height: 1.6,
line-height-sm: 1.4,
line-height-xs: 1.2,
spacer: 1rem,
border-radius-lg: .8rem,
border-radius: .4rem,
border-radius-sm: .2rem
);
$spacers: (
0: 0,
1: map-get($base, spacer) * .25,
2: map-get($base, spacer) * .5,
3: map-get($base, spacer),
4: map-get($base, spacer) * 1.5,
5: map-get($base, spacer) * 3
);
$z-indexes: (
actions: 996,
mask: 997,
sidebar: 998,
modal: 999
);
$layout: (
header-height: 5rem,
header-height-sm: 3rem,
content-max-width: 950px,
sidebar-width: 250px,
sidebar-header-height: 3rem,
aside-width: 220px
);
// sm md lg
// | ------ | ------ | ------ |
// 0 500 1024 -
$responsive: (
sm: 0,
md: 500px,
lg: 1024px
);
$animation: (
duration: .4s,
duration-sm: .2s,
timing-function: ease-in-out
);
$clickable: (
transition: all .2s ease-in-out
);
$button-height-xl: 2.8rem;
$button-height-lg: 2.3rem;
$button-height: 1.9rem;
$button-height-sm: 1.5rem;
$button-height-xs: 1.2rem;
$button: (
padding-y-xl: ($button-height-xl - map-get($base, font-size-xl)) / 2,
padding-x-xl: $button-height-xl / 3,
padding-y-lg: ($button-height-lg - map-get($base, font-size-lg)) / 2,
padding-x-lg: $button-height-lg / 3,
padding-y: ($button-height - map-get($base, font-size)) / 2,
padding-x: $button-height / 3,
padding-y-sm: ($button-height-sm - map-get($base, font-size-sm)) / 2,
padding-x-sm: $button-height-sm / 3,
padding-y-xs: ($button-height-xs - map-get($base, font-size-xs)) / 2,
padding-x-xs: $button-height-xs / 3,
pill-radius: 6rem,
circle-diameter-xl: $button-height-xl,
circle-diameter-lg: $button-height-lg,
circle-diameter: $button-height,
circle-diameter-sm: $button-height-sm,
circle-diameter-xs: $button-height-xs,
font-weight: map-get($base, font-weight-bold)
);
$image: (
width-xl: 20em,
width-lg: 16rem,
width: 12rem,
width-sm: 8rem,
width-xs: 4rem
);
$menu: (
horizontal-spacer: 1,
horizontal-item-vertical-spacer: 1
);
|
