nk_jtb 0.2.0 → 0.4.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.
Files changed (67) hide show
  1. package/composer.lock +1286 -0
  2. package/index.html +29 -6
  3. package/main.js +2 -1
  4. package/package.json +7 -5
  5. package/public/images/logo.svg +1 -25
  6. package/scss/_nk.scss +33 -38
  7. package/scss/base/_base.scss +39 -16
  8. package/scss/base/_content_gap.scss +8 -4
  9. package/scss/base/_vars_base.scss +41 -11
  10. package/scss/base/_vars_colors.scss +5 -3
  11. package/scss/base/_vars_components.scss +17 -32
  12. package/scss/base/_vars_utility_maps.scss +33 -11
  13. package/scss/components/_box.scss +1 -1
  14. package/scss/components/_button.scss +1 -12
  15. package/scss/components/_dropdown.scss +0 -12
  16. package/scss/components/_hero.scss +2 -2
  17. package/scss/components/_icon.scss +1 -4
  18. package/scss/components/_list.scss +32 -0
  19. package/scss/components/_menu.scss +13 -7
  20. package/scss/components/_navbar.scss +10 -3
  21. package/scss/components/_other.scss +11 -16
  22. package/scss/components/_sidebar.scss +20 -6
  23. package/scss/forms/_control.scss +4 -3
  24. package/scss/forms/_form.scss +36 -39
  25. package/scss/forms/_index.scss +1 -0
  26. package/scss/forms/_toggle.scss +54 -0
  27. package/scss/functions/_colorFunctions.scss +35 -0
  28. package/scss/functions/_helpers.scss +4 -0
  29. package/scss/jtb.scss +7 -8
  30. package/scss/layouts/__two-column.scss +32 -0
  31. package/scss/mixins/_colorSchemeSimple.scss +1 -1
  32. package/scss/mixins/_createState.scss +1 -1
  33. package/scss/mixins/_makeColorSchemeAdvanced.scss +1 -1
  34. package/scss/mixins/_makeCssPropertyMixins.scss +8 -3
  35. package/scss/mixins/_makeMagicClass.scss +61 -0
  36. package/scss/mixins/_makeMagicGrid2Cols.scss +70 -0
  37. package/scss/mixins/_makeMagicGridFixedWidth.scss +55 -0
  38. package/scss/mixins/_makeResponsiveClasses.scss +91 -0
  39. package/scss/mixins/_makeResponsivePositionUtilities.scss +3 -3
  40. package/scss/mixins/_media.scss +23 -27
  41. package/scss/mixins/_positionUtilityClasses.scss +5 -2
  42. package/scss/play.scss +30 -0
  43. package/scss/utilities/_border.scss +76 -64
  44. package/scss/utilities/_display_visibility.scss +66 -0
  45. package/scss/utilities/_flex.scss +21 -3
  46. package/scss/utilities/_general.scss +15 -21
  47. package/scss/utilities/_grid.scss +44 -135
  48. package/scss/utilities/_opacity.scss +8 -0
  49. package/scss/utilities/_position.scss +16 -36
  50. package/scss/utilities/_sizes.scss +32 -23
  51. package/scss/utilities/_spacing.scss +95 -27
  52. package/scss/utilities/_state.scss +7 -0
  53. package/scss/utilities/_text.scss +44 -13
  54. package/scss/utilities/_themes.scss +69 -43
  55. package/scss/utilities/_transition.scss +5 -0
  56. package/scss/utilities/_translate.scss +32 -0
  57. package/public/images/hero-lg.jpg +0 -0
  58. package/public/images/hero-md.jpg +0 -0
  59. package/public/images/hero-sm.jpg +0 -0
  60. package/public/images/hero-xl.jpg +0 -0
  61. package/public/images/logo-alt.svg +0 -24
  62. package/public/images/logo.png +0 -0
  63. package/public/images/painting.jpg +0 -0
  64. package/scss/functions/_setTextColor.scss +0 -12
  65. package/scss/layout/_grid_old.scss +0 -88
  66. package/scss/utilities/_display.scss +0 -127
  67. package/tests.html +0 -252
