@materializecss/materialize 1.2.0 → 1.2.2

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 +78 -137
  5. package/dist/css/materialize.min.css +12 -12
  6. package/dist/js/materialize.js +1502 -1378
  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 +497 -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/components/_badges.scss +55 -55
  41. package/sass/components/_buttons.scss +322 -322
  42. package/sass/components/_cards.scss +195 -195
  43. package/sass/components/_carousel.scss +90 -90
  44. package/sass/components/_chips.scss +96 -96
  45. package/sass/components/_collapsible.scss +91 -91
  46. package/sass/components/_collection.scss +106 -106
  47. package/sass/components/_color-classes.scss +32 -32
  48. package/sass/components/_color-variables.scss +370 -370
  49. package/sass/components/_datepicker.scss +191 -191
  50. package/sass/components/_dropdown.scss +84 -84
  51. package/sass/components/_global.scss +646 -646
  52. package/sass/components/_grid.scss +158 -158
  53. package/sass/components/_icons-material-design.scss +5 -5
  54. package/sass/components/_materialbox.scss +42 -42
  55. package/sass/components/_modal.scss +97 -97
  56. package/sass/components/_navbar.scss +208 -208
  57. package/sass/components/_normalize.scss +447 -447
  58. package/sass/components/_preloader.scss +334 -334
  59. package/sass/components/_pulse.scss +34 -34
  60. package/sass/components/_sidenav.scss +214 -214
  61. package/sass/components/_slider.scss +100 -91
  62. package/sass/components/_table_of_contents.scss +33 -33
  63. package/sass/components/_tabs.scss +99 -99
  64. package/sass/components/_tapTarget.scss +103 -103
  65. package/sass/components/_timepicker.scss +199 -199
  66. package/sass/components/_toast.scss +58 -58
  67. package/sass/components/_tooltip.scss +32 -32
  68. package/sass/components/_transitions.scss +12 -12
  69. package/sass/components/_typography.scss +62 -62
  70. package/sass/components/_variables.scss +352 -352
  71. package/sass/components/_waves.scss +187 -187
  72. package/sass/components/forms/_checkboxes.scss +200 -200
  73. package/sass/components/forms/_file-input.scss +44 -44
  74. package/sass/components/forms/_forms.scss +22 -22
  75. package/sass/components/forms/_input-fields.scss +388 -388
  76. package/sass/components/forms/_radio-buttons.scss +115 -115
  77. package/sass/components/forms/_range.scss +161 -161
  78. package/sass/components/forms/_select.scss +199 -199
  79. package/sass/components/forms/_switches.scss +91 -91
  80. package/sass/materialize.scss +42 -42
  81. package/sass/_style.scss +0 -929
  82. package/sass/ghpages-materialize.scss +0 -7
