matcha-core 1.0.1 → 1.1.2
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/core.scss +112 -74
- package/demo.html +572 -0
- package/matcha-core.css +228 -729
- package/matcha-core.min.css +1 -1
- package/package.json +2 -2
package/core.scss
CHANGED
|
@@ -267,36 +267,36 @@ $helper-breakpoints: (
|
|
|
267
267
|
// -------------------------------------------------------------------------------------------------------------------
|
|
268
268
|
// @ Display classes | Flex and Grid
|
|
269
269
|
// -------------------------------------------------------------------------------------------------------------------
|
|
270
|
-
|
|
271
|
-
$grid-prefix: "col";
|
|
272
270
|
@mixin _grid-prop($i) {
|
|
273
271
|
display: grid;
|
|
274
272
|
grid-template-columns: repeat($i, minmax(0, 1fr));
|
|
275
273
|
}
|
|
276
|
-
@mixin generate-layout-grid($
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
}
|
|
274
|
+
@mixin generate-layout-grid($helper-breakpoints) {
|
|
275
|
+
$grid-length: 12;
|
|
276
|
+
$grid-prefix: "col";
|
|
277
|
+
// @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
|
|
278
|
+
// @include media-breakpoint($materialBreakpoint) {
|
|
279
|
+
// $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
|
|
280
|
+
|
|
281
|
+
// .row#{$infix} {
|
|
282
|
+
// display: flex;
|
|
283
|
+
// flex-direction: column;
|
|
284
|
+
// }
|
|
285
|
+
|
|
286
|
+
// @for $i from 1 through $grid-length {
|
|
287
|
+
// .row#{$infix} > .#{$grid-prefix}-#{$i} {
|
|
288
|
+
// flex-basis: #{($i / $grid-length) * 100%};
|
|
289
|
+
// }
|
|
290
|
+
// .row#{$infix} > .#{$grid-prefix}-offset-#{$i} {
|
|
291
|
+
// margin-left: #{($i / $grid-length) * 100%};
|
|
292
|
+
// }
|
|
293
|
+
// }
|
|
294
|
+
|
|
295
|
+
// .row#{$infix} {
|
|
296
|
+
// flex-direction: row;
|
|
297
|
+
// }
|
|
298
|
+
// }
|
|
299
|
+
// }
|
|
300
300
|
|
|
301
301
|
[class^="grid-"] {
|
|
302
302
|
display: grid;
|
|
@@ -325,7 +325,9 @@ $grid-prefix: "col";
|
|
|
325
325
|
}
|
|
326
326
|
}
|
|
327
327
|
}
|
|
328
|
-
@mixin generate-layout-flex($
|
|
328
|
+
@mixin generate-layout-flex($helper-breakpoints) {
|
|
329
|
+
$grid-length: 12;
|
|
330
|
+
$grid-prefix: "col";
|
|
329
331
|
.row {
|
|
330
332
|
display: flex;
|
|
331
333
|
flex-wrap: wrap;
|
|
@@ -338,47 +340,36 @@ $grid-prefix: "col";
|
|
|
338
340
|
flex: 1;
|
|
339
341
|
}
|
|
340
342
|
|
|
341
|
-
@for $i from 1 through $grid-length {
|
|
342
|
-
.#{$grid-prefix}-#{$i} {
|
|
343
|
-
flex-basis: #{($i / $grid-length) * 100%};
|
|
344
|
-
}
|
|
345
|
-
|
|
346
|
-
.#{$grid-prefix}-offset-#{$i} {
|
|
347
|
-
margin-left: #{($i / $grid-length) * 100%};
|
|
348
|
-
}
|
|
349
|
-
}
|
|
350
|
-
|
|
351
343
|
@each $breakpoint, $materialBreakpoint in $helper-breakpoints {
|
|
352
344
|
@include media-breakpoint($materialBreakpoint) {
|
|
353
345
|
$infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
|
|
354
346
|
|
|
355
347
|
@for $i from 1 through $grid-length {
|
|
356
348
|
.#{$grid-prefix}#{$infix}-#{$i} {
|
|
357
|
-
flex-basis: 100
|
|
349
|
+
flex-basis: #{($i / $grid-length) * 100%};
|
|
358
350
|
}
|
|
359
351
|
|
|
360
352
|
.#{$grid-prefix}-offset#{$infix}-#{$i} {
|
|
361
|
-
margin-left:
|
|
353
|
+
margin-left: #{($i / $grid-length) * 100%};
|
|
354
|
+
}
|
|
355
|
+
}
|
|
356
|
+
@each $classLabel, $cssValue in (align-start flex-start, align-center center, align-end flex-end) {
|
|
357
|
+
> div[class*="#{$grid-prefix}-"].#{$classLabel} {
|
|
358
|
+
align-self: $cssValue;
|
|
362
359
|
}
|
|
363
360
|
}
|
|
364
|
-
}
|
|
365
|
-
}
|
|
366
|
-
|
|
367
|
-
@each $classLabel, $cssValue in (align-start flex-start, align-center center, align-end flex-end) {
|
|
368
|
-
> div[class*="#{$grid-prefix}-"].#{$classLabel} {
|
|
369
|
-
align-self: $cssValue;
|
|
370
|
-
}
|
|
371
|
-
}
|
|
372
361
|
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
362
|
+
@each $classLabel, $cssValue in (align-start flex-start, align-center center, align-end flex-end, space-around space-around, space-between space-between) {
|
|
363
|
+
&.#{$classLabel} {
|
|
364
|
+
justify-content: $cssValue;
|
|
365
|
+
}
|
|
366
|
+
}
|
|
376
367
|
}
|
|
377
368
|
}
|
|
378
369
|
}
|
|
379
370
|
}
|
|
380
|
-
@include generate-layout-grid($
|
|
381
|
-
@include generate-layout-flex($
|
|
371
|
+
@include generate-layout-grid($helper-breakpoints);
|
|
372
|
+
@include generate-layout-flex($helper-breakpoints);
|
|
382
373
|
|
|
383
374
|
// -------------------------------------------------------------------------------------------------------------------
|
|
384
375
|
// @Gaps classes
|
|
@@ -397,42 +388,40 @@ $grid-prefix: "col";
|
|
|
397
388
|
}
|
|
398
389
|
}
|
|
399
390
|
}
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
row-gap: 16px;
|
|
407
|
-
}
|
|
408
|
-
.gap-outside {
|
|
409
|
-
-moz-column-gap: 16px;
|
|
410
|
-
column-gap: 16px;
|
|
411
|
-
row-gap: 16px;
|
|
412
|
-
}
|
|
413
|
-
@media screen and (min-width: 600px) {
|
|
391
|
+
// Dynamic gaps
|
|
392
|
+
.gap-inside {
|
|
393
|
+
-moz-column-gap: 16px;
|
|
394
|
+
column-gap: 16px;
|
|
395
|
+
row-gap: 16px;
|
|
396
|
+
}
|
|
414
397
|
.gap-outside {
|
|
415
|
-
-moz-column-gap:
|
|
416
|
-
column-gap:
|
|
417
|
-
row-gap:
|
|
398
|
+
-moz-column-gap: 16px;
|
|
399
|
+
column-gap: 16px;
|
|
400
|
+
row-gap: 16px;
|
|
401
|
+
}
|
|
402
|
+
@media screen and (min-width: 600px) {
|
|
403
|
+
.gap-outside {
|
|
404
|
+
-moz-column-gap: 24px;
|
|
405
|
+
column-gap: 24px;
|
|
406
|
+
row-gap: 24px;
|
|
407
|
+
}
|
|
418
408
|
}
|
|
419
409
|
}
|
|
410
|
+
@include generate-gap-classes($helper-breakpoints);
|
|
420
411
|
|
|
421
412
|
// -----------------------------------------------------------------------------------------------------
|
|
422
413
|
// @ Z-index classes
|
|
423
414
|
// -----------------------------------------------------------------------------------------------------
|
|
424
|
-
@mixin generate-z-index-classes($
|
|
415
|
+
@mixin generate-z-index-classes($helper-breakpoints) {
|
|
416
|
+
$zIndex: 24;
|
|
425
417
|
@each $breakpoint, $materialBreakpoint in $helper-breakpoints {
|
|
426
418
|
@include media-breakpoint($materialBreakpoint) {
|
|
427
|
-
|
|
428
419
|
@for $z from -1 through $zIndex {
|
|
429
420
|
$class-name: if($materialBreakpoint == null, ".z-index-#{$z}", ".z-index-#{$materialBreakpoint}-#{$z}");
|
|
430
421
|
$class-name-force: if($materialBreakpoint == null, ".z-index-#{$z}--force", ".z-index-#{$materialBreakpoint}-#{$z}--force");
|
|
431
|
-
|
|
432
422
|
#{$class-name} {
|
|
433
423
|
z-index: #{$z};
|
|
434
424
|
}
|
|
435
|
-
|
|
436
425
|
#{$class-name-force} {
|
|
437
426
|
z-index: #{$z} !important;
|
|
438
427
|
}
|
|
@@ -440,7 +429,7 @@ $grid-prefix: "col";
|
|
|
440
429
|
}
|
|
441
430
|
}
|
|
442
431
|
}
|
|
443
|
-
@include generate-z-index-classes(
|
|
432
|
+
@include generate-z-index-classes($helper-breakpoints);
|
|
444
433
|
|
|
445
434
|
// -----------------------------------------------------------------------------------------------------
|
|
446
435
|
// @ Order classes
|
|
@@ -612,6 +601,24 @@ $grid-prefix: "col";
|
|
|
612
601
|
}
|
|
613
602
|
}
|
|
614
603
|
}
|
|
604
|
+
// For margins, include negative values
|
|
605
|
+
@for $index from 0 through 3 {
|
|
606
|
+
.flex#{$infix}-grow-#{$index} {
|
|
607
|
+
flex-grow: $index;
|
|
608
|
+
}
|
|
609
|
+
.flex#{$infix}-shrink-#{$index} {
|
|
610
|
+
flex-shrink: $index;
|
|
611
|
+
}
|
|
612
|
+
}
|
|
613
|
+
.flex#{$infix}-full {
|
|
614
|
+
flex-grow: 1;
|
|
615
|
+
flex-shrink: 1;
|
|
616
|
+
flex-basis: 100%;
|
|
617
|
+
;
|
|
618
|
+
}
|
|
619
|
+
.flex#{$infix}-basis-1 {
|
|
620
|
+
flex-basis: 100%;
|
|
621
|
+
}
|
|
615
622
|
}
|
|
616
623
|
}
|
|
617
624
|
}
|
|
@@ -1208,3 +1215,34 @@ $grid-prefix: "col";
|
|
|
1208
1215
|
}
|
|
1209
1216
|
}
|
|
1210
1217
|
@include generate-rotate-animation-classes();
|
|
1218
|
+
|
|
1219
|
+
// -----------------------------------------------------------------------------------------------------
|
|
1220
|
+
// @ Border Size Helpers
|
|
1221
|
+
// -----------------------------------------------------------------------------------------------------
|
|
1222
|
+
@mixin generate-line-clamp-classes($helper-breakpoints){
|
|
1223
|
+
@each $breakpoint, $materialBreakpoint in $helper-breakpoints {
|
|
1224
|
+
@include media-breakpoint($materialBreakpoint) {
|
|
1225
|
+
$infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
|
|
1226
|
+
@for $i from 0 through 6 {
|
|
1227
|
+
// Classes para borda geral
|
|
1228
|
+
.line-clamp#{$infix}-#{$i}{
|
|
1229
|
+
overflow: hidden;
|
|
1230
|
+
display: -webkit-box;
|
|
1231
|
+
-webkit-box-orient: vertical;
|
|
1232
|
+
-webkit-line-clamp: $i;
|
|
1233
|
+
text-overflow: ellipsis;
|
|
1234
|
+
word-break: break-word;
|
|
1235
|
+
white-space: initial;
|
|
1236
|
+
-webkit-box-orient: vertical;
|
|
1237
|
+
}
|
|
1238
|
+
}
|
|
1239
|
+
.line-clamp#{$infix}-none{
|
|
1240
|
+
overflow: visible;
|
|
1241
|
+
display: block;
|
|
1242
|
+
-webkit-box-orient: horizontal;
|
|
1243
|
+
-webkit-line-clamp: none;
|
|
1244
|
+
}
|
|
1245
|
+
}
|
|
1246
|
+
}
|
|
1247
|
+
}
|
|
1248
|
+
@include generate-line-clamp-classes($helper-breakpoints);
|