nk_jtb 0.9.14 → 0.9.15
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/index.html +9 -0
- package/package.json +1 -1
- package/src/base/_base.scss +0 -1
- package/src/utilities/_typography.scss +15 -89
- package/src/variables/_base.scss +5 -4
- package/src/variables/_utility_maps.scss +0 -30
package/index.html
CHANGED
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
|
|
7
7
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
8
8
|
<title>NayKel JTB</title>
|
|
9
|
+
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
|
|
9
10
|
<!-- <script src="https://cdn.tailwindcss.com"></script> -->
|
|
10
11
|
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
11
12
|
|
|
@@ -13,6 +14,14 @@
|
|
|
13
14
|
|
|
14
15
|
<body>
|
|
15
16
|
|
|
17
|
+
<div class="container mt">
|
|
18
|
+
<div class="grid cols-2">
|
|
19
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur alias a omnis ipsa perferendis dolorum suscipit facere excepturi atque totam illo, exercitationem voluptas accusamus libero ipsum harum, rerum explicabo ducimus.</p>
|
|
20
|
+
<p class="font-serif">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae magni placeat eligendi. Officiis, voluptate. Eligendi id nesciunt, totam ipsam nobis officia ex voluptate eveniet voluptatem voluptatibus animi molestias dignissimos nulla.</p>
|
|
21
|
+
<p class="font-sans-serif">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tenetur laborum est exercitationem asperiores voluptate, dolor id magnam, eligendi veniam quo natus numquam vel culpa obcaecati ullam ipsam eveniet velit sunt?</p>
|
|
22
|
+
<p class="font-mono">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure delectus excepturi dolorum. Eum consequuntur natus eveniet illo consequatur? Inventore, incidunt! Aspernatur laudantium officia veniam! Temporibus eaque qui nemo recusandae similique.</p>
|
|
23
|
+
</div>
|
|
24
|
+
</div>
|
|
16
25
|
|
|
17
26
|
<div class="quick-hide-div zebra">
|
|
18
27
|
<section id="button-control-sizes-examples" class="py-3">
|
package/package.json
CHANGED
package/src/base/_base.scss
CHANGED
|
@@ -1,20 +1,14 @@
|
|
|
1
1
|
@use "../mixins/common" as *;
|
|
2
2
|
@use "sass:map";
|
|
3
3
|
|
|
4
|
-
// ******************************************************************
|
|
5
|
-
// IMPORTANT
|
|
6
|
-
// ******************************************************************
|
|
7
|
-
// Opinionated classes must be created first to make sure they can
|
|
8
|
-
// be overridden by utility classes
|
|
9
|
-
// ******************************************************************
|
|
10
|
-
|
|
11
4
|
// ==========================================================================
|
|
12
5
|
// -- PROPERTY MAPS --
|
|
13
6
|
// ==========================================================================
|
|
14
|
-
// remove
|
|
7
|
+
// remove from the colour map
|
|
15
8
|
$text-colors: map.remove($color-map, "danger", "dark", "info", "light", "success", "warning");
|
|
16
9
|
|
|
17
10
|
$text-rem-sizes: (1, 1.5, 2, 2.5, 3, 4) !default;
|
|
11
|
+
|
|
18
12
|
$text-variant-sizes: (
|
|
19
13
|
xs: 0.75rem,
|
|
20
14
|
sm: 0.875rem,
|
|
@@ -22,6 +16,7 @@ $text-variant-sizes: (
|
|
|
22
16
|
lg: 1.125rem,
|
|
23
17
|
xl: 1.5rem
|
|
24
18
|
) !default;
|
|
19
|
+
|
|
25
20
|
// convert 'rem' sizes to map and merge with variant sizes
|
|
26
21
|
$text-variants: map-merge(listToMap($text-rem-sizes), $text-variant-sizes);
|
|
27
22
|
|
|
@@ -71,6 +66,7 @@ $text-variants: map-merge(listToMap($text-rem-sizes), $text-variant-sizes);
|
|
|
71
66
|
// -- UTILITY CLASS MAP --
|
|
72
67
|
// ==========================================================================
|
|
73
68
|
|
|
69
|
+
// prettier-ignore
|
|
74
70
|
$typography-properties-map: (
|
|
75
71
|
color: (
|
|
76
72
|
prefix: "#{$text-identifier}",
|
|
@@ -85,113 +81,43 @@ $typography-properties-map: (
|
|
|
85
81
|
),
|
|
86
82
|
font-style: (
|
|
87
83
|
prefix: "#{$text-identifier}",
|
|
88
|
-
values: (
|
|
89
|
-
italic,
|
|
90
|
-
normal
|
|
91
|
-
)
|
|
84
|
+
values: ( italic, normal )
|
|
92
85
|
),
|
|
93
86
|
font-family: (
|
|
94
87
|
prefix: "#{$font-identifier}",
|
|
95
88
|
values: (
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
Menlo,
|
|
100
|
-
Monaco,
|
|
101
|
-
Consolas,
|
|
102
|
-
"Liberation Mono",
|
|
103
|
-
"Courier New",
|
|
104
|
-
monospace
|
|
105
|
-
),
|
|
106
|
-
serif: (
|
|
107
|
-
ui-serif,
|
|
108
|
-
Georgia,
|
|
109
|
-
Cambria,
|
|
110
|
-
"Times New Roman",
|
|
111
|
-
Times,
|
|
112
|
-
serif
|
|
113
|
-
),
|
|
114
|
-
sans: (
|
|
115
|
-
ui-sans-serif,
|
|
116
|
-
system-ui,
|
|
117
|
-
-apple-system,
|
|
118
|
-
BlinkMacSystemFont,
|
|
119
|
-
"Segoe UI",
|
|
120
|
-
Roboto,
|
|
121
|
-
"Helvetica Neue",
|
|
122
|
-
Arial,
|
|
123
|
-
"Noto Sans",
|
|
124
|
-
sans-serif,
|
|
125
|
-
"Apple Color Emoji",
|
|
126
|
-
"Segoe UI Emoji",
|
|
127
|
-
"Segoe UI Symbol",
|
|
128
|
-
"Noto Color Emoji"
|
|
129
|
-
)
|
|
89
|
+
serif: ( ui-serif, Georgia, Cambria, "Times New Roman", Times, serif ),
|
|
90
|
+
sans: ( ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" ),
|
|
91
|
+
mono: ( ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace ),
|
|
130
92
|
)
|
|
131
93
|
),
|
|
132
94
|
font-weight: (
|
|
133
95
|
prefix: "fw",
|
|
134
|
-
values: (
|
|
135
|
-
2: 200,
|
|
136
|
-
4: 400,
|
|
137
|
-
5: 500,
|
|
138
|
-
6: 600,
|
|
139
|
-
7: 700,
|
|
140
|
-
9: 900
|
|
141
|
-
)
|
|
96
|
+
values: ( 2: 200, 4: 400, 5: 500, 6: 600, 7: 700, 9: 900 )
|
|
142
97
|
),
|
|
143
98
|
line-height: (
|
|
144
99
|
prefix: "#{$line-height-identifier}",
|
|
145
|
-
values: (
|
|
146
|
-
1,
|
|
147
|
-
2
|
|
148
|
-
)
|
|
100
|
+
values: ( 1, 2 )
|
|
149
101
|
),
|
|
150
102
|
text-align: (
|
|
151
103
|
prefix: "#{$text-align-identifier}",
|
|
152
|
-
values: (
|
|
153
|
-
l: left,
|
|
154
|
-
r: right,
|
|
155
|
-
c: center,
|
|
156
|
-
j: justify
|
|
157
|
-
)
|
|
104
|
+
values: ( l: left, r: right, c: center, j: justify )
|
|
158
105
|
),
|
|
159
106
|
text-decoration: (
|
|
160
107
|
prefix: "#{$text-identifier}",
|
|
161
|
-
values: (
|
|
162
|
-
strike: line-through,
|
|
163
|
-
underline: underline,
|
|
164
|
-
overline: overline,
|
|
165
|
-
underline-overline: underline overline
|
|
166
|
-
)
|
|
108
|
+
values: ( strike: line-through, underline: underline, overline: overline, underline-overline: underline overline )
|
|
167
109
|
),
|
|
168
110
|
text-transform: (
|
|
169
111
|
prefix: "#{$text-identifier}",
|
|
170
|
-
values: (
|
|
171
|
-
upper: uppercase,
|
|
172
|
-
lower: lowercase,
|
|
173
|
-
capitalize: capitalize,
|
|
174
|
-
normal-case: none
|
|
175
|
-
)
|
|
112
|
+
values: ( upper: uppercase, lower: lowercase, capitalize: capitalize, normal-case: none )
|
|
176
113
|
),
|
|
177
114
|
white-space: (
|
|
178
115
|
prefix: "#{$whitespace-identifier}",
|
|
179
|
-
values: (
|
|
180
|
-
normal,
|
|
181
|
-
nowrap,
|
|
182
|
-
pre,
|
|
183
|
-
pre-line,
|
|
184
|
-
pre-wrap
|
|
185
|
-
)
|
|
116
|
+
values: ( normal, nowrap, pre, pre-line, pre-wrap )
|
|
186
117
|
),
|
|
187
118
|
text-wrap: (
|
|
188
119
|
prefix: "#{$text-identifier}",
|
|
189
|
-
values: (
|
|
190
|
-
wrap,
|
|
191
|
-
balance,
|
|
192
|
-
nowrap,
|
|
193
|
-
pretty
|
|
194
|
-
)
|
|
120
|
+
values: ( wrap, balance, nowrap, pretty )
|
|
195
121
|
)
|
|
196
122
|
);
|
|
197
123
|
|
package/src/variables/_base.scss
CHANGED
|
@@ -17,7 +17,10 @@ $border-color: rgb(229, 231, 235) !default;
|
|
|
17
17
|
$border: 1px solid $border-color !default;
|
|
18
18
|
$border-radius: 8px !default;
|
|
19
19
|
|
|
20
|
-
$
|
|
20
|
+
$preferred-fonts: "" !default;
|
|
21
|
+
$font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
22
|
+
$font-family: if($preferred-fonts != "", $preferred-fonts, $font-family), $font-family;
|
|
23
|
+
|
|
21
24
|
$font-size: 1rem !default;
|
|
22
25
|
$line-height: 1.5 !default;
|
|
23
26
|
|
|
@@ -57,7 +60,7 @@ $breakpoints: (
|
|
|
57
60
|
md: 768px,
|
|
58
61
|
lg: 992px,
|
|
59
62
|
xl: 1200px,
|
|
60
|
-
xxl: 1600px
|
|
63
|
+
xxl: 1600px
|
|
61
64
|
) !default;
|
|
62
65
|
|
|
63
66
|
// create an empty map to update or add defaults
|
|
@@ -72,5 +75,3 @@ $md: map-get($breakpoints, md) !default;
|
|
|
72
75
|
$lg: map-get($breakpoints, lg) !default;
|
|
73
76
|
$xl: map-get($breakpoints, xl) !default;
|
|
74
77
|
$xxl: map-get($breakpoints, xxl) !default;
|
|
75
|
-
|
|
76
|
-
|
|
@@ -38,36 +38,6 @@ $corners-map: (
|
|
|
38
38
|
br: bottom-right,
|
|
39
39
|
);
|
|
40
40
|
|
|
41
|
-
// ==========================================================================
|
|
42
|
-
// -- COMMON SIZES (REM) --
|
|
43
|
-
// ==========================================================================
|
|
44
|
-
// for creating margin, padding and other size related utilities.
|
|
45
|
-
//
|
|
46
|
-
// DO NOT add unit here, it can get in the way with some mixins
|
|
47
|
-
|
|
48
|
-
$rem-sizes-map: (
|
|
49
|
-
"0": 0,
|
|
50
|
-
"025": 0.25,
|
|
51
|
-
"05": 0.5,
|
|
52
|
-
"075": 0.75,
|
|
53
|
-
"1": 1,
|
|
54
|
-
"1.25": 1.25,
|
|
55
|
-
"1.5": 1.5,
|
|
56
|
-
"1.75": 1.75,
|
|
57
|
-
"2": 2,
|
|
58
|
-
"2.25": 2.25,
|
|
59
|
-
"2.5": 2.5,
|
|
60
|
-
"2.75": 2.75,
|
|
61
|
-
"3": 3,
|
|
62
|
-
"4": 4,
|
|
63
|
-
"5": 5,
|
|
64
|
-
"6": 6,
|
|
65
|
-
"7": 7,
|
|
66
|
-
"8": 8,
|
|
67
|
-
"9": 9,
|
|
68
|
-
"10": 10
|
|
69
|
-
);
|
|
70
|
-
|
|
71
41
|
// grid column fr conversion map for two column layouts. The map key specifies the percentage width of the 1st column
|
|
72
42
|
|
|
73
43
|
// prettier-ignore
|