-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnew-vars.less
106 lines (91 loc) · 2.79 KB
/
new-vars.less
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
/* ----- MEDIA BREAKPOINTS ----- */
@min-min: 0px; // large mobile
@min-max: 383px; // large mobile
@xxs-min: 384px; // large mobile
@xxs-max: 479px; // large mobile
@xs-min: 480px; // small tablet
@xs-max: 640px; // small tablet
@sm-min: 641px; // large tablet
@sm-max: 767px; // small tablet
@md-min: 768px; // large tablet
@md-max: 991px; // large tablet
@lg-min: 992px; // laptop
@lg-max: 1199px; // laptop
@xl-min: 1200px; // desktop
@xl-max: 1599px; // desktop
@xxl-min: 1600px; // large desktop
@xxl-max: 1920px; // large desktop
@max-min: 1921px; // large desktop
// default fonts vars
@font-size-b: 1.6rem;
//@font-size-b: 16px;
@line-height-b: 1.5;
@h-line-height-b: 1.3;
@h-font-weight: bold;
// font sizes standardized
@font-size-min: @font-size-b * 0.6; //xsmall
@font-size-xxs: @font-size-b * 0.6; //xsmall
@font-size-xs: @font-size-b * 0.75; //small
@font-size-s: @font-size-b * 1; //text
@font-size-m: @font-size-b * 1.25; //h5
@font-size-l: @font-size-b * 1.5; //h4
@font-size-xl: @font-size-b * 2; //h3
@font-size-xxl: @font-size-b * 2.75; //h2
@font-size-max: @font-size-b * 3.6; //h1
@base-rem: .4rem;
//@base-rem: 4px;
// ----- COMPONENTS -----
@spacing-min: .5 * @base-rem; // .2rem
@spacing-xxs: @base-rem; // .4rem
@spacing-xs: 2 * @base-rem; // .8rem
@spacing-sm: 3 * @base-rem; // 1.2rem
@spacing-md: 4 * @base-rem; // 1.6rem
@spacing-lg: 6 * @base-rem; // 2.4rem
@spacing-xl: 8 * @base-rem; // 3.2rem
@spacing-xxl: 12 * @base-rem; // 4.8rem
@spacing-max: 16 * @base-rem; // 6.4rem
@radius-min: @spacing-min / 2; // .1rem
@radius-xxs: @spacing-xxs / 2; // .2rem
@radius-xs: @spacing-xs / 2; // .4rem
@radius-sm: @spacing-sm / 2; // .6rem
@radius-md: @spacing-md / 2; // .8rem
@radius-lg: @spacing-lg / 2; // 1.2rem
@radius-xl: @spacing-xl / 2; // 1.6rem
@radius-xxl: @spacing-xxl / 2; // 2.4rem
@radius-max: @spacing-max / 2; // 3.2rem
/* min?, xxs, xs, sm, md, lg, xl, max? */
@breakpoints: {
xxs: 384px;
xs: 480px;
sm: 640px;
md: 768px;
lg: 960px;
xl: 1140px;
xxl: 1440px;
}
@medias: xs, md, xl;
@containers: xs, sm, md, lg, xl;
@containers: @breakpoints;
@limitedSizes: xxs, xs, sm, md, lg, xl, xxl;
@limitedSizes: xs, sm, md, lg, xl;
@sizes: min, xxs, xs, sm, md, lg, xl, xxl, max;
@sizes: min, xs, sm, md, lg, xl, max;
@directions: {
t: top;
r: right;
b: bottom;
l: left;
}
@tempFlexDirections: {
columns: row;
rows: column;
}
@floats: right, left, none;
@positions: relative, absolute, fixed, static;
@align-items: center, start, end, flex-end, stretch;
@align-selfs: center, start, end;
@align-contents: start, center, space-between, space-around, flex-end;
@justify-contents: start, center, space-between, space-around, flex-end;
@numbers: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12;
@overflows: hidden, visible, auto, scroll;
@displays: block, flex, inline, inline-block, grid, none;