@nuvoui/core 0.3.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -3
- package/dist/main.css +1 -1
- package/package.json +5 -3
- package/src/logo.png +0 -0
- package/src/logo.svg +12 -0
- package/src/styles/base/_base.scss +23 -5
- package/src/styles/base/_reset.scss +18 -4
- package/src/styles/components/_button.scss +96 -82
- package/src/styles/components/_checkbox.scss +0 -23
- package/src/styles/components/_form.scss +62 -24
- package/src/styles/components/_hamburger.scss +72 -0
- package/src/styles/components/_navbar.scss +98 -86
- package/src/styles/index.scss +8 -6
- package/src/styles/layouts/_container.scss +1 -0
- package/src/styles/layouts/_flex.scss +67 -51
- package/src/styles/layouts/_grid.scss +6 -8
- package/src/styles/themes/_theme.scss +1 -1
- package/src/styles/utilities/_animations.scss +13 -68
- package/src/styles/utilities/_borders.scss +36 -0
- package/src/styles/utilities/_colors.scss +23 -31
- package/src/styles/utilities/_display.scss +39 -0
- package/src/styles/utilities/_media-queries.scss +147 -0
- package/src/styles/utilities/_opacity.scss +20 -0
- package/src/styles/utilities/_position.scss +49 -40
- package/src/styles/utilities/_shadows.scss +4 -5
- package/src/styles/utilities/_sizing.scss +73 -0
- package/src/styles/utilities/_spacing.scss +57 -52
- package/src/styles/utilities/_tooltips.scss +20 -33
- package/src/styles/utilities/_typography.scss +1 -0
- package/src/styles/utilities/_variables.scss +30 -23
- package/dist/index.css +0 -1
- package/dist/index.css.map +0 -1
- package/src/styles/_global.scss +0 -3
|
@@ -1,27 +1,46 @@
|
|
|
1
|
-
// _spacing.scss
|
|
2
|
-
|
|
3
1
|
@use 'sass:math';
|
|
4
2
|
@use './variables' as *;
|
|
5
3
|
|
|
6
4
|
|
|
7
5
|
// Padding mixins
|
|
8
|
-
@mixin p($val) { $val: if($val==0, $val, $val + px); padding: $val !important; }
|
|
9
|
-
@mixin px($val) { $val: if($val==0, $val, $val + px); padding-left: $val !important; padding-right: $val !important; }
|
|
10
|
-
@mixin py($val) { $val: if($val==0, $val, $val + px); padding-top: $val !important; padding-bottom: $val !important; }
|
|
11
|
-
@mixin pt($val) { $val: if($val==0, $val, $val + px); padding-top: $val !important; }
|
|
12
|
-
@mixin pr($val) { $val: if($val==0, $val, $val + px); padding-right: $val !important; }
|
|
13
|
-
@mixin pb($val) { $val: if($val==0, $val, $val + px); padding-bottom: $val !important; }
|
|
14
|
-
@mixin pl($val) { $val: if($val==0, $val, $val + px); padding-left: $val !important; }
|
|
6
|
+
@mixin p($val) { $val: if($val == 0, $val, $val + px); padding: $val !important; }
|
|
7
|
+
@mixin px($val) { $val: if($val == 0, $val, $val + px); padding-left: $val !important; padding-right: $val !important; }
|
|
8
|
+
@mixin py($val) { $val: if($val == 0, $val, $val + px); padding-top: $val !important; padding-bottom: $val !important; }
|
|
9
|
+
@mixin pt($val) { $val: if($val == 0, $val, $val + px); padding-top: $val !important; }
|
|
10
|
+
@mixin pr($val) { $val: if($val == 0, $val, $val + px); padding-right: $val !important; }
|
|
11
|
+
@mixin pb($val) { $val: if($val == 0, $val, $val + px); padding-bottom: $val !important; }
|
|
12
|
+
@mixin pl($val) { $val: if($val == 0, $val, $val + px); padding-left: $val !important; }
|
|
15
13
|
|
|
16
14
|
// Margin mixins
|
|
17
|
-
@mixin m($val) { $val: if($val==0, $val, $val + px); margin: $val !important; }
|
|
18
|
-
@mixin mx($val) { $val: if($val==0, $val, $val + px); margin-left: $val !important; margin-right: $val !important; }
|
|
19
|
-
@mixin my($val) { $val: if($val==0, $val, $val + px); margin-top: $val !important; margin-bottom: $val !important; }
|
|
20
|
-
@mixin mt($val) { $val: if($val==0, $val, $val + px); margin-top: $val !important; }
|
|
21
|
-
@mixin mr($val) { $val: if($val==0, $val, $val + px); margin-right: $val !important; }
|
|
22
|
-
@mixin mb($val) { $val: if($val==0, $val, $val + px); margin-bottom: $val !important; }
|
|
23
|
-
@mixin ml($val) { $val: if($val==0, $val, $val + px); margin-left: $val !important; }
|
|
15
|
+
@mixin m($val) { $val: if($val == 0, $val, $val + px); margin: $val !important; }
|
|
16
|
+
@mixin mx($val) { $val: if($val == 0, $val, $val + px); margin-left: $val !important; margin-right: $val !important; }
|
|
17
|
+
@mixin my($val) { $val: if($val == 0, $val, $val + px); margin-top: $val !important; margin-bottom: $val !important; }
|
|
18
|
+
@mixin mt($val) { $val: if($val == 0, $val, $val + px); margin-top: $val !important; }
|
|
19
|
+
@mixin mr($val) { $val: if($val == 0, $val, $val + px); margin-right: $val !important; }
|
|
20
|
+
@mixin mb($val) { $val: if($val == 0, $val, $val + px); margin-bottom: $val !important; }
|
|
21
|
+
@mixin ml($val) { $val: if($val == 0, $val, $val + px); margin-left: $val !important; }
|
|
22
|
+
|
|
23
|
+
// Auto margin utilities
|
|
24
|
+
@mixin ml-auto { margin-left: auto; }
|
|
25
|
+
@mixin mr-auto { margin-right: auto; }
|
|
26
|
+
@mixin mx-auto { @include ml-auto; @include mr-auto; }
|
|
27
|
+
|
|
28
|
+
// Spacing map
|
|
29
|
+
@mixin space-y($i) { & > * + * { margin-top: if($i == 0, 0, $i + px); } }
|
|
30
|
+
@mixin space-x($i) { & > * + * { margin-left: if($i == 0, 0, $i + px); } }
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
// Gap Mixins
|
|
34
|
+
@mixin gap($value) { gap: if($value == 0, $value, $value + px); }
|
|
35
|
+
@mixin gap-x($value) { column-gap: if($value == 0, $value, $value + px); }
|
|
36
|
+
@mixin gap-y($value) { row-gap: if($value == 0, $value, $value + px); }
|
|
37
|
+
|
|
38
|
+
.mx-auto { @include mx-auto; }
|
|
39
|
+
.ml-auto { @include ml-auto; }
|
|
40
|
+
.mr-auto { @include mr-auto; }
|
|
24
41
|
|
|
42
|
+
// Gap Classes
|
|
43
|
+
.gap-auto { gap: auto; }
|
|
25
44
|
|
|
26
45
|
// Generate utilities from spacing map
|
|
27
46
|
@each $i in $spacings {
|
|
@@ -42,13 +61,25 @@
|
|
|
42
61
|
.mr-#{$i} { @include mr($i); }
|
|
43
62
|
.mb-#{$i} { @include mb($i); }
|
|
44
63
|
.ml-#{$i} { @include ml($i); }
|
|
45
|
-
|
|
64
|
+
|
|
65
|
+
// Gap classes
|
|
66
|
+
.gap-#{$i} { @include gap($i); }
|
|
67
|
+
.gap-x-#{$i} { @include gap-x($i); }
|
|
68
|
+
.gap-y-#{$i} { @include gap-y($i); }
|
|
69
|
+
|
|
70
|
+
// Space classes
|
|
71
|
+
.space-x-#{$i} { @include space-x($i); }
|
|
72
|
+
.space-y-#{$i} { @include space-y($i); }
|
|
46
73
|
}
|
|
47
74
|
|
|
48
75
|
|
|
49
76
|
// Responsive Position Classes
|
|
50
77
|
@each $breakpoint, $width in $breakpoints {
|
|
51
78
|
@media (min-width: $width) {
|
|
79
|
+
.mx-auto\@#{$breakpoint} { @include mx-auto; }
|
|
80
|
+
.ml-auto\@#{$breakpoint} { @include ml-auto; }
|
|
81
|
+
.mr-auto\@#{$breakpoint} { @include mr-auto; }
|
|
82
|
+
|
|
52
83
|
// Generate utilities from spacing map
|
|
53
84
|
@each $i in $spacings {
|
|
54
85
|
// Padding classes
|
|
@@ -68,41 +99,15 @@
|
|
|
68
99
|
.mr-#{$i}\@#{$breakpoint} { @include mr($i); }
|
|
69
100
|
.mb-#{$i}\@#{$breakpoint} { @include mb($i); }
|
|
70
101
|
.ml-#{$i}\@#{$breakpoint} { @include ml($i); }
|
|
102
|
+
|
|
103
|
+
.gap-#{$i}\@#{$breakpoint} { gap: $i; }
|
|
104
|
+
.gap-x-#{$i}\@#{$breakpoint} { column-gap: $i; }
|
|
105
|
+
.gap-y-#{$i}\@#{$breakpoint} { row-gap: $i; }
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
// Space classes
|
|
109
|
+
.space-x-#{$i}\@#{$breakpoint} { @include space-x($i); }
|
|
110
|
+
.space-y-#{$i}\@#{$breakpoint} { @include space-y($i); }
|
|
71
111
|
}
|
|
72
112
|
}
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
// Auto margin utilities
|
|
76
|
-
@mixin ml-auto { margin-left: auto; }
|
|
77
|
-
@mixin mr-auto { margin-right: auto; }
|
|
78
|
-
@mixin mx-auto { @include ml-auto; @include mr-auto; }
|
|
79
|
-
|
|
80
|
-
.mx-auto { @include mx-auto; }
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
.ml-auto { @include ml-auto; }
|
|
84
|
-
.mr-auto { @include mr-auto; }
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
// Gap Mixins
|
|
89
|
-
@mixin gap($value) {
|
|
90
|
-
gap: if($value == 0, $value, $value + px);
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
@mixin gap-x($value) {
|
|
94
|
-
column-gap: if($value == 0, $value, $value + px);
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
@mixin gap-y($value) {
|
|
98
|
-
row-gap: if($value == 0, $value, $value + px);
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
// Gap Classes
|
|
102
|
-
.gap-auto { gap: auto; }
|
|
103
|
-
|
|
104
|
-
@each $i in $spacings {
|
|
105
|
-
.gap-#{$i} { @include gap($i); }
|
|
106
|
-
.gap-x-#{$i} { @include gap-x($i); }
|
|
107
|
-
.gap-y-#{$i} { @include gap-y($i); }
|
|
108
113
|
}
|
|
@@ -7,7 +7,6 @@
|
|
|
7
7
|
[data-tooltip][role~="tooltip"]::before,
|
|
8
8
|
[data-tooltip][role~="tooltip"]::after {
|
|
9
9
|
transform: translate3d(0, 0, 0);
|
|
10
|
-
-webkit-backface-visibility: hidden;
|
|
11
10
|
backface-visibility: hidden;
|
|
12
11
|
will-change: transform;
|
|
13
12
|
opacity: 0;
|
|
@@ -25,7 +24,7 @@
|
|
|
25
24
|
}
|
|
26
25
|
|
|
27
26
|
[data-tooltip][role~="tooltip"]::after {
|
|
28
|
-
background: var(--tooltip-bg); //
|
|
27
|
+
background: var(--tooltip-bg); // todo: change to a variable
|
|
29
28
|
box-shadow: 0 3px 7px var(--tooltip-shadow-color);
|
|
30
29
|
border-radius: 4px;
|
|
31
30
|
color: #fff;
|
|
@@ -47,17 +46,17 @@
|
|
|
47
46
|
}
|
|
48
47
|
|
|
49
48
|
[role~="tooltip"][data-microtip-position|="top"]::before {
|
|
50
|
-
background: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E) no-repeat;
|
|
49
|
+
background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
|
|
51
50
|
height: 6px;
|
|
52
51
|
width: 18px;
|
|
53
|
-
margin-bottom: 5px
|
|
52
|
+
margin-bottom: 5px;
|
|
53
|
+
transform: translate3d(-50%, 0, 0);
|
|
54
|
+
bottom: 100%;
|
|
55
|
+
left: 50%
|
|
54
56
|
}
|
|
55
57
|
|
|
56
58
|
[role~="tooltip"][data-microtip-position|="top"]::after {
|
|
57
|
-
margin-bottom: 11px
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
[role~="tooltip"][data-microtip-position|="top"]::before {
|
|
59
|
+
margin-bottom: 11px;
|
|
61
60
|
transform: translate3d(-50%, 0, 0);
|
|
62
61
|
bottom: 100%;
|
|
63
62
|
left: 50%
|
|
@@ -67,12 +66,6 @@
|
|
|
67
66
|
transform: translate3d(-50%, -5px, 0)
|
|
68
67
|
}
|
|
69
68
|
|
|
70
|
-
[role~="tooltip"][data-microtip-position|="top"]::after {
|
|
71
|
-
transform: translate3d(-50%, 0, 0);
|
|
72
|
-
bottom: 100%;
|
|
73
|
-
left: 50%
|
|
74
|
-
}
|
|
75
|
-
|
|
76
69
|
[role~="tooltip"][data-microtip-position="top"]:hover::after {
|
|
77
70
|
transform: translate3d(-50%, -5px, 0)
|
|
78
71
|
}
|
|
@@ -96,34 +89,31 @@
|
|
|
96
89
|
}
|
|
97
90
|
|
|
98
91
|
[role~="tooltip"][data-microtip-position|="bottom"]::before {
|
|
99
|
-
background: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E) no-repeat;
|
|
92
|
+
background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
|
|
100
93
|
height: 6px;
|
|
101
94
|
width: 18px;
|
|
102
95
|
margin-top: 5px;
|
|
103
|
-
margin-bottom: 0
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
[role~="tooltip"][data-microtip-position|="bottom"]::after {
|
|
107
|
-
margin-top: 11px
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
[role~="tooltip"][data-microtip-position|="bottom"]::before {
|
|
96
|
+
margin-bottom: 0;
|
|
111
97
|
transform: translate3d(-50%, -10px, 0);
|
|
112
98
|
bottom: auto;
|
|
113
99
|
left: 50%;
|
|
114
100
|
top: 100%
|
|
115
101
|
}
|
|
116
102
|
|
|
117
|
-
[role~="tooltip"][data-microtip-position|="bottom"]:hover::before {
|
|
118
|
-
transform: translate3d(-50%, 0, 0)
|
|
119
|
-
}
|
|
120
|
-
|
|
121
103
|
[role~="tooltip"][data-microtip-position|="bottom"]::after {
|
|
104
|
+
margin-top: 11px;
|
|
122
105
|
transform: translate3d(-50%, -10px, 0);
|
|
123
106
|
top: 100%;
|
|
124
107
|
left: 50%
|
|
125
108
|
}
|
|
126
109
|
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
[role~="tooltip"][data-microtip-position|="bottom"]:hover::before {
|
|
113
|
+
transform: translate3d(-50%, 0, 0)
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
|
|
127
117
|
[role~="tooltip"][data-microtip-position="bottom"]:hover::after {
|
|
128
118
|
transform: translate3d(-50%, 0, 0)
|
|
129
119
|
}
|
|
@@ -148,15 +138,12 @@
|
|
|
148
138
|
|
|
149
139
|
[role~="tooltip"][data-microtip-position="left"]::before,
|
|
150
140
|
[role~="tooltip"][data-microtip-position="left"]::after {
|
|
151
|
-
|
|
152
|
-
left: auto;
|
|
153
|
-
right: 100%;
|
|
154
|
-
top: 50%;
|
|
141
|
+
inset: auto auto auto 100%;
|
|
155
142
|
transform: translate3d(10px, -50%, 0)
|
|
156
143
|
}
|
|
157
144
|
|
|
158
145
|
[role~="tooltip"][data-microtip-position="left"]::before {
|
|
159
|
-
background: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E) no-repeat;
|
|
146
|
+
background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
|
|
160
147
|
height: 18px;
|
|
161
148
|
width: 6px;
|
|
162
149
|
margin-right: 5px;
|
|
@@ -181,7 +168,7 @@
|
|
|
181
168
|
}
|
|
182
169
|
|
|
183
170
|
[role~="tooltip"][data-microtip-position="right"]::before {
|
|
184
|
-
background: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E) no-repeat;
|
|
171
|
+
background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
|
|
185
172
|
height: 18px;
|
|
186
173
|
width: 6px;
|
|
187
174
|
margin-bottom: 0;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// Global variables that might be used across different modules
|
|
2
|
-
$enable-dark-mode: true;
|
|
3
|
-
$enable-rtl:
|
|
4
|
-
$enable-reduced-motion: true
|
|
2
|
+
$enable-dark-mode: true !default;
|
|
3
|
+
$enable-rtl: true !default;;
|
|
4
|
+
$enable-reduced-motion: true !default;;
|
|
5
5
|
|
|
6
6
|
$column-count: 12 !default;
|
|
7
7
|
|
|
@@ -33,7 +33,7 @@ $breakpoints: (
|
|
|
33
33
|
'lg': 1024px,
|
|
34
34
|
'xl': 1280px,
|
|
35
35
|
'xxl': 1536px,
|
|
36
|
-
);
|
|
36
|
+
) !default;
|
|
37
37
|
|
|
38
38
|
// Container max-widths
|
|
39
39
|
$container-max-widths: (
|
|
@@ -43,28 +43,35 @@ $container-max-widths: (
|
|
|
43
43
|
'lg': 960px,
|
|
44
44
|
'xl': 1140px,
|
|
45
45
|
'xxl': 1320px,
|
|
46
|
-
);
|
|
46
|
+
) !default;
|
|
47
47
|
|
|
48
48
|
// _variables.scss
|
|
49
49
|
$font-sizes: (
|
|
50
|
-
'
|
|
51
|
-
'3xl': 2rem, // 32px
|
|
52
|
-
'2xl': 1.75rem, // 28px
|
|
53
|
-
'xl': 1.5rem, // 24px
|
|
54
|
-
'lg': 1.25rem, // 20px
|
|
55
|
-
'md': 1rem, // 16px
|
|
50
|
+
'xs': 0.75rem, // 12px
|
|
56
51
|
'sm': 0.875rem, // 14px
|
|
57
|
-
'
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
//
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
52
|
+
'md': 1rem, // 16px
|
|
53
|
+
'lg': 1.25rem, // 20px
|
|
54
|
+
'xl': 1.5rem, // 24px
|
|
55
|
+
'2xl': 1.75rem, // 28px
|
|
56
|
+
'3xl': 2rem, // 32px
|
|
57
|
+
'4xl': 2.5rem // 40px
|
|
58
|
+
) !default;
|
|
59
|
+
|
|
60
|
+
$padding-map: (
|
|
61
|
+
'xs': 0.25rem 0.5rem,
|
|
62
|
+
'sm': 0.375rem 0.75rem,
|
|
63
|
+
'md': 0.5rem 1rem,
|
|
64
|
+
'lg': 0.75rem 1.5rem,
|
|
65
|
+
'xl': 1rem 2rem,
|
|
66
|
+
'2xl': 1.25rem 2.5rem,
|
|
67
|
+
'3xl': 1.5rem 3rem,
|
|
68
|
+
'4xl': 2rem 4rem,
|
|
69
|
+
) !default;
|
|
67
70
|
|
|
68
71
|
$spacings: (
|
|
69
|
-
0,1,2,3,4,5,
|
|
70
|
-
)
|
|
72
|
+
0,1,2,3,4,5,10,15,20,25,30,35,40,45,50,60,70,80,90,100,125,150,175,200,250,300,350,400,450,500
|
|
73
|
+
) !default;
|
|
74
|
+
|
|
75
|
+
$percentages: (
|
|
76
|
+
0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 95, 100
|
|
77
|
+
) !default;
|