matcha-theme 1.0.27 → 18.0.27
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 +1210 -0
- package/matcha-core.css +62385 -0
- package/matcha-core.min.css +1 -0
- package/package.json +1 -1
- package/README.md +0 -304
- package/abstracts/_breakpoints.scss +0 -33
- package/abstracts/_colors.scss +0 -851
- package/abstracts/_elevation.scss +0 -102
- package/abstracts/_functions.scss +0 -424
- package/abstracts/_grid.scss +0 -159
- package/abstracts/_order.scss +0 -46
- package/abstracts/_position.scss +0 -51
- package/abstracts/_sizes.scss +0 -166
- package/abstracts/_spacings.scss +0 -216
- package/abstracts/_typography.scss +0 -124
- package/base/_helpers.scss +0 -2181
- package/base/_reset.scss +0 -9
- package/base/_typography.scss +0 -244
- package/components/matcha-audio-player.scss +0 -37
- package/components/matcha-buttons.scss +0 -170
- package/components/matcha-cards.scss +0 -93
- package/components/matcha-color-pick.scss +0 -32
- package/components/matcha-draggable.scss +0 -25
- package/components/matcha-header.scss +0 -327
- package/components/matcha-horizontal-tree.scss +0 -277
- package/components/matcha-progress-bar.scss +0 -107
- package/components/matcha-scrollbar.scss +0 -36
- package/components/matcha-scrollbox-shadow.scss +0 -127
- package/components/matcha-table.scss +0 -279
- package/css/matcha-style.css +0 -76772
- package/fonts/CircularStd-Black.eot +0 -0
- package/fonts/CircularStd-Black.svg +0 -3426
- package/fonts/CircularStd-Black.ttf +0 -0
- package/fonts/CircularStd-Black.woff +0 -0
- package/fonts/CircularStd-Black.woff2 +0 -0
- package/fonts/CircularStd-Bold.eot +0 -0
- package/fonts/CircularStd-Bold.otf +0 -0
- package/fonts/CircularStd-Bold.svg +0 -13532
- package/fonts/CircularStd-Bold.ttf +0 -0
- package/fonts/CircularStd-Bold.woff +0 -0
- package/fonts/CircularStd-Bold.woff2 +0 -0
- package/fonts/CircularStd-Medium.eot +0 -0
- package/fonts/CircularStd-Medium.otf +0 -0
- package/fonts/CircularStd-Medium.svg +0 -13511
- package/fonts/CircularStd-Medium.ttf +0 -0
- package/fonts/CircularStd-Medium.woff +0 -0
- package/fonts/CircularStd-Medium.woff2 +0 -0
- package/fonts/CircularStd-Regular.eot +0 -0
- package/fonts/CircularStd-Regular.otf +0 -0
- package/fonts/CircularStd-Regular.svg +0 -2378
- package/fonts/CircularStd-Regular.ttf +0 -0
- package/fonts/CircularStd-Regular.woff +0 -0
- package/fonts/CircularStd-Regular.woff2 +0 -0
- package/main.scss +0 -133
- package/tokens/_animations.scss +0 -37
- package/tokens/_breakpoints.scss +0 -38
- package/tokens/_color-tokens.scss +0 -1216
- package/tokens/_elevation-tokens.scss +0 -14
- package/tokens/_spacing-tokens.scss +0 -96
- package/tokens/_typography-tokens.scss +0 -25
- package/vendors/angular-editor.scss +0 -56
- package/vendors/angular-material-fixes.scss +0 -261
- package/vendors/calendar.scss +0 -2880
- package/vendors/charts.scss +0 -92
- package/vendors/ng5-slider.scss +0 -56
- package/vendors/ngx-material-timepicker.scss +0 -50
package/abstracts/_order.scss
DELETED
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
// -----------------------------------------------------------------------------------------------------
|
|
2
|
-
// @ Z-index helpers
|
|
3
|
-
// -----------------------------------------------------------------------------------------------------
|
|
4
|
-
@for $zIndex from -1 through 60 {
|
|
5
|
-
.z-index-#{$zIndex} {
|
|
6
|
-
z-index: #{$zIndex} !important;
|
|
7
|
-
}
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
// -----------------------------------------------------------------------------------------------------
|
|
11
|
-
// @ Order
|
|
12
|
-
// -----------------------------------------------------------------------------------------------------
|
|
13
|
-
@each $breakpoint,
|
|
14
|
-
$breakpointName in $helper-breakpoints {
|
|
15
|
-
@include media-breakpoint($breakpointName) {
|
|
16
|
-
$infix: if($breakpointName ==null, "", "-#{$breakpoint}");
|
|
17
|
-
|
|
18
|
-
/* <integer> values */
|
|
19
|
-
@for $i from -12 through 12 {
|
|
20
|
-
.order#{$infix}-#{$i} {
|
|
21
|
-
order: #{$i};
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
/* Global values */
|
|
26
|
-
.order#{$infix}-inherit {
|
|
27
|
-
order: inherit;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.order#{$infix}-initial {
|
|
31
|
-
order: initial;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.order#{$infix}-revert {
|
|
35
|
-
order: revert;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.order#{$infix}-revert-layer {
|
|
39
|
-
order: revert-layer;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.order#{$infix}-unset {
|
|
43
|
-
order: unset;
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
}
|
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,166 +0,0 @@
|
|
|
1
|
-
// -----------------------------------------------------------------------------------------------------
|
|
2
|
-
// @ Size helpers
|
|
3
|
-
// -----------------------------------------------------------------------------------------------------
|
|
4
|
-
@each $prop, $abbrev in (height: h, width: w) {
|
|
5
|
-
// pixels - Without breakpoint infix
|
|
6
|
-
@for $index from 0 through 64 {
|
|
7
|
-
$size: $index * 4;
|
|
8
|
-
$length: #{$size}px;
|
|
9
|
-
|
|
10
|
-
.#{$abbrev}-#{$size} {
|
|
11
|
-
#{$prop}: $length;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.max-#{$abbrev}-#{$size} {
|
|
15
|
-
max-#{$prop}: $length;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.min-#{$abbrev}-#{$size} {
|
|
19
|
-
min-#{$prop}: $length;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.#{$abbrev}-#{$size}--force {
|
|
23
|
-
#{$prop}: $length !important;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.max-#{$abbrev}-#{$size}--force {
|
|
27
|
-
max-#{$prop}: $length !important;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.min-#{$abbrev}-#{$size}--force {
|
|
31
|
-
min-#{$prop}: $length !important;
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
// percentage - Without breakpoint infix
|
|
36
|
-
@for $i from 0 through 20 {
|
|
37
|
-
$i-p: 5 * $i;
|
|
38
|
-
$size-p: 5% * $i;
|
|
39
|
-
|
|
40
|
-
.#{$abbrev}-#{$i-p}-p {
|
|
41
|
-
#{$prop}: $size-p !important;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.max-#{$abbrev}-#{$i-p}-p {
|
|
45
|
-
max-#{$prop}: $size-p !important;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
.min-#{$abbrev}-#{$i-p}-p {
|
|
49
|
-
min-#{$prop}: $size-p !important;
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
// big sizes - Without breakpoint infix
|
|
54
|
-
@for $i from 3 through 8 {
|
|
55
|
-
$size: $i * 100;
|
|
56
|
-
$length: #{$size}px;
|
|
57
|
-
|
|
58
|
-
.#{$abbrev}-#{$size} {
|
|
59
|
-
#{$prop}: $length !important;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
.max-#{$abbrev}-#{$size} {
|
|
63
|
-
max-#{$prop}: $length !important;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
.min-#{$abbrev}-#{$size} {
|
|
67
|
-
min-#{$prop}: $length !important;
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
// auto - Without breakpoint infix
|
|
72
|
-
.#{$abbrev}-auto {
|
|
73
|
-
#{$prop}: auto !important;
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
@each $breakpoint-infix, $media-size in $helper-breakpoints {
|
|
78
|
-
@include media-breakpoint($media-size) {
|
|
79
|
-
$infix: if($media-size ==null, "", "-#{$breakpoint-infix}");
|
|
80
|
-
|
|
81
|
-
@each $prop, $abbrev in (height: h, width: w) {
|
|
82
|
-
// pixels - With breakpoint infix
|
|
83
|
-
@for $index from 0 through 64 {
|
|
84
|
-
$size: $index * 4;
|
|
85
|
-
$length: #{$size}px;
|
|
86
|
-
|
|
87
|
-
.#{$abbrev}#{$infix}-#{$size} {
|
|
88
|
-
#{$prop}: $length;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
.max-#{$abbrev}#{$infix}-#{$size} {
|
|
92
|
-
max-#{$prop}: $length;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
.min-#{$abbrev}#{$infix}-#{$size} {
|
|
96
|
-
min-#{$prop}: $length;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
.#{$abbrev}#{$infix}-#{$size}--force {
|
|
100
|
-
#{$prop}: $length !important;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
.max-#{$abbrev}#{$infix}-#{$size}--force {
|
|
104
|
-
max-#{$prop}: $length !important;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
.min-#{$abbrev}#{$infix}-#{$size}--force {
|
|
108
|
-
min-#{$prop}: $length !important;
|
|
109
|
-
}
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
// percentage - With breakpoint infix
|
|
113
|
-
@for $i from 0 through 20 {
|
|
114
|
-
$i-p: 5 * $i;
|
|
115
|
-
$size-p: 5% * $i;
|
|
116
|
-
|
|
117
|
-
.#{$abbrev}#{$infix}-#{$i-p}-p {
|
|
118
|
-
#{$prop}: $size-p !important;
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
.max-#{$abbrev}#{$infix}-#{$i-p}-p {
|
|
122
|
-
max-#{$prop}: $size-p !important;
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
.min-#{$abbrev}#{$infix}-#{$i-p}-p {
|
|
126
|
-
min-#{$prop}: $size-p !important;
|
|
127
|
-
}
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
// big sizes - With breakpoint infix
|
|
131
|
-
@for $i from 3 through 8 {
|
|
132
|
-
$size: $i * 100;
|
|
133
|
-
$length: #{$size}px;
|
|
134
|
-
|
|
135
|
-
.#{$abbrev}#{$infix}-#{$size} {
|
|
136
|
-
#{$prop}: $length !important;
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
.max-#{$abbrev}#{$infix}-#{$size} {
|
|
140
|
-
max-#{$prop}: $length !important;
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
.min-#{$abbrev}#{$infix}-#{$size} {
|
|
144
|
-
min-#{$prop}: $length !important;
|
|
145
|
-
}
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
// auto - With breakpoint infix
|
|
149
|
-
.#{$abbrev}#{$infix}-auto {
|
|
150
|
-
#{$prop}: auto !important;
|
|
151
|
-
}
|
|
152
|
-
}
|
|
153
|
-
}
|
|
154
|
-
}
|
|
155
|
-
.max-w-1920{
|
|
156
|
-
max-width: 1920px;
|
|
157
|
-
}
|
|
158
|
-
.max-w-1440{
|
|
159
|
-
max-width: 1440px;
|
|
160
|
-
}
|
|
161
|
-
.max-w-1024{
|
|
162
|
-
max-width: 1024px;
|
|
163
|
-
}
|
|
164
|
-
.max-w-600{
|
|
165
|
-
max-width: 600px;
|
|
166
|
-
}
|
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
|
-
}
|
|
@@ -1,124 +0,0 @@
|
|
|
1
|
-
// -------------------------------------------------------------------------------------------------------------------
|
|
2
|
-
// @ Typography mixins
|
|
3
|
-
// -------------------------------------------------------------------------------------------------------------------
|
|
4
|
-
// Outputs the shorthand `font` CSS property, based on a set of typography values. Falls back to
|
|
5
|
-
// the individual properties if a value that isn't allowed in the shorthand is passed in.
|
|
6
|
-
@mixin matcha-typography-font-shorthand($font-size, $font-weight, $line-height, $font-family) {
|
|
7
|
-
// If any of the values are set to `inherit`, we can't use the shorthand
|
|
8
|
-
// so we fall back to passing in the individual properties.
|
|
9
|
-
@if (
|
|
10
|
-
$font-size
|
|
11
|
-
==inherit or
|
|
12
|
-
$font-weight
|
|
13
|
-
==inherit or
|
|
14
|
-
$line-height
|
|
15
|
-
==inherit or
|
|
16
|
-
$font-family
|
|
17
|
-
==inherit or
|
|
18
|
-
$font-size
|
|
19
|
-
==null or
|
|
20
|
-
$font-weight
|
|
21
|
-
==null or
|
|
22
|
-
$line-height
|
|
23
|
-
==null or
|
|
24
|
-
$font-family
|
|
25
|
-
==null
|
|
26
|
-
) {
|
|
27
|
-
font-size: $font-size;
|
|
28
|
-
font-weight: $font-weight;
|
|
29
|
-
line-height: $line-height;
|
|
30
|
-
font-family: $font-family;
|
|
31
|
-
} @else {
|
|
32
|
-
// Otherwise use the shorthand `font`, because it's the least amount of bytes. Note
|
|
33
|
-
// that we need to use interpolation for `font-size/line-height` in order to prevent
|
|
34
|
-
// Sass from dividing the two values.
|
|
35
|
-
font: $font-weight #{$font-size}/#{$line-height} $font-family;
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
// Converts a typography level into CSS styles.
|
|
40
|
-
@mixin matcha-typography-level-to-styles($config, $level) {
|
|
41
|
-
$font-size: matcha-font-size($config, $level);
|
|
42
|
-
$font-weight: matcha-font-weight($config, $level);
|
|
43
|
-
$line-height: matcha-line-height($config, $level);
|
|
44
|
-
$font-family: matcha-font-family($config, $level);
|
|
45
|
-
|
|
46
|
-
@include matcha-typography-font-shorthand($font-size, $font-weight, $line-height, $font-family);
|
|
47
|
-
letter-spacing: matcha-letter-spacing($config, $level);
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
// Represents a collection of typography levels.
|
|
51
|
-
// Defaults come from https://material.io/guidelines/style/typography.html
|
|
52
|
-
// Note: The spec doesn't mention letter spacing. The values here come from
|
|
53
|
-
// eyeballing it until it looked exactly like the spec examples.
|
|
54
|
-
|
|
55
|
-
// h1 40px headline - bold
|
|
56
|
-
// h2 32px title - medium
|
|
57
|
-
// h3 24px subheading - bold
|
|
58
|
-
// h4 20px subheading - bold
|
|
59
|
-
|
|
60
|
-
// h5-5 18px '' - bold
|
|
61
|
-
// h6 18px '' - bold
|
|
62
|
-
// h7 18px '' - bold
|
|
63
|
-
// h8 12px '' - bold
|
|
64
|
-
|
|
65
|
-
// m 16px body - regular
|
|
66
|
-
// p 14px body - regular
|
|
67
|
-
// small 12px caption - regular
|
|
68
|
-
@mixin matcha-reset-typography($config) {
|
|
69
|
-
// Headings
|
|
70
|
-
.h1,
|
|
71
|
-
h1 {
|
|
72
|
-
font-size: px-to-rem(40px);
|
|
73
|
-
font-family: matcha-font-family($config, title);
|
|
74
|
-
font-weight: matcha-font-weight($config, title);
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
.h2,
|
|
78
|
-
h2 {
|
|
79
|
-
font-size: px-to-rem(32px);
|
|
80
|
-
font-family: matcha-font-family($config, body-2);
|
|
81
|
-
font-weight: matcha-font-weight($config, body-2);
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
.h3,
|
|
85
|
-
h3 {
|
|
86
|
-
font-size: px-to-rem(24px);
|
|
87
|
-
font-family: matcha-font-family($config, title);
|
|
88
|
-
font-weight: matcha-font-weight($config, title);
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
.h4,
|
|
92
|
-
h4 {
|
|
93
|
-
font-size: px-to-rem(20px);
|
|
94
|
-
font-family: matcha-font-family($config, title);
|
|
95
|
-
font-weight: matcha-font-weight($config, title);
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
.h5,
|
|
99
|
-
h5 {
|
|
100
|
-
font-size: px-to-rem(16px);
|
|
101
|
-
font-family: matcha-font-family($config, title);
|
|
102
|
-
font-weight: matcha-font-weight($config, title);
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
.h6,
|
|
106
|
-
h6 {
|
|
107
|
-
font-size: px-to-rem(12px);
|
|
108
|
-
font-family: matcha-font-family($config, subheading-2);
|
|
109
|
-
font-weight: matcha-font-weight($config, subheading-2);
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
.text-bold,
|
|
113
|
-
strong,
|
|
114
|
-
b {
|
|
115
|
-
font-family: matcha-font-family($config, title);
|
|
116
|
-
font-weight: matcha-font-weight($config, title);
|
|
117
|
-
}
|
|
118
|
-
& {
|
|
119
|
-
font-family: matcha-font-family($config, body-1);
|
|
120
|
-
}
|
|
121
|
-
button{
|
|
122
|
-
font-family: matcha-font-family($config, title);
|
|
123
|
-
}
|
|
124
|
-
}
|