@materializecss/materialize 1.2.2 → 2.0.0-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 (89) hide show
  1. package/Gruntfile.js +68 -313
  2. package/README.md +2 -2
  3. package/dist/css/materialize.css +1009 -1822
  4. package/dist/css/materialize.min.css +2 -8
  5. package/dist/js/materialize.js +8402 -12300
  6. package/dist/js/materialize.min.js +3 -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/_timepicker.scss +54 -46
  29. package/sass/components/_toast.scss +3 -3
  30. package/sass/components/_tooltip.scss +4 -5
  31. package/sass/components/_typography.scss +1 -1
  32. package/sass/components/_variables.scss +185 -120
  33. package/sass/components/forms/_checkboxes.scss +9 -9
  34. package/sass/components/forms/_file-input.scss +9 -7
  35. package/sass/components/forms/_input-fields.scss +173 -234
  36. package/sass/components/forms/_radio-buttons.scss +1 -1
  37. package/sass/components/forms/_range.scss +11 -11
  38. package/sass/components/forms/_select.scss +29 -19
  39. package/sass/components/forms/_switches.scss +22 -18
  40. package/sass/materialize.scss +1 -1
  41. package/src/autocomplete.ts +459 -0
  42. package/src/bounding.ts +6 -0
  43. package/{js/buttons.js → src/buttons.ts} +103 -162
  44. package/src/cards.ts +54 -0
  45. package/{js/carousel.js → src/carousel.ts} +137 -262
  46. package/src/characterCounter.ts +88 -0
  47. package/src/chips.ts +350 -0
  48. package/src/collapsible.ts +184 -0
  49. package/{js/component.js → src/component.ts} +6 -19
  50. package/{js/datepicker.js → src/datepicker.ts} +213 -299
  51. package/{js/dropdown.js → src/dropdown.ts} +140 -254
  52. package/src/edges.ts +6 -0
  53. package/src/forms.ts +120 -0
  54. package/src/global.ts +385 -0
  55. package/src/materialbox.ts +348 -0
  56. package/src/modal.ts +256 -0
  57. package/{js/parallax.js → src/parallax.ts} +47 -60
  58. package/{js/pushpin.js → src/pushpin.ts} +19 -47
  59. package/{js/range.js → src/range.ts} +58 -139
  60. package/{js/scrollspy.js → src/scrollspy.ts} +81 -153
  61. package/src/select.ts +448 -0
  62. package/{js/sidenav.js → src/sidenav.ts} +96 -202
  63. package/src/slider.ts +415 -0
  64. package/src/tabs.ts +290 -0
  65. package/src/tapTarget.ts +240 -0
  66. package/{js/timepicker.js → src/timepicker.ts} +268 -272
  67. package/{js/toasts.js → src/toasts.ts} +75 -134
  68. package/{js/tooltip.js → src/tooltip.ts} +59 -96
  69. package/src/waves.ts +70 -0
  70. package/extras/noUiSlider/nouislider.css +0 -404
  71. package/extras/noUiSlider/nouislider.js +0 -2147
  72. package/extras/noUiSlider/nouislider.min.js +0 -1
  73. package/js/anime.min.js +0 -34
  74. package/js/autocomplete.js +0 -479
  75. package/js/cards.js +0 -40
  76. package/js/cash.js +0 -960
  77. package/js/characterCounter.js +0 -136
  78. package/js/chips.js +0 -486
  79. package/js/collapsible.js +0 -275
  80. package/js/forms.js +0 -285
  81. package/js/global.js +0 -428
  82. package/js/materialbox.js +0 -453
  83. package/js/modal.js +0 -382
  84. package/js/select.js +0 -391
  85. package/js/slider.js +0 -497
  86. package/js/tabs.js +0 -402
  87. package/js/tapTarget.js +0 -315
  88. package/js/waves.js +0 -615
  89. package/sass/components/_waves.scss +0 -187
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;