@nuvoui/core 1.1.7 → 1.1.8
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/dist/nuvoui.min.css +1 -1
- package/package.json +1 -1
- package/src/styles/index.scss +2 -0
- package/src/styles/layouts/_container.scss +20 -9
- package/src/styles/layouts/_flex.scss +56 -15
- package/src/styles/layouts/_grid.scss +65 -25
- package/src/styles/mixins-map.scss +254 -0
- package/src/styles/utilities/_alignment.scss +20 -0
- package/src/styles/utilities/_container-queries.scss +40 -0
- package/src/styles/utilities/_display.scss +55 -1
- package/src/styles/utilities/_media-queries.scss +11 -10
- package/src/styles/utilities/_opacity.scss +85 -1
- package/src/styles/utilities/_position.scss +176 -70
- package/src/styles/utilities/_shadows.scss +81 -6
- package/src/styles/utilities/_sizing.scss +52 -48
- package/src/styles/utilities/_spacing.scss +313 -62
- package/src/styles/utilities/_transitions.scss +152 -0
- package/src/styles/utilities/_typography.scss +112 -88
- package/src/styles/utilities/_variables.scss +40 -12
|
@@ -4,7 +4,25 @@
|
|
|
4
4
|
@use 'sass:map';
|
|
5
5
|
|
|
6
6
|
// Import variables
|
|
7
|
-
@use '../utilities/variables' as
|
|
7
|
+
@use '../utilities/variables' as VAR;
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Typography Utilities
|
|
12
|
+
*
|
|
13
|
+
* Classes:
|
|
14
|
+
* - Font Size: .text-xs, .text-sm, .text-base, etc.
|
|
15
|
+
* - Font Weight: .font-thin, .font-normal, .font-bold, etc.
|
|
16
|
+
* - Line Height: .leading-none, .leading-tight, .leading-normal, etc.
|
|
17
|
+
* - Text Align: .text-left, .text-center, .text-right, .text-justify
|
|
18
|
+
* - Text Transform: .uppercase, .lowercase, .capitalize, .normal-case
|
|
19
|
+
* - Text Style: .italic, .not-italic
|
|
20
|
+
* - Text Decoration: .underline, .line-through, .no-underline
|
|
21
|
+
* - Text Overflow: .truncate
|
|
22
|
+
*
|
|
23
|
+
* All utilities support responsive variants with @breakpoint suffix:
|
|
24
|
+
* - .text-lg@md, .font-bold@lg, etc.
|
|
25
|
+
*/
|
|
8
26
|
|
|
9
27
|
// Utilities for text sizes
|
|
10
28
|
|
|
@@ -13,7 +31,12 @@
|
|
|
13
31
|
* @param {string} $size - The size of the text.
|
|
14
32
|
*/
|
|
15
33
|
@mixin text-size($size) {
|
|
16
|
-
|
|
34
|
+
@if map.has-key(VAR.$font-sizes, $size) {
|
|
35
|
+
font-size: map.get(VAR.$font-sizes, $size);
|
|
36
|
+
} @else {
|
|
37
|
+
@warn "Font size '#{$size}' not found in $font-sizes map.";
|
|
38
|
+
}
|
|
39
|
+
|
|
17
40
|
}
|
|
18
41
|
|
|
19
42
|
// Font weights
|
|
@@ -60,98 +83,99 @@
|
|
|
60
83
|
// Text overflow mixin
|
|
61
84
|
@mixin truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
62
85
|
|
|
86
|
+
@mixin truncate-lines($lines: 2) {
|
|
87
|
+
display: -webkit-box;
|
|
88
|
+
-webkit-line-clamp: $lines;
|
|
89
|
+
-webkit-box-orient: vertical;
|
|
90
|
+
overflow: hidden;
|
|
91
|
+
text-overflow: ellipsis;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
@mixin break-normal { overflow-wrap: normal; word-break: normal; }
|
|
96
|
+
@mixin break-words { overflow-wrap: break-word; }
|
|
97
|
+
@mixin break-all { word-break: break-all; }
|
|
98
|
+
@mixin whitespace-normal { white-space: normal; }
|
|
99
|
+
@mixin whitespace-nowrap { white-space: nowrap; }
|
|
100
|
+
@mixin whitespace-pre { white-space: pre; }
|
|
101
|
+
@mixin whitespace-pre-line { white-space: pre-line; }
|
|
102
|
+
@mixin whitespace-pre-wrap { white-space: pre-wrap; }
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
@mixin responsive-typography($breakpoint: null) {
|
|
110
|
+
$suffix: if($breakpoint, "\\@#{$breakpoint}", "");
|
|
111
|
+
|
|
112
|
+
@each $size, $val in VAR.$font-sizes {
|
|
113
|
+
.text-#{$size}#{$suffix} { @include text-size($size); }
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
// Generate font weight utilities
|
|
117
|
+
.font-thin#{$suffix} { @include font-thin; }
|
|
118
|
+
.font-extralight#{$suffix} { @include font-extralight; }
|
|
119
|
+
.font-light#{$suffix} { @include font-light; }
|
|
120
|
+
.font-normal#{$suffix} { @include font-normal; }
|
|
121
|
+
.font-medium#{$suffix} { @include font-medium; }
|
|
122
|
+
.font-semibold#{$suffix} { @include font-semibold; }
|
|
123
|
+
.font-bold#{$suffix} { @include font-bold; }
|
|
124
|
+
.font-extrabold#{$suffix} { @include font-extrabold; }
|
|
125
|
+
.font-black#{$suffix} { @include font-black; }
|
|
126
|
+
|
|
127
|
+
// Generate line height utilities
|
|
128
|
+
.leading-none#{$suffix} { @include leading-none; }
|
|
129
|
+
.leading-tight#{$suffix} { @include leading-tight; }
|
|
130
|
+
.leading-snug#{$suffix} { @include leading-snug; }
|
|
131
|
+
.leading-normal#{$suffix} { @include leading-normal; }
|
|
132
|
+
.leading-relaxed#{$suffix} { @include leading-relaxed; }
|
|
133
|
+
.leading-loose#{$suffix} { @include leading-loose; }
|
|
134
|
+
|
|
135
|
+
// Generate text alignment utilities
|
|
136
|
+
.text-left#{$suffix} { @include text-left; }
|
|
137
|
+
.text-center#{$suffix} { @include text-center; }
|
|
138
|
+
.text-right#{$suffix} { @include text-right; }
|
|
139
|
+
.text-justify#{$suffix} { @include text-justify; }
|
|
140
|
+
|
|
141
|
+
// Classes using mixins
|
|
142
|
+
.uppercase#{$suffix} { @include uppercase; }
|
|
143
|
+
.lowercase#{$suffix} { @include lowercase; }
|
|
144
|
+
.capitalize#{$suffix} { @include capitalize; }
|
|
145
|
+
.normal-case#{$suffix} { @include normal-case; }
|
|
146
|
+
|
|
147
|
+
.italic#{$suffix} { @include italic; }
|
|
148
|
+
.not-italic#{$suffix} { @include not-italic; }
|
|
149
|
+
|
|
150
|
+
.underline#{$suffix} { @include underline; }
|
|
151
|
+
.line-through#{$suffix} { @include line-through; }
|
|
152
|
+
.no-underline#{$suffix} { @include no-underline; }
|
|
153
|
+
|
|
154
|
+
.truncate#{$suffix} { @include truncate; }
|
|
155
|
+
|
|
156
|
+
.truncate-2#{$suffix} { @include truncate-lines(2); }
|
|
157
|
+
.truncate-3#{$suffix} { @include truncate-lines(3); }
|
|
158
|
+
.truncate-4#{$suffix} { @include truncate-lines(4); }
|
|
159
|
+
.truncate-5#{$suffix} { @include truncate-lines(5); }
|
|
63
160
|
|
|
64
|
-
@each $size, $val in $font-sizes {
|
|
65
|
-
.text-#{$size} { @include text-size($size); }
|
|
66
161
|
}
|
|
67
162
|
|
|
68
|
-
|
|
69
|
-
.
|
|
70
|
-
.
|
|
71
|
-
.
|
|
72
|
-
.
|
|
73
|
-
.
|
|
74
|
-
.
|
|
75
|
-
.
|
|
76
|
-
.
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
// Generate line height utilities
|
|
80
|
-
.leading-none { @include leading-none; }
|
|
81
|
-
.leading-tight { @include leading-tight; }
|
|
82
|
-
.leading-snug { @include leading-snug; }
|
|
83
|
-
.leading-normal { @include leading-normal; }
|
|
84
|
-
.leading-relaxed { @include leading-relaxed; }
|
|
85
|
-
.leading-loose { @include leading-loose; }
|
|
86
|
-
|
|
87
|
-
// Generate text alignment utilities
|
|
88
|
-
.text-left { @include text-left; }
|
|
89
|
-
.text-center { @include text-center; }
|
|
90
|
-
.text-right { @include text-right; }
|
|
91
|
-
.text-justify { @include text-justify; }
|
|
92
|
-
|
|
93
|
-
// Classes using mixins
|
|
94
|
-
.uppercase { @include uppercase; }
|
|
95
|
-
.lowercase { @include lowercase; }
|
|
96
|
-
.capitalize { @include capitalize; }
|
|
97
|
-
.normal-case { @include normal-case; }
|
|
98
|
-
|
|
99
|
-
.italic { @include italic; }
|
|
100
|
-
.not-italic { @include not-italic; }
|
|
101
|
-
|
|
102
|
-
.underline { @include underline; }
|
|
103
|
-
.line-through { @include line-through; }
|
|
104
|
-
.no-underline { @include no-underline; }
|
|
105
|
-
|
|
106
|
-
.truncate { @include truncate; }
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
@each $breakpoint, $width in $breakpoints {
|
|
163
|
+
@include responsive-typography();
|
|
164
|
+
.break-normal { @include break-normal; }
|
|
165
|
+
.break-words { @include break-words; }
|
|
166
|
+
.break-all { @include break-all; }
|
|
167
|
+
.whitespace-normal { @include whitespace-normal; }
|
|
168
|
+
.whitespace-nowrap { @include whitespace-nowrap; }
|
|
169
|
+
.whitespace-pre { @include whitespace-pre; }
|
|
170
|
+
.whitespace-pre-line { @include whitespace-pre-line; }
|
|
171
|
+
.whitespace-pre-wrap { @include whitespace-pre-wrap; }
|
|
172
|
+
|
|
173
|
+
@each $breakpoint, $width in VAR.$breakpoints {
|
|
110
174
|
@media (min-width: #{$width}) {
|
|
111
|
-
@each $size, $val in
|
|
112
|
-
// .text-#{$size}\@#{$breakpoint} { @include text-size($size); }
|
|
175
|
+
@each $size, $val in VAR.$font-sizes {
|
|
113
176
|
.text-#{$size}\@#{$breakpoint} { @include text-size($size); }
|
|
114
177
|
}
|
|
115
|
-
|
|
116
|
-
// Generate font weight utilities
|
|
117
|
-
.font-thin\@#{$breakpoint} { @include font-thin; }
|
|
118
|
-
.font-extralight\@#{$breakpoint} { @include font-extralight; }
|
|
119
|
-
.font-light\@#{$breakpoint} { @include font-light; }
|
|
120
|
-
.font-normal\@#{$breakpoint} { @include font-normal; }
|
|
121
|
-
.font-medium\@#{$breakpoint} { @include font-medium; }
|
|
122
|
-
.font-semibold\@#{$breakpoint} { @include font-semibold; }
|
|
123
|
-
.font-bold\@#{$breakpoint} { @include font-bold; }
|
|
124
|
-
.font-extrabold\@#{$breakpoint} { @include font-extrabold; }
|
|
125
|
-
.font-black\@#{$breakpoint} { @include font-black; }
|
|
126
|
-
|
|
127
|
-
// Generate line height utilities
|
|
128
|
-
.leading-none\@#{$breakpoint} { @include leading-none; }
|
|
129
|
-
.leading-tight\@#{$breakpoint} { @include leading-tight; }
|
|
130
|
-
.leading-snug\@#{$breakpoint} { @include leading-snug; }
|
|
131
|
-
.leading-normal\@#{$breakpoint} { @include leading-normal; }
|
|
132
|
-
.leading-relaxed\@#{$breakpoint} { @include leading-relaxed; }
|
|
133
|
-
.leading-loose\@#{$breakpoint} { @include leading-loose; }
|
|
134
|
-
|
|
135
|
-
// Generate text alignment utilities
|
|
136
|
-
.text-left\@#{$breakpoint} { @include text-left; }
|
|
137
|
-
.text-center\@#{$breakpoint} { @include text-center; }
|
|
138
|
-
.text-right\@#{$breakpoint} { @include text-right; }
|
|
139
|
-
.text-justify\@#{$breakpoint} { @include text-justify; }
|
|
140
|
-
|
|
141
|
-
// Classes using mixins
|
|
142
|
-
.uppercase\@#{$breakpoint} { @include uppercase; }
|
|
143
|
-
.lowercase\@#{$breakpoint} { @include lowercase; }
|
|
144
|
-
.capitalize\@#{$breakpoint} { @include capitalize; }
|
|
145
|
-
.normal-case\@#{$breakpoint} { @include normal-case; }
|
|
146
|
-
|
|
147
|
-
.italic\@#{$breakpoint} { @include italic; }
|
|
148
|
-
.not-italic\@#{$breakpoint} { @include not-italic; }
|
|
149
|
-
|
|
150
|
-
.underline\@#{$breakpoint} { @include underline; }
|
|
151
|
-
.line-through\@#{$breakpoint} { @include line-through; }
|
|
152
|
-
.no-underline\@#{$breakpoint} { @include no-underline; }
|
|
153
|
-
|
|
154
|
-
.truncate\@#{$breakpoint} { @include truncate; }
|
|
178
|
+
@include responsive-typography($breakpoint);
|
|
155
179
|
}
|
|
156
180
|
}
|
|
157
181
|
|
|
@@ -1,4 +1,17 @@
|
|
|
1
1
|
@use 'sass:map';
|
|
2
|
+
@use 'sass:math';
|
|
3
|
+
|
|
4
|
+
$base-size: 16;
|
|
5
|
+
@function rem($px) {
|
|
6
|
+
@if $px == 0 {
|
|
7
|
+
@return 0;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
// Strip units if $px has any
|
|
11
|
+
$value: if(math.unit($px) == '', $px, math.div($px, math.unit($px)));
|
|
12
|
+
|
|
13
|
+
@return math.div($value, $base-size) * 1rem;
|
|
14
|
+
}
|
|
2
15
|
|
|
3
16
|
// Global variables that might be used across different modules
|
|
4
17
|
$enable-debuger: false !default;
|
|
@@ -27,7 +40,6 @@ $color-primitives: (
|
|
|
27
40
|
'pink': #ec4899
|
|
28
41
|
) !default;
|
|
29
42
|
|
|
30
|
-
|
|
31
43
|
$theme-tokens: (
|
|
32
44
|
'background',
|
|
33
45
|
'foreground',
|
|
@@ -56,7 +68,6 @@ $dark-theme: (
|
|
|
56
68
|
'text-secondary': #a3a3a3
|
|
57
69
|
) !default;
|
|
58
70
|
|
|
59
|
-
|
|
60
71
|
// Breakpoints
|
|
61
72
|
$breakpoints: (
|
|
62
73
|
'xs': 480px,
|
|
@@ -67,14 +78,12 @@ $breakpoints: (
|
|
|
67
78
|
'2xl': 1536px,
|
|
68
79
|
) !default;
|
|
69
80
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
'
|
|
73
|
-
'
|
|
74
|
-
'
|
|
75
|
-
'
|
|
76
|
-
'xl': 1140px,
|
|
77
|
-
'2xl': 1320px,
|
|
81
|
+
$grid-item-sizes: (
|
|
82
|
+
'xs': 200px,
|
|
83
|
+
'sm': 250px,
|
|
84
|
+
'md': 300px,
|
|
85
|
+
'lg': 350px,
|
|
86
|
+
'xl': 400px
|
|
78
87
|
) !default;
|
|
79
88
|
|
|
80
89
|
// _variables.scss
|
|
@@ -89,9 +98,28 @@ $font-sizes: (
|
|
|
89
98
|
'4xl': 2.5rem // 40px
|
|
90
99
|
) !default;
|
|
91
100
|
|
|
101
|
+
@debug rem(4);
|
|
102
|
+
// Updated spacing map
|
|
92
103
|
$spacings: (
|
|
93
|
-
0,
|
|
94
|
-
)
|
|
104
|
+
0: 0,
|
|
105
|
+
1: rem(4), // 0.25rem
|
|
106
|
+
2: rem(8), // 0.5rem
|
|
107
|
+
3: rem(12), // 0.75rem
|
|
108
|
+
4: rem(16), // 1rem
|
|
109
|
+
5: rem(20), // 1.25rem
|
|
110
|
+
6: rem(24), // 1.5rem
|
|
111
|
+
8: rem(32), // 2rem
|
|
112
|
+
10: rem(40), // 2.5rem
|
|
113
|
+
12: rem(48), // 3rem
|
|
114
|
+
16: rem(64), // 4rem
|
|
115
|
+
20: rem(80), // 5rem
|
|
116
|
+
24: rem(96), // 6rem
|
|
117
|
+
32: rem(128), // 8rem
|
|
118
|
+
40: rem(160), // 10rem
|
|
119
|
+
48: rem(192), // 12rem
|
|
120
|
+
56: rem(224), // 14rem
|
|
121
|
+
64: rem(256) // 16rem
|
|
122
|
+
);
|
|
95
123
|
|
|
96
124
|
$percentages: (
|
|
97
125
|
0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 100
|