kmaterialize 2.0.0 → 2.3.3-1.0.1

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 (156) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +55 -91
  3. package/components/appbar/_navbar.old.scss +223 -0
  4. package/components/appbar/appbar.css +235 -0
  5. package/components/appbar/appbar.mjs +54 -0
  6. package/components/appbar/appbar.test.mjs +9 -0
  7. package/components/atomic/atomic.mjs +19 -0
  8. package/components/atomic/component.mjs +67 -0
  9. package/components/badge/_badges.scss +75 -0
  10. package/components/badge/badge.mjs +11 -0
  11. package/components/breadcrumb/_breadcrumb.scss +27 -0
  12. package/components/button/_buttons.scss +352 -0
  13. package/components/button/button.mjs +11 -0
  14. package/components/button/buttons.stories.ts +150 -0
  15. package/components/button/buttons.ts +282 -0
  16. package/components/button/examples.iso.js +18 -0
  17. package/components/button/fabSpec.js +65 -0
  18. package/components/button/test-button.mjs +16 -0
  19. package/components/card/_cards.scss +229 -0
  20. package/components/card/card.mjs +10 -0
  21. package/components/card/cards.ts +185 -0
  22. package/components/card/cardsSpec.js +269 -0
  23. package/components/carousel/_carousel.scss +93 -0
  24. package/components/carousel/_slider.scss +119 -0
  25. package/components/carousel/carousel.ts +693 -0
  26. package/components/carousel/carouselSpec.js +61 -0
  27. package/components/carousel/slider.ts +431 -0
  28. package/components/carousel/sliderSpec.js +99 -0
  29. package/components/checkbox/_checkboxes.scss +281 -0
  30. package/components/checkbox/checkbox.mdx +24 -0
  31. package/components/checkbox/checkbox.stories.ts +120 -0
  32. package/components/chip/chip.mjs +37 -0
  33. package/components/chip/chip.test.mjs +10 -0
  34. package/components/chip/chips.css +126 -0
  35. package/components/chip/chips.mdx +33 -0
  36. package/components/chip/chips.ts +440 -0
  37. package/components/chip/chipsSpec.js +165 -0
  38. package/components/chip/readme.md +323 -0
  39. package/components/collapsible/_collapsible.scss +82 -0
  40. package/components/collapsible/collapsible.ts +230 -0
  41. package/components/collapsible/collapsibleSpec.js +240 -0
  42. package/components/datepicker/_datepicker.scss +268 -0
  43. package/components/datepicker/datepicker.ts +1450 -0
  44. package/components/datepicker/datepickerSpec.js +162 -0
  45. package/components/dialog/_materialbox.scss +42 -0
  46. package/components/dialog/_modal.scss +79 -0
  47. package/components/dialog/materialbox.ts +446 -0
  48. package/components/dialog/materialboxSpec.js +37 -0
  49. package/components/dialog/modal.ts +111 -0
  50. package/components/dialog/modalSpec.js +83 -0
  51. package/components/dialog/readme.md +5 -0
  52. package/components/divider/readme.md +15 -0
  53. package/components/dropdown/_dropdown.scss +83 -0
  54. package/components/dropdown/dropdown.ts +653 -0
  55. package/components/dropdown/dropdownSpec.js +108 -0
  56. package/components/list/_collection.scss +114 -0
  57. package/components/list/_list.scss +6 -0
  58. package/components/list/list.mjs +58 -0
  59. package/components/list/list.test.mjs +16 -0
  60. package/components/loading/loading.mjs +26 -0
  61. package/components/loading/loading.test.mjs +10 -0
  62. package/components/navigation-bar/_old +582 -0
  63. package/components/navigation-bar/navigation-bar.mdx +20 -0
  64. package/components/navigation-bar/navigation-bar.stories.ts +39 -0
  65. package/components/navigation-drawer/_sidenav.scss +247 -0
  66. package/components/navigation-drawer/sidenav.ts +546 -0
  67. package/components/navigation-drawer/sidenavSpec.js +124 -0
  68. package/components/pagination/_pagination.scss +47 -0
  69. package/components/progress/_preloader.scss +416 -0
  70. package/components/radio-button/_radio-buttons.scss +112 -0
  71. package/components/radio-button/radio-buttons.mdx +28 -0
  72. package/components/radio-button/radio-buttons.stories.ts +51 -0
  73. package/components/search/autocomplete.ts +620 -0
  74. package/components/search/autocompleteSpec.js +321 -0
  75. package/components/slider/_range.scss +157 -0
  76. package/components/slider/range.ts +216 -0
  77. package/components/snackbar/_toast.scss +68 -0
  78. package/components/snackbar/toastSpec.js +132 -0
  79. package/components/snackbar/toasts.ts +312 -0
  80. package/components/switch/_switches.scss +121 -0
  81. package/components/tabs/_tabs.scss +171 -0
  82. package/components/tabs/tabs.mjs +31 -0
  83. package/components/tabs/tabs.ts +358 -0
  84. package/components/tabs/tabsSpec.js +180 -0
  85. package/components/textfield/_file-input.scss +41 -0
  86. package/components/textfield/_input-fields.scss +368 -0
  87. package/components/textfield/_select.scss +104 -0
  88. package/components/textfield/formfields.css +311 -0
  89. package/components/textfield/forms.ts +182 -0
  90. package/components/textfield/formsSpec.js +142 -0
  91. package/components/textfield/select.ts +472 -0
  92. package/components/textfield/selectSpec.js +390 -0
  93. package/components/textfield/textfield.mjs +29 -0
  94. package/components/textfield/textfield.test.mjs +10 -0
  95. package/components/timepicker/_timepicker.scss +362 -0
  96. package/components/timepicker/timepicker.ts +905 -0
  97. package/components/tooltip/_tooltip.scss +40 -0
  98. package/components/tooltip/tooltip.ts +380 -0
  99. package/components/tooltip/tooltipSpec.js +145 -0
  100. package/dist/css/materialize.colors.min.css +6 -0
  101. package/dist/css/materialize.css +7578 -6326
  102. package/dist/css/materialize.min.css +6 -13
  103. package/dist/css/materialize.min.css.map +1 -0
  104. package/dist/js/materialize.cjs.js +8410 -0
  105. package/dist/js/materialize.d.ts +2625 -0
  106. package/dist/js/materialize.js +8415 -12374
  107. package/dist/js/materialize.min.js +6 -6
  108. package/dist/js/materialize.mjs +8382 -0
  109. package/package.json +82 -47
  110. package/sass/_colors.scss +417 -0
  111. package/sass/_global.scss +490 -0
  112. package/sass/_grid.scss +172 -0
  113. package/sass/_table_of_contents.scss +28 -0
  114. package/sass/_tapTarget.scss +102 -0
  115. package/sass/_typography.scss +58 -0
  116. package/sass/_variables.scss +56 -0
  117. package/sass/colors.module.css +74 -0
  118. package/sass/materialize.scss +51 -0
  119. package/sass/mixins.module.scss +168 -0
  120. package/sass/pulse.css +35 -0
  121. package/sass/theme.module.css +140 -0
  122. package/sass/tokens.module.css +272 -0
  123. package/sass/transitions.css +10 -0
  124. package/sass/typography.module.css +150 -0
  125. package/extras/noUiSlider/nouislider.css +0 -406
  126. package/extras/noUiSlider/nouislider.js +0 -2147
  127. package/extras/noUiSlider/nouislider.min.js +0 -1
  128. package/js/anime.min.js +0 -34
  129. package/js/autocomplete.js +0 -448
  130. package/js/buttons.js +0 -354
  131. package/js/cards.js +0 -40
  132. package/js/carousel.js +0 -717
  133. package/js/cash.js +0 -960
  134. package/js/characterCounter.js +0 -136
  135. package/js/chips.js +0 -481
  136. package/js/collapsible.js +0 -275
  137. package/js/component.js +0 -44
  138. package/js/datepicker.js +0 -975
  139. package/js/dropdown.js +0 -635
  140. package/js/forms.js +0 -275
  141. package/js/global.js +0 -444
  142. package/js/materialbox.js +0 -453
  143. package/js/modal.js +0 -382
  144. package/js/parallax.js +0 -138
  145. package/js/pushpin.js +0 -148
  146. package/js/range.js +0 -263
  147. package/js/scrollspy.js +0 -295
  148. package/js/select.js +0 -450
  149. package/js/sidenav.js +0 -580
  150. package/js/slider.js +0 -359
  151. package/js/tabs.js +0 -402
  152. package/js/tapTarget.js +0 -314
  153. package/js/timepicker.js +0 -647
  154. package/js/toasts.js +0 -310
  155. package/js/tooltip.js +0 -303
  156. package/js/waves.js +0 -335
