@materializecss/materialize 2.0.4 → 2.1.0

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 (51) hide show
  1. package/dist/css/materialize.css +644 -558
  2. package/dist/css/materialize.min.css +2 -2
  3. package/dist/js/materialize.js +18 -8
  4. package/dist/js/materialize.min.js +2 -2
  5. package/dist/js/materialize.min.js.map +1 -1
  6. package/dist/src/bounding.d.ts.map +1 -1
  7. package/dist/src/edges.d.ts.map +1 -1
  8. package/dist/src/modal.d.ts.map +1 -1
  9. package/dist/src/select.d.ts.map +1 -1
  10. package/dist/src/toasts.d.ts.map +1 -1
  11. package/dist/src/utils.d.ts.map +1 -1
  12. package/dist/src/waves.d.ts.map +1 -1
  13. package/package.json +1 -1
  14. package/sass/components/_badges.scss +17 -12
  15. package/sass/components/_buttons.scss +137 -126
  16. package/sass/components/_cards.scss +12 -14
  17. package/sass/components/_carousel.scss +8 -6
  18. package/sass/components/_chips.scss +10 -11
  19. package/sass/components/_collapsible.scss +6 -8
  20. package/sass/components/_collection.scss +15 -15
  21. package/sass/components/_datepicker.scss +15 -15
  22. package/sass/components/_dropdown.scss +5 -17
  23. package/sass/components/_global.scss +65 -137
  24. package/sass/components/_grid.scss +12 -4
  25. package/sass/components/_materialbox.scss +1 -1
  26. package/sass/components/_modal.scss +14 -9
  27. package/sass/components/_navbar.scss +31 -25
  28. package/sass/components/_preloader.scss +5 -6
  29. package/sass/components/_sidenav.scss +42 -26
  30. package/sass/components/_slider.scss +5 -5
  31. package/sass/components/_table_of_contents.scss +7 -8
  32. package/sass/components/_tabs.scss +16 -17
  33. package/sass/components/_tapTarget.scss +3 -3
  34. package/sass/components/_timepicker.scss +12 -12
  35. package/sass/components/_toast.scss +17 -10
  36. package/sass/components/_tooltip.scss +13 -6
  37. package/sass/components/_variables.scss +13 -377
  38. package/sass/components/colors.module.scss +74 -180
  39. package/sass/components/forms/_checkboxes.scss +22 -22
  40. package/sass/components/forms/_file-input.scss +2 -5
  41. package/sass/components/forms/_forms.scss +5 -3
  42. package/sass/components/forms/_input-fields.scss +40 -41
  43. package/sass/components/forms/_radio-buttons.scss +11 -14
  44. package/sass/components/forms/_range.scss +16 -24
  45. package/sass/components/forms/_select.scss +34 -28
  46. package/sass/components/forms/_switches.scss +9 -12
  47. package/sass/components/theme.module.scss +140 -0
  48. package/sass/materialize.scss +6 -3
  49. package/sass/components/_theme_variables.scss +0 -78
  50. package/sass/components/theme.dark.module.scss +0 -32
  51. package/sass/components/theme.light.module.scss +0 -32
package/sass/components/_chips.scss CHANGED
@@ -3,7 +3,8 @@
3
3
  --font-size-icon: 18px;
4
4
  --padding: 8px;
5
5
 
6
- background-color: $chip-bg-color;
6
+ color: var(--md-sys-color-on-surface-variant);
7
+ background-color: rgba(0, 0, 0, 0.09);
7
8
 
8
9
  display: inline-flex;
9
10
  white-space: nowrap;
@@ -17,7 +18,6 @@
17
18
 
18
19
  font-size: var(--font-size);
19
20
  font-weight: 500;
20
- color: $chip-font-color;
21
21
 
22
22
  border-radius: 8px;
23
23
 
@@ -27,8 +27,8 @@
27
27
 
