/
_width.scss
71 lines (69 loc) · 1.76 KB
/
_width.scss
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
// *******************************************************************
// Width
// Variables for setting the width of an element
// width: $w-1-2;
// *******************************************************************
$w-auto: auto;
$w-1-2: 50%;
$w-1-3: 33.333333%;
$w-2-3: 66.666667%;
$w-1-4: 25%;
$w-2-4: 50%;
$w-3-4: 75%;
$w-1-5: 20%;
$w-2-5: 40%;
$w-3-5: 60%;
$w-4-5: 80%;
$w-1-6: 16.666667%;
$w-2-6: 33.333333%;
$w-3-6: 50%;
$w-4-6: 66.666667%;
$w-5-6: 83.333333%;
$w-1-12: 8.333333%;
$w-2-12: 16.666667%;
$w-3-12: 25%;
$w-4-12: 33.333333%;
$w-5-12: 41.666667%;
$w-6-12: 50%;
$w-7-12: 58.333333%;
$w-8-12: 66.666667%;
$w-9-12: 75%;
$w-10-12: 83.333333%;
$w-11-12: 91.666667%;
$w-full: 100%;
$w-screen: 100vw;
$w-min: min-content;
$w-max: max-content;
$w-fit: fit-content;
// *******************************************************************
// Min-Width
// Variables for setting the minimum width of an element
// min-width: $min-w-0;
// *******************************************************************
$min-w-0: 0px;
$min-w-full: 100%;
$min-w-min: min-content;
$min-w-max: max-content;
$min-w-fit: fit-content;
// *******************************************************************
// Max-Width
// Variables for setting the maximum width of an element
// max-width: $max-w-xs;
// *******************************************************************
$max-w-none: none;
$max-w-0: 0rem;
$max-w-xs: 20rem;
$max-w-sm: 24rem;
$max-w-md: 28rem;
$max-w-lg: 32rem;
$max-w-xl: 36rem;
$max-w-2xl: 42rem;
$max-w-3xl: 48rem;
$max-w-4xl: 56rem;
$max-w-5xl: 64rem;
$max-w-6xl: 72rem;
$max-w-7xl: 80rem;
$max-w-full: 100%;
$max-w-min: min-content;
$max-w-max: max-content;
$max-w-fit: fit-content;