@nautui/core 0.1.0
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 +148 -0
- package/package.json +35 -0
- package/src/components/Accordion.astro +24 -0
- package/src/components/AccordionItem.astro +172 -0
- package/src/components/Background.astro +75 -0
- package/src/components/Badge.astro +140 -0
- package/src/components/Bento.astro +37 -0
- package/src/components/BentoItem.astro +26 -0
- package/src/components/Box.astro +189 -0
- package/src/components/Breadcrumb.astro +62 -0
- package/src/components/Button.astro +273 -0
- package/src/components/Card.astro +228 -0
- package/src/components/Container.astro +76 -0
- package/src/components/Divider.astro +85 -0
- package/src/components/Drawer.astro +139 -0
- package/src/components/Flex.astro +150 -0
- package/src/components/Flow.astro +119 -0
- package/src/components/Grid.astro +335 -0
- package/src/components/GridItem.astro +225 -0
- package/src/components/Group.astro +106 -0
- package/src/components/Image.astro +191 -0
- package/src/components/Link.astro +118 -0
- package/src/components/List.astro +57 -0
- package/src/components/ListItem.astro +31 -0
- package/src/components/Mark.astro +161 -0
- package/src/components/Marquee.astro +193 -0
- package/src/components/Masonry.astro +75 -0
- package/src/components/MasonryItem.astro +28 -0
- package/src/components/Menu.astro +71 -0
- package/src/components/MenuItem.astro +93 -0
- package/src/components/NavBar.astro +211 -0
- package/src/components/Section.astro +108 -0
- package/src/components/Space.astro +400 -0
- package/src/components/Stack.astro +237 -0
- package/src/components/Text.astro +270 -0
- package/src/components/Theme.astro +37 -0
- package/src/components/ThemeToggle.astro +141 -0
- package/src/components/Title.astro +141 -0
- package/src/index.d.ts +80 -0
- package/src/index.ts +77 -0
- package/src/lib/border.ts +92 -0
- package/src/lib/pattern.ts +37 -0
- package/src/lib/spacing.ts +48 -0
- package/src/styles/border.css +180 -0
- package/src/styles/colors.css +99 -0
- package/src/styles/global.css +57 -0
- package/src/styles/radius.css +22 -0
- package/src/styles/shadow.css +11 -0
- package/src/styles/spacing/display.css +198 -0
- package/src/styles/spacing/gap.css +19 -0
- package/src/styles/spacing/margin.css +157 -0
- package/src/styles/spacing/padding.css +154 -0
- package/src/styles/spacing/spacing.css +2 -0
- package/src/types.ts +10 -0
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
/* === Theme inputs (overridable) === */
|
|
3
|
+
--naut-color-primary: #5423e7;
|
|
4
|
+
--naut-color-secondary: #121217;
|
|
5
|
+
--naut-color-destructive: #ef4444;
|
|
6
|
+
--naut-color-link: blue;
|
|
7
|
+
--naut-color-highlight: #ddd522;
|
|
8
|
+
|
|
9
|
+
/* === Brand content (foreground on brand) === */
|
|
10
|
+
--naut-color-primary-content: white;
|
|
11
|
+
--naut-color-secondary-content: white;
|
|
12
|
+
--naut-color-destructive-content: white;
|
|
13
|
+
|
|
14
|
+
/* === Tint controls (overridable) ===
|
|
15
|
+
* Convention constants for component-side color-mix.
|
|
16
|
+
* Brand-soft/strong are NOT promoted to tokens; components derive them
|
|
17
|
+
* inline using these knobs to keep the public API minimal. */
|
|
18
|
+
--naut-tint-base: 3%;
|
|
19
|
+
/* primary bleed into neutrals */
|
|
20
|
+
--naut-tint-strong: 25%;
|
|
21
|
+
/* darken amount for "stronger" brand mixes */
|
|
22
|
+
--naut-tint-soft: 0.1;
|
|
23
|
+
/* alpha for translucent brand backgrounds */
|
|
24
|
+
|
|
25
|
+
/* === Neutral surface scale (derived from primary + tint) === */
|
|
26
|
+
--naut-color-base: color-mix(in oklch,
|
|
27
|
+
white,
|
|
28
|
+
var(--naut-color-primary) var(--naut-tint-base));
|
|
29
|
+
/* page background */
|
|
30
|
+
--naut-color-base-100: color-mix(in oklch,
|
|
31
|
+
var(--naut-color-base),
|
|
32
|
+
black 2%);
|
|
33
|
+
/* subtle patterns */
|
|
34
|
+
--naut-color-base-200: color-mix(in oklch,
|
|
35
|
+
var(--naut-color-base),
|
|
36
|
+
black 5%);
|
|
37
|
+
/* surface: cards, inputs, hover overlays */
|
|
38
|
+
--naut-color-base-300: color-mix(in oklch,
|
|
39
|
+
var(--naut-color-base),
|
|
40
|
+
black 10%);
|
|
41
|
+
/* borders, dividers */
|
|
42
|
+
--naut-color-base-400: color-mix(in oklch,
|
|
43
|
+
var(--naut-color-base),
|
|
44
|
+
black 50%);
|
|
45
|
+
/* outline borders, strong dividers */
|
|
46
|
+
|
|
47
|
+
/* === Text on neutrals === */
|
|
48
|
+
--naut-color-content: color-mix(in oklch,
|
|
49
|
+
black,
|
|
50
|
+
var(--naut-color-primary) var(--naut-tint-base));
|
|
51
|
+
--naut-color-content-soft: color-mix(in oklch,
|
|
52
|
+
var(--naut-color-base-content),
|
|
53
|
+
white 60%);
|
|
54
|
+
|
|
55
|
+
/* === Border aliases (separately themeable) === */
|
|
56
|
+
--naut-color-border: var(--naut-color-base-300);
|
|
57
|
+
--naut-color-border-strong: var(--naut-color-base-400);
|
|
58
|
+
|
|
59
|
+
/* === Specialty === */
|
|
60
|
+
--naut-color-selection: color-mix(in oklch,
|
|
61
|
+
var(--naut-color-primary),
|
|
62
|
+
white 75%);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
[data-theme="dark"],
|
|
66
|
+
section.dark,
|
|
67
|
+
nav.dark {
|
|
68
|
+
/* === Neutral surface scale (flipped: mix toward white instead of black) === */
|
|
69
|
+
--naut-color-base: color-mix(in oklch,
|
|
70
|
+
black,
|
|
71
|
+
var(--naut-color-primary) var(--naut-tint-base));
|
|
72
|
+
--naut-color-base-100: color-mix(in oklch,
|
|
73
|
+
var(--naut-color-base),
|
|
74
|
+
white 35%);
|
|
75
|
+
--naut-color-base-200: color-mix(in oklch,
|
|
76
|
+
var(--naut-color-base),
|
|
77
|
+
white 40%);
|
|
78
|
+
--naut-color-base-300: color-mix(in oklch,
|
|
79
|
+
var(--naut-color-base),
|
|
80
|
+
white 45%);
|
|
81
|
+
--naut-color-base-400: color-mix(in oklch,
|
|
82
|
+
var(--naut-color-base),
|
|
83
|
+
white 50%);
|
|
84
|
+
|
|
85
|
+
/* === Border (re-aliased onto the dark neutral scale) === */
|
|
86
|
+
--naut-color-border: var(--naut-color-base-300);
|
|
87
|
+
--naut-color-border-strong: var(--naut-color-base-400);
|
|
88
|
+
|
|
89
|
+
/* === Text on neutrals === */
|
|
90
|
+
--naut-color-content: color-mix(in oklch,
|
|
91
|
+
white,
|
|
92
|
+
var(--naut-color-primary) var(--naut-tint-base));
|
|
93
|
+
--naut-color-content-soft: color-mix(in oklch,
|
|
94
|
+
var(--naut-color-content),
|
|
95
|
+
black 30%);
|
|
96
|
+
|
|
97
|
+
/* === Specialty === */
|
|
98
|
+
--naut-color-link: color-mix(in oklch, blue, white 80%);
|
|
99
|
+
}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
/* Layer Base */
|
|
2
|
+
@layer naut-base, naut-theme, naut-component;
|
|
3
|
+
|
|
4
|
+
@layer naut-base {
|
|
5
|
+
/*
|
|
6
|
+
* Naut UI — Derived Theme
|
|
7
|
+
*
|
|
8
|
+
* All tokens below are derived from the inputs in colors.css. They are not
|
|
9
|
+
* meant to be overridden directly — override the inputs and every derived
|
|
10
|
+
* token updates at runtime.
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
:root {
|
|
14
|
+
--naut-font-family: "Inter", sans-serif;
|
|
15
|
+
--naut-line-height-ratio: 1.55;
|
|
16
|
+
|
|
17
|
+
--naut-font-size-xs: 0.785rem;
|
|
18
|
+
--naut-font-size-sm: 0.875rem;
|
|
19
|
+
--naut-font-size-md: 1rem;
|
|
20
|
+
--naut-font-size-lg: 1.25rem;
|
|
21
|
+
--naut-font-size-xl: 1.565rem;
|
|
22
|
+
--naut-font-size-xxl: 1.875rem;
|
|
23
|
+
|
|
24
|
+
/* Spacing */
|
|
25
|
+
--naut-spacing-0: 0;
|
|
26
|
+
--naut-spacing-xs: 0.5rem;
|
|
27
|
+
--naut-spacing-sm: 1rem;
|
|
28
|
+
--naut-spacing-md: 1.5rem;
|
|
29
|
+
--naut-spacing-lg: 2rem;
|
|
30
|
+
--naut-spacing-xl: 2.5rem;
|
|
31
|
+
--naut-spacing-xxl: 3rem;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/* Global styles */
|
|
35
|
+
body {
|
|
36
|
+
margin: 0;
|
|
37
|
+
font-family: var(--naut-font-family);
|
|
38
|
+
font-size: var(--naut-font-size-md);
|
|
39
|
+
line-height: calc(var(--naut-font-size-md) * var(--naut-line-height-ratio));
|
|
40
|
+
color: var(--naut-color-content);
|
|
41
|
+
background-color: var(--naut-color-base);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/* Links */
|
|
45
|
+
a {
|
|
46
|
+
color: var(--naut-color-link);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/* Selection */
|
|
50
|
+
::selection {
|
|
51
|
+
background: var(--naut-color-selection);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
::-moz-selection {
|
|
55
|
+
background: var(--naut-color-selection);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--naut-border-radius-sm: 0.35rem;
|
|
3
|
+
--naut-border-radius-md: 0.5rem;
|
|
4
|
+
--naut-border-radius-lg: 0.75rem;
|
|
5
|
+
--naut-border-radius-full: 9999px;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.radius-sm {
|
|
9
|
+
border-radius: var(--naut-border-radius-sm);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.radius-md {
|
|
13
|
+
border-radius: var(--naut-border-radius-md);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.radius-lg {
|
|
17
|
+
border-radius: var(--naut-border-radius-lg);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.radius-xl {
|
|
21
|
+
border-radius: var(--naut-border-radius-xl);
|
|
22
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--naut-shadow-scale: 1;
|
|
3
|
+
--naut-shadow-s: calc(1rem * var(--naut-shadow-scale));
|
|
4
|
+
--naut-shadow-x: calc(0.0625 * var(--naut-shadow-s));
|
|
5
|
+
--naut-shadow-c: #0000001a;
|
|
6
|
+
|
|
7
|
+
--naut-shadow-sm: var(--naut-shadow-x) calc(0.125 * var(--naut-shadow-s)) calc(0.25 * var(--naut-shadow-s)) var(--naut-shadow-c);
|
|
8
|
+
--naut-shadow-md: var(--naut-shadow-x) calc(0.25 * var(--naut-shadow-s)) calc(0.5 * var(--naut-shadow-s)) var(--naut-shadow-c);
|
|
9
|
+
--naut-shadow-lg: var(--naut-shadow-x) calc(0.5 * var(--naut-shadow-s)) calc(1 * var(--naut-shadow-s)) var(--naut-shadow-c);
|
|
10
|
+
--naut-shadow-xl: var(--naut-shadow-x) calc(1 * var(--naut-shadow-s)) calc(2 * var(--naut-shadow-s)) var(--naut-shadow-c);
|
|
11
|
+
}
|
|
@@ -0,0 +1,198 @@
|
|
|
1
|
+
/* Spacing Display */
|
|
2
|
+
|
|
3
|
+
:root {
|
|
4
|
+
--naut-spacing-display: clamp(1rem, 6vw + 1rem, 6rem);
|
|
5
|
+
--naut-spacing-display-lg: clamp(2rem, 8vw + 1rem, 8rem);
|
|
6
|
+
--naut-spacing-display-xl: clamp(3rem, 10vw + 1rem, 10rem);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
/* padding display */
|
|
10
|
+
.p-display {
|
|
11
|
+
padding: var(--naut-spacing-display);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.px-display {
|
|
15
|
+
padding-right: var(--naut-spacing-display);
|
|
16
|
+
padding-left: var(--naut-spacing-display);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.py-display {
|
|
20
|
+
padding-top: var(--naut-spacing-display);
|
|
21
|
+
padding-bottom: var(--naut-spacing-display);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.pt-display {
|
|
25
|
+
padding-top: var(--naut-spacing-display);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.pb-display {
|
|
29
|
+
padding-bottom: var(--naut-spacing-display);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.pl-display {
|
|
33
|
+
padding-left: var(--naut-spacing-display);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.pr-display {
|
|
37
|
+
padding-right: var(--naut-spacing-display);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
/* margin display */
|
|
41
|
+
.m-display {
|
|
42
|
+
margin: var(--naut-spacing-display);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.mx-display {
|
|
46
|
+
margin-right: var(--naut-spacing-display);
|
|
47
|
+
margin-left: var(--naut-spacing-display);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.my-display {
|
|
51
|
+
margin-top: var(--naut-spacing-display);
|
|
52
|
+
margin-bottom: var(--naut-spacing-display);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.mt-display {
|
|
56
|
+
margin-top: var(--naut-spacing-display);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.mb-display {
|
|
60
|
+
margin-bottom: var(--naut-spacing-display);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.ml-display {
|
|
64
|
+
margin-right: var(--naut-spacing-display);
|
|
65
|
+
margin-left: var(--naut-spacing-display);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.mr-display {
|
|
69
|
+
margin-right: var(--naut-spacing-display);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/* Spacing display-lg */
|
|
73
|
+
|
|
74
|
+
/* padding display-lg */
|
|
75
|
+
.p-display-lg {
|
|
76
|
+
padding: var(--naut-spacing-display-lg);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.px-display-lg {
|
|
80
|
+
padding-right: var(--naut-spacing-display-lg);
|
|
81
|
+
padding-left: var(--naut-spacing-display-lg);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.py-display-lg {
|
|
85
|
+
padding-top: var(--naut-spacing-display-lg);
|
|
86
|
+
padding-bottom: var(--naut-spacing-display-lg);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.pt-display-lg {
|
|
90
|
+
padding-top: var(--naut-spacing-display-lg);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.pb-display-lg {
|
|
94
|
+
padding-bottom: var(--naut-spacing-display-lg);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.pl-display-lg {
|
|
98
|
+
padding-left: var(--naut-spacing-display-lg);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.pr-display-lg {
|
|
102
|
+
padding-right: var(--naut-spacing-display-lg);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
/* margin display-lg */
|
|
106
|
+
.m-display-lg {
|
|
107
|
+
margin: var(--naut-spacing-display-lg);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.mx-display-lg {
|
|
111
|
+
margin-right: var(--naut-spacing-display-lg);
|
|
112
|
+
margin-left: var(--naut-spacing-display-lg);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.my-display-lg {
|
|
116
|
+
margin-top: var(--naut-spacing-display-lg);
|
|
117
|
+
margin-bottom: var(--naut-spacing-display-lg);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.mt-display-lg {
|
|
121
|
+
margin-top: var(--naut-spacing-display-lg);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.mb-display-lg {
|
|
125
|
+
margin-bottom: var(--naut-spacing-display-lg);
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.ml-display-lg {
|
|
129
|
+
margin-left: var(--naut-spacing-display-lg);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.mr-display-lg {
|
|
133
|
+
margin-right: var(--naut-spacing-display-lg);
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
/* Spacing display-xl */
|
|
137
|
+
|
|
138
|
+
/* padding display-xl */
|
|
139
|
+
.p-display-xl {
|
|
140
|
+
padding: var(--naut-spacing-display-xl);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.px-display-xl {
|
|
144
|
+
padding-right: var(--naut-spacing-display-xl);
|
|
145
|
+
padding-left: var(--naut-spacing-display-xl);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.py-display-xl {
|
|
149
|
+
padding-top: var(--naut-spacing-display-xl);
|
|
150
|
+
padding-bottom: var(--naut-spacing-display-xl);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.pt-display-xl {
|
|
154
|
+
padding-top: var(--naut-spacing-display-xl);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.pb-display-xl {
|
|
158
|
+
padding-bottom: var(--naut-spacing-display-xl);
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.pl-display-xl {
|
|
162
|
+
padding-left: var(--naut-spacing-display-xl);
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.pr-display-xl {
|
|
166
|
+
padding-right: var(--naut-spacing-display-xl);
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
/* margin display-xl */
|
|
170
|
+
.m-display-xl {
|
|
171
|
+
margin: var(--naut-spacing-display-xl);
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.mx-display-xl {
|
|
175
|
+
margin-right: var(--naut-spacing-display-xl);
|
|
176
|
+
margin-left: var(--naut-spacing-display-xl);
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.my-display-xl {
|
|
180
|
+
margin-top: var(--naut-spacing-display-xl);
|
|
181
|
+
margin-bottom: var(--naut-spacing-display-xl);
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.mt-display-xl {
|
|
185
|
+
margin-top: var(--naut-spacing-display-xl);
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.mb-display-xl {
|
|
189
|
+
margin-bottom: var(--naut-spacing-display-xl);
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.ml-display-xl {
|
|
193
|
+
margin-left: var(--naut-spacing-display-xl);
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.mr-display-xl {
|
|
197
|
+
margin-right: var(--naut-spacing-display-xl);
|
|
198
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
.gap-xs {
|
|
2
|
+
gap: var(--naut-spacing-xs);
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.gap-sm {
|
|
6
|
+
gap: var(--naut-spacing-sm);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.gap-md {
|
|
10
|
+
gap: var(--naut-spacing-md);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.gap-lg {
|
|
14
|
+
gap: var(--naut-spacing-lg);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.gap-xl {
|
|
18
|
+
gap: var(--naut-spacing-xl);
|
|
19
|
+
}
|
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
/* margin 0 */
|
|
2
|
+
.m-0 {
|
|
3
|
+
margin: 0;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.mx-0 {
|
|
7
|
+
margin-right: 0;
|
|
8
|
+
margin-left: 0;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.my-0 {
|
|
12
|
+
margin-top: 0;
|
|
13
|
+
margin-bottom: 0;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.mt-0 {
|
|
17
|
+
margin-top: 0;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.mb-0 {
|
|
21
|
+
margin-bottom: 0;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.ml-0 {
|
|
25
|
+
margin-left: 0;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.mr-0 {
|
|
29
|
+
margin-right: 0;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/* margin sm */
|
|
33
|
+
.m-sm {
|
|
34
|
+
margin: var(--naut-spacing-sm);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.mx-sm {
|
|
38
|
+
margin-right: var(--naut-spacing-sm);
|
|
39
|
+
margin-left: var(--naut-spacing-sm);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.my-sm {
|
|
43
|
+
margin-top: var(--naut-spacing-sm);
|
|
44
|
+
margin-bottom: var(--naut-spacing-sm);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.mt-sm {
|
|
48
|
+
margin-top: var(--naut-spacing-sm);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.mb-sm {
|
|
52
|
+
margin-bottom: var(--naut-spacing-sm);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.ml-sm {
|
|
56
|
+
margin-left: var(--naut-spacing-sm);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.mr-sm {
|
|
60
|
+
margin-right: var(--naut-spacing-sm);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
/* margin md */
|
|
64
|
+
.m-md {
|
|
65
|
+
margin: var(--naut-spacing-md);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.mx-md {
|
|
69
|
+
margin-right: var(--naut-spacing-md);
|
|
70
|
+
margin-left: var(--naut-spacing-md);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.my-md {
|
|
74
|
+
margin-top: var(--naut-spacing-md);
|
|
75
|
+
margin-bottom: var(--naut-spacing-md);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.mt-md {
|
|
79
|
+
margin-top: var(--naut-spacing-md);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.mb-md {
|
|
83
|
+
margin-bottom: var(--naut-spacing-md);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.ml-md {
|
|
87
|
+
margin-right: var(--naut-spacing-md);
|
|
88
|
+
margin-left: var(--naut-spacing-md);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.mr-md {
|
|
92
|
+
margin-right: var(--naut-spacing-md);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
/* margin lg */
|
|
96
|
+
.m-lg {
|
|
97
|
+
margin: var(--naut-spacing-lg);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.mx-lg {
|
|
101
|
+
margin-right: var(--naut-spacing-lg);
|
|
102
|
+
margin-left: var(--naut-spacing-lg);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.my-lg {
|
|
106
|
+
margin-top: var(--naut-spacing-lg);
|
|
107
|
+
margin-bottom: var(--naut-spacing-lg);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.mt-lg {
|
|
111
|
+
margin-top: var(--naut-spacing-lg);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.mb-lg {
|
|
115
|
+
margin-bottom: var(--naut-spacing-lg);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.ml-lg {
|
|
119
|
+
margin-right: var(--naut-spacing-lg);
|
|
120
|
+
margin-left: var(--naut-spacing-lg);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.mr-lg {
|
|
124
|
+
margin-right: var(--naut-spacing-lg);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
/* margin xl */
|
|
128
|
+
.m-xl {
|
|
129
|
+
margin: var(--naut-spacing-xl);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.mx-xl {
|
|
133
|
+
margin-right: var(--naut-spacing-xl);
|
|
134
|
+
margin-left: var(--naut-spacing-xl);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.my-xl {
|
|
138
|
+
margin-top: var(--naut-spacing-xl);
|
|
139
|
+
margin-bottom: var(--naut-spacing-xl);
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.mt-xl {
|
|
143
|
+
margin-top: var(--naut-spacing-xl);
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.mb-xl {
|
|
147
|
+
margin-bottom: var(--naut-spacing-xl);
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.ml-xl {
|
|
151
|
+
margin-right: var(--naut-spacing-xl);
|
|
152
|
+
margin-left: var(--naut-spacing-xl);
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.mr-xl {
|
|
156
|
+
margin-right: var(--naut-spacing-xl);
|
|
157
|
+
}
|
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
/* Spacing 0 */
|
|
2
|
+
.p-0 {
|
|
3
|
+
padding: 0;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.px-0 {
|
|
7
|
+
padding-right: 0;
|
|
8
|
+
padding-left: 0;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.py-0 {
|
|
12
|
+
padding-top: 0;
|
|
13
|
+
padding-bottom: 0;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.pt-0 {
|
|
17
|
+
padding-top: 0;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.pb-0 {
|
|
21
|
+
padding-bottom: 0;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.pl-0 {
|
|
25
|
+
padding-left: 0;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.pr-0 {
|
|
29
|
+
padding-right: 0;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/* padding sm */
|
|
33
|
+
.p-sm {
|
|
34
|
+
padding: var(--naut-spacing-sm);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.px-sm {
|
|
38
|
+
padding-right: var(--naut-spacing-sm);
|
|
39
|
+
padding-left: var(--naut-spacing-sm);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.py-sm {
|
|
43
|
+
padding-top: var(--naut-spacing-sm);
|
|
44
|
+
padding-bottom: var(--naut-spacing-sm);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.pt-sm {
|
|
48
|
+
padding-top: var(--naut-spacing-sm);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.pb-sm {
|
|
52
|
+
padding-bottom: var(--naut-spacing-sm);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.pl-sm {
|
|
56
|
+
padding-left: var(--naut-spacing-sm);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.pr-sm {
|
|
60
|
+
padding-right: var(--naut-spacing-sm);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
/* padding md */
|
|
64
|
+
.p-md {
|
|
65
|
+
padding: var(--naut-spacing-md);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.px-md {
|
|
69
|
+
padding-right: var(--naut-spacing-md);
|
|
70
|
+
padding-left: var(--naut-spacing-md);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.py-md {
|
|
74
|
+
padding-top: var(--naut-spacing-md);
|
|
75
|
+
padding-bottom: var(--naut-spacing-md);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.pt-md {
|
|
79
|
+
padding-top: var(--naut-spacing-md);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.pb-md {
|
|
83
|
+
padding-bottom: var(--naut-spacing-md);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.pl-md {
|
|
87
|
+
padding-left: var(--naut-spacing-md);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.pr-md {
|
|
91
|
+
padding-right: var(--naut-spacing-md);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/* padding lg */
|
|
95
|
+
.p-lg {
|
|
96
|
+
padding: var(--naut-spacing-lg);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.px-lg {
|
|
100
|
+
padding-right: var(--naut-spacing-lg);
|
|
101
|
+
padding-left: var(--naut-spacing-lg);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.py-lg {
|
|
105
|
+
padding-top: var(--naut-spacing-lg);
|
|
106
|
+
padding-bottom: var(--naut-spacing-lg);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.pt-lg {
|
|
110
|
+
padding-top: var(--naut-spacing-lg);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.pb-lg {
|
|
114
|
+
padding-bottom: var(--naut-spacing-lg);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.pl-lg {
|
|
118
|
+
padding-left: var(--naut-spacing-lg);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.pr-lg {
|
|
122
|
+
padding-right: var(--naut-spacing-lg);
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
/* padding xl */
|
|
126
|
+
.p-xl {
|
|
127
|
+
padding: var(--naut-spacing-xl);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.px-xl {
|
|
131
|
+
padding-right: var(--naut-spacing-xl);
|
|
132
|
+
padding-left: var(--naut-spacing-xl);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.py-xl {
|
|
136
|
+
padding-top: var(--naut-spacing-xl);
|
|
137
|
+
padding-bottom: var(--naut-spacing-xl);
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.pt-xl {
|
|
141
|
+
padding-top: var(--naut-spacing-xl);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.pb-xl {
|
|
145
|
+
padding-bottom: var(--naut-spacing-xl);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.pl-xl {
|
|
149
|
+
padding-left: var(--naut-spacing-xl);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.pr-xl {
|
|
153
|
+
padding-right: var(--naut-spacing-xl);
|
|
154
|
+
}
|