matcha-core 1.1.8 → 1.1.9

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 (5) hide show
  1. package/core.scss +24 -0
  2. package/demo.html +12 -12
  3. package/matcha-core.css +768 -0
  4. package/matcha-core.min.css +1 -1
  5. package/package.json +1 -1
package/core.scss CHANGED
@@ -669,6 +669,30 @@ $helper-breakpoints: (
669
669
  }
670
670
  @include generate-font-size-classes($helper-breakpoints);
671
671
 
672
+ // -----------------------------------------------------------------------------------------------------
673
+ // @ Letter Spacing classes
674
+ // -----------------------------------------------------------------------------------------------------
675
+ @mixin generate-letter-spacing-classes($helper-breakpoints) {
676
+ @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
677
+ @include media-breakpoint($materialBreakpoint) {
678
+ $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
679
+ $index: 0;
680
+ @while $index <= 18 {
681
+ $spacing: $index * 0.1;
682
+ .ls#{$infix}-#{$index} {
683
+ letter-spacing: #{$spacing}em;
684
+ }
685
+ .ls#{$infix}-#{$index}--force {
686
+ letter-spacing: #{$spacing}em !important;
687
+ }
688
+ $index: $index + 1;
689
+ }
690
+
691
+ }
692
+ }
693
+ }
694
+ @include generate-letter-spacing-classes($helper-breakpoints);
695
+
672
696
  // -----------------------------------------------------------------------------------------------------
673
697
  // @ Line Height classes
674
698
  // -----------------------------------------------------------------------------------------------------
package/demo.html CHANGED
@@ -11,9 +11,9 @@
11
11
  <!-- EXEMPLE 2 -->
12
12
  <div class="matcha-card mb-24">
13
13
 
14
- <div class="d-flex d-flex-space-between d-flex-align-center mb-16">
14
+ <div class="d-flex flex-space-between flex-align-center mb-16">
15
15
 
16
- <p class="title d-flex-center-center m-0 matcha-color-label">Row</p>
16
+ <p class="title flex-center-center m-0 matcha-color-label">Row</p>
17
17
 
18
18
 
19
19
  </div>
@@ -59,9 +59,9 @@
59
59
  <!-- EXEMPLE 3 -->
60
60
  <div class="matcha-card mb-24">
61
61
 
62
- <div class="d-flex d-flex-space-between d-flex-align-center mb-16">
62
+ <div class="d-flex flex-space-between flex-align-center mb-16">
63
63
 
64
- <p class="title d-flex-center-center m-0 matcha-color-label">Grid Columns 1/12</p>
64
+ <p class="title flex-center-center m-0 matcha-color-label">Grid Columns 1/12</p>
65
65
 
66
66
 
67
67
  </div>
@@ -155,9 +155,9 @@
155
155
  <!-- EXEMPLE 4 -->
156
156
  <div class="matcha-card mb-24">
157
157
 
158
- <div class="d-flex d-flex-space-between d-flex-align-center mb-16">
158
+ <div class="d-flex flex-space-between flex-align-center mb-16">
159
159
 
160
- <p class="title d-flex-center-center m-0 matcha-color-label">Grid Offset 1/12</p>
160
+ <p class="title flex-center-center m-0 matcha-color-label">Grid Offset 1/12</p>
161
161
 
162
162
 
163
163
  </div>
@@ -265,9 +265,9 @@
265
265
  <!-- EXEMPLE 5 -->
266
266
  <div class="matcha-card mb-24">
267
267
 
268
- <div class="d-flex d-flex-space-between d-flex-align-center mb-16">
268
+ <div class="d-flex flex-space-between flex-align-center mb-16">
269
269
 
270
- <p class="title d-flex-center-center m-0 matcha-color-label">Breakpoints</p>
270
+ <p class="title flex-center-center m-0 matcha-color-label">Breakpoints</p>
271
271
 
272
272
 
273
273
  </div>
@@ -425,9 +425,9 @@
425
425
  <!-- EXEMPLE 6 -->
426
426
  <div class="matcha-card mb-24">
427
427
 
428
- <div class="d-flex d-flex-space-between d-flex-align-center mb-16">
428
+ <div class="d-flex flex-space-between flex-align-center mb-16">
429
429
 
430
- <p class="title d-flex-center-center m-0 matcha-color-label">Vertical Alignment</p>
430
+ <p class="title flex-center-center m-0 matcha-color-label">Vertical Alignment</p>
431
431
 
432
432
 
433
433
  </div>
@@ -473,9 +473,9 @@
473
473
  <!-- EXEMPLE 7 -->
474
474
  <div class="matcha-card mb-24">
475
475
 
476
- <div class="d-flex d-flex-space-between d-flex-align-center mb-16">
476
+ <div class="d-flex flex-space-between flex-align-center mb-16">
477
477
 
478
- <p class="title d-flex-center-center m-0 matcha-color-label">Horizontal Alignment</p>
478
+ <p class="title flex-center-center m-0 matcha-color-label">Horizontal Alignment</p>
479
479
 
480
480
 
481
481
  </div>