@materializecss/materialize 1.2.2 → 2.0.1-alpha

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 (90) hide show
  1. package/Gruntfile.js +68 -313
  2. package/README.md +26 -14
  3. package/dist/css/materialize.css +1009 -1822
  4. package/dist/css/materialize.min.css +2 -8
  5. package/dist/js/materialize.js +8414 -12299
  6. package/dist/js/materialize.min.js +8968 -2
  7. package/dist/js/materialize.min.js.map +1 -0
  8. package/package.json +13 -9
  9. package/sass/components/_badges.scss +12 -2
  10. package/sass/components/_buttons.scss +16 -11
  11. package/sass/components/_cards.scss +14 -9
  12. package/sass/components/_carousel.scss +5 -2
  13. package/sass/components/_chips.scss +3 -3
  14. package/sass/components/_collapsible.scss +22 -8
  15. package/sass/components/_collection.scss +14 -6
  16. package/sass/components/_datepicker.scss +30 -11
  17. package/sass/components/_dropdown.scss +6 -4
  18. package/sass/components/_global.scss +132 -111
  19. package/sass/components/_grid.scss +119 -98
  20. package/sass/components/_modal.scss +3 -3
  21. package/sass/components/_navbar.scss +31 -17
  22. package/sass/components/_normalize.scss +26 -124
  23. package/sass/components/_sidenav.scss +21 -20
  24. package/sass/components/_slider.scss +27 -7
  25. package/sass/components/_table_of_contents.scss +12 -12
  26. package/sass/components/_tabs.scss +47 -16
  27. package/sass/components/_tapTarget.scss +6 -6
  28. package/sass/components/_theme_variables.scss +98 -0
  29. package/sass/components/_timepicker.scss +54 -46
  30. package/sass/components/_toast.scss +3 -3
  31. package/sass/components/_tooltip.scss +4 -5
  32. package/sass/components/_typography.scss +1 -1
  33. package/sass/components/_variables.scss +185 -120
  34. package/sass/components/forms/_checkboxes.scss +9 -9
  35. package/sass/components/forms/_file-input.scss +9 -7
  36. package/sass/components/forms/_input-fields.scss +173 -234
  37. package/sass/components/forms/_radio-buttons.scss +1 -1
  38. package/sass/components/forms/_range.scss +11 -11
  39. package/sass/components/forms/_select.scss +29 -19
  40. package/sass/components/forms/_switches.scss +22 -18
  41. package/sass/materialize.scss +1 -1
  42. package/src/autocomplete.ts +459 -0
  43. package/src/bounding.ts +6 -0
  44. package/{js/buttons.js → src/buttons.ts} +103 -162
  45. package/src/cards.ts +54 -0
  46. package/{js/carousel.js → src/carousel.ts} +137 -262
  47. package/src/characterCounter.ts +88 -0
  48. package/src/chips.ts +350 -0
  49. package/src/collapsible.ts +184 -0
  50. package/{js/component.js → src/component.ts} +6 -19
  51. package/{js/datepicker.js → src/datepicker.ts} +213 -299
  52. package/{js/dropdown.js → src/dropdown.ts} +140 -254
  53. package/src/edges.ts +6 -0
  54. package/src/forms.ts +120 -0
  55. package/src/global.ts +385 -0
  56. package/src/materialbox.ts +348 -0
  57. package/src/modal.ts +256 -0
  58. package/{js/parallax.js → src/parallax.ts} +47 -60
  59. package/{js/pushpin.js → src/pushpin.ts} +19 -47
  60. package/{js/range.js → src/range.ts} +58 -139
  61. package/{js/scrollspy.js → src/scrollspy.ts} +81 -153
  62. package/src/select.ts +448 -0
  63. package/{js/sidenav.js → src/sidenav.ts} +96 -202
  64. package/src/slider.ts +415 -0
  65. package/src/tabs.ts +293 -0
  66. package/src/tapTarget.ts +240 -0
  67. package/{js/timepicker.js → src/timepicker.ts} +268 -272
  68. package/{js/toasts.js → src/toasts.ts} +75 -134
  69. package/{js/tooltip.js → src/tooltip.ts} +59 -96
  70. package/src/waves.ts +70 -0
  71. package/extras/noUiSlider/nouislider.css +0 -404
  72. package/extras/noUiSlider/nouislider.js +0 -2147
  73. package/extras/noUiSlider/nouislider.min.js +0 -1
  74. package/js/anime.min.js +0 -34
  75. package/js/autocomplete.js +0 -479
  76. package/js/cards.js +0 -40
  77. package/js/cash.js +0 -960
  78. package/js/characterCounter.js +0 -136
  79. package/js/chips.js +0 -486
  80. package/js/collapsible.js +0 -275
  81. package/js/forms.js +0 -285
  82. package/js/global.js +0 -428
  83. package/js/materialbox.js +0 -453
  84. package/js/modal.js +0 -382
  85. package/js/select.js +0 -391
  86. package/js/slider.js +0 -497
  87. package/js/tabs.js +0 -402
  88. package/js/tapTarget.js +0 -315
  89. package/js/waves.js +0 -615
  90. package/sass/components/_waves.scss +0 -187
