matcha-theme 18.0.28 → 18.1.29
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/abstracts/_typography.scss +1 -0
- package/base/_reset.scss +418 -0
- package/components/matcha-cards.scss +0 -1
- package/main.scss +2 -8
- package/package.json +1 -1
- package/abstracts/_breakpoints.scss +0 -33
- package/abstracts/_grid.scss +0 -163
- package/abstracts/_order.scss +0 -46
- package/abstracts/_position.scss +0 -51
- package/abstracts/_sizes.scss +0 -95
- package/abstracts/_spacings.scss +0 -216
- package/base/_helpers.scss +0 -2181
- package/base/_typography.scss +0 -244
package/abstracts/_position.scss
DELETED
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
// -----------------------------------------------------------------------------------------------------
|
|
2
|
-
// @ Absolute position alignment helpers
|
|
3
|
-
// -----------------------------------------------------------------------------------------------------
|
|
4
|
-
@each $breakpoint,
|
|
5
|
-
$materialBreakpoint in $helper-breakpoints {
|
|
6
|
-
@include media-breakpoint($materialBreakpoint) {
|
|
7
|
-
$infix: if($materialBreakpoint ==null, "", "-#{$breakpoint}");
|
|
8
|
-
|
|
9
|
-
.place#{$infix}-top {
|
|
10
|
-
top: 0;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
.place#{$infix}-right {
|
|
14
|
-
right: 0;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
.place#{$infix}-bottom {
|
|
18
|
-
bottom: 0;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
.place#{$infix}-left {
|
|
22
|
-
left: 0;
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
// -----------------------------------------------------------------------------------------------------
|
|
28
|
-
// @ Position helpers
|
|
29
|
-
// -----------------------------------------------------------------------------------------------------
|
|
30
|
-
@each $breakpoint,
|
|
31
|
-
$materialBreakpoint in $helper-breakpoints {
|
|
32
|
-
@include media-breakpoint($materialBreakpoint) {
|
|
33
|
-
$infix: if($materialBreakpoint ==null, "", "-#{$breakpoint}");
|
|
34
|
-
|
|
35
|
-
.position#{$infix}-relative {
|
|
36
|
-
position: relative;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
.position#{$infix}-absolute {
|
|
40
|
-
position: absolute;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
.position#{$infix}-static {
|
|
44
|
-
position: static;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
.position#{$infix}-fixed {
|
|
48
|
-
position: fixed;
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
}
|
package/abstracts/_sizes.scss
DELETED
|
@@ -1,95 +0,0 @@
|
|
|
1
|
-
// -----------------------------------------------------------------------------------------------------
|
|
2
|
-
// @ Size helpers
|
|
3
|
-
// -----------------------------------------------------------------------------------------------------
|
|
4
|
-
// Media step breakpoint mixin based on Angular Material lib
|
|
5
|
-
|
|
6
|
-
@mixin generate-size-classes($prop, $abbrev, $length, $size, $infix: "", $important: false) {
|
|
7
|
-
.#{$abbrev}#{$infix}-#{$size} {
|
|
8
|
-
#{$prop}: $length#{if($important, " !important", "")};
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.max-#{$abbrev}#{$infix}-#{$size} {
|
|
12
|
-
max-#{$prop}: $length#{if($important, " !important", "")};
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
.min-#{$abbrev}#{$infix}-#{$size} {
|
|
16
|
-
min-#{$prop}: $length#{if($important, " !important", "")};
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
@each $prop, $abbrev in (height: h, width: w) {
|
|
21
|
-
// pixels - Without breakpoint infix
|
|
22
|
-
@for $index from 0 through 64 {
|
|
23
|
-
$size: $index * 4;
|
|
24
|
-
$length: #{$size}px;
|
|
25
|
-
|
|
26
|
-
@include generate-size-classes($prop, $abbrev, $length, $size);
|
|
27
|
-
@include generate-size-classes($prop, $abbrev, $length, "#{$size}--force", "", true);
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
// percentage - Without breakpoint infix
|
|
31
|
-
@for $i from 0 through 20 {
|
|
32
|
-
$i-p: 5 * $i;
|
|
33
|
-
$size-p: 5% * $i;
|
|
34
|
-
|
|
35
|
-
@include generate-size-classes($prop, $abbrev, $size-p, "#{$i-p}-p");
|
|
36
|
-
@include generate-size-classes($prop, $abbrev, $size-p, "#{$i-p}-p--force", "", true);
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
// big sizes - Without breakpoint infix
|
|
40
|
-
@for $i from 3 through 8 {
|
|
41
|
-
$size: $i * 100;
|
|
42
|
-
$length: #{$size}px;
|
|
43
|
-
|
|
44
|
-
@include generate-size-classes($prop, $abbrev, $length, $size);
|
|
45
|
-
@include generate-size-classes($prop, $abbrev, $length, "#{$size}--force", "", true);
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
// auto - Without breakpoint infix
|
|
49
|
-
.#{$abbrev}-auto {
|
|
50
|
-
#{$prop}: auto !important;
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
@each $breakpoint-infix, $media-size in $helper-breakpoints {
|
|
55
|
-
@include media-breakpoint($media-size) {
|
|
56
|
-
$infix: if($media-size == null, "", "-#{$breakpoint-infix}");
|
|
57
|
-
|
|
58
|
-
@each $prop, $abbrev in (height: h, width: w) {
|
|
59
|
-
// pixels - With breakpoint infix
|
|
60
|
-
@for $index from 0 through 64 {
|
|
61
|
-
$size: $index * 4;
|
|
62
|
-
$length: #{$size}px;
|
|
63
|
-
|
|
64
|
-
@include generate-size-classes($prop, $abbrev, $length, $size, $infix);
|
|
65
|
-
@include generate-size-classes($prop, $abbrev, $length, "#{$size}--force", $infix, true);
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
// percentage - With breakpoint infix
|
|
69
|
-
@for $i from 0 through 20 {
|
|
70
|
-
$i-p: 5 * $i;
|
|
71
|
-
$size-p: 5% * $i;
|
|
72
|
-
|
|
73
|
-
@include generate-size-classes($prop, $abbrev, $size-p, "#{$i-p}-p", $infix);
|
|
74
|
-
@include generate-size-classes($prop, $abbrev, $size-p, "#{$i-p}-p--force", $infix, true);
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
// big sizes - With breakpoint infix
|
|
78
|
-
@for $i from 3 through 10 {
|
|
79
|
-
$size: $i * 100;
|
|
80
|
-
$length: #{$size}px;
|
|
81
|
-
|
|
82
|
-
@include generate-size-classes($prop, $abbrev, $length, $size, $infix);
|
|
83
|
-
@include generate-size-classes($prop, $abbrev, $length, "#{$size}--force", $infix, true);
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
// auto - With breakpoint infix
|
|
87
|
-
.#{$abbrev}#{$infix}-auto {
|
|
88
|
-
#{$prop}: auto !important;
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
package/abstracts/_spacings.scss
DELETED
|
@@ -1,216 +0,0 @@
|
|
|
1
|
-
// -----------------------------------------------------------------------------------------------------
|
|
2
|
-
// @ Spacing - Margin and Padding
|
|
3
|
-
// Generate spacing values from -64 to 64 jumping from 4 to 4
|
|
4
|
-
// -----------------------------------------------------------------------------------------------------
|
|
5
|
-
@each $breakpoint-infix, $media-size in $helper-breakpoints {
|
|
6
|
-
@include media-breakpoint($media-size) {
|
|
7
|
-
$infix: if($media-size ==null, "", "-#{$breakpoint-infix}");
|
|
8
|
-
|
|
9
|
-
@each $prop, $abbrev in (margin: m, padding: p) {
|
|
10
|
-
@if ($prop ==margin) {
|
|
11
|
-
@for $index from -16 through 16 {
|
|
12
|
-
$size: $index * 4;
|
|
13
|
-
$length: #{$size}px;
|
|
14
|
-
|
|
15
|
-
.#{$abbrev}#{$infix}-#{$size} {
|
|
16
|
-
#{$prop}: $length;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.#{$abbrev}#{$infix}-#{$size}--force {
|
|
20
|
-
#{$prop}: $length !important;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.#{$abbrev}x#{$infix}-#{$size} {
|
|
24
|
-
#{$prop}-right: $length;
|
|
25
|
-
#{$prop}-left: $length;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
.#{$abbrev}y#{$infix}-#{$size} {
|
|
29
|
-
#{$prop}-top: $length;
|
|
30
|
-
#{$prop}-bottom: $length;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.#{$abbrev}x#{$infix}-#{$size}--force {
|
|
34
|
-
#{$prop}-right: $length !important;
|
|
35
|
-
#{$prop}-left: $length !important;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.#{$abbrev}y#{$infix}-#{$size}--force {
|
|
39
|
-
#{$prop}-top: $length !important;
|
|
40
|
-
#{$prop}-bottom: $length !important;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
.#{$abbrev}t#{$infix}-#{$size} {
|
|
44
|
-
#{$prop}-top: $length;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
.#{$abbrev}r#{$infix}-#{$size} {
|
|
48
|
-
#{$prop}-right: $length;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
.#{$abbrev}b#{$infix}-#{$size} {
|
|
52
|
-
#{$prop}-bottom: $length;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
.#{$abbrev}l#{$infix}-#{$size} {
|
|
56
|
-
#{$prop}-left: $length;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.#{$abbrev}t#{$infix}-#{$size}--force {
|
|
60
|
-
#{$prop}-top: $length !important;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
.#{$abbrev}r#{$infix}-#{$size}--force {
|
|
64
|
-
#{$prop}-right: $length !important;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.#{$abbrev}b#{$infix}-#{$size}--force {
|
|
68
|
-
#{$prop}-bottom: $length !important;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
.#{$abbrev}l#{$infix}-#{$size}--force {
|
|
72
|
-
#{$prop}-left: $length !important;
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
// Some special margin utils for flex alignments
|
|
77
|
-
.m#{$infix}-auto {
|
|
78
|
-
margin: auto;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
.mt#{$infix}-auto {
|
|
82
|
-
margin-top: auto;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
.mr#{$infix}-auto {
|
|
86
|
-
margin-right: auto;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
.mb#{$infix}-auto {
|
|
90
|
-
margin-bottom: auto;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
.ml#{$infix}-auto {
|
|
94
|
-
margin-left: auto;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
.mx#{$infix}-auto {
|
|
98
|
-
margin-right: auto;
|
|
99
|
-
margin-left: auto;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
.my#{$infix}-auto {
|
|
103
|
-
margin-top: auto;
|
|
104
|
-
margin-bottom: auto;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
.m#{$infix}-auto--force {
|
|
108
|
-
margin: auto !important;
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
.mt#{$infix}-auto--force {
|
|
112
|
-
margin-top: auto !important;
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
.mr#{$infix}-auto--force {
|
|
116
|
-
margin-right: auto !important;
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
.mb#{$infix}-auto--force {
|
|
120
|
-
margin-bottom: auto !important;
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
.ml#{$infix}-auto--force {
|
|
124
|
-
margin-left: auto !important;
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
.mx#{$infix}-auto--force {
|
|
128
|
-
margin-right: auto !important;
|
|
129
|
-
margin-left: auto !important;
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
.my#{$infix}-auto--force {
|
|
133
|
-
margin-top: auto !important;
|
|
134
|
-
margin-bottom: auto !important;
|
|
135
|
-
}
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
@if ($prop ==padding) {
|
|
139
|
-
@for $index from 0 through 16 {
|
|
140
|
-
$size: $index * 4;
|
|
141
|
-
$length: #{$size}px;
|
|
142
|
-
|
|
143
|
-
.#{$abbrev}#{$infix}-#{$size} {
|
|
144
|
-
#{$prop}: $length;
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
.#{$abbrev}#{$infix}-#{$size}--force {
|
|
148
|
-
#{$prop}: $length !important;
|
|
149
|
-
}
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
@for $index from 0 through 16 {
|
|
153
|
-
$size: $index * 4;
|
|
154
|
-
$length: #{$size}px;
|
|
155
|
-
|
|
156
|
-
.#{$abbrev}x#{$infix}-#{$size} {
|
|
157
|
-
#{$prop}-right: $length;
|
|
158
|
-
#{$prop}-left: $length;
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
.#{$abbrev}y#{$infix}-#{$size} {
|
|
162
|
-
#{$prop}-top: $length;
|
|
163
|
-
#{$prop}-bottom: $length;
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
.#{$abbrev}x#{$infix}-#{$size}--force {
|
|
167
|
-
#{$prop}-right: $length !important;
|
|
168
|
-
#{$prop}-left: $length !important;
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
.#{$abbrev}y#{$infix}-#{$size}--force {
|
|
172
|
-
#{$prop}-top: $length !important;
|
|
173
|
-
#{$prop}-bottom: $length !important;
|
|
174
|
-
}
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
@for $index from 0 through 16 {
|
|
178
|
-
$size: $index * 4;
|
|
179
|
-
$length: #{$size}px;
|
|
180
|
-
|
|
181
|
-
.#{$abbrev}t#{$infix}-#{$size} {
|
|
182
|
-
#{$prop}-top: $length;
|
|
183
|
-
}
|
|
184
|
-
|
|
185
|
-
.#{$abbrev}r#{$infix}-#{$size} {
|
|
186
|
-
#{$prop}-right: $length;
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
.#{$abbrev}b#{$infix}-#{$size} {
|
|
190
|
-
#{$prop}-bottom: $length;
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
.#{$abbrev}l#{$infix}-#{$size} {
|
|
194
|
-
#{$prop}-left: $length;
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
.#{$abbrev}t#{$infix}-#{$size}--force {
|
|
198
|
-
#{$prop}-top: $length !important;
|
|
199
|
-
}
|
|
200
|
-
|
|
201
|
-
.#{$abbrev}r#{$infix}-#{$size}--force {
|
|
202
|
-
#{$prop}-right: $length !important;
|
|
203
|
-
}
|
|
204
|
-
|
|
205
|
-
.#{$abbrev}b#{$infix}-#{$size}--force {
|
|
206
|
-
#{$prop}-bottom: $length !important;
|
|
207
|
-
}
|
|
208
|
-
|
|
209
|
-
.#{$abbrev}l#{$infix}-#{$size}--force {
|
|
210
|
-
#{$prop}-left: $length !important;
|
|
211
|
-
}
|
|
212
|
-
}
|
|
213
|
-
}
|
|
214
|
-
}
|
|
215
|
-
}
|
|
216
|
-
}
|