sass-zero 1.1.3 → 1.1.4

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 4c3ae66178979873a6c94299148c552fd111d97667f44bedefa606c06fb47fd8
4
- data.tar.gz: 8dff808e65ba1a32a244187446e6dfc0383fdb16f8c1c2f005a778ad4926c1bf
3
+ metadata.gz: 0ad4305b5b3ca3d7faf90c57c9a04e49bcb8e41d30462cd2462e74344595a826
4
+ data.tar.gz: 0da9bcc60be60b23b01626e6b0cd3eb9f2461a7a1e6191528d22429c6cc8fdd2
5
5
  SHA512:
6
- metadata.gz: 71cc61dc9360ef52fc5422475be79cb687a1cab85e271ad6ed21304401c071a465ad1ea03c7cd1f19c9cdf84ba3e97ce99717b51975c10791bd791e22a81658c
7
- data.tar.gz: 8fdd20c09ebc2d87aa1c140d5e08945dad6582ae9e62080f588763de3eebc3d12dd476bce666918acf4cd3810364eb7247fc69030ed26d4b8cf597e152f9920d
6
+ metadata.gz: f7171112ea81f1b4f2c84a5138a86cd599c73d4204b2df79402cc4efe727ddb6935f03bb0b25a864745d758326e49b6f440fc12088a8f9fd4695b31aa950ecb9
7
+ data.tar.gz: 64f542e05eaa2c1291d7ab1e859da3312eb767295911312b5a78b0d7c67777e8d7f4f0e2f5ddc24f284609fc21b69ea4abc4a51571be94faa7206602e76213e8
@@ -0,0 +1,738 @@
1
+ // *******************************************************************
2
+ // borders.scss
3
+ // *******************************************************************
4
+
5
+ $rounded-none: 0;
6
+ $rounded-sm: 0.125rem;
7
+ $rounded: 0.25rem;
8
+ $rounded-md: 0.375rem;
9
+ $rounded-lg: 0.5rem;
10
+ $rounded-xl: 0.75rem;
11
+ $rounded-2xl: 1rem;
12
+ $rounded-3xl: 1.5rem;
13
+ $rounded-full: 9999px;
14
+
15
+ $border-0: 0;
16
+ $border: 1px;
17
+ $border-2: 2px;
18
+ $border-4: 4px;
19
+ $border-8: 8px;
20
+
21
+ // *******************************************************************
22
+ // breakpoints.scss
23
+ // *******************************************************************
24
+
25
+ $breakpoint-sm: 640px;
26
+ $breakpoint-md: 768px;
27
+ $breakpoint-lg: 1024px;
28
+ $breakpoint-xl: 1280px;
29
+ $breakpoint-2xl: 1536px;
30
+
31
+ // *******************************************************************
32
+ // colors.scss
33
+ // *******************************************************************
34
+
35
+ $transparent: transparent;
36
+ $current: currentColor;
37
+
38
+ $black: #000;
39
+ $white: #fff;
40
+
41
+ $rose-50: #fff1f2;
42
+ $rose-100: #ffe4e6;
43
+ $rose-200: #fecdd3;
44
+ $rose-300: #fda4af;
45
+ $rose-400: #fb7185;
46
+ $rose-500: #f43f5e;
47
+ $rose-600: #e11d48;
48
+ $rose-700: #be123c;
49
+ $rose-800: #9f1239;
50
+ $rose-900: #881337;
51
+
52
+ $pink-50: #fdf2f8;
53
+ $pink-100: #fce7f3;
54
+ $pink-200: #fbcfe8;
55
+ $pink-300: #f9a8d4;
56
+ $pink-400: #f472b6;
57
+ $pink-500: #ec4899;
58
+ $pink-600: #db2777;
59
+ $pink-700: #be185d;
60
+ $pink-800: #9d174d;
61
+ $pink-900: #831843;
62
+
63
+ $fuchsia-50: #fdf4ff;
64
+ $fuchsia-100: #fae8ff;
65
+ $fuchsia-200: #f5d0fe;
66
+ $fuchsia-300: #f0abfc;
67
+ $fuchsia-400: #e879f9;
68
+ $fuchsia-500: #d946ef;
69
+ $fuchsia-600: #c026d3;
70
+ $fuchsia-700: #a21caf;
71
+ $fuchsia-800: #86198f;
72
+ $fuchsia-900: #701a75;
73
+
74
+ $purple-50: #faf5ff;
75
+ $purple-100: #f3e8ff;
76
+ $purple-200: #e9d5ff;
77
+ $purple-300: #d8b4fe;
78
+ $purple-400: #c084fc;
79
+ $purple-500: #a855f7;
80
+ $purple-600: #9333ea;
81
+ $purple-700: #7e22ce;
82
+ $purple-800: #6b21a8;
83
+ $purple-900: #581c87;
84
+
85
+ $violet-50: #f5f3ff;
86
+ $violet-100: #ede9fe;
87
+ $violet-200: #ddd6fe;
88
+ $violet-300: #c4b5fd;
89
+ $violet-400: #a78bfa;
90
+ $violet-500: #8b5cf6;
91
+ $violet-600: #7c3aed;
92
+ $violet-700: #6d28d9;
93
+ $violet-800: #5b21b6;
94
+ $violet-900: #4c1d95;
95
+
96
+ $indigo-50: #eef2ff;
97
+ $indigo-100: #e0e7ff;
98
+ $indigo-200: #c7d2fe;
99
+ $indigo-300: #a5b4fc;
100
+ $indigo-400: #818cf8;
101
+ $indigo-500: #6366f1;
102
+ $indigo-600: #4f46e5;
103
+ $indigo-700: #4338ca;
104
+ $indigo-800: #3730a3;
105
+ $indigo-900: #312e81;
106
+
107
+ $blue-50: #eff6ff;
108
+ $blue-100: #dbeafe;
109
+ $blue-200: #bfdbfe;
110
+ $blue-300: #93c5fd;
111
+ $blue-400: #60a5fa;
112
+ $blue-500: #3b82f6;
113
+ $blue-600: #2563eb;
114
+ $blue-700: #1d4ed8;
115
+ $blue-800: #1e40af;
116
+ $blue-900: #1e3a8a;
117
+
118
+ $sky-50: #f0f9ff;
119
+ $sky-100: #e0f2fe;
120
+ $sky-200: #bae6fd;
121
+ $sky-300: #7dd3fc;
122
+ $sky-400: #38bdf8;
123
+ $sky-500: #0ea5e9;
124
+ $sky-600: #0284c7;
125
+ $sky-700: #0369a1;
126
+ $sky-800: #075985;
127
+ $sky-900: #0c4a6e;
128
+
129
+ $cyan-50: #ecfeff;
130
+ $cyan-100: #cffafe;
131
+ $cyan-200: #a5f3fc;
132
+ $cyan-300: #67e8f9;
133
+ $cyan-400: #22d3ee;
134
+ $cyan-500: #06b6d4;
135
+ $cyan-600: #0891b2;
136
+ $cyan-700: #0e7490;
137
+ $cyan-800: #155e75;
138
+ $cyan-900: #164e63;
139
+
140
+ $teal-50: #f0fdfa;
141
+ $teal-100: #ccfbf1;
142
+ $teal-200: #99f6e4;
143
+ $teal-300: #5eead4;
144
+ $teal-400: #2dd4bf;
145
+ $teal-500: #14b8a6;
146
+ $teal-600: #0d9488;
147
+ $teal-700: #0f766e;
148
+ $teal-800: #115e59;
149
+ $teal-900: #134e4a;
150
+
151
+ $emerald-50: #ecfdf5;
152
+ $emerald-100: #d1fae5;
153
+ $emerald-200: #a7f3d0;
154
+ $emerald-300: #6ee7b7;
155
+ $emerald-400: #34d399;
156
+ $emerald-500: #10b981;
157
+ $emerald-600: #059669;
158
+ $emerald-700: #047857;
159
+ $emerald-800: #065f46;
160
+ $emerald-900: #064e3b;
161
+
162
+ $green-50: #f0fdf4;
163
+ $green-100: #dcfce7;
164
+ $green-200: #bbf7d0;
165
+ $green-300: #86efac;
166
+ $green-400: #4ade80;
167
+ $green-500: #22c55e;
168
+ $green-600: #16a34a;
169
+ $green-700: #15803d;
170
+ $green-800: #166534;
171
+ $green-900: #14532d;
172
+
173
+ $lime-50: #f7fee7;
174
+ $lime-100: #ecfccb;
175
+ $lime-200: #d9f99d;
176
+ $lime-300: #bef264;
177
+ $lime-400: #a3e635;
178
+ $lime-500: #84cc16;
179
+ $lime-600: #65a30d;
180
+ $lime-700: #4d7c0f;
181
+ $lime-800: #3f6212;
182
+ $lime-900: #365314;
183
+
184
+ $yellow-50: #fefce8;
185
+ $yellow-100: #fef9c3;
186
+ $yellow-200: #fef08a;
187
+ $yellow-300: #fde047;
188
+ $yellow-400: #facc15;
189
+ $yellow-500: #eab308;
190
+ $yellow-600: #ca8a04;
191
+ $yellow-700: #a16207;
192
+ $yellow-800: #854d0e;
193
+ $yellow-900: #713f12;
194
+
195
+ $amber-50: #fffbeb;
196
+ $amber-100: #fef3c7;
197
+ $amber-200: #fde68a;
198
+ $amber-300: #fcd34d;
199
+ $amber-400: #fbbf24;
200
+ $amber-500: #f59e0b;
201
+ $amber-600: #d97706;
202
+ $amber-700: #b45309;
203
+ $amber-800: #92400e;
204
+ $amber-900: #78350f;
205
+
206
+ $orange-50: #fff7ed;
207
+ $orange-100: #ffedd5;
208
+ $orange-200: #fed7aa;
209
+ $orange-300: #fdba74;
210
+ $orange-400: #fb923c;
211
+ $orange-500: #f97316;
212
+ $orange-600: #ea580c;
213
+ $orange-700: #c2410c;
214
+ $orange-800: #9a3412;
215
+ $orange-900: #7c2d12;
216
+
217
+ $red-50: #fef2f2;
218
+ $red-100: #fee2e2;
219
+ $red-200: #fecaca;
220
+ $red-300: #fca5a5;
221
+ $red-400: #f87171;
222
+ $red-500: #ef4444;
223
+ $red-600: #dc2626;
224
+ $red-700: #b91c1c;
225
+ $red-800: #991b1b;
226
+ $red-900: #7f1d1d;
227
+
228
+ $warm-gray-50: #fafaf9;
229
+ $warm-gray-100: #f5f5f4;
230
+ $warm-gray-200: #e7e5e4;
231
+ $warm-gray-300: #d6d3d1;
232
+ $warm-gray-400: #a8a29e;
233
+ $warm-gray-500: #78716c;
234
+ $warm-gray-600: #57534e;
235
+ $warm-gray-700: #44403c;
236
+ $warm-gray-800: #292524;
237
+ $warm-gray-900: #1c1917;
238
+
239
+ $true-gray-50: #fafafa;
240
+ $true-gray-100: #f5f5f5;
241
+ $true-gray-200: #e5e5e5;
242
+ $true-gray-300: #d4d4d4;
243
+ $true-gray-400: #a3a3a3;
244
+ $true-gray-500: #737373;
245
+ $true-gray-600: #525252;
246
+ $true-gray-700: #404040;
247
+ $true-gray-800: #262626;
248
+ $true-gray-900: #171717;
249
+
250
+ $gray-50: #fafafa;
251
+ $gray-100: #f4f4f5;
252
+ $gray-200: #e4e4e7;
253
+ $gray-300: #d4d4d8;
254
+ $gray-400: #a1a1aa;
255
+ $gray-500: #71717a;
256
+ $gray-600: #52525b;
257
+ $gray-700: #3f3f46;
258
+ $gray-800: #27272a;
259
+ $gray-900: #18181b;
260
+
261
+ $cool-gray-50: #f9fafb;
262
+ $cool-gray-100: #f3f4f6;
263
+ $cool-gray-200: #e5e7eb;
264
+ $cool-gray-300: #d1d5db;
265
+ $cool-gray-400: #9ca3af;
266
+ $cool-gray-500: #6b7280;
267
+ $cool-gray-600: #4b5563;
268
+ $cool-gray-700: #374151;
269
+ $cool-gray-800: #1f2937;
270
+ $cool-gray-900: #111827;
271
+
272
+ $blue-gray-50: #f8fafc;
273
+ $blue-gray-100: #f1f5f9;
274
+ $blue-gray-200: #e2e8f0;
275
+ $blue-gray-300: #cbd5e1;
276
+ $blue-gray-400: #94a3b8;
277
+ $blue-gray-500: #64748b;
278
+ $blue-gray-600: #475569;
279
+ $blue-gray-700: #334155;
280
+ $blue-gray-800: #1e293b;
281
+ $blue-gray-900: #0f172a;
282
+
283
+ // *******************************************************************
284
+ // effects.scss
285
+ // *******************************************************************
286
+
287
+ $shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
288
+ $shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
289
+ $shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
290
+ $shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
291
+ $shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
292
+ $shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
293
+ $shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
294
+ $shadow-none: none;
295
+
296
+ $opacity-0: 0;
297
+ $opacity-5: 0.05;
298
+ $opacity-10: 0.1;
299
+ $opacity-20: 0.2;
300
+ $opacity-25: 0.25;
301
+ $opacity-30: 0.3;
302
+ $opacity-40: 0.4;
303
+ $opacity-50: 0.5;
304
+ $opacity-60: 0.6;
305
+ $opacity-70: 0.7;
306
+ $opacity-75: 0.75;
307
+ $opacity-80: 0.8;
308
+ $opacity-90: 0.9;
309
+ $opacity-95: 0.95;
310
+ $opacity-100: 1;
311
+
312
+ @function ring($width: 2px, $color: rgba($blue-500, 0.5), $offset-width: 0px, $offset-color: $white, $inset: false) {}
313
+
314
+ // *******************************************************************
315
+ // filters.scss
316
+ // *******************************************************************
317
+
318
+ $blur-none: blur(0);
319
+ $blur-sm: blur(4px);
320
+ $blur: blur(8px);
321
+ $blur-md: blur(12px);
322
+ $blur-lg: blur(16px);
323
+ $blur-xl: blur(24px);
324
+ $blur-2xl: blur(40px);
325
+ $blur-3xl: blur(64px);
326
+
327
+ $brightness-0: brightness(0);
328
+ $brightness-50: brightness(0.5);
329
+ $brightness-75: brightness(0.75);
330
+ $brightness-90: brightness(0.9);
331
+ $brightness-95: brightness(0.95);
332
+ $brightness-100: brightness(1);
333
+ $brightness-105: brightness(1.05);
334
+ $brightness-110: brightness(1.1);
335
+ $brightness-125: brightness(1.25);
336
+ $brightness-150: brightness(1.5);
337
+ $brightness-200: brightness(2);
338
+
339
+ $contrast-0: contrast(0);
340
+ $contrast-50: contrast(0.5);
341
+ $contrast-75: contrast(0.75);
342
+ $contrast-100: contrast(1);
343
+ $contrast-125: contrast(1.25);
344
+ $contrast-150: contrast(1.5);
345
+ $contrast-200: contrast(2);
346
+
347
+ $drop-shadow-none: drop-shadow(0 0 #0000);
348
+ $drop-shadow-sm: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
349
+ $drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
350
+ $drop-shadow-md: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
351
+ $drop-shadow-lg: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
352
+ $drop-shadow-xl: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08));
353
+ $drop-shadow-2xl: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
354
+
355
+ $grayscale-0: grayscale(0);
356
+ $grayscale: grayscale(100%);
357
+
358
+ $hue-rotate-0: hue-rotate(0deg);
359
+ $hue-rotate-15: hue-rotate(15deg);
360
+ $hue-rotate-30: hue-rotate(30deg);
361
+ $hue-rotate-60: hue-rotate(60deg);
362
+ $hue-rotate-90: hue-rotate(90deg);
363
+ $hue-rotate-180: hue-rotate(180deg);
364
+
365
+ $invert-0: invert(0);
366
+ $invert: invert(100%);
367
+
368
+ $saturate-0: saturate(0);
369
+ $saturate-50: saturate(0.5);
370
+ $saturate-100: saturate(1);
371
+ $saturate-150: saturate(1.5);
372
+ $saturate-200: saturate(2);
373
+
374
+ $sepia-0: sepia(0);
375
+ $sepia: sepia(100%);
376
+
377
+ // *******************************************************************
378
+ // flex.scss
379
+ // *******************************************************************
380
+
381
+ $flex-1: 1 1 0%;
382
+ $flex-auto: 1 1 auto;
383
+ $flex-initial: 0 1 auto;
384
+ $flex-none: none;
385
+
386
+ $flex-grow-0: 0;
387
+ $flex-grow: 1;
388
+
389
+ $flex-shrink-0: 0;
390
+ $flex-shrink: 1;
391
+
392
+ // *******************************************************************
393
+ // grid.scss
394
+ // *******************************************************************
395
+
396
+ $grid-cols-1: repeat(1, minmax(0, 1fr));
397
+ $grid-cols-2: repeat(2, minmax(0, 1fr));
398
+ $grid-cols-3: repeat(3, minmax(0, 1fr));
399
+ $grid-cols-4: repeat(4, minmax(0, 1fr));
400
+ $grid-cols-5: repeat(5, minmax(0, 1fr));
401
+ $grid-cols-6: repeat(6, minmax(0, 1fr));
402
+ $grid-cols-7: repeat(7, minmax(0, 1fr));
403
+ $grid-cols-8: repeat(8, minmax(0, 1fr));
404
+ $grid-cols-9: repeat(9, minmax(0, 1fr));
405
+ $grid-cols-10: repeat(10, minmax(0, 1fr));
406
+ $grid-cols-11: repeat(11, minmax(0, 1fr));
407
+ $grid-cols-12: repeat(12, minmax(0, 1fr));
408
+ $grid-cols-none: none;
409
+
410
+ $col-auto: auto;
411
+ $col-span-1: span 1 / span 1;
412
+ $col-span-2: span 2 / span 2;
413
+ $col-span-3: span 3 / span 3;
414
+ $col-span-4: span 4 / span 4;
415
+ $col-span-5: span 5 / span 5;
416
+ $col-span-6: span 6 / span 6;
417
+ $col-span-7: span 7 / span 7;
418
+ $col-span-8: span 8 / span 8;
419
+ $col-span-9: span 9 / span 9;
420
+ $col-span-10: span 10 / span 10;
421
+ $col-span-11: span 11 / span 11;
422
+ $col-span-12: span 12 / span 12;
423
+ $col-span-full: calc(1 / -1);
424
+
425
+ $grid-rows-1: repeat(1, minmax(0, 1fr));
426
+ $grid-rows-2: repeat(2, minmax(0, 1fr));
427
+ $grid-rows-3: repeat(3, minmax(0, 1fr));
428
+ $grid-rows-4: repeat(4, minmax(0, 1fr));
429
+ $grid-rows-5: repeat(5, minmax(0, 1fr));
430
+ $grid-rows-6: repeat(6, minmax(0, 1fr));
431
+ $grid-rows-none: none;
432
+
433
+ $row-auto: auto;
434
+ $row-span-1: span 1 / span 1;
435
+ $row-span-2: span 2 / span 2;
436
+ $row-span-3: span 3 / span 3;
437
+ $row-span-4: span 4 / span 4;
438
+ $row-span-5: span 5 / span 5;
439
+ $row-span-6: span 6 / span 6;
440
+ $row-span-full: calc(1 / -1);
441
+
442
+ $auto-cols-auto: auto;
443
+ $auto-cols-min: min-content;
444
+ $auto-cols-max: max-content;
445
+ $auto-cols-fr: minmax(0, 1fr);
446
+
447
+ $auto-rows-auto: auto;
448
+ $auto-rows-min: min-content;
449
+ $auto-rows-max: max-content;
450
+ $auto-rows-fr: minmax(0, 1fr);
451
+
452
+ // *******************************************************************
453
+ // height.scss
454
+ // *******************************************************************
455
+
456
+ $h-auto: auto;
457
+ $h-1-2: 50%;
458
+ $h-1-3: 33.333333%;
459
+ $h-2-3: 66.666667%;
460
+ $h-1-4: 25%;
461
+ $h-2-4: 50%;
462
+ $h-3-4: 75%;
463
+ $h-1-5: 20%;
464
+ $h-2-5: 40%;
465
+ $h-3-5: 60%;
466
+ $h-4-5: 80%;
467
+ $h-1-6: 16.666667%;
468
+ $h-2-6: 33.333333%;
469
+ $h-3-6: 50%;
470
+ $h-4-6: 66.666667%;
471
+ $h-5-6: 83.333333%;
472
+ $h-full: 100%;
473
+ $h-screen: 100vh;
474
+ $h-min: min-content;
475
+ $h-max: max-content;
476
+ $h-fit: fit-content;
477
+
478
+ $min-h-0: 0px;
479
+ $min-h-full: 100%;
480
+ $min-h-screen: 100vh;
481
+ $min-h-min: min-content;
482
+ $min-h-max: max-content;
483
+ $min-h-fit: fit-content;
484
+
485
+ $max-h-full: 100%;
486
+ $max-h-screen: 100vh;
487
+ $max-h-min: min-content;
488
+ $max-h-max: max-content;
489
+ $max-h-fit: fit-content;
490
+
491
+ // *******************************************************************
492
+ // sizing.scss
493
+ // *******************************************************************
494
+
495
+ $size-px: 1px;
496
+ $size-0: 0;
497
+ $size-1: 0.25rem;
498
+ $size-2: 0.5rem;
499
+ $size-3: 0.75rem;
500
+ $size-4: 1rem;
501
+ $size-5: 1.25rem;
502
+ $size-6: 1.5rem;
503
+ $size-7: 1.75rem;
504
+ $size-8: 2rem;
505
+ $size-9: 2.25rem;
506
+ $size-10: 2.5rem;
507
+ $size-11: 2.75rem;
508
+ $size-12: 3rem;
509
+ $size-14: 3.5rem;
510
+ $size-16: 4rem;
511
+ $size-20: 5rem;
512
+ $size-24: 6rem;
513
+ $size-28: 7rem;
514
+ $size-32: 8rem;
515
+ $size-36: 9rem;
516
+ $size-40: 10rem;
517
+ $size-44: 11rem;
518
+ $size-48: 12rem;
519
+ $size-52: 13rem;
520
+ $size-56: 14rem;
521
+ $size-60: 15rem;
522
+ $size-64: 16rem;
523
+ $size-72: 18rem;
524
+ $size-80: 20rem;
525
+ $size-96: 24rem;
526
+
527
+ // *******************************************************************
528
+ // transform.scss
529
+ // *******************************************************************
530
+
531
+ $scale-0: 0;
532
+ $scale-50: 0.50;
533
+ $scale-75: 0.75;
534
+ $scale-90: 0.90;
535
+ $scale-95: 0.95;
536
+ $scale-100: 1;
537
+ $scale-105: 1.05;
538
+ $scale-110: 1.10;
539
+ $scale-125: 1.25;
540
+ $scale-150: 1.50;
541
+
542
+ $rotate-0: 0deg;
543
+ $rotate-1: 1deg;
544
+ $rotate-2: 2deg;
545
+ $rotate-3: 3deg;
546
+ $rotate-6: 6deg;
547
+ $rotate-12: 12deg;
548
+ $rotate-45: 45deg;
549
+ $rotate-90: 90deg;
550
+ $rotate-180: 180deg;
551
+
552
+ $translate-1-2: 50%;
553
+ $translate-1-3: 33.333333%;
554
+ $translate-2-3: 66.666667%;
555
+ $translate-1-4: 25%;
556
+ $translate-2-4: 50%;
557
+ $translate-3-4: 75%;
558
+ $translate-full: 100%;
559
+
560
+ $skew-0: 0deg;
561
+ $skew-1: 1deg;
562
+ $skew-2: 2deg;
563
+ $skew-3: 3deg;
564
+ $skew-6: 6deg;
565
+ $skew-12: 12deg;
566
+
567
+ // *******************************************************************
568
+ // transition.scss
569
+ // *******************************************************************
570
+
571
+ $transition-none: none;
572
+ $transition-all: all;
573
+ $transition: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
574
+ $transition-colors: background-color, border-color, color, fill, stroke;
575
+ $transition-opacity: opacity;
576
+ $transition-shadow: box-shadow;
577
+ $transition-transform: transform;
578
+
579
+ $duration-75: 75ms;
580
+ $duration-100: 100ms;
581
+ $duration-150: 150ms;
582
+ $duration-200: 200ms;
583
+ $duration-300: 300ms;
584
+ $duration-500: 500ms;
585
+ $duration-700: 700ms;
586
+ $duration-1000: 1000ms;
587
+
588
+ $delay-75: 75ms;
589
+ $delay-100: 100ms;
590
+ $delay-150: 150ms;
591
+ $delay-200: 200ms;
592
+ $delay-300: 300ms;
593
+ $delay-500: 500ms;
594
+ $delay-700: 700ms;
595
+ $delay-1000: 1000ms;
596
+
597
+ $ease-linear: linear;
598
+ $ease-in: cubic-bezier(0.4, 0, 1, 1);
599
+ $ease-out: cubic-bezier(0, 0, 0.2, 1);
600
+ $ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
601
+
602
+ // *******************************************************************
603
+ // typography.scss
604
+ // *******************************************************************
605
+
606
+ $font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
607
+ $font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
608
+ $font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
609
+
610
+ $text-xs: 0.75rem;
611
+ $text-sm: 0.875rem;
612
+ $text-base: 1rem;
613
+ $text-lg: 1.125rem;
614
+ $text-xl: 1.25rem;
615
+ $text-2xl: 1.5rem;
616
+ $text-3xl: 1.875rem;
617
+ $text-4xl: 2.25rem;
618
+ $text-5xl: 3rem;
619
+ $text-6xl: 3.75rem;
620
+ $text-7xl: 4.5rem;
621
+ $text-8xl: 6rem;
622
+ $text-9xl: 8rem;
623
+
624
+ $font-thin: 100;
625
+ $font-extralight: 200;
626
+ $font-light: 300;
627
+ $font-normal: 400;
628
+ $font-medium: 500;
629
+ $font-semibold: 600;
630
+ $font-bold: 700;
631
+ $font-extrabold: 800;
632
+ $font-black: 900;
633
+
634
+ $leading-none: 1;
635
+ $leading-tight: 1.25;
636
+ $leading-snug: 1.375;
637
+ $leading-normal: 1.5;
638
+ $leading-relaxed: 1.625;
639
+ $leading-loose: 2;
640
+ $leading-3: .75rem;
641
+ $leading-4: 1rem;
642
+ $leading-5: 1.25rem;
643
+ $leading-6: 1.5rem;
644
+ $leading-7: 1.75rem;
645
+ $leading-8: 2rem;
646
+ $leading-9: 2.25rem;
647
+ $leading-10: 2.5rem;
648
+
649
+ $tracking-tighter: -0.05em;
650
+ $tracking-tight: -0.025em;
651
+ $tracking-normal: 0em;
652
+ $tracking-wide: 0.025em;
653
+ $tracking-wider: 0.05em;
654
+ $tracking-widest: 0.1em;
655
+
656
+ // *******************************************************************
657
+ // width.scss
658
+ // *******************************************************************
659
+
660
+ $w-auto: auto;
661
+ $w-1-2: 50%;
662
+ $w-1-3: 33.333333%;
663
+ $w-2-3: 66.666667%;
664
+ $w-1-4: 25%;
665
+ $w-2-4: 50%;
666
+ $w-3-4: 75%;
667
+ $w-1-5: 20%;
668
+ $w-2-5: 40%;
669
+ $w-3-5: 60%;
670
+ $w-4-5: 80%;
671
+ $w-1-6: 16.666667%;
672
+ $w-2-6: 33.333333%;
673
+ $w-3-6: 50%;
674
+ $w-4-6: 66.666667%;
675
+ $w-5-6: 83.333333%;
676
+ $w-1-12: 8.333333%;
677
+ $w-2-12: 16.666667%;
678
+ $w-3-12: 25%;
679
+ $w-4-12: 33.333333%;
680
+ $w-5-12: 41.666667%;
681
+ $w-6-12: 50%;
682
+ $w-7-12: 58.333333%;
683
+ $w-8-12: 66.666667%;
684
+ $w-9-12: 75%;
685
+ $w-10-12: 83.333333%;
686
+ $w-11-12: 91.666667%;
687
+ $w-full: 100%;
688
+ $w-screen: 100vw;
689
+ $w-min: min-content;
690
+ $w-max: max-content;
691
+ $w-fit: fit-content;
692
+
693
+ $min-w-0: 0px;
694
+ $min-w-full: 100%;
695
+ $min-w-min: min-content;
696
+ $min-w-max: max-content;
697
+ $min-w-fit: fit-content;
698
+
699
+ $max-w-none: none;
700
+ $max-w-0: 0rem;
701
+ $max-w-xs: 20rem;
702
+ $max-w-sm: 24rem;
703
+ $max-w-md: 28rem;
704
+ $max-w-lg: 32rem;
705
+ $max-w-xl: 36rem;
706
+ $max-w-2xl: 42rem;
707
+ $max-w-3xl: 48rem;
708
+ $max-w-4xl: 56rem;
709
+ $max-w-5xl: 64rem;
710
+ $max-w-6xl: 72rem;
711
+ $max-w-7xl: 80rem;
712
+ $max-w-full: 100%;
713
+ $max-w-min: min-content;
714
+ $max-w-max: max-content;
715
+ $max-w-fit: fit-content;
716
+
717
+ // *******************************************************************
718
+ // zindex.scss
719
+ // *******************************************************************
720
+
721
+ $z-auto: auto;
722
+ $z-0: 0;
723
+ $z-10: 10;
724
+ $z-20: 20;
725
+ $z-30: 30;
726
+ $z-40: 40;
727
+ $z-50: 50;
728
+
729
+ // *******************************************************************
730
+ // mixins.scss
731
+ // *******************************************************************
732
+
733
+ @mixin antialiased {}
734
+ @mixin subpixel-antialiased {}
735
+ @mixin ellipsis {}
736
+ @mixin outline-none {}
737
+ @mixin progress-bar {}
738
+ @mixin make-container($padding-x: $size-4) {}
data/Gemfile.lock CHANGED
@@ -1,7 +1,7 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- sass-zero (1.1.3)
4
+ sass-zero (1.1.4)
5
5
 