@@ -1,158 +1,158 @@
1
- @use "sass:math";
2
-
3
- .container {
4
- margin: 0 auto;
5
- max-width: 1280px;
6
- width: 90%;
7
- }
8
- @media #{$medium-and-up} {
9
- .container {
10
- width: 85%;
11
- }
12
- }
13
- @media #{$large-and-up} {
14
- .container {
15
- width: 70%;
16
- }
17
- }
18
- .col .row {
19
- margin-left: (-1 * $gutter-width * 0.5);
20
- margin-right: (-1 * $gutter-width * 0.5);
21
- }
22
-
23
- .section {
24
- padding-top: 1rem;
25
- padding-bottom: 1rem;
26
-
27
- &.no-pad {
28
- padding: 0;
29
- }
30
- &.no-pad-bot {
31
- padding-bottom: 0;
32
- }
33
- &.no-pad-top {
34
- padding-top: 0;
35
- }
36
- }
37
-
38
-
39
- // Mixins to eliminate code repetition
40
- @mixin reset-offset {
41
- margin-left: auto;
42
- left: auto;
43
- right: auto;
44
- }
45
- @mixin grid-classes($size, $i, $perc) {
46
- &.offset-#{$size}#{$i} {
47
- margin-left: $perc;
48
- }
49
- &.pull-#{$size}#{$i} {
50
- right: $perc;
51
- }
52
- &.push-#{$size}#{$i} {
53
- left: $perc;
54
- }
55
- }
56
-
57
-
58
- .row {
59
- margin-left: auto;
60
- margin-right: auto;
61
- margin-bottom: 20px;
62
-
63
- // Clear floating children
64
- &:after {
65
- content: "";
66
- display: table;
67
- clear: both;
68
- }
69
-
70
- .col {
71
- float: left;
72
- box-sizing: border-box;
73
- padding: 0 $gutter-width * 0.5;
74
- min-height: 1px;
75
-
76
- &[class*="push-"],
77
- &[class*="pull-"] {
78
- position: relative;
79
- }
80
-
81
- $i: 1;
82
- @while $i <= $num-cols {
83
- $perc: unquote(math.div(100, math.div($num-cols, $i)) + "%");
84
- &.s#{$i} {
85
- width: $perc;
86
- @include reset-offset;
87
- }
88
- $i: $i + 1;
89
- }
90
-
91
- $i: 1;
92
- @while $i <= $num-cols {
93
- $perc: unquote(math.div(100, math.div($num-cols, $i)) + "%");
94
- @include grid-classes("s", $i, $perc);
95
- $i: $i + 1;
96
- }
97
-
98
- @media #{$medium-and-up} {
99
-
100
- $i: 1;
101
- @while $i <= $num-cols {
102
- $perc: unquote(math.div(100, math.div($num-cols, $i)) + "%");
103
- &.m#{$i} {
104
- width: $perc;
105
- @include reset-offset;
106
- }
107
- $i: $i + 1
108
- }
109
-
110
- $i: 1;
111
- @while $i <= $num-cols {
112
- $perc: unquote(math.div(100, math.div($num-cols, $i)) + "%");
113
- @include grid-classes("m", $i, $perc);
114
- $i: $i + 1;
115
- }
116
- }
117
-
118
- @media #{$large-and-up} {
119
-
120
- $i: 1;
121
- @while $i <= $num-cols {
122
- $perc: unquote(math.div(100, math.div($num-cols, $i)) + "%");
123
- &.l#{$i} {
124
- width: $perc;
125
- @include reset-offset;
126
- }
127
- $i: $i + 1;
128
- }
129
-
130
- $i: 1;
131
- @while $i <= $num-cols {
132
- $perc: unquote(math.div(100, math.div($num-cols, $i)) + "%");
133
- @include grid-classes("l", $i, $perc);
134
- $i: $i + 1;
135
- }
136
- }
137
-
138
- @media #{$extra-large-and-up} {
139
-
140
- $i: 1;
141
- @while $i <= $num-cols {
142
- $perc: unquote(math.div(100, math.div($num-cols, $i)) + "%");
143
- &.xl#{$i} {
144
- width: $perc;
145
- @include reset-offset;
146
- }
147
- $i: $i + 1;
148
- }
149
-
150
- $i: 1;
151
- @while $i <= $num-cols {
152
- $perc: unquote(math.div(100, math.div($num-cols, $i)) + "%");
153
- @include grid-classes("xl", $i, $perc);
154
- $i: $i + 1;
155
- }
156
- }
157
- }
158
- }
1
+ @use "sass:math";
2
+
3
+ .container {
4
+ margin: 0 auto;
5
+ max-width: 1280px;
6
+ width: 90%;
7
+ }
8
+ @media #{$medium-and-up} {
9
+ .container {
10
+ width: 85%;
11
+ }
12
+ }
13
+ @media #{$large-and-up} {
14
+ .container {
15
+ width: 70%;
16
+ }
17
+ }
18
+ .col .row {
19
+ margin-left: (-1 * $gutter-width * 0.5);
20
+ margin-right: (-1 * $gutter-width * 0.5);
21
+ }
22
+
23
+ .section {
24
+ padding-top: 1rem;
25
+ padding-bottom: 1rem;
26
+
27
+ &.no-pad {
28
+ padding: 0;
29
+ }
30
+ &.no-pad-bot {
31
+ padding-bottom: 0;
32
+ }
33
+ &.no-pad-top {
34
+ padding-top: 0;
35
+ }
36
+ }
37
+
38
+
39
+ // Mixins to eliminate code repetition
40
+ @mixin reset-offset {
41
+ margin-left: auto;
42
+ left: auto;
43
+ right: auto;
44
+ }
45
+ @mixin grid-classes($size, $i, $perc) {
46
+ &.offset-#{$size}#{$i} {
47
+ margin-left: $perc;
48
+ }
49
+ &.pull-#{$size}#{$i} {
50
+ right: $perc;
51
+ }
52
+ &.push-#{$size}#{$i} {
53
+ left: $perc;
54
+ }
55
+ }
56
+
57
+
58
+ .row {
59
+ margin-left: auto;
60
+ margin-right: auto;
61
+ margin-bottom: 20px;
62
+
63
+ // Clear floating children
64
+ &:after {
65
+ content: "";
66
+ display: table;
67
+ clear: both;
68
+ }
69
+
70
+ .col {
71
+ float: left;
72
+ box-sizing: border-box;
73
+ padding: 0 $gutter-width * 0.5;
74
+ min-height: 1px;
75
+
76
+ &[class*="push-"],
77
+ &[class*="pull-"] {
78
+ position: relative;
79
+ }
80
+
81
+ $i: 1;
82
+ @while $i <= $num-cols {
83
+ $perc: unquote(math.div(100, math.div($num-cols, $i)) + "%");
84
+ &.s#{$i} {
85
+ width: $perc;
86
+ @include reset-offset;
87
+ }
88
+ $i: $i + 1;
89
+ }
90
+
91
+ $i: 1;
92
+ @while $i <= $num-cols {
93
+ $perc: unquote(math.div(100, math.div($num-cols, $i)) + "%");
94
+ @include grid-classes("s", $i, $perc);
95
+ $i: $i + 1;
96
+ }
97
+
98
+ @media #{$medium-and-up} {
99
+
100
+ $i: 1;
101
+ @while $i <= $num-cols {
102
+ $perc: unquote(math.div(100, math.div($num-cols, $i)) + "%");
103
+ &.m#{$i} {
104
+ width: $perc;
105
+ @include reset-offset;
106
+ }
107
+ $i: $i + 1
108
+ }
109
+
110
+ $i: 1;
111
+ @while $i <= $num-cols {
112
+ $perc: unquote(math.div(100, math.div($num-cols, $i)) + "%");
113
+ @include grid-classes("m", $i, $perc);
114
+ $i: $i + 1;
115
+ }
116
+ }
117
+
118
+ @media #{$large-and-up} {
119
+
120
+ $i: 1;
121
+ @while $i <= $num-cols {
122
+ $perc: unquote(math.div(100, math.div($num-cols, $i)) + "%");
123
+ &.l#{$i} {
124
+ width: $perc;
125
+ @include reset-offset;
126
+ }
127
+ $i: $i + 1;
128
+ }
129
+
130
+ $i: 1;
131
+ @while $i <= $num-cols {
132
+ $perc: unquote(math.div(100, math.div($num-cols, $i)) + "%");
133
+ @include grid-classes("l", $i, $perc);
134
+ $i: $i + 1;
135
+ }
136
+ }
137
+
138
+ @media #{$extra-large-and-up} {
139
+
140
+ $i: 1;
141
+ @while $i <= $num-cols {
142
+ $perc: unquote(math.div(100, math.div($num-cols, $i)) + "%");
143
+ &.xl#{$i} {
144
+ width: $perc;
145
+ @include reset-offset;
146
+ }
147
+ $i: $i + 1;
148
+ }
149
+
150
+ $i: 1;
151
+ @while $i <= $num-cols {
152
+ $perc: unquote(math.div(100, math.div($num-cols, $i)) + "%");
153
+ @include grid-classes("xl", $i, $perc);
154
+ $i: $i + 1;
155
+ }
156
+ }
157
+ }
158
+ }
@@ -1,5 +1,5 @@
1
- /* This is needed for some mobile phones to display the Google Icon font properly */
2
- .material-icons {
3
- text-rendering: optimizeLegibility;
4
- font-feature-settings: 'liga';
5
- }
1
+ /* This is needed for some mobile phones to display the Google Icon font properly */
2
+ .material-icons {
3
+ text-rendering: optimizeLegibility;
4
+ font-feature-settings: 'liga';
5
+ }
@@ -1,43 +1,43 @@
1
- .materialboxed {
2
- &:hover {
3
- &:not(.active) {
4
- opacity: .8;
5
- }
6
- }
7
-
8
- display: block;
9
- cursor: zoom-in;
10
- position: relative;
11
- transition: opacity .4s;
12
- -webkit-backface-visibility: hidden;
13
-
14
- &.active {
15
- cursor: zoom-out;
16
- }
17
- }
18
-
19
- #materialbox-overlay {
20
- position:fixed;
21
- top: 0;
22
- right: 0;
23
- bottom: 0;
24
- left: 0;
25
- background-color: #292929;
26
- z-index: 1000;
27
- will-change: opacity;
28
- }
29
-
30
- .materialbox-caption {
31
- position: fixed;
32
- display: none;
33
- color: #fff;
34
- line-height: 50px;
35
- bottom: 0;
36
- left: 0;
37
- width: 100%;
38
- text-align: center;
39
- padding: 0% 15%;
40
- height: 50px;
41
- z-index: 1000;
42
- -webkit-font-smoothing: antialiased;
1
+ .materialboxed {
2
+ &:hover {
3
+ &:not(.active) {
4
+ opacity: .8;
5
+ }
6
+ }
7
+
8
+ display: block;
9
+ cursor: zoom-in;
10
+ position: relative;
11
+ transition: opacity .4s;
12
+ -webkit-backface-visibility: hidden;
13
+
14
+ &.active {
15
+ cursor: zoom-out;
16
+ }
17
+ }
18
+
19
+ #materialbox-overlay {
20
+ position:fixed;
21
+ top: 0;
22
+ right: 0;
23
+ bottom: 0;
24
+ left: 0;
25
+ background-color: #292929;
26
+ z-index: 1000;
27
+ will-change: opacity;
28
+ }
29
+
30
+ .materialbox-caption {
31
+ position: fixed;
32
+ display: none;
33
+ color: #fff;
34
+ line-height: 50px;
35
+ bottom: 0;
36
+ left: 0;
37
+ width: 100%;
38
+ text-align: center;
39
+ padding: 0% 15%;
40
+ height: 50px;
41
+ z-index: 1000;
42
+ -webkit-font-smoothing: antialiased;
43
43
  }