package/sass/components/_theme_variables.scss ADDED
@@ -0,0 +1,98 @@
1
+ :root {
2
+ --surface-color: #f3f6fc;
3
+ --background-color: #ffffff;
4
+
5
+ --font-color-main: rgba(0, 0, 0, 0.87);
6
+ --font-color-medium: rgba(0, 0, 0, 0.56);
7
+ --font-color-disabled: rgba(0, 0, 0, 0.38);
8
+
9
+ --font-on-primary-color-main: rgba(255, 255, 255, 0.87);
10
+ --font-on-primary-color-dark-main: rgba(255, 255, 255, 0.87);
11
+ --font-on-primary-color-dark-medium: rgba(255, 255, 255, 0.60);
12
+ --font-on-primary-color-medium: rgba(255, 255, 255, 0.60);
13
+ --font-on-primary-color-disabled: rgba(255, 255, 255, 0.38);
14
+ --font-on-secondary-color-main: rgba(0, 0, 0, 0.87);
15
+
16
+ --hover-color: rgba(0, 0, 0, 0.04);
17
+ --focus-color: rgba(0, 0, 0, 0.12);
18
+ --focus-color-solid: #E0E0E0;
19
+
20
+ --background-color-disabled: rgba(0, 0, 0, 0.12);
21
+ --background-color-level-4dp: rgba(0, 0, 0, 0.09);
22
+ --background-color-level-16dp-solid: var(--surface-color);
23
+ --background-color-slight-emphasis: rgba(0, 0, 0, 0.025); /* stripes in table */
24
+ --background-color-card: var(--surface-color);
25
+
26
+ --tooltip-background-color: #313033;
27
+ --tooltip-font-color: rgba(255, 255, 255, 0.77);
28
+
29
+ --separator-color: #DDDDDD; /* borders between components */
30
+
31
+ --error-color: #F44336;
32
+
33
+ --slider-track-color: rgba(0, 0, 0, 0.26);
34
+ --switch-thumb-off-color: #ffffff;
35
+
36
+ --carousel-indicator-color: rgba(255, 255, 255, 0.45);
37
+ --carousel-indicator-active-color: #FFF;
38
+
39
+ --primary-color: #26a69a;
40
+ --primary-color-dark: #009688;
41
+ --primary-color-numeric: 38, 166, 154;
42
+ --primary-color-raised-hover-solid: #30B0A4;
43
+ --primary-color-raised-focus-solid: #44C4B8;
44
+ --primary-color-font-medium-color: rgba(var(--primary-color-numeric), 0.7);
45
+ --primary-color-font-disabled-color: rgba(var(--primary-color-numeric), 0.4);
46
+ --primary-color-hover-opaque: rgba(var(--primary-color-numeric), 0.06);
47
+ --primary-color-focus-opaque: rgba(var(--primary-color-numeric), 0.18);
48
+
49
+ --secondary-color: #EF5350;
50
+ --secondary-color-hover-solid: #FE625F;
51
+ --secondary-color-focus-solid: #FF7B78;
52
+
53
+ --md_sys_color_on-surface: 28, 27, 31;
54
+ }
55
+
56
+ :root[theme='dark'] {
57
+ --background-color: #121212;
58
+ --surface-color: #242424;
59
+
60
+ --font-color-main: rgba(255, 255, 255, 0.87);
61
+ --font-color-medium: rgba(255, 255, 255, 0.60);
62
+ --font-color-disabled: rgba(255, 255, 255, 0.38);
63
+
64
+ --font-on-primary-color-main: rgba(0, 0, 0, 0.87);
65
+ --font-on-primary-color-dark-main: rgba(255, 255, 255, 0.87);
66
+ --font-on-primary-color-dark-medium: rgba(255, 255, 255, 0.60);
67
+ --font-on-primary-color-medium: rgba(0, 0, 0, 0.56);
68
+ --font-on-primary-color-disabled: rgba(0, 0, 0, 0.38);
69
+
70
+ --hover-color: rgba(255, 255, 255, 0.04);
71
+ --focus-color: rgba(255, 255, 255, 0.12);
72
+ --focus-color-solid: #424242;
73
+
74
+ --background-color-disabled: rgba(255, 255, 255, 0.12);
75
+ --background-color-level-4dp: rgba(255, 255, 255, 0.09);
76
+ --background-color-level-16dp-solid: #262626;
77
+ --background-color-card: var(--surface-color);
78
+ --background-color-slight-emphasis: rgba(255, 255, 255, 0.05);
79
+
80
+ --separator-color: #424242; /* borders between components */
81
+
82
+ --error-color: #CF6679;
83
+
84
+ --slider-track-color: rgba(255, 255, 255, 0.26);
85
+ --switch-thumb-off-color: #bababa;
86
+
87
+ --primary-color: #B39DDB;
88
+ --primary-color-dark: #9575CD;
89
+ --primary-color-numeric: 179, 157, 219;
90
+ --primary-color-raised-hover-solid: #C2ACEA;
91
+ --primary-color-raised-focus-solid: #DBC5FF;
92
+
93
+ --secondary-color: #CDDC39;
94
+ --secondary-color-hover-solid: #DCEB48;
95
+ --secondary-color-focus-solid: #F5FF61;
96
+
97
+ --md_sys_color_on-surface: 230, 225, 229;
98
+ }
package/sass/components/_timepicker.scss CHANGED
@@ -11,7 +11,7 @@
11
11
  }