28
28
  &:focus {
29
29
  outline: none;
30
- background-color: $chip-selected-color;
31
- color: $chip-selected-font-color;
30
+ background-color: var(--md-sys-color-primary);
31
+ color: var(--md-sys-color-on-primary);
32
32
  }
33
33
  }
34
34
 
@@ -75,9 +75,9 @@
75
75
  flex-wrap: wrap;
76
76
 
77
77
  border: none;
78
- border-bottom: 1px solid $chip-border-color;
78
+ border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
79
79
  box-shadow: none;
80
- margin: $input-margin;
80
+ margin: 0 0 8px 0;
81
81
 
82
82
  padding: 4px;
83
83
  // min-height: 45px;
@@ -86,8 +86,8 @@
86
86
  transition: all .3s;
87
87
 
88
88
  &.focus {
89
- border-bottom: 1px solid $chip-selected-color;
90
- box-shadow: 0 1px 0 0 $chip-selected-color;
89
+ border-bottom: 1px solid var(--md-sys-color-primary);
90
+ box-shadow: 0 1px 0 0 var(--md-sys-color-primary);
91
91
  }
92
92
 
93
93
  &:hover {
@@ -97,12 +97,11 @@
97
97
  input:not([type]):not(.browser-default).input {
98
98
  background: none;
99
99
  border: 0;
100
- color: $input-color;
100
+ color: var(--md-sys-color-on-background);
101
101
  display: inline-block;
102
- font-size: $input-font-size;
102
+ font-size: 16px;
103
103
 
104
104
  // height: 32px;
105
- // height: $input-height;
106
105
  // line-height: 32px;
107
106
  height: 32px;
108
107
 
package/sass/components/_collapsible.scss CHANGED
@@ -2,9 +2,9 @@
2
2
  padding-left: 0;
3
3
  list-style-type: none;
4
4
 
5
- border-top: 1px solid $collapsible-border-color;
6
- border-right: 1px solid $collapsible-border-color;
7
- border-left: 1px solid $collapsible-border-color;
5
+ border-top: 1px solid var(--md-sys-color-outline-variant);
6
+ border-right: 1px solid var(--md-sys-color-outline-variant);
7
+ border-left: 1px solid var(--md-sys-color-outline-variant);
8
8
  margin: $element-top-margin 0 $element-bottom-margin 0;
9
9
  @extend .z-depth-1;
10
10
  }
@@ -19,8 +19,7 @@
19
19
  -webkit-tap-highlight-color: transparent;
20
20
  line-height: 1.5;
21
21
  padding: 1rem;
22
- border-bottom: 1px solid $collapsible-border-color;
23
- background-color: $collapsible-bg-color;
22
+ border-bottom: 1px solid var(--md-sys-color-outline-variant);
24
23
 
25
24
  i {
26
25
  width: 2rem;
@@ -43,16 +42,15 @@
43
42
 
44
43
 
45
44
  .keyboard-focused .collapsible-header:focus {
46
- background-color: $surface-focus-color-opaque;
45
+ background-color: rgba(0, 0, 0, 0.12);
47
46
  }
48
47
 
49
48
  .collapsible-body {
50
49
  max-height: 0;
51
- border-bottom: 1px solid $collapsible-border-color;
50
+ border-bottom: 1px solid var(--md-sys-color-outline-variant);
52
51
  box-sizing: border-box;
53
52
  padding: 0 2rem;
54
53
  overflow: hidden;
55
- background-color: $collapsible-bg-color;
56
54
  }
57
55
 
58
56
  // Popout Collapsible
package/sass/components/_collection.scss CHANGED
@@ -3,17 +3,17 @@
3
3
  padding-left: 0;
4
4
  list-style-type: none;
5
5
  margin: $element-top-margin 0 $element-bottom-margin 0;
6
- border: 1px solid $collection-border-color;
7
- border-radius: $collection-border-radius;
6
+ border: 1px solid var(--md-sys-color-outline-variant);
7
+ border-radius: 2px;
8
8
  overflow: hidden;
9
9
  position: relative;
10
10
 
11
11
  .collection-item {
12
- background-color: $collection-bg-color;
13
- line-height: $collection-line-height;
12
+ background-color: transparent;
13
+ line-height: 1.5rem;
14
14
  padding: 10px 20px;
15
15
  margin: 0;
16
- border-bottom: 1px solid $collection-border-color;
16
+ border-bottom: 1px solid var(--md-sys-color-outline-variant);
17
17
 
18
18
  // Avatar Collection
19
19
  &.avatar {
@@ -36,8 +36,8 @@
36
36
  i.circle {
37
37
  font-size: 18px;
38
38
  line-height: 42px;
39
- color: $collection-avatar-circle-icon-color;
40
- background-color: $collection-avatar-circle-bg-color;
39
+ color: #fff;
40
+ background-color: var(--md-sys-color-shadow-light);
41
41
  text-align: center;
42
42
  }
43
43
 
@@ -64,11 +64,11 @@
64
64
  }
65
65
 
66
66
  &.active {
67
- background-color: $collection-active-bg-color;
68
- color: $collection-active-color;
67
+ background-color: var(--md-sys-color-primary);
68
+ color: var(--md-sys-color-on-primary);
69
69
 
70
70
  .secondary-content {
71
- color: $font-on-primary-color-main;
71
+ color: var(--md-sys-color-on-primary);
72
72
  }
73
73
  }
74
74
  }
@@ -76,19 +76,19 @@
76
76
  a.collection-item {
77
77
  display: block;
78
78
  transition: .25s;
79
- color: $collection-link-color;
79
+ color: var(--md-sys-color-primary);
80
80
 
81
81
  &:not(.active) {
82
82
  &:hover {
83
- background-color: $collection-hover-bg-color;
83
+ background-color: rgba(0, 0, 0, 0.04);
84
84
  }
85
85
  }
86
86
  }
87
87
 
88
88
  &.with-header {
89
89
  .collection-header {
90
- background-color: $collection-bg-color;
91
- border-bottom: 1px solid $collection-border-color;
90
+ background-color: transparent;
91
+ border-bottom: 1px solid var(--md-sys-color-outline-variant);
92
92
  padding: 10px 20px;
93
93
  }
94
94
 
@@ -106,7 +106,7 @@
106
106
  // Made less specific to allow easier overriding
107
107
  .secondary-content {
108
108
  float: right;
109
- color: $primary-color;
109
+ color: var(--md-sys-color-primary);
110
110
  }
111
111
 
112
112
  .collapsible .collection {
package/sass/components/_datepicker.scss CHANGED
@@ -9,7 +9,7 @@
9
9
  display: flex;
10
10
  flex-direction: column;
11
11
  padding: 0;
12
- background-color: $surface-color;
12
+ background-color: var(--md-sys-color-surface);
13
13
  }
14
14
 
15
15
  .datepicker-controls {
@@ -54,7 +54,7 @@
54
54
 
55
55
  .month-prev > svg,
56
56
  .month-next > svg {
57
- fill: $button-flat-color;
57
+ fill: var(--md-sys-color-on-surface-variant);
58
58
  }
59
59
  }
60
60
 
@@ -69,8 +69,8 @@
69
69
  /* Date Display */
70
70
  .datepicker-date-display {
71
71
  flex: 1 auto;
72
- background-color: $primary-color;
73
- color: $font-on-primary-color-main;
72
+ background-color: var(--md-sys-color-primary);
73
+ color: var(--md-sys-color-on-primary);
74
74
  padding: 20px 22px;
75
75
  font-weight: 500;
76
76
 
@@ -78,7 +78,7 @@
78
78
  display: block;
79
79
  font-size: 1.5rem;
80
80
  line-height: 25px;
81
- color: $datepicker-year;
81
+ color: var(--md-sys-color-on-primary);
82
82
  }
83
83
 
84
84
  .date-text {
@@ -115,24 +115,24 @@
115
115
 
116
116
  abbr {
117
117
  text-decoration: none;
118
- color: $datepicker-calendar-header-color;
118
+ color: var(--md-sys-color-on-surface-variant);
119
119
  }
120
120
 
121
121
  td {
122
- color: $datepicker-day-font-color;
122
+ color: var(--md-sys-color-on-background);
123
123
 
124
124
  &.is-today {
125
- color: $primary-color;
125
+ color: var(--md-sys-color-primary);
126
126
  }
127
127
 
128
128
  &.is-selected {
129
- background-color: $primary-color;
130
- color: $font-on-primary-color-main;
129
+ background-color: var(--md-sys-color-primary);
130
+ color: var(--md-sys-color-on-primary);
131
131
  }
132
132
 
133
133
  &.is-outside-current-month,
134
134
  &.is-disabled {
135
- color: $datepicker-day-font-color-disabled;
135
+ color: var(--md-sys-color-on-surface);
136
136
  pointer-events: none;
137
137
  }
138
138
 
@@ -153,11 +153,11 @@
153
153
  color: inherit;
154
154
 
155
155
  &:hover {
156
- background-color: $datepicker-day-hover;
156
+ background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
157
157
  }
158
158
 
159
159
  &:focus {
160
- background-color: $datepicker-day-focus;
160
+ background-color: rgba(var(--md-sys-color-primary-numeric), 0.18);
161
161
  }
162
162
  }
163
163
 
@@ -175,12 +175,12 @@
175
175
  .datepicker-clear,
176
176
  .datepicker-today,
177
177
  .datepicker-done {
178
- color: $primary-color;
178
+ color: var(--md-sys-color-primary);
179
179
  padding: 0 1rem;
180
180
  }
181
181
 
182
182
  .datepicker-clear {
183
- color: $error-color;
183
+ color: var(--md-sys-color-error);
184
184
  }
185
185
 
186
186
 
package/sass/components/_dropdown.scss CHANGED
@@ -1,13 +1,8 @@
1
1
  .dropdown-content {
2
2
  padding-left: 0;
3
3
  list-style-type: none;
4
-
5
- &:focus {
6
- outline: 0;
7
- }
8
-
9
4
  @extend .z-depth-1;
10
- background-color: $dropdown-bg-color;
5
+ background-color: var(--md-sys-color-surface);
11
6
  margin: 0;
12
7
  display: none;
13
8
  min-width: 100px;
@@ -19,16 +14,10 @@
19
14
  z-index: 9999; // TODO: Check if this doesn't break other things
20
15
  transform-origin: 0 0;
21
16
 
22
-
23
17
  li {
24
18
  &:hover, &.active {
25
- background-color: $dropdown-hover-bg-color;
19
+ background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-on-surface) 8%);
26
20
  }
27
-
28
- &:focus {
29
- outline: none;
30
- }
31
-
32
21
  &.divider {
33
22
  min-height: 0;
34
23
  height: 1px;
@@ -36,7 +25,7 @@
36
25
 
37
26
  & > a, & > span {
38
27
  font-size: 16px;
39
- color: $dropdown-color;
28
+ color: var(--md-sys-color-primary);
40
29
  display: block;
41
30
  line-height: 22px;
42
31
  padding: (($dropdown-item-height - 22) * 0.5) 16px;
@@ -57,9 +46,8 @@
57
46
  width: 24px;
58
47
  }
59
48
 
60
-
61
49
  clear: both;
62
- color: $text-color;
50
+ color: var(--md-sys-color-on-background);
63
51
  cursor: pointer;
64
52
  min-height: $dropdown-item-height;
65
53
  line-height: 1.5rem;
@@ -70,7 +58,7 @@
70
58
 
71
59
  body.keyboard-focused {
72
60
  .dropdown-content li:focus {
73
- background-color: $dropdown-focus-bg-color;
61
+ background-color: rgba(0, 0, 0, 0.12);
74
62
  }
75
63
  }
76
64