matcha-theme 1.0.14 → 1.0.16

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 (2) hide show
  1. package/base/_helpers.scss +108 -233
  2. package/package.json +1 -1
@@ -1,184 +1,39 @@
1
1
  // -----------------------------------------------------------------------------------------------------
2
2
  // @ Position helpers
3
3
  // -----------------------------------------------------------------------------------------------------
4
- .position-relative {
5
- position: relative
6
- }
7
-
8
- .position-absolute {
9
- position: absolute
10
- }
11
-
12
- .position-static {
13
- position: static
14
- }
15
-
16
- .position-sticky {
17
- position: sticky
18
- }
19
-
20
- @media screen and (min-width:600px) {
21
- .position-sm-relative {
22
- position: relative
23
- }
24
-
25
- .position-sm-absolute {
26
- position: absolute
27
- }
28
-
29
- .position-sm-static {
30
- position: static
31
- }
32
-
33
- .position-sm-sticky {
34
- position: sticky
35
- }
36
- }
37
-
38
- @media screen and (min-width:1024px) {
39
- .position-md-relative {
40
- position: relative
41
- }
42
-
43
- .position-md-absolute {
44
- position: absolute
45
- }
46
-
47
- .position-md-static {
48
- position: static
49
- }
50
-
51
- .position-md-sticky {
52
- position: sticky
53
- }
54
- }
55
-
56
- @media screen and (min-width:1440px) {
57
- .position-lg-relative {
58
- position: relative
59
- }
60
-
61
- .position-lg-absolute {
62
- position: absolute
63
- }
64
-
65
- .position-lg-static {
66
- position: static
67
- }
68
-
69
- .position-lg-sticky {
70
- position: sticky
4
+ $position-class-names: relative, absolute, static, sticky, fixed, inherit, initial, revert, revert-layer, unset;
5
+ @mixin helper-position($helper-breakpoints){
6
+ @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
7
+ @include media-breakpoint($materialBreakpoint) {
8
+ $infix: if($materialBreakpoint ==null, "", "-#{$breakpoint}");
9
+ @each $position in $position-class-names {
10
+ .position#{$infix}-#{$position} {
11
+ position: #{$position} !important;
12
+ }
13
+ }
14
+ }
71
15
  }
72
16
  }
17
+ @include helper-position($helper-breakpoints);
73
18
 
74
- @media screen and (min-width:1920px) {
75
- .position-xl-relative {
76
- position: relative
77
- }
78
-
79
- .position-xl-absolute {
80
- position: absolute
81
- }
82
-
83
- .position-xl-static {
84
- position: static
85
- }
86
-
87
- .position-xl-sticky {
88
- position: sticky
89
- }
90
- }
91
19
 
92
20
  // -----------------------------------------------------------------------------------------------------
93
21
  // @ Absolute position alignment helpers
94
22
  // -----------------------------------------------------------------------------------------------------
95
- .align-top {
96
- top: 0
97
- }
98
-
99
- .align-right {
100
- right: 0
101
- }
102
-
103
- .align-bottom {
104
- bottom: 0
105
- }
106
-
107
- .align-left {
108
- left: 0
109
- }
110
-
111
- @media screen and (min-width:600px) {
112
- .align-sm-top {
113
- top: 0
114
- }
115
-
116
- .align-sm-right {
117
- right: 0
118
- }
119
-
120
- .align-sm-bottom {
121
- bottom: 0
122
- }
123
-
124
- .align-sm-left {
125
- left: 0
126
- }
127
- }
128
-
129
- @media screen and (min-width:1024px) {
130
- .align-md-top {
131
- top: 0
132
- }
133
-
134
- .align-md-right {
135
- right: 0
136
- }
137
-
138
- .align-md-bottom {
139
- bottom: 0
140
- }
141
-
142
- .align-md-left {
143
- left: 0
144
- }
145
- }
146
-
147
- @media screen and (min-width:1440px) {
148
- .align-lg-top {
149
- top: 0
150
- }
151
-
152
- .align-lg-right {
153
- right: 0
154
- }
155
-
156
- .align-lg-bottom {
157
- bottom: 0
158
- }
159
-
160
- .align-lg-left {
161
- left: 0
162
- }
163
- }
164
-
165
- @media screen and (min-width:1920px) {
166
- .align-xl-top {
167
- top: 0
168
- }
169
-
170
- .align-xl-right {
171
- right: 0
172
- }
173
-
174
- .align-xl-bottom {
175
- bottom: 0
176
- }
177
-
178
- .align-xl-left {
179
- left: 0
23
+ $align-class-names: top, right, bottom, left;
24
+ @mixin helper-alignment-position($helper-breakpoints){
25
+ @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
26
+ @include media-breakpoint($materialBreakpoint) {
27
+ $infix: if($materialBreakpoint ==null, "", "-#{$breakpoint}");
28
+ @each $align in $align-class-names {
29
+ .align#{$infix}-#{$align} {
30
+ #{$align}: 0 !important;
31
+ }
32
+ }
33
+ }
180
34
  }
181
35
  }
36
+ @include helper-alignment-position($helper-breakpoints);
182
37
 
183
38
  // -----------------------------------------------------------------------------------------------------
184
39
  // @ Size helpers
@@ -663,59 +518,85 @@
663
518
  }
664
519
  }
665
520
 