12
12
 
13
13
  .text-primary {
14
- color: rgba(255, 255, 255, 1);
14
+ color: $font-on-primary-color-main;
15
15
  }
16
16
 
17
17
 
@@ -19,7 +19,7 @@
19
19
  .timepicker-digital-display {
20
20
  width: 200px;
21
21
  flex: 1 auto;
22
- background-color: $secondary-color;
22
+ background-color: $primary-color;
23
23
  padding: 10px;
24
24
  font-weight: 300;
25
25
  }
@@ -28,7 +28,7 @@
28
28
  font-size: 4rem;
29
29
  font-weight: bold;
30
30
  text-align: center;
31
- color: rgba(255, 255, 255, 0.6);
31
+ color: $font-on-primary-color-medium;
32
32
  font-weight: 400;
33
33
  position: relative;
34
34
  user-select: none;
@@ -75,82 +75,90 @@ input[type=text].text-primary {
75
75
  /* Analog Clock Display */
76
76
  .timepicker-analog-display {
77
77
  flex: 2.5 auto;
78
+ background-color: $timepicker-clock-bg;
78
79
  }
79
80
 
80
81
  .timepicker-plate {
81
- background-color: $timepicker-clock-plate-bg;
82
- border-radius: 50%;
83
- width: 270px;
84
- height: 270px;
85
- overflow: visible;
86
- position: relative;
82
+ background-color: $timepicker-clock-plate-bg;
83
+ border-radius: 50%;
84
+ width: 270px;
85
+ height: 270px;
86
+ overflow: visible;
87
+ position: relative;
87
88
  margin: auto;
88
89
  margin-top: 25px;
89
90
  margin-bottom: 5px;
90
- user-select: none;
91
+ user-select: none;
91
92
  }
92
93
 
93
94
  .timepicker-canvas,
94
95
  .timepicker-dial {
95
- position: absolute;
96
- left: 0;
96
+ position: absolute;
97
+ left: 0;
97
98
  right: 0;
98
99
  top: 0;
99
100
  bottom: 0;
100
101
  }
102
+
101
103
  .timepicker-minutes {
102
- visibility: hidden;
104
+ visibility: hidden;
103
105
  }
104
106
 
105
107
  .timepicker-tick {
106
- border-radius: 50%;
107
- color: $timepicker-clock-color;
108
- line-height: 40px;
109
- text-align: center;
110
- width: 40px;
111
- height: 40px;
112
- position: absolute;
113
- cursor: pointer;
108
+ border-radius: 50%;
109
+ color: $timepicker-clock-color;
110
+ line-height: 40px;
111
+ text-align: center;
112
+ width: 40px;
113
+ height: 40px;
114
+ position: absolute;
115
+ cursor: pointer;
114
116
  font-size: 15px;
115
117
  }
116
118
 
117
119
  .timepicker-tick.active,
118
120
  .timepicker-tick:hover {
119
- background-color: transparentize($secondary-color, .75);
121
+ background-color: $primary-color-hover-opaque;
120
122
  }
123
+
121
124
  .timepicker-dial {
122
- transition: transform 350ms, opacity 350ms;
125
+ transition: transform 350ms, opacity 350ms;
123
126
  }
127
+
124
128
  .timepicker-dial-out {
125
129
  &.timepicker-hours {
126
- transform: scale(1.1, 1.1);
130
+ transform: scale(1.1, 1.1);
127
131
  }
128
132
 
129
133
  &.timepicker-minutes {
130
- transform: scale(.8, .8);
134
+ transform: scale(.8, .8);
131
135
  }
132
136
 
133
- opacity: 0;
137
+ opacity: 0;
134
138
  }
139
+
135
140
  .timepicker-canvas {
136
- transition: opacity 175ms;
141
+ transition: opacity 175ms;
137
142
 
138
143
  line {
139
- stroke: $secondary-color;
140
- stroke-width: 4;
141
- stroke-linecap: round;
144
+ stroke: $primary-color;
145
+ stroke-width: 4;
146
+ stroke-linecap: round;
142
147
  }
143
148
  }
149
+
144
150
  .timepicker-canvas-out {
145
- opacity: 0.25;
151
+ opacity: 0.25;
146
152
  }
153
+
147
154
  .timepicker-canvas-bearing {
148
- stroke: none;
149
- fill: $secondary-color;
155
+ stroke: none;
156
+ fill: $primary-color;
150
157
  }
158
+
151
159
  .timepicker-canvas-bg {
152
- stroke: none;
153
- fill: $secondary-color;
160
+ stroke: none;
161
+ fill: $primary-color;
154
162
  }
155
163
 
156
164
 
@@ -167,7 +175,7 @@ input[type=text].text-primary {
167
175
  }
168
176
 
169
177
  .timepicker-close {
170
- color: $secondary-color;
178
+ color: $primary-color;
171
179
  }
172
180
 
173
181
  .timepicker-clear,
@@ -186,14 +194,14 @@ input[type=text].text-primary {
186
194
  }
187
195
 
188
196
  .timepicker-text-container {
189
- top: 32%;
190
- }
191
-
192
- .timepicker-display-am-pm {
193
- position: relative;
194
- right: auto;
195
- bottom: auto;
196
- text-align: center;
197
- margin-top: 1.2rem;
198
- }
197
+ top: 32%;
198
+ }
199
+
200
+ .timepicker-display-am-pm {
201
+ position: relative;
202
+ right: auto;
203
+ bottom: auto;
204
+ text-align: center;
205
+ margin-top: 1.2rem;
206
+ }
199
207
  }
