@materializecss/materialize 1.2.0 → 1.2.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 (82) hide show
  1. package/Gruntfile.js +722 -712
  2. package/LICENSE +21 -21
  3. package/README.md +91 -91
  4. package/dist/css/materialize.css +68 -135
  5. package/dist/css/materialize.min.css +12 -12
  6. package/dist/js/materialize.js +1112 -1112
  7. package/dist/js/materialize.min.js +6 -6
  8. package/extras/noUiSlider/nouislider.css +403 -403
  9. package/extras/noUiSlider/nouislider.js +2147 -2147
  10. package/js/anime.min.js +34 -34
  11. package/js/autocomplete.js +479 -479
  12. package/js/buttons.js +354 -354
  13. package/js/cards.js +40 -40
  14. package/js/carousel.js +732 -732
  15. package/js/cash.js +960 -960
  16. package/js/characterCounter.js +136 -136
  17. package/js/chips.js +486 -486
  18. package/js/collapsible.js +275 -275
  19. package/js/component.js +44 -44
  20. package/js/datepicker.js +983 -983
  21. package/js/dropdown.js +669 -669
  22. package/js/forms.js +285 -285
  23. package/js/global.js +428 -428
  24. package/js/materialbox.js +453 -453
  25. package/js/modal.js +382 -382
  26. package/js/parallax.js +138 -138
  27. package/js/pushpin.js +148 -148
  28. package/js/range.js +263 -263
  29. package/js/scrollspy.js +295 -295
  30. package/js/select.js +391 -391
  31. package/js/sidenav.js +583 -583
  32. package/js/slider.js +359 -359
  33. package/js/tabs.js +402 -402
  34. package/js/tapTarget.js +315 -315
  35. package/js/timepicker.js +712 -712
  36. package/js/toasts.js +325 -325
  37. package/js/tooltip.js +320 -320
  38. package/js/waves.js +614 -614
  39. package/package.json +87 -84
  40. package/sass/_style.scss +929 -929
  41. package/sass/components/_badges.scss +55 -55
  42. package/sass/components/_buttons.scss +322 -322
  43. package/sass/components/_cards.scss +195 -195
  44. package/sass/components/_carousel.scss +90 -90
  45. package/sass/components/_chips.scss +96 -96
  46. package/sass/components/_collapsible.scss +91 -91
  47. package/sass/components/_collection.scss +106 -106
  48. package/sass/components/_color-classes.scss +32 -32
  49. package/sass/components/_color-variables.scss +370 -370
  50. package/sass/components/_datepicker.scss +191 -191
  51. package/sass/components/_dropdown.scss +84 -84
  52. package/sass/components/_global.scss +646 -646
  53. package/sass/components/_grid.scss +158 -158
  54. package/sass/components/_icons-material-design.scss +5 -5
  55. package/sass/components/_materialbox.scss +42 -42
  56. package/sass/components/_modal.scss +97 -97
  57. package/sass/components/_navbar.scss +208 -208
  58. package/sass/components/_normalize.scss +447 -447
  59. package/sass/components/_preloader.scss +334 -334
  60. package/sass/components/_pulse.scss +34 -34
  61. package/sass/components/_sidenav.scss +214 -214
  62. package/sass/components/_slider.scss +91 -91
  63. package/sass/components/_table_of_contents.scss +33 -33
  64. package/sass/components/_tabs.scss +99 -99
  65. package/sass/components/_tapTarget.scss +103 -103
  66. package/sass/components/_timepicker.scss +199 -199
  67. package/sass/components/_toast.scss +58 -58
  68. package/sass/components/_tooltip.scss +32 -32
  69. package/sass/components/_transitions.scss +12 -12
  70. package/sass/components/_typography.scss +62 -62
  71. package/sass/components/_variables.scss +352 -352
  72. package/sass/components/_waves.scss +187 -187
  73. package/sass/components/forms/_checkboxes.scss +200 -200
  74. package/sass/components/forms/_file-input.scss +44 -44
  75. package/sass/components/forms/_forms.scss +22 -22
  76. package/sass/components/forms/_input-fields.scss +388 -388
  77. package/sass/components/forms/_radio-buttons.scss +115 -115
  78. package/sass/components/forms/_range.scss +161 -161
  79. package/sass/components/forms/_select.scss +199 -199
  80. package/sass/components/forms/_switches.scss +91 -91
  81. package/sass/ghpages-materialize.scss +7 -7
  82. package/sass/materialize.scss +42 -42