6
6
  GEM
7
7
  remote: https://rubygems.org/
data/README.md CHANGED
@@ -1,8 +1,6 @@
1
1
  # SASS-ZERO
2
2
 
3
- SASS-ZERO is a css framework that brings concepts from [tailwindcss](https://tailwindcss.com) and [milligram](https://milligram.io) but with ideas from [BEM](http://getbem.com/naming), [Refactoring UI](https://refactoringui.com/book) and [Shape UP](https://basecamp.com/shapeup).
4
-
5
- ![screenshot](https://nixo-etc.s3-sa-east-1.amazonaws.com/sass-zero-screenshot-3.png)
3
+ SASS-ZERO is a css framework that mixes concepts from [Tailwindcss](https://tailwindcss.com), [Milligram](https://milligram.io), [BEM](http://getbem.com/naming), [Refactoring UI](https://refactoringui.com/book) and [Shape UP](https://basecamp.com/shapeup).
6
4
 
7
5
  ## Installation
8
6
 
@@ -16,42 +14,11 @@ bundle add sass-zero
16
14
  Add these lines to your application.css:
17
15
 
18
16
  ```css
19
- *= require sass-zero/base
20
- *= require sass-zero/utilities
21
- *= require sass-zero/breadboard
17
+ *= require sass-zero/base
18
+ *= require sass-zero/utilities
19
+ *= require sass-zero/breadboard
22
20
  ```
23
21
 
24
- ### Using variables
25
-
26
- Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Variables](https://github.com/lazaronixon/sass-zero/blob/master/vendor/assets/stylesheets/sass-zero/variables.scss):
27
-
28
- ```scss
29
- @import "sass-zero/variables";
30
-
31
- .block {
32
- color: $red-300;
33
-
34
- &__element {
35
- color: $red-400;
36
- }
37
-
38
- &--modifier {
39
- color: $red-500;
40
- }
41
- }
42
- ```
43
-
44
- ```html
45
- <div class="block block--modifier">
46
- <div class="block__element" />
47
- </div>
48
- ```
49
-
50
- ### Breadboard Theme
51
-
52
- - [Example](https://github.com/lazaronixon/sass-zero/blob/master/example/index.html)
53
- - [Breadboard](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/breadboard.scss)
54
-
55
22
  ### Variables
56
23
 
57
24
  - [Border](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/border.scss)
@@ -70,7 +37,7 @@ Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Vari
70
37
  - [Z-Index](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/zindex.scss)
71
38
 
72
39
 
73
- ### Utilities
40
+ ### Utility classes
74
41
 
75
42
  - [Align](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/align.scss)
76
43
  - [Animation](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/animation.scss)
@@ -87,15 +54,53 @@ Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Vari
87
54
  - [Position Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/position.scss)
88
55
  - [List Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/list.scss)
89
56
 
90
- ## References
57
+ ### Breadboard
58
+
59
+ - [Breadboard](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/breadboard.scss)
60
+ - [Example](https://github.com/lazaronixon/sass-zero/blob/master/example.html)
61
+
62
+ ## Breadboard
63
+
64
+ This is an optional black-and-white theme that you can use as design foundation.
65
+
66
+ ![screenshot](https://nixo-etc.s3-sa-east-1.amazonaws.com/sass-zero-screenshot-3.png)
67
+
68
+ ## Using variables
69
+
70
+ Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Variables](https://github.com/lazaronixon/sass-zero/blob/master/vendor/assets/stylesheets/sass-zero/variables.scss):
71
+
72
+ ```scss
73
+ @import "sass-zero/variables";
74
+
75
+ .block {
76
+ color: $red-300;
77
+
78
+ &__element {
79
+ color: $red-400;
80
+ }
81
+
82
+ &--modifier {
83
+ color: $red-500;
84
+ }
85
+ }
86
+ ```
87
+
88
+ ```html
89
+ <div class="block block--modifier">
90
+ <div class="block__element" />
91
+ </div>
92
+ ```
93
+
94
+ ## Editor setup
95
+
96
+ ### Visual Studio Code
97
+
98
+ 1. Install [SCSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss).
99
+ 2. Just copy `.sass-zero-references.scss` to the root of your application.
100
+
101
+ ### Atom/TextMate
91
102
 
92
- - [SASS](https://sass-lang.com)
93
- - [Tailwind CSS](https://tailwindcss.com)
94
- - [Milligram](https://milligram.io)
95
- - [BEM](http://getbem.com/naming)
96
- - [Refactoring UI](https://refactoringui.com/book)
97
- - [Shape UP](https://basecamp.com/shapeup)
98
- - [Boxicons](https://boxicons.com)
103
+ 1. Just copy `.sass-zero-references.scss` to the root of your application.
99
104
 
100
105
  ## Development
101
106
 
@@ -1,5 +1,5 @@
1
1
  module Sass
2
2
  module Zero
3
- VERSION = "1.1.3"
3
+ VERSION = "1.1.4"
4
4
  end
5
5
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: sass-zero
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.1.3
4
+ version: 1.1.4
5
5
  platform: ruby
6
6
  authors:
7
7
  - lazaronixon
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2023-06-19 00:00:00.000000000 Z
11
+ date: 2023-06-30 00:00:00.000000000 Z
12
12
  dependencies: []
13
13
  description:
14
14
  email:
@@ -19,6 +19,7 @@ extra_rdoc_files: []
19
19
  files:
20
20
  - ".github/FUNDING.yml"
21
21
  - ".gitignore"
22
+ - ".sass-zero-references.scss"
22
23
  - ".scss-lint.yml"
23
24
  - Gemfile
24
25
  - Gemfile.lock
@@ -58,7 +59,7 @@ files:
58
59
  - app/assets/stylesheets/sass-zero/variables/typography.scss
59
60
  - app/assets/stylesheets/sass-zero/variables/width.scss
60
61
  - app/assets/stylesheets/sass-zero/variables/zindex.scss
61
- - example/index.html
62
+ - example.html
62
63
  - lib/sass-zero.rb
63
64
  - lib/sass_zero.rb
64
65
  - lib/sass_zero/version.rb
File without changes