package/scss/utilities/_display.scss DELETED
@@ -1,127 +0,0 @@
1
- @use "../base/vars_base" as *;
2
- @use "../mixins/media" as *;
3
-
4
- $visibility-utilities: (
5
- "display": (
6
- "property": "display",
7
- "prefix": "",
8
- "values": (
9
- block: block,
10
- inline: inline,
11
- inline-block: inline-block,
12
- flex: flex,
13
- inline-flex: inline-flex,
14
- hidden: none,
15
- ),
16
- ),
17
- "visibility": (
18
- "property": "visibility",
19
- "prefix": "",
20
- "values": (
21
- visible: visible,
22
- invisible: hidden,
23
- ),
24
- ),
25
- );
26
-
27
- @each $property, $map in $visibility-utilities {
28
- $property: map-get($map, "property");
29
- $utility-prefix: map-get($map, "prefix");
30
- $values: map-get($map, "values");
31
-
32
- @each $key, $v in $values {
33
- .#{$utility-prefix}#{$key} {
34
- #{$property}: $v;
35
- }
36
- }
37
- }
38
-
39
- // ==========================================================================
40
- // |--\0/-- device-only --\0/--|
41
- // --------------------------------------------------------------------------
42
- @include mobile-only {
43
- .hide-on-mobile {
44
- display: none !important;
45
- }
46
- .block-on-mobile {
47
- display: block !important;
48
- }
49
- .flex-on-mobile {
50
- display: flex !important;
51
- }
52
- }
53
- @include tablet-only {
54
- .hide-on-tablet {
55
- display: none !important;
56
- }
57
- .block-on-tablet {
58
- display: block !important;
59
- }
60
- .flex-on-tablet {
61
- display: flex !important;
62
- }
63
- }
64
- @include desktop-only {
65
- .hide-on-desktop {
66
- display: none !important;
67
- }
68
- .block-on-desktop {
69
- display: block !important;
70
- }
71
- .flex-on-desktop {
72
- display: flex !important;
73
- }
74
- }
75
-
76
- // ==========================================================================
77
- // |--\0/-- from-device (device and larger) --\0/--|
78
- // --------------------------------------------------------------------------
79
-
80
- @include from-tablet {
81
- .hide-from-tablet {
82
- display: none !important;
83
- }
84
- .block-from-tablet {
85
- display: block !important;
86
- }
87
- .flex-from-tablet {
88
- display: flex !important;
89
- }
90
- }
91
- @include from-desktop {
92
- .hide-from-desktop {
93
- display: none !important;
94
- }
95
- .block-from-desktop {
96
- display: block !important;
97
- }
98
- .flex-from-desktop {
99
- display: flex !important;
100
- }
101
- }
102
-
103
- // // ==========================================================================
104
- // // |--\0/-- up-to-device (up to but not including) --\0/--|
105
- // // --------------------------------------------------------------------------
106
- @include up-to-tablet {
107
- .hide-up-to-tablet {
108
- display: none !important;
109
- }
110
- .block-up-to-tablet {
111
- display: block !important;
112
- }
113
- .flex-up-to-tablet {
114
- display: flex !important;
115
- }
116
- }
117
- @include up-to-desktop {
118
- .hide-up-to-desktop {
119
- display: none !important;
120
- }
121
- .block-up-to-desktop {
122
- display: block !important;
123
- }
124
- .flex-up-to-desktop {
125
- display: flex !important;
126
- }
127
- }
package/tests.html DELETED
@@ -1,252 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="UTF-8">
6
- <meta name="viewport" content="width=device-width,initial-scale=1">
7
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
8
- <link rel="icon" href="./images/favicon.ico">
9
- <link rel="stylesheet" href="../dist/css/jtb.css">
10
- <title>NAYKEL - JTB</title>
11
- </head>
12
-
13
-
14
- <body class="py-3">
15
-
16
-
17
-
18
- <div class="px-5 grid cols-50:50">
19
-
20
-
21
- <div class="bx">
22
- <div class="frm-row inline va-t">
23
- <label>First Name</label>
24
- <div class="flex-col fg1">
25
- <input type="text" placeholder="First Name">
26
- <div class="help"> <small>This is the help text!</small> </div>
27
- </div>
28
- </div>
29
- <div class="frm-row inline">
30
- <label>Email</label>
31
- <input type="email" placeholder="Email">
32
- </div>
33
-
34
- <!-- with form row and with label -->
35
- <div class="frm-row inline">
36
- <label for="">Birthday</label>
37
- <div class="with-icon fg1">
38
- <input placeholder="Placeholder...">
39
- <svg class="icon">
40
- <!-- <use xlink:href="/src/svg/naykel-ui-SVG-sprite.svg#save"></use> -->
41
- </svg>
42
- </div>
43
- </div>
44
-
45
- <div class="frm-row inline">
46
- <label>Phone</label>
47
- <input type="tel" placeholder="Your phone number">
48
- </div>
49
-
50
- <div class="frm-row inline">
51
- <label class="w-2">Department</label>
52
- <select>
53
- <option>Business development</option>
54
- <option>Marketing</option>
55
- <option>Sales</option>
56
- </select>
57
- </div>
58
-
59
- <div class="frm-row inline">
60
- <label>Question?</label>
61
- <div class="space-x">
62
- <label>
63
- <input type="radio" name="member"> Yes
64
- </label>
65
- <label>
66
- <input type="radio" name="member"> No
67
- </label>
68
- </div>
69
- </div>
70
- <div class="frm-row inline">
71
- <label>Another Question?</label>
72
- <div class="space-x">
73
- <label>
74
- <input type="radio" name="member"> Yes
75
- </label>
76
- <label>
77
- <input type="radio" name="member"> No
78
- </label>
79
- <div class="help"> <small>This is the help text!</small> </div>
80
- </div>
81
- </div>
82
-
83
- <div class="frm-row">
84
- <label>Subject</label>
85
- <input type="text" placeholder="e.g. Partnership opportunity">
86
- </div>
87
- <div class="frm-row">
88
- <label>Question</label>
89
- <textarea class="textarea" placeholder="Explain how we can help you"></textarea>
90
- </div>
91
- <div class="frm-row">
92
- <label class="checkbox">
93
- <input type="checkbox">
94
- I agree to the <a href="#">terms and conditions</a>
95
- </label>
96
- </div>
97
- <div class="frm-row items-end">
98
- <button type="submit" class="btn">Submit</button>
99
- </div>
100
- </div>
101
-
102
- <!-- horizontal form -->
103
- <div class="bx">
104
- <div class="grid cols-2">
105
- <div class="frm-row">
106
- <label>First Name</label>
107
- <input type="text" placeholder="First Name">
108
- <div class="help"> <small>This is the help text!</small> </div>
109
- </div>
110
- <div class="frm-row">
111
- <label>Email</label>
112
- <input type="email" placeholder="Email">
113
- </div>
114
- </div>
115
- <div class="frm-row">
116
- <label>Phone</label>
117
- <input type="tel" placeholder="Your phone number">
118
- </div>
119
- <div class="frm-row">
120
- <label>Department</label>
121
- <select>
122
- <option>Business development</option>
123
- <option>Marketing</option>
124
- <option>Sales</option>
125
- </select>
126
- </div>
127
- <div class="frm-row">
128
- <label>Question?</label>
129
- <div class="space-x">
130
- <label>
131
- <input type="radio" name="member"> Yes
132
- </label>
133
- <label>
134
- <input type="radio" name="member"> No
135
- </label>
136
- </div>
137
- </div>
138
- <div class="frm-row">
139
- <label>Question?</label>
140
- <!-- remove div for vertical -->
141
- <label>
142
- <input type="radio" name="member"> Yes
143
- </label>
144
- <label>
145
- <input type="radio" name="member"> No
146
- </label>
147
- </div>
148
- <div class="frm-row">
149
- <label>Subject</label>
150
- <input type="text" placeholder="e.g. Partnership opportunity">
151
- </div>
152
- <div class="frm-row">
153
- <label>Question</label>
154
- <textarea class="textarea" placeholder="Explain how we can help you"></textarea>
155
- </div>
156
-
157
- <div class="frm-row">
158
- <label class="checkbox">
159
- <input type="checkbox">
160
- I agree to the <a href="#">terms and conditions</a>
161
- </label>
162
-
163
- </div>
164
-
165
- <div class="frm-row items-end">
166
- <button type="submit" class="btn">Submit</button>
167
- </div>
168
- </div>
169
-
170
- </div>
171
-
172
- <div class="container">
173
-
174
-
175
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia consectetur laudantium natus nesciunt eligendi obcaecati, aliquam optio. Doloremque nostrum architecto harum quas, delectus ipsum hic nisi dicta natus corrupti reprehenderit repellendus voluptate optio sapiente sunt tenetur accusantium. Amet nihil nam inventore aspernatur aut. Ducimus tempora dignissimos minus obcaecati laudantium culpa? Earum error libero pariatur ea neque minima voluptas et omnis corrupti! Corrupti optio dolore, quod molestias praesentium ducimus perspiciatis beatae tempora. Veritatis error rerum sint praesentium temporibus sit aliquid. Ut sit quo vero. Dolores, esse ipsam! Libero voluptas quo iusto cupiditate cum vero inventore sint tenetur sapiente nesciunt! Excepturi, velit.</p>
176
-
177
- <div class="grid cols-3-3-1">
178
- <div class="bx">
179
- <div class="bx-title">Box Title</div>
180
- <p class="mt-2">Lorem ipsum dolor sit amet dipso consectetur adipisicing elit. Tempore, quibusdam.</p>
181
- </div>
182
- <div class="bx">
183
- <div class="bx-title">Box Title</div>
184
- <p class="mt-2">Lorem ipsum dolor sit amet dipso consectetur adipisicing elit. Tempore, quibusdam.</p>
185
- </div>
186
- <div class="bx">
187
- <div class="bx-title">Box Title</div>
188
- <p class="mt-2">Lorem ipsum dolor sit amet dipso consectetur adipisicing elit. Tempore, quibusdam.</p>
189
- </div>
190
- </div>
191
-
192
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero architecto repudiandae, ab esse voluptatem animi, rem earum omnis ducimus dicta qui deleniti? Eligendi iusto iste inventore consequuntur eveniet tempora, neque exercitationem fuga assumenda a corrupti sint ducimus. Delectus ratione temporibus ea, nemo aperiam soluta quod inventore totam voluptatibus odio deleniti. Ea nobis delectus necessitatibus facere unde vero quam aliquam, quidem fugit laborum ut voluptatum nulla iure ratione natus provident voluptatem.</p>
193
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, dignissimos consectetur. Vel, itaque eligendi reprehenderit iure quidem consequuntur commodi dolorem, adipisci asperiores pariatur nisi assumenda architecto, maxime possimus cumque error ratione odio voluptatum dicta. Fuga, laudantium! Modi saepe debitis ducimus cupiditate sit labore id animi!</p>
194
-
195
- <div class="grid cols-3-3-1">
196
- <div class="bx">
197
- <div class="bx-title">Box Title</div>
198
- <p>Lorem ipsum dolor sit amet dipso consectetur adipisicing elit. Tempore, quibusdam.</p>
199
- </div>
200
- <div class="bx">
201
- <div class="bx-title">Box Title</div>
202
- <p>Lorem ipsum dolor sit amet dipso consectetur adipisicing elit. Tempore, quibusdam.</p>
203
- </div>
204
- <div class="bx">
205
- <div class="bx-title">Box Title</div>
206
- <p>Lorem ipsum dolor sit amet dipso consectetur adipisicing elit. Tempore, quibusdam.</p>
207
- </div>
208
- </div>
209
- </div>
210
- <div class="container">
211
- <h1>Page Heading</h1>
212
- <p class="lead">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aut quisquam maiores, sint officia soluta placeat, quia ipsa quam pariatur ipsam facilis fugiat cum deserunt eum. Voluptatibus velit et temporibus. Magni?</p>
213
-
214
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia consectetur laudantium natus nesciunt eligendi obcaecati, aliquam optio. Doloremque nostrum architecto harum quas, delectus ipsum hic nisi dicta natus corrupti reprehenderit repellendus voluptate optio sapiente sunt tenetur accusantium. Amet nihil nam inventore aspernatur aut. Ducimus tempora dignissimos minus obcaecati laudantium culpa? Earum error libero pariatur ea neque minima voluptas et omnis corrupti! Corrupti optio dolore, quod molestias praesentium ducimus perspiciatis beatae tempora. Veritatis error rerum sint praesentium temporibus sit aliquid. Ut sit quo vero. Dolores, esse ipsam! Libero voluptas quo iusto cupiditate cum vero inventore sint tenetur sapiente nesciunt! Excepturi, velit.</p>
215
-
216
- <div class="grid cols-3-3-1">
217
- <div class="bx">
218
- <div class="bx-title">Box Title</div>
219
- <p class="mt-2">Lorem ipsum dolor sit amet dipso consectetur adipisicing elit. Tempore, quibusdam.</p>
220
- </div>
221
- <div class="bx">
222
- <div class="bx-title">Box Title</div>
223
- <p class="mt-2">Lorem ipsum dolor sit amet dipso consectetur adipisicing elit. Tempore, quibusdam.</p>
224
- </div>
225
- <div class="bx">
226
- <div class="bx-title">Box Title</div>
227
- <p class="mt-2">Lorem ipsum dolor sit amet dipso consectetur adipisicing elit. Tempore, quibusdam.</p>
228
- </div>
229
- </div>
230
-
231
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero architecto repudiandae, ab esse voluptatem animi, rem earum omnis ducimus dicta qui deleniti? Eligendi iusto iste inventore consequuntur eveniet tempora, neque exercitationem fuga assumenda a corrupti sint ducimus. Delectus ratione temporibus ea, nemo aperiam soluta quod inventore totam voluptatibus odio deleniti. Ea nobis delectus necessitatibus facere unde vero quam aliquam, quidem fugit laborum ut voluptatum nulla iure ratione natus provident voluptatem.</p>
232
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, dignissimos consectetur. Vel, itaque eligendi reprehenderit iure quidem consequuntur commodi dolorem, adipisci asperiores pariatur nisi assumenda architecto, maxime possimus cumque error ratione odio voluptatum dicta. Fuga, laudantium! Modi saepe debitis ducimus cupiditate sit labore id animi!</p>
233
-
234
- <div class="grid cols-3-3-1">
235
- <div class="bx">
236
- <div class="bx-title">Box Title</div>
237
- <p>Lorem ipsum dolor sit amet dipso consectetur adipisicing elit. Tempore, quibusdam.</p>
238
- </div>
239
- <div class="bx">
240
- <div class="bx-title">Box Title</div>
241
- <p>Lorem ipsum dolor sit amet dipso consectetur adipisicing elit. Tempore, quibusdam.</p>
242
- </div>
243
- <div class="bx">
244
- <div class="bx-title">Box Title</div>
245
- <p>Lorem ipsum dolor sit amet dipso consectetur adipisicing elit. Tempore, quibusdam.</p>
246
- </div>
247
- </div>
248
- </div>
249
-
250
- <hr>
251
-
252
- </body>