matcha-core 1.0.1 → 1.0.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 +60 -69
- 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,26 +388,26 @@ $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
|