package/sass/components/_toast.scss CHANGED
@@ -26,14 +26,14 @@
26
26
  width: auto;
27
27
  margin-top: 10px;
28
28
  position: relative;
29
- max-width:100%;
29
+ max-width: 100%;
30
30
  height: auto;
31
31
  min-height: $toast-height;
32
32
  line-height: 1.5em;
33
33
  background-color: $toast-color;
34
34
  padding: 10px 25px;
35
- font-size: 1.1rem;
36
- font-weight: 300;
35
+ font-size: 1rem;
36
+ font-weight: 400;
37
37
  color: $toast-text-color;
38
38
  display: flex;
39
39
  align-items: center;
package/sass/components/_tooltip.scss CHANGED
@@ -2,9 +2,8 @@
2
2
  padding: 10px 8px;
3
3
  font-size: 1rem;
4
4
  z-index: 2000;
5
- background-color: transparent;
6
5
  border-radius: 2px;
7
- color: #fff;
6
+ color: $tooltip-font-color;
8
7
  min-height: 36px;
9
8
  line-height: 120%;
10
9
  opacity: 0;
@@ -16,7 +15,7 @@
16
15
  top: 0;
17
16
  pointer-events: none;
18
17
  visibility: hidden;
19
- background-color: #323232;
18
+ background-color: $tooltip-bg-color;
20
19
  }
21
20
 
22
21
  .backdrop {
@@ -25,8 +24,8 @@
25
24
  height: 7px;
26
25
  width: 14px;
27
26
  border-radius: 0 0 50% 50%;
28
- background-color: #323232;
27
+ background-color: $tooltip-bg-color;
29
28
  z-index: -1;
30
- transform-origin: 50% 0%;
29
+ transform-origin: 50% 0;
31
30
  visibility: hidden;
32
31
  }
package/sass/components/_typography.scss CHANGED
@@ -22,7 +22,7 @@ html{
22
22
 
23
23
  font-family: $font-stack;
24
24
  font-weight: normal;
25
- color: $off-black;
25
+ color: $text-color;
26
26
  }
27
27
  h1, h2, h3, h4, h5, h6 {
28
28
  font-weight: 400;