@@ -1,191 +1,191 @@
1
- /* Modal */
2
- .datepicker-modal {
3
- max-width: 325px;
4
- min-width: 300px;
5
- max-height: none;
6
- }
7
-
8
- .datepicker-container.modal-content {
9
- display: flex;
10
- flex-direction: column;
11
- padding: 0;
12
- }
13
-
14
- .datepicker-controls {
15
- display: flex;
16
- justify-content: space-between;
17
- width: 280px;
18
- margin: 0 auto;
19
-
20
- .selects-container {
21
- display: flex;
22
- }
23
-
24
- .select-wrapper {
25
- input {
26
- &:focus {
27
- border-bottom: none;
28
- }
29
- border-bottom: none;
30
- text-align: center;
31
- margin: 0;
32
- }
33
-
34
- .caret {
35
- display: none;
36
- }
37
- }
38
-
39
- .select-year input {
40
- width: 50px;
41
- }
42
-
43
- .select-month input {
44
- width: 80px;
45
- }
46
- }
47
-
48
- .month-prev, .month-next {
49
- margin-top: 4px;
50
- cursor: pointer;
51
- background-color: transparent;
52
- border: none;
53
- }
54
-
55
-
56
- /* Date Display */
57
- .datepicker-date-display {
58
- flex: 1 auto;
59
- background-color: $secondary-color;
60
- color: #fff;
61
- padding: 20px 22px;
62
- font-weight: 500;
63
-
64
- .year-text {
65
- display: block;
66
- font-size: 1.5rem;
67
- line-height: 25px;
68
- color: $datepicker-year;
69
- }
70
-
71
- .date-text {
72
- display: block;
73
- font-size: 2.8rem;
74
- line-height: 47px;
75
- font-weight: 500;
76
- }
77
- }
78
-
79
-
80
- /* Calendar */
81
- .datepicker-calendar-container {
82
- flex: 2.5 auto;
83
- }
84
-
85
- .datepicker-table {
86
- width: 280px;
87
- font-size: 1rem;
88
- margin: 0 auto;
89
-
90
- thead {
91
- border-bottom: none;
92
- }
93
-
94
- th {
95
- padding: 10px 5px;
96
- text-align: center;
97
- }
98
-
99
- tr {
100
- border: none;
101
- }
102
-
103
- abbr {
104
- text-decoration: none;
105
- color: $datepicker-calendar-header-color;
106
- }
107
-
108
- td {
109
- &.is-today {
110
- color: $secondary-color;
111
- }
112
-
113
- &.is-selected {
114
- background-color: $secondary-color;
115
- color: #fff;
116
- }
117
-
118
- &.is-outside-current-month,
119
- &.is-disabled {
120
- color: $datepicker-disabled-day-color;
121
- pointer-events: none;
122
- }
123
-
124
- border-radius: 50%;
125
- padding: 0;
126
- }
127
- }
128
-
129
- .datepicker-day-button {
130
- &:focus {
131
- background-color: $datepicker-day-focus;
132
- }
133
-
134
- background-color: transparent;
135
- border: none;
136
- line-height: 38px;
137
- display: block;
138
- width: 100%;
139
- border-radius: 50%;
140
- padding: 0 5px;
141
- cursor: pointer;
142
- color: inherit;
143
- }
144
-
145
-
146
- /* Footer */
147
- .datepicker-footer {
148
- width: 280px;
149
- margin: 0 auto;
150
- padding-bottom: 5px;
151
- display: flex;
152
- justify-content: space-between;
153
- }
154
-
155
- .datepicker-cancel,
156
- .datepicker-clear,
157
- .datepicker-today,
158
- .datepicker-done {
159
- color: $secondary-color;
160
- padding: 0 1rem;
161
- }
162
-
163
- .datepicker-clear {
164
- color: $error-color;
165
- }
166
-
167
-
168
- /* Media Queries */
169
- @media #{$medium-and-up} {
170
- .datepicker-modal {
171
- max-width: 625px;
172
- }
173
-
174
- .datepicker-container.modal-content {
175
- flex-direction: row;
176
- }
177
-
178
- .datepicker-date-display {
179
- flex: 0 1 270px;
180
- }
181
-
182
- .datepicker-controls,
183
- .datepicker-table,
184
- .datepicker-footer {
185
- width: 320px;
186
- }
187
-
188
- .datepicker-day-button {
189
- line-height: 44px;
190
- }
191
- }
1
+ /* Modal */
2
+ .datepicker-modal {
3
+ max-width: 325px;
4
+ min-width: 300px;
5
+ max-height: none;
6
+ }
7
+
8
+ .datepicker-container.modal-content {
9
+ display: flex;
10
+ flex-direction: column;
11
+ padding: 0;
12
+ }
13
+
14
+ .datepicker-controls {
15
+ display: flex;
16
+ justify-content: space-between;
17
+ width: 280px;
18
+ margin: 0 auto;
19
+
20
+ .selects-container {
21
+ display: flex;
22
+ }
23
+
24
+ .select-wrapper {
25
+ input {
26
+ &:focus {
27
+ border-bottom: none;
28
+ }
29
+ border-bottom: none;
30
+ text-align: center;
31
+ margin: 0;
32
+ }
33
+
34
+ .caret {
35
+ display: none;
36
+ }
37
+ }
38
+
39
+ .select-year input {
40
+ width: 50px;
41
+ }
42
+
43
+ .select-month input {
44
+ width: 80px;
45
+ }
46
+ }
47
+
48
+ .month-prev, .month-next {
49
+ margin-top: 4px;
50
+ cursor: pointer;
51
+ background-color: transparent;
52
+ border: none;
53
+ }
54
+
55
+
56
+ /* Date Display */
57
+ .datepicker-date-display {
58
+ flex: 1 auto;
59
+ background-color: $secondary-color;
60
+ color: #fff;
61
+ padding: 20px 22px;
62
+ font-weight: 500;
63
+
64
+ .year-text {
65
+ display: block;
66
+ font-size: 1.5rem;
67
+ line-height: 25px;
68
+ color: $datepicker-year;
69
+ }
70
+
71
+ .date-text {
72
+ display: block;
73
+ font-size: 2.8rem;
74
+ line-height: 47px;
75
+ font-weight: 500;
76
+ }
77
+ }
78
+
79
+
80
+ /* Calendar */
81
+ .datepicker-calendar-container {
82
+ flex: 2.5 auto;
83
+ }
84
+
85
+ .datepicker-table {
86
+ width: 280px;
87
+ font-size: 1rem;
88
+ margin: 0 auto;
89
+
90
+ thead {
91
+ border-bottom: none;
92
+ }
93
+
94
+ th {
95
+ padding: 10px 5px;
96
+ text-align: center;
97
+ }
98
+
99
+ tr {
100
+ border: none;
101
+ }
102
+
103
+ abbr {
104
+ text-decoration: none;
105
+ color: $datepicker-calendar-header-color;
106
+ }
107
+
108
+ td {
109
+ &.is-today {
110
+ color: $secondary-color;
111
+ }
112
+
113
+ &.is-selected {
114
+ background-color: $secondary-color;
115
+ color: #fff;
116
+ }
117
+
118
+ &.is-outside-current-month,
119
+ &.is-disabled {
120
+ color: $datepicker-disabled-day-color;
121
+ pointer-events: none;
122
+ }
123
+
124
+ border-radius: 50%;
125
+ padding: 0;
126
+ }
127
+ }
128
+
129
+ .datepicker-day-button {
130
+ &:focus {
131
+ background-color: $datepicker-day-focus;
132
+ }
133
+
134
+ background-color: transparent;
135
+ border: none;
136
+ line-height: 38px;
137
+ display: block;
138
+ width: 100%;
139
+ border-radius: 50%;
140
+ padding: 0 5px;
141
+ cursor: pointer;
142
+ color: inherit;
143
+ }
144
+
145
+
146
+ /* Footer */
147
+ .datepicker-footer {
148
+ width: 280px;
149
+ margin: 0 auto;
150
+ padding-bottom: 5px;
151
+ display: flex;
152
+ justify-content: space-between;
153
+ }
154
+
155
+ .datepicker-cancel,
156
+ .datepicker-clear,
157
+ .datepicker-today,
158
+ .datepicker-done {
159
+ color: $secondary-color;
160
+ padding: 0 1rem;
161
+ }
162
+
163
+ .datepicker-clear {
164
+ color: $error-color;
165
+ }
166
+
167
+
168
+ /* Media Queries */
169
+ @media #{$medium-and-up} {
170
+ .datepicker-modal {
171
+ max-width: 625px;
172
+ }
173
+
174
+ .datepicker-container.modal-content {
175
+ flex-direction: row;
176
+ }
177
+
178
+ .datepicker-date-display {
179
+ flex: 0 1 270px;
180
+ }
181
+
182
+ .datepicker-controls,
183
+ .datepicker-table,
184
+ .datepicker-footer {
185
+ width: 320px;
186
+ }
187
+
188
+ .datepicker-day-button {
189
+ line-height: 44px;
190
+ }
191
+ }
@@ -1,85 +1,85 @@
1
- .dropdown-content {
2
- &:focus {
3
- outline: 0;
4
- }
5
-
6
-
7
- @extend .z-depth-1;
8
- background-color: $dropdown-bg-color;
9
- margin: 0;
10
- display: none;
11
- min-width: 100px;
12
- overflow-y: auto;
13
- opacity: 0;
14
- position: absolute;
15
- left: 0;
16
- top: 0;
17
- z-index: 9999; // TODO: Check if this doesn't break other things
18
- transform-origin: 0 0;
19
-
20
-
21
- li {
22
- &:hover, &.active {
23
- background-color: $dropdown-hover-bg-color;
24
- }
25
-
26
- &:focus {
27
- outline: none;
28
- }
29
-
30
- &.divider {
31
- min-height: 0;
32
- height: 1px;
33
- }
34
-
35
- & > a, & > span {
36
- font-size: 16px;
37
- color: $dropdown-color;
38
- display: block;
39
- line-height: 22px;
40
- padding: (($dropdown-item-height - 22) * 0.5) 16px;
41
- }
42
-
43
- & > span > label {
44
- top: 1px;
45
- left: 0;
46
- height: 18px;
47
- }
48
-
49
- // Icon alignment override
50
- & > a > i {
51
- height: inherit;
52
- line-height: inherit;
53
- float: left;
54
- margin: 0 24px 0 0;
55
- width: 24px;
56
- }
57
-
58
-
59
- clear: both;
60
- color: $off-black;
61
- cursor: pointer;
62
- min-height: $dropdown-item-height;
63
- line-height: 1.5rem;
64
- width: 100%;
65
- text-align: left;
66
- }
67
- }
68
-
69
- body.keyboard-focused {
70
- .dropdown-content li:focus {
71
- background-color: darken($dropdown-hover-bg-color, 8%);
72
- }
73
- }
74
-
75
- // Input field specificity bugfix
76
- .input-field.col .dropdown-content [type="checkbox"] + label {
77
- top: 1px;
78
- left: 0;
79
- height: 18px;
80
- transform: none;
81
- }
82
-
83
- .dropdown-trigger {
84
- cursor: pointer;
1
+ .dropdown-content {
2
+ &:focus {
3
+ outline: 0;
4
+ }
5
+
6
+
7
+ @extend .z-depth-1;
8
+ background-color: $dropdown-bg-color;
9
+ margin: 0;
10
+ display: none;
11
+ min-width: 100px;
12
+ overflow-y: auto;
13
+ opacity: 0;
14
+ position: absolute;
15
+ left: 0;
16
+ top: 0;
17
+ z-index: 9999; // TODO: Check if this doesn't break other things
18
+ transform-origin: 0 0;
19
+
20
+
21
+ li {
22
+ &:hover, &.active {
23
+ background-color: $dropdown-hover-bg-color;
24
+ }
25
+
26
+ &:focus {
27
+ outline: none;
28
+ }
29
+
30
+ &.divider {
31
+ min-height: 0;
32
+ height: 1px;
33
+ }
34
+
35
+ & > a, & > span {
36
+ font-size: 16px;
37
+ color: $dropdown-color;
38
+ display: block;
39
+ line-height: 22px;
40
+ padding: (($dropdown-item-height - 22) * 0.5) 16px;
41
+ }
42
+
43
+ & > span > label {
44
+ top: 1px;
45
+ left: 0;
46
+ height: 18px;
47
+ }
48
+
49
+ // Icon alignment override
50
+ & > a > i {
51
+ height: inherit;
52
+ line-height: inherit;
53
+ float: left;
54
+ margin: 0 24px 0 0;
55
+ width: 24px;
56
+ }
57
+
58
+
59
+ clear: both;
60
+ color: $off-black;
61
+ cursor: pointer;
62
+ min-height: $dropdown-item-height;
63
+ line-height: 1.5rem;
64
+ width: 100%;
65
+ text-align: left;
66
+ }
67
+ }
68
+
69
+ body.keyboard-focused {
70
+ .dropdown-content li:focus {
71
+ background-color: darken($dropdown-hover-bg-color, 8%);
72
+ }
73
+ }
74
+
75
+ // Input field specificity bugfix
76
+ .input-field.col .dropdown-content [type="checkbox"] + label {
77
+ top: 1px;
78
+ left: 0;
79
+ height: 18px;
80
+ transform: none;
81
+ }
82
+
83
+ .dropdown-trigger {
84
+ cursor: pointer;
85
85
  }