matcha-theme 18.1.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.
Files changed (13) hide show
  1. package/abstracts/_typography.scss +1 -0
  2. package/base/_reset.scss +418 -0
  3. package/components/matcha-cards.scss +0 -1
  4. package/main.scss +1 -11
  5. package/package.json +1 -1
  6. package/abstracts/_breakpoints.scss +0 -33
  7. package/abstracts/_grid.scss +0 -163
  8. package/abstracts/_order.scss +0 -46
  9. package/abstracts/_position.scss +0 -51
  10. package/abstracts/_sizes.scss +0 -95
  11. package/abstracts/_spacings.scss +0 -216
  12. package/base/_helpers.scss +0 -171
  13. 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
- }
package/base/_helpers.scss DELETED
@@ -1,171 +0,0 @@
1
- // -----------------------------------------------------------------------------------------------------
2
- // @ Container helpers
3
- // -----------------------------------------------------------------------------------------------------
4
- .matcha-container {
5
- width: 100%;
6
- max-width: 1128px;
7
- margin-left:auto;
8
- margin-right:auto;
9
- }
10
-
11
- // -----------------------------------------------------------------------------------------------------
12
- // @ Combo helpers
13
- // -----------------------------------------------------------------------------------------------------
14
- .combo-image-text,
15
- .combo-checkbox-text,
16
- .combo-icon-text,
17
- .combo-double-line {
18
- display: flex;
19
- align-items: center;
20
- }
21
-
22
- .combo-image-text .side-text,
23
- .combo-checkbox-text .side-text,
24
- .combo-icon-text .side-text,
25
- .combo-double-line .side-text {
26
- display: inline-block;
27
- width: calc(100% - 48px);
28
- line-height: 20px;
29
- -webkit-line-clamp: 2;
30
- overflow: hidden;
31
- text-overflow: ellipsis;
32
- word-break: break-word;
33
- white-space: initial;
34
- -webkit-box-orient: vertical;
35
- }
36
-
37
- .combo-image-text .avatar,
38
- .combo-checkbox-text .avatar,
39
- .combo-icon-text .avatar,
40
- .combo-double-line .avatar {
41
- border-radius: 50px;
42
- min-width: 24px;
43
- min-height: 24px;
44
- }
45
-
46
- .one-line-text {
47
- line-height: 20px;
48
- display: -webkit-box;
49
- -webkit-line-clamp: 1;
50
- }
51
-
52
- .two-lines-text {
53
- line-height: 20px;
54
- display: -webkit-box;
55
- -webkit-line-clamp: 2;
56
- }
57
-
58
- .three-lines-text {
59
- line-height: 20px;
60
- display: -webkit-box;
61
- -webkit-line-clamp: 3;
62
- }
63
-
64
- .four-lines-text {
65
- line-height: 20px;
66
- display: -webkit-box;
67
- -webkit-line-clamp: 4;
68
- }
69
-
70
- .five-lines-text {
71
- line-height: 20px;
72
- display: -webkit-box;
73
- -webkit-line-clamp: 5;
74
- }
75
-
76
- .one-line-text,
77
- .two-lines-text,
78
- .three-lines-text,
79
- .four-lines-text,
80
- .five-lines-text {
81
- overflow: hidden;
82
- text-overflow: ellipsis;
83
- word-break: break-word;
84
- white-space: initial;
85
- -webkit-box-orient: vertical;
86
- }
87
- .word-break {
88
- word-break: break-word
89
- }
90
- .word-break-all {
91
- word-break: break-all
92
- }
93
-
94
- // -----------------------------------------------------------------------------------------------------
95
- // @ Letter spacing helpers
96
- // -----------------------------------------------------------------------------------------------------
97
- .letter-spacing-condensed {
98
- letter-spacing: -.08em !important;
99
- }
100
- .letter-spacing-normal {
101
- letter-spacing: normal !important;
102
- }
103
- .letter-spacing-relaxed {
104
- letter-spacing: .08em !important;
105
- }
106
-
107
- // -----------------------------------------------------------------------------------------------------
108
- // @ Cursor helpers
109
- // -----------------------------------------------------------------------------------------------------
110
- .pointer-events-all {
111
- pointer-events: all
112
- }
113
- .pointer-events-none {
114
- pointer-events: none
115
- }
116
-
117
- // -----------------------------------------------------------------------------------------------------
118
- // @ Clear Shadows
119
- // -----------------------------------------------------------------------------------------------------
120
- .flatten,
121
- .no-shadow,
122
- .shadow-none {
123
- box-shadow: none !important;
124
- }
125
-
126
- // -----------------------------------------------------------------------------------------------------
127
- // @ Enable/Disable
128
- // -----------------------------------------------------------------------------------------------------
129
- .disabled {
130
- transition: opacity 100ms linear;
131
- opacity: .5;
132
- pointer-events: none
133
- }
134
- .enabled {
135
- transition: opacity 100ms linear;
136
- opacity: 1
137
- }
138
-
139
-
140
- // -----------------------------------------------------------------------------------------------------
141
- // @ Hover - Show/Hide
142
- // -----------------------------------------------------------------------------------------------------
143
- .on-hover-show:hover {
144
- opacity: 1;
145
- }
146
- .on-hover-hide:hover {
147
- opacity: 0;
148
- }
149
-
150
- // -----------------------------------------------------------------------------------------------------
151
- // @ Float
152
- // -----------------------------------------------------------------------------------------------------
153
- .clearfix::after {
154
- content: "";
155
- clear: both;
156
- display: table;
157
- }
158
- .left {
159
- float: left;
160
- }
161
- .right {
162
- float: right;
163
- }
164
- .list,
165
- .list-style-none {
166
- list-style: none;
167
- }
168
- .list-style-disc,
169
- .list-style-dot {
170
- list-style: disc;
171
- }