@@ -1,97 +1,97 @@
1
- .modal {
2
- &:focus {
3
- outline: none;
4
- }
5
-
6
- @extend .z-depth-5;
7
-
8
- display: none;
9
- position: fixed;
10
- left: 0;
11
- right: 0;
12
- background-color: #fafafa;
13
- padding: 0;
14
- max-height: 70%;
15
- width: 55%;
16
- margin: auto;
17
- overflow-y: auto;
18
-
19
- border-radius: 2px;
20
- will-change: top, opacity;
21
-
22
- @media #{$medium-and-down} {
23
- width: 80%;
24
- }
25
-
26
- h1,h2,h3,h4 {
27
- margin-top: 0;
28
- }
29
-
30
- .modal-content {
31
- padding: 24px;
32
- overflow-y: hidden;
33
- }
34
-
35
- .modal-close {
36
- cursor: pointer;
37
- }
38
-
39
- .modal-footer {
40
- border-radius: 0 0 2px 2px;
41
- background-color: #fafafa;
42
- padding: 4px 6px;
43
- height: 56px;
44
- width: 100%;
45
- text-align: right;
46
-
47
- .btn, .btn-flat {
48
- margin: 6px 0;
49
- }
50
- }
51
- }
52
-
53
- .modal-overlay {
54
- position: fixed;
55
- z-index: 999;
56
- top: -25%;
57
- left: 0;
58
- bottom: 0;
59
- right: 0;
60
- height: 125%;
61
- width: 100%;
62
- background: #000;
63
- display: none;
64
-
65
- will-change: opacity;
66
- }
67
-
68
- // Modal with fixed action footer
69
- .modal.modal-fixed-footer {
70
- padding: 0;
71
- height: 70%;
72
-
73
- .modal-content {
74
- position: absolute;
75
- height: calc(100% - 56px);
76
- max-height: 100%;
77
- width: 100%;
78
- overflow-y: auto;
79
- }
80
-
81
- .modal-footer {
82
- border-top: 1px solid rgba(0,0,0,.1);
83
- position: absolute;
84
- bottom: 0;
85
- }
86
- }
87
-
88
- // Modal Bottom Sheet Style
89
- .modal.bottom-sheet {
90
- top: auto;
91
- bottom: -100%;
92
- margin: 0;
93
- width: 100%;
94
- max-height: 45%;
95
- border-radius: 0;
96
- will-change: bottom, opacity;
97
- }
1
+ .modal {
2
+ &:focus {
3
+ outline: none;
4
+ }
5
+
6
+ @extend .z-depth-5;
7
+
8
+ display: none;
9
+ position: fixed;
10
+ left: 0;
11
+ right: 0;
12
+ background-color: #fafafa;
13
+ padding: 0;
14
+ max-height: 70%;
15
+ width: 55%;
16
+ margin: auto;
17
+ overflow-y: auto;
18
+
19
+ border-radius: 2px;
20
+ will-change: top, opacity;
21
+
22
+ @media #{$medium-and-down} {
23
+ width: 80%;
24
+ }
25
+
26
+ h1,h2,h3,h4 {
27
+ margin-top: 0;
28
+ }
29
+
30
+ .modal-content {
31
+ padding: 24px;
32
+ overflow-y: hidden;
33
+ }
34
+
35
+ .modal-close {
36
+ cursor: pointer;
37
+ }
38
+
39
+ .modal-footer {
40
+ border-radius: 0 0 2px 2px;
41
+ background-color: #fafafa;
42
+ padding: 4px 6px;
43
+ height: 56px;
44
+ width: 100%;
45
+ text-align: right;
46
+
47
+ .btn, .btn-flat {
48
+ margin: 6px 0;
49
+ }
50
+ }
51
+ }
52
+
53
+ .modal-overlay {
54
+ position: fixed;
55
+ z-index: 999;
56
+ top: -25%;
57
+ left: 0;
58
+ bottom: 0;
59
+ right: 0;
60
+ height: 125%;
61
+ width: 100%;
62
+ background: #000;
63
+ display: none;
64
+
65
+ will-change: opacity;
66
+ }
67
+
68
+ // Modal with fixed action footer
69
+ .modal.modal-fixed-footer {
70
+ padding: 0;
71
+ height: 70%;
72
+
73
+ .modal-content {
74
+ position: absolute;
75
+ height: calc(100% - 56px);
76
+ max-height: 100%;
77
+ width: 100%;
78
+ overflow-y: auto;
79
+ }
80
+
81
+ .modal-footer {
82
+ border-top: 1px solid rgba(0,0,0,.1);
83
+ position: absolute;
84
+ bottom: 0;
85
+ }
86
+ }
87
+
88
+ // Modal Bottom Sheet Style
89
+ .modal.bottom-sheet {
90
+ top: auto;
91
+ bottom: -100%;
92
+ margin: 0;
93
+ width: 100%;
94
+ max-height: 45%;
95
+ border-radius: 0;
96
+ will-change: bottom, opacity;
97
+ }