666
- // -----------------------------------------------------------------------------------------------------
667
- // @ Text Style
668
- // -----------------------------------------------------------------------------------------------------
669
- // Text format helpers
670
- .text-decoration-strike,
671
- .text-strike {
672
- text-decoration: line-through !important
673
- }
674
521
 
675
- .text-decoration-none,
676
- .text-none {
677
- text-decoration: none !important
678
- }
679
522
 
680
- .text-super {
681
- vertical-align: super !important
682
- }
683
-
684
- .text-sub {
685
- vertical-align: sub !important
686
- }
687
-
688
- .text-capitalize {
689
- text-transform: capitalize !important
690
- }
691
-
692
- .text-lowercase {
693
- text-transform: lowercase !important
694
- }
695
-
696
- .text-uppercase {
697
- text-transform: uppercase !important
698
- }
699
-
700
- .text-boxed {
701
- border-radius: 2px;
702
- padding: 4px 8px;
703
- margin: 0 8px;
704
- font-size: 11px;
705
- font-weight: 600;
706
- white-space: nowrap
707
- }
708
-
709
- .text-truncate {
710
- display: block;
711
- overflow: hidden;
712
- text-overflow: ellipsis;
713
- white-space: nowrap
714
- }
523
+ // -----------------------------------------------------------------------------------------------------
524
+ // @ Text Helpers
525
+ // -----------------------------------------------------------------------------------------------------
526
+ // Text format helpers text-md-center, text-md-left, text-md-right, text-md-justify, text-md-nowrap, text-md-truncate, text-md-lowercase, text-md-uppercase, text-md-capitalize
715
527
 
716
- .text-nowrap {
717
- white-space: nowrap
528
+ @mixin helper-text-format($helper-breakpoints){
529
+ @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
530
+ @include media-breakpoint($materialBreakpoint) {
531
+ $infix: if($materialBreakpoint ==null, "", "-#{$breakpoint}");
532
+
533
+ .text#{$infix}-decoration-strike,
534
+ .text#{$infix}-strike,
535
+ .text#{$infix}-line-through {
536
+ text-decoration: line-through !important
537
+ }
538
+
539
+ .text#{$infix}-decoration-none,
540
+ .text#{$infix}-none {
541
+ text-decoration: none !important
542
+ }
543
+
544
+ .text#{$infix}-super {
545
+ vertical-align: super !important
546
+ }
547
+
548
+ .text#{$infix}-sub {
549
+ vertical-align: sub !important
550
+ }
551
+
552
+ .text#{$infix}-capitalize {
553
+ text-transform: capitalize !important
554
+ }
555
+
556
+ .text#{$infix}-lowercase {
557
+ text-transform: lowercase !important
558
+ }
559
+
560
+ .text#{$infix}-uppercase {
561
+ text-transform: uppercase !important
562
+ }
563
+
564
+ .text#{$infix}-nowrap {
565
+ white-space: nowrap
566
+ }
567
+
568
+ .text#{$infix}-left {
569
+ text-align: left !important
570
+ }
571
+
572
+ .text#{$infix}-center {
573
+ text-align: center !important
574
+ }
575
+
576
+ .text#{$infix}-right {
577
+ text-align: right !important
578
+ }
579
+
580
+ .text#{$infix}-boxed {
581
+ border-radius: 2px;
582
+ padding: 4px 8px;
583
+ margin: 0 8px;
584
+ font-size: 11px;
585
+ font-weight: 600;
586
+ white-space: nowrap
587
+ }
588
+
589
+ .text#{$infix}-truncate,
590
+ .text#{$infix}-ellipsis {
591
+ display: block;
592
+ overflow: hidden;
593
+ text-overflow: ellipsis;
594
+ white-space: nowrap
595
+ }
596
+ }
597
+ }
718
598
  }
599
+ @include helper-text-format($helper-breakpoints);
719
600
 
720
601
  // -----------------------------------------------------------------------------------------------------
721
602
  // @ Border helpers
@@ -864,6 +745,15 @@
864
745
  overflow-x: hidden
865
746
  }
866
747
 
748
+
749
+ // -----------------------------------------------------------------------------------------------------
750
+ // @ Container helpers
751
+ // -----------------------------------------------------------------------------------------------------
752
+ .matcha-container {
753
+ width: 100%;
754
+ max-width: 1140px;
755
+ }
756
+
867
757
  // -----------------------------------------------------------------------------------------------------
868
758
  // @ Display helpers
869
759
  // -----------------------------------------------------------------------------------------------------
@@ -1932,21 +1822,6 @@
1932
1822
  word-break: break-all
1933
1823
  }
1934
1824
 
1935
- // -----------------------------------------------------------------------------------------------------
1936
- // @ Text Align
1937
- // -----------------------------------------------------------------------------------------------------
1938
- .text-left {
1939
- text-align: left !important
1940
- }
1941
-
1942
- .text-center {
1943
- text-align: center !important
1944
- }
1945
-
1946
- .text-right {
1947
- text-align: right !important
1948
- }
1949
-
1950
1825
  // -----------------------------------------------------------------------------------------------------
1951
1826
  // @ Font Weight
1952
1827
  // -----------------------------------------------------------------------------------------------------
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "matcha-theme",
3
- "version": "1.0.14",
3
+ "version": "1.0.16",
4
4
  "description": "styles for matcha-design-system",
5
5
  "main": "main.scss",
6
6
  "scripts": {