package/sass/tokens.module.css ADDED
@@ -0,0 +1,272 @@
1
+ :root {
2
+ --md-source: #006495;
3
+ /* primary */
4
+ --md-ref-palette-primary0: #000000;
5
+ --md-ref-palette-primary10: #001e30;
6
+ --md-ref-palette-primary20: #003450;
7
+ --md-ref-palette-primary25: #003f60;
8
+ --md-ref-palette-primary30: #004b71;
9
+ --md-ref-palette-primary35: #005783;
10
+ --md-ref-palette-primary40: #006495;
11
+ --md-ref-palette-primary50: #0f7eb8;
12
+ --md-ref-palette-primary60: #3d98d4;
13
+ --md-ref-palette-primary70: #5db3f0;
14
+ --md-ref-palette-primary80: #8fcdff;
15
+ --md-ref-palette-primary90: #cbe6ff;
16
+ --md-ref-palette-primary95: #e6f2ff;
17
+ --md-ref-palette-primary98: #f7f9ff;
18
+ --md-ref-palette-primary99: #fcfcff;
19
+ --md-ref-palette-primary100: #ffffff;
20
+ /* secondary */
21
+ --md-ref-palette-secondary0: #000000;
22
+ --md-ref-palette-secondary10: #0d1d29;
23
+ --md-ref-palette-secondary20: #22323f;
24
+ --md-ref-palette-secondary25: #2d3d4b;
25
+ --md-ref-palette-secondary30: #394856;
26
+ --md-ref-palette-secondary35: #445462;
27
+ --md-ref-palette-secondary40: #50606f;
28
+ --md-ref-palette-secondary50: #697988;
29
+ --md-ref-palette-secondary60: #8293a2;
30
+ --md-ref-palette-secondary70: #9dadbd;
31
+ --md-ref-palette-secondary80: #b8c8d9;
32
+ --md-ref-palette-secondary90: #d4e4f6;
33
+ --md-ref-palette-secondary95: #e6f2ff;
34
+ --md-ref-palette-secondary98: #f7f9ff;
35
+ --md-ref-palette-secondary99: #fcfcff;
36
+ --md-ref-palette-secondary100: #ffffff;
37
+ /* tertiary */
38
+ --md-ref-palette-tertiary0: #000000;
39
+ --md-ref-palette-tertiary10: #211634;
40
+ --md-ref-palette-tertiary20: #362b4a;
41
+ --md-ref-palette-tertiary25: #423656;
42
+ --md-ref-palette-tertiary30: #4d4162;
43
+ --md-ref-palette-tertiary35: #594c6e;
44
+ --md-ref-palette-tertiary40: #66587b;
45
+ --md-ref-palette-tertiary50: #7f7195;
46
+ --md-ref-palette-tertiary60: #998ab0;
47
+ --md-ref-palette-tertiary70: #b4a4cb;
48
+ --md-ref-palette-tertiary80: #d0bfe7;
49
+ --md-ref-palette-tertiary90: #ecdcff;
50
+ --md-ref-palette-tertiary95: #f7edff;
51
+ --md-ref-palette-tertiary98: #fef7ff;
52
+ --md-ref-palette-tertiary99: #fffbff;
53
+ --md-ref-palette-tertiary100: #ffffff;
54
+ /* neutral */
55
+ --md-ref-palette-neutral0: #000000;
56
+ --md-ref-palette-neutral10: #1a1c1e;
57
+ --md-ref-palette-neutral20: #2e3133;
58
+ --md-ref-palette-neutral25: #3a3c3e;
59
+ --md-ref-palette-neutral30: #454749;
60
+ --md-ref-palette-neutral35: #515255;
61
+ --md-ref-palette-neutral40: #5d5e61;
62
+ --md-ref-palette-neutral50: #76777a;
63
+ --md-ref-palette-neutral60: #8f9194;
64
+ --md-ref-palette-neutral70: #aaabae;
65
+ --md-ref-palette-neutral80: #c6c6c9;
66
+ --md-ref-palette-neutral90: #e2e2e5;
67
+ --md-ref-palette-neutral95: #f0f0f3;
68
+ --md-ref-palette-neutral98: #f9f9fc;
69
+ --md-ref-palette-neutral99: #fcfcff;
70
+ --md-ref-palette-neutral100: #ffffff;
71
+ /* neutral-variant */
72
+ --md-ref-palette-neutral-variant0: #000000;
73
+ --md-ref-palette-neutral-variant10: #161c22;
74
+ --md-ref-palette-neutral-variant20: #2b3137;
75
+ --md-ref-palette-neutral-variant25: #363c42;
76
+ --md-ref-palette-neutral-variant30: #41474d;
77
+ --md-ref-palette-neutral-variant35: #4d5359;
78
+ --md-ref-palette-neutral-variant40: #595f65;
79
+ --md-ref-palette-neutral-variant50: #72787e;
80
+ --md-ref-palette-neutral-variant60: #8b9198;
81
+ --md-ref-palette-neutral-variant70: #a6acb3;
82
+ --md-ref-palette-neutral-variant80: #c1c7ce;
83
+ --md-ref-palette-neutral-variant90: #dee3ea;
84
+ --md-ref-palette-neutral-variant95: #ecf1f9;
85
+ --md-ref-palette-neutral-variant98: #f7f9ff;
86
+ --md-ref-palette-neutral-variant99: #fcfcff;
87
+ --md-ref-palette-neutral-variant100: #ffffff;
88
+ /* error */
89
+ --md-ref-palette-error0: #000000;
90
+ --md-ref-palette-error10: #410002;
91
+ --md-ref-palette-error20: #690005;
92
+ --md-ref-palette-error25: #7e0007;
93
+ --md-ref-palette-error30: #93000a;
94
+ --md-ref-palette-error35: #a80710;
95
+ --md-ref-palette-error40: #ba1a1a;
96
+ --md-ref-palette-error50: #de3730;
97
+ --md-ref-palette-error60: #ff5449;
98
+ --md-ref-palette-error70: #ff897d;
99
+ --md-ref-palette-error80: #ffb4ab;
100
+ --md-ref-palette-error90: #ffdad6;
101
+ --md-ref-palette-error95: #ffedea;
102
+ --md-ref-palette-error98: #fff8f7;
103
+ --md-ref-palette-error99: #fffbff;
104
+ --md-ref-palette-error100: #ffffff;
105
+ /* light */
106
+ --md-sys-color-primary-light: #006495;
107
+ --md-sys-color-on-primary-light: #ffffff;
108
+ --md-sys-color-primary-container-light: #cbe6ff;
109
+ --md-sys-color-on-primary-container-light: #001e30;
110
+ --md-sys-color-secondary-light: #50606f;
111
+ --md-sys-color-on-secondary-light: #ffffff;
112
+ --md-sys-color-secondary-container-light: #d4e4f6;
113
+ --md-sys-color-on-secondary-container-light: #0d1d29;
114
+ --md-sys-color-tertiary-light: #66587b;
115
+ --md-sys-color-on-tertiary-light: #ffffff;
116
+ --md-sys-color-tertiary-container-light: #ecdcff;
117
+ --md-sys-color-on-tertiary-container-light: #211634;
118
+ --md-sys-color-error-light: #ba1a1a;
119
+ --md-sys-color-error-container-light: #ffdad6;
120
+ --md-sys-color-on-error-light: #ffffff;
121
+ --md-sys-color-on-error-container-light: #410002;
122
+ --md-sys-color-background-light: #fcfcff;
123
+ --md-sys-color-on-background-light: #1a1c1e;
124
+ --md-sys-color-surface-light: #fcfcff;
125
+ --md-sys-color-on-surface-light: #1a1c1e;
126
+ --md-sys-color-surface-variant-light: #dee3ea;
127
+ --md-sys-color-on-surface-variant-light: #41474d;
128
+ --md-sys-color-outline-light: #72787e;
129
+ --md-sys-color-inverse-on-surface-light: #f0f0f3;
130
+ --md-sys-color-inverse-surface-light: #2e3133;
131
+ --md-sys-color-inverse-primary-light: #8fcdff;
132
+ --md-sys-color-shadow-light: #000000;
133
+ --md-sys-color-surface-tint-light: #006495;
134
+ --md-sys-color-outline-variant-light: #c1c7ce;
135
+ --md-sys-color-scrim-light: #000000;
136
+ /* dark */
137
+ --md-sys-color-primary-dark: #8fcdff;
138
+ --md-sys-color-on-primary-dark: #003450;
139
+ --md-sys-color-primary-container-dark: #004b71;
140
+ --md-sys-color-on-primary-container-dark: #cbe6ff;
141
+ --md-sys-color-secondary-dark: #b8c8d9;
142
+ --md-sys-color-on-secondary-dark: #22323f;
143
+ --md-sys-color-secondary-container-dark: #394856;
144
+ --md-sys-color-on-secondary-container-dark: #d4e4f6;
145
+ --md-sys-color-tertiary-dark: #d0bfe7;
146
+ --md-sys-color-on-tertiary-dark: #362b4a;
147
+ --md-sys-color-tertiary-container-dark: #4d4162;
148
+ --md-sys-color-on-tertiary-container-dark: #ecdcff;
149
+ --md-sys-color-error-dark: #ffb4ab;
150
+ --md-sys-color-error-container-dark: #93000a;
151
+ --md-sys-color-on-error-dark: #690005;
152
+ --md-sys-color-on-error-container-dark: #ffdad6;
153
+ --md-sys-color-background-dark: #1a1c1e;
154
+ --md-sys-color-on-background-dark: #e2e2e5;
155
+ --md-sys-color-surface-dark: #1a1c1e;
156
+ --md-sys-color-on-surface-dark: #e2e2e5;
157
+ --md-sys-color-surface-variant-dark: #41474d;
158
+ --md-sys-color-on-surface-variant-dark: #c1c7ce;
159
+ --md-sys-color-outline-dark: #8b9198;
160
+ --md-sys-color-inverse-on-surface-dark: #1a1c1e;
161
+ --md-sys-color-inverse-surface-dark: #e2e2e5;
162
+ --md-sys-color-inverse-primary-dark: #006495;
163
+ --md-sys-color-shadow-dark: #000000;
164
+ --md-sys-color-surface-tint-dark: #8fcdff;
165
+ --md-sys-color-outline-variant-dark: #41474d;
166
+ --md-sys-color-scrim-dark: #000000;
167
+ /* display - large */
168
+ --md-sys-typescale-display-large-font-family-name: Roboto;
169
+ --md-sys-typescale-display-large-font-family-style: Regular;
170
+ --md-sys-typescale-display-large-font-weight: 400px;
171
+ --md-sys-typescale-display-large-font-size: 57px;
172
+ --md-sys-typescale-display-large-line-height: 64px;
173
+ --md-sys-typescale-display-large-letter-spacing: -0.25px;
174
+ /* display - medium */
175
+ --md-sys-typescale-display-medium-font-family-name: Roboto;
176
+ --md-sys-typescale-display-medium-font-family-style: Regular;
177
+ --md-sys-typescale-display-medium-font-weight: 400px;
178
+ --md-sys-typescale-display-medium-font-size: 45px;
179
+ --md-sys-typescale-display-medium-line-height: 52px;
180
+ --md-sys-typescale-display-medium-letter-spacing: 0px;
181
+ /* display - small */
182
+ --md-sys-typescale-display-small-font-family-name: Roboto;
183
+ --md-sys-typescale-display-small-font-family-style: Regular;
184
+ --md-sys-typescale-display-small-font-weight: 400px;
185
+ --md-sys-typescale-display-small-font-size: 36px;
186
+ --md-sys-typescale-display-small-line-height: 44px;
187
+ --md-sys-typescale-display-small-letter-spacing: 0px;
188
+ /* headline - large */
189
+ --md-sys-typescale-headline-large-font-family-name: Roboto;
190
+ --md-sys-typescale-headline-large-font-family-style: Regular;
191
+ --md-sys-typescale-headline-large-font-weight: 400px;
192
+ --md-sys-typescale-headline-large-font-size: 32px;
193
+ --md-sys-typescale-headline-large-line-height: 40px;
194
+ --md-sys-typescale-headline-large-letter-spacing: 0px;
195
+ /* headline - medium */
196
+ --md-sys-typescale-headline-medium-font-family-name: Roboto;
197
+ --md-sys-typescale-headline-medium-font-family-style: Regular;
198
+ --md-sys-typescale-headline-medium-font-weight: 400px;
199
+ --md-sys-typescale-headline-medium-font-size: 28px;
200
+ --md-sys-typescale-headline-medium-line-height: 36px;
201
+ --md-sys-typescale-headline-medium-letter-spacing: 0px;
202
+ /* headline - small */
203
+ --md-sys-typescale-headline-small-font-family-name: Roboto;
204
+ --md-sys-typescale-headline-small-font-family-style: Regular;
205
+ --md-sys-typescale-headline-small-font-weight: 400px;
206
+ --md-sys-typescale-headline-small-font-size: 24px;
207
+ --md-sys-typescale-headline-small-line-height: 32px;
208
+ --md-sys-typescale-headline-small-letter-spacing: 0px;
209
+ /* body - large */
210
+ --md-sys-typescale-body-large-font-family-name: Roboto;
211
+ --md-sys-typescale-body-large-font-family-style: Regular;
212
+ --md-sys-typescale-body-large-font-weight: 400px;
213
+ --md-sys-typescale-body-large-font-size: 16px;
214
+ --md-sys-typescale-body-large-line-height: 24px;
215
+ --md-sys-typescale-body-large-letter-spacing: 0.50px;
216
+ /* body - medium */
217
+ --md-sys-typescale-body-medium-font-family-name: Roboto;
218
+ --md-sys-typescale-body-medium-font-family-style: Regular;
219
+ --md-sys-typescale-body-medium-font-weight: 400px;
220
+ --md-sys-typescale-body-medium-font-size: 14px;
221
+ --md-sys-typescale-body-medium-line-height: 20px;
222
+ --md-sys-typescale-body-medium-letter-spacing: 0.25px;
223
+ /* body - small */
224
+ --md-sys-typescale-body-small-font-family-name: Roboto;
225
+ --md-sys-typescale-body-small-font-family-style: Regular;
226
+ --md-sys-typescale-body-small-font-weight: 400px;
227
+ --md-sys-typescale-body-small-font-size: 12px;
228
+ --md-sys-typescale-body-small-line-height: 16px;
229
+ --md-sys-typescale-body-small-letter-spacing: 0.40px;
230
+ /* label - large */
231
+ --md-sys-typescale-label-large-font-family-name: Roboto;
232
+ --md-sys-typescale-label-large-font-family-style: Medium;
233
+ --md-sys-typescale-label-large-font-weight: 500px;
234
+ --md-sys-typescale-label-large-font-size: 14px;
235
+ --md-sys-typescale-label-large-line-height: 20px;
236
+ --md-sys-typescale-label-large-letter-spacing: 0.10px;
237
+ /* label - medium */
238
+ --md-sys-typescale-label-medium-font-family-name: Roboto;
239
+ --md-sys-typescale-label-medium-font-family-style: Medium;
240
+ --md-sys-typescale-label-medium-font-weight: 500px;
241
+ --md-sys-typescale-label-medium-font-size: 12px;
242
+ --md-sys-typescale-label-medium-line-height: 16px;
243
+ --md-sys-typescale-label-medium-letter-spacing: 0.50px;
244
+ /* label - small */
245
+ --md-sys-typescale-label-small-font-family-name: Roboto;
246
+ --md-sys-typescale-label-small-font-family-style: Medium;
247
+ --md-sys-typescale-label-small-font-weight: 500px;
248
+ --md-sys-typescale-label-small-font-size: 11px;
249
+ --md-sys-typescale-label-small-line-height: 16px;
250
+ --md-sys-typescale-label-small-letter-spacing: 0.50px;
251
+ /* title - large */
252
+ --md-sys-typescale-title-large-font-family-name: Roboto;
253
+ --md-sys-typescale-title-large-font-family-style: Regular;
254
+ --md-sys-typescale-title-large-font-weight: 400px;
255
+ --md-sys-typescale-title-large-font-size: 22px;
256
+ --md-sys-typescale-title-large-line-height: 28px;
257
+ --md-sys-typescale-title-large-letter-spacing: 0px;
258
+ /* title - medium */
259
+ --md-sys-typescale-title-medium-font-family-name: Roboto;
260
+ --md-sys-typescale-title-medium-font-family-style: Medium;
261
+ --md-sys-typescale-title-medium-font-weight: 500px;
262
+ --md-sys-typescale-title-medium-font-size: 16px;
263
+ --md-sys-typescale-title-medium-line-height: 24px;
264
+ --md-sys-typescale-title-medium-letter-spacing: 0.15px;
265
+ /* title - small */
266
+ --md-sys-typescale-title-small-font-family-name: Roboto;
267
+ --md-sys-typescale-title-small-font-family-style: Medium;
268
+ --md-sys-typescale-title-small-font-weight: 500px;
269
+ --md-sys-typescale-title-small-font-size: 14px;
270
+ --md-sys-typescale-title-small-line-height: 20px;
271
+ --md-sys-typescale-title-small-letter-spacing: 0.10px;
272
+ }
package/sass/transitions.css ADDED
@@ -0,0 +1,10 @@
1
+ .scale-transition {
2
+ transition: transform .3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;
3
+ }
4
+ .scale-transition.scale-out {
5
+ transform: scale(0);
6
+ transition: transform .2s !important;
7
+ }
8
+ .scale-transition.scale-in {
9
+ transform: scale(1);
10
+ }
package/sass/typography.module.css ADDED
@@ -0,0 +1,150 @@
1
+ .display-large{
2
+ font-family: var(--md-sys-typescale-display-large-font-family-name);
3
+ font-style: var(--md-sys-typescale-display-large-font-family-style);
4
+ font-weight: var(--md-sys-typescale-display-large-font-weight);
5
+ font-size: var(--md-sys-typescale-display-large-font-size);
6
+ letter-spacing: var(--md-sys-typescale-display-large-tracking);
7
+ line-height: var(--md-sys-typescale-display-large-height);
8
+ text-transform: var(--md-sys-typescale-display-large-text-transform);
9
+ text-decoration: var(--md-sys-typescale-display-large-text-decoration);
10
+ }
11
+ .display-medium{
12
+ font-family: var(--md-sys-typescale-display-medium-font-family-name);
13
+ font-style: var(--md-sys-typescale-display-medium-font-family-style);
14
+ font-weight: var(--md-sys-typescale-display-medium-font-weight);
15
+ font-size: var(--md-sys-typescale-display-medium-font-size);
16
+ letter-spacing: var(--md-sys-typescale-display-medium-tracking);
17
+ line-height: var(--md-sys-typescale-display-medium-height);
18
+ text-transform: var(--md-sys-typescale-display-medium-text-transform);
19
+ text-decoration: var(--md-sys-typescale-display-medium-text-decoration);
20
+ }
21
+ .display-small{
22
+ font-family: var(--md-sys-typescale-display-small-font-family-name);
23
+ font-style: var(--md-sys-typescale-display-small-font-family-style);
24
+ font-weight: var(--md-sys-typescale-display-small-font-weight);
25
+ font-size: var(--md-sys-typescale-display-small-font-size);
26
+ letter-spacing: var(--md-sys-typescale-display-small-tracking);
27
+ line-height: var(--md-sys-typescale-display-small-height);
28
+ text-transform: var(--md-sys-typescale-display-small-text-transform);
29
+ text-decoration: var(--md-sys-typescale-display-small-text-decoration);
30
+ }
31
+ .headline-large{
32
+ font-family: var(--md-sys-typescale-headline-large-font-family-name);
33
+ font-style: var(--md-sys-typescale-headline-large-font-family-style);
34
+ font-weight: var(--md-sys-typescale-headline-large-font-weight);
35
+ font-size: var(--md-sys-typescale-headline-large-font-size);
36
+ letter-spacing: var(--md-sys-typescale-headline-large-tracking);
37
+ line-height: var(--md-sys-typescale-headline-large-height);
38
+ text-transform: var(--md-sys-typescale-headline-large-text-transform);
39
+ text-decoration: var(--md-sys-typescale-headline-large-text-decoration);
40
+ }
41
+ .headline-medium{
42
+ font-family: var(--md-sys-typescale-headline-medium-font-family-name);
43
+ font-style: var(--md-sys-typescale-headline-medium-font-family-style);
44
+ font-weight: var(--md-sys-typescale-headline-medium-font-weight);
45
+ font-size: var(--md-sys-typescale-headline-medium-font-size);
46
+ letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
47
+ line-height: var(--md-sys-typescale-headline-medium-height);
48
+ text-transform: var(--md-sys-typescale-headline-medium-text-transform);
49
+ text-decoration: var(--md-sys-typescale-headline-medium-text-decoration);
50
+ }
51
+ .headline-small{
52
+ font-family: var(--md-sys-typescale-headline-small-font-family-name);
53
+ font-style: var(--md-sys-typescale-headline-small-font-family-style);
54
+ font-weight: var(--md-sys-typescale-headline-small-font-weight);
55
+ font-size: var(--md-sys-typescale-headline-small-font-size);
56
+ letter-spacing: var(--md-sys-typescale-headline-small-tracking);
57
+ line-height: var(--md-sys-typescale-headline-small-height);
58
+ text-transform: var(--md-sys-typescale-headline-small-text-transform);
59
+ text-decoration: var(--md-sys-typescale-headline-small-text-decoration);
60
+ }
61
+ .body-large{
62
+ font-family: var(--md-sys-typescale-body-large-font-family-name);
63
+ font-style: var(--md-sys-typescale-body-large-font-family-style);
64
+ font-weight: var(--md-sys-typescale-body-large-font-weight);
65
+ font-size: var(--md-sys-typescale-body-large-font-size);
66
+ letter-spacing: var(--md-sys-typescale-body-large-tracking);
67
+ line-height: var(--md-sys-typescale-body-large-height);
68
+ text-transform: var(--md-sys-typescale-body-large-text-transform);
69
+ text-decoration: var(--md-sys-typescale-body-large-text-decoration);
70
+ }
71
+ .body-medium{
72
+ font-family: var(--md-sys-typescale-body-medium-font-family-name);
73
+ font-style: var(--md-sys-typescale-body-medium-font-family-style);
74
+ font-weight: var(--md-sys-typescale-body-medium-font-weight);
75
+ font-size: var(--md-sys-typescale-body-medium-font-size);
76
+ letter-spacing: var(--md-sys-typescale-body-medium-tracking);
77
+ line-height: var(--md-sys-typescale-body-medium-height);
78
+ text-transform: var(--md-sys-typescale-body-medium-text-transform);
79
+ text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
80
+ }
81
+ .body-small{
82
+ font-family: var(--md-sys-typescale-body-small-font-family-name);
83
+ font-style: var(--md-sys-typescale-body-small-font-family-style);
84
+ font-weight: var(--md-sys-typescale-body-small-font-weight);
85
+ font-size: var(--md-sys-typescale-body-small-font-size);
86
+ letter-spacing: var(--md-sys-typescale-body-small-tracking);
87
+ line-height: var(--md-sys-typescale-body-small-height);
88
+ text-transform: var(--md-sys-typescale-body-small-text-transform);
89
+ text-decoration: var(--md-sys-typescale-body-small-text-decoration);
90
+ }
91
+ .label-large{
92
+ font-family: var(--md-sys-typescale-label-large-font-family-name);
93
+ font-style: var(--md-sys-typescale-label-large-font-family-style);
94
+ font-weight: var(--md-sys-typescale-label-large-font-weight);
95
+ font-size: var(--md-sys-typescale-label-large-font-size);
96
+ letter-spacing: var(--md-sys-typescale-label-large-tracking);
97
+ line-height: var(--md-sys-typescale-label-large-height);
98
+ text-transform: var(--md-sys-typescale-label-large-text-transform);
99
+ text-decoration: var(--md-sys-typescale-label-large-text-decoration);
100
+ }
101
+ .label-medium{
102
+ font-family: var(--md-sys-typescale-label-medium-font-family-name);
103
+ font-style: var(--md-sys-typescale-label-medium-font-family-style);
104
+ font-weight: var(--md-sys-typescale-label-medium-font-weight);
105
+ font-size: var(--md-sys-typescale-label-medium-font-size);
106
+ letter-spacing: var(--md-sys-typescale-label-medium-tracking);
107
+ line-height: var(--md-sys-typescale-label-medium-height);
108
+ text-transform: var(--md-sys-typescale-label-medium-text-transform);
109
+ text-decoration: var(--md-sys-typescale-label-medium-text-decoration);
110
+ }
111
+ .label-small{
112
+ font-family: var(--md-sys-typescale-label-small-font-family-name);
113
+ font-style: var(--md-sys-typescale-label-small-font-family-style);
114
+ font-weight: var(--md-sys-typescale-label-small-font-weight);
115
+ font-size: var(--md-sys-typescale-label-small-font-size);
116
+ letter-spacing: var(--md-sys-typescale-label-small-tracking);
117
+ line-height: var(--md-sys-typescale-label-small-height);
118
+ text-transform: var(--md-sys-typescale-label-small-text-transform);
119
+ text-decoration: var(--md-sys-typescale-label-small-text-decoration);
120
+ }
121
+ .title-large{
122
+ font-family: var(--md-sys-typescale-title-large-font-family-name);
123
+ font-style: var(--md-sys-typescale-title-large-font-family-style);
124
+ font-weight: var(--md-sys-typescale-title-large-font-weight);
125
+ font-size: var(--md-sys-typescale-title-large-font-size);
126
+ letter-spacing: var(--md-sys-typescale-title-large-tracking);
127
+ line-height: var(--md-sys-typescale-title-large-height);
128
+ text-transform: var(--md-sys-typescale-title-large-text-transform);
129
+ text-decoration: var(--md-sys-typescale-title-large-text-decoration);
130
+ }
131
+ .title-medium{
132
+ font-family: var(--md-sys-typescale-title-medium-font-family-name);
133
+ font-style: var(--md-sys-typescale-title-medium-font-family-style);
134
+ font-weight: var(--md-sys-typescale-title-medium-font-weight);
135
+ font-size: var(--md-sys-typescale-title-medium-font-size);
136
+ letter-spacing: var(--md-sys-typescale-title-medium-tracking);
137
+ line-height: var(--md-sys-typescale-title-medium-height);
138
+ text-transform: var(--md-sys-typescale-title-medium-text-transform);
139
+ text-decoration: var(--md-sys-typescale-title-medium-text-decoration);
140
+ }
141
+ .title-small{
142
+ font-family: var(--md-sys-typescale-title-small-font-family-name);
143
+ font-style: var(--md-sys-typescale-title-small-font-family-style);
144
+ font-weight: var(--md-sys-typescale-title-small-font-weight);
145
+ font-size: var(--md-sys-typescale-title-small-font-size);
146
+ letter-spacing: var(--md-sys-typescale-title-small-tracking);
147
+ line-height: var(--md-sys-typescale-title-small-height);
148
+ text-transform: var(--md-sys-typescale-title-small-text-transform);
149
+ text-decoration: var(--md-sys-typescale-title-small-text-decoration);
150
+ }