mtl 1.1.0 → 1.1.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 (44) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/mtl/dropdown.coffee +1 -1
  3. data/app/assets/stylesheets/mtl/extend/_chips.scss +20 -0
  4. data/app/assets/stylesheets/mtl/extend/_side-nav.scss +4 -2
  5. data/lib/generators/mtl/templates/_variables.scss +5 -0
  6. data/lib/mtl/version.rb +2 -2
  7. data/mtl.gemspec +11 -0
  8. data/package.json +1 -1
  9. data/vendor/assets/javascripts/materialize/animation.js +8 -9
  10. data/vendor/assets/javascripts/materialize/carousel.js +51 -24
  11. data/vendor/assets/javascripts/materialize/character_counter.js +2 -2
  12. data/vendor/assets/javascripts/materialize/chips.js +40 -11
  13. data/vendor/assets/javascripts/materialize/dropdown.js +12 -12
  14. data/vendor/assets/javascripts/materialize/forms.js +131 -35
  15. data/vendor/assets/javascripts/materialize/global.js +55 -0
  16. data/vendor/assets/javascripts/materialize/init.js +40 -3
  17. data/vendor/assets/javascripts/materialize/materialbox.js +93 -77
  18. data/vendor/assets/javascripts/materialize/modal.js +12 -12
  19. data/vendor/assets/javascripts/materialize/parallax.js +48 -48
  20. data/vendor/assets/javascripts/materialize/scrollFire.js +40 -37
  21. data/vendor/assets/javascripts/materialize/scrollspy.js +2 -53
  22. data/vendor/assets/javascripts/materialize/sideNav.js +46 -40
  23. data/vendor/assets/javascripts/materialize/slider.js +15 -12
  24. data/vendor/assets/javascripts/materialize/tabs.js +104 -35
  25. data/vendor/assets/javascripts/materialize/toasts.js +122 -123
  26. data/vendor/assets/javascripts/materialize/tooltip.js +15 -13
  27. data/vendor/assets/javascripts/materialize/transitions.js +24 -24
  28. data/vendor/assets/stylesheets/materialize/_badges.scss +46 -0
  29. data/vendor/assets/stylesheets/materialize/_buttons.scss +29 -17
  30. data/vendor/assets/stylesheets/materialize/_cards.scss +9 -3
  31. data/vendor/assets/stylesheets/materialize/_carousel.scss +1 -1
  32. data/vendor/assets/stylesheets/materialize/_collapsible.scss +3 -7
  33. data/vendor/assets/stylesheets/materialize/_global.scss +5 -61
  34. data/vendor/assets/stylesheets/materialize/_materialbox.scss +13 -12
  35. data/vendor/assets/stylesheets/materialize/_navbar.scss +26 -7
  36. data/vendor/assets/stylesheets/materialize/_sideNav.scss +5 -5
  37. data/vendor/assets/stylesheets/materialize/_table_of_contents.scss +2 -2
  38. data/vendor/assets/stylesheets/materialize/_toast.scss +1 -1
  39. data/vendor/assets/stylesheets/materialize/_tooltip.scss +2 -3
  40. data/vendor/assets/stylesheets/materialize/_transitions.scss +13 -0
  41. data/vendor/assets/stylesheets/materialize/_variables.scss +7 -1
  42. data/vendor/assets/stylesheets/materialize/_waves.scss +80 -143
  43. data/vendor/assets/stylesheets/materialize/forms/_input-fields.scss +4 -4
  44. metadata +9 -4
@@ -10,168 +10,105 @@
10
10
 
11
11
 
12
12
  .waves-effect {
13
+ position: relative;
14
+ cursor: pointer;
15
+ display: inline-block;
16
+ overflow: hidden;
17
+ user-select: none;
18
+ -webkit-tap-highlight-color: transparent;
19
+ vertical-align: middle;
20
+ z-index: 1;
21
+ transition: .3s ease-out;
22
+
23
+ .waves-ripple {
24
+ position: absolute;
25
+ border-radius: 50%;
26
+ width: 20px;
27
+ height: 20px;
28
+ margin-top:-10px;
29
+ margin-left:-10px;
30
+ opacity: 0;
31
+
32
+ background: rgba(0,0,0,0.2);
33
+ transition: all 0.7s ease-out;
34
+ transition-property: transform, opacity;
35
+ transform: scale(0);
36
+ pointer-events: none;
37
+ }
38
+
39
+ // Waves Colors
40
+ &.waves-light .waves-ripple {
41
+ background-color: rgba(255, 255, 255, 0.45);
42
+ }
43
+ &.waves-red .waves-ripple {
44
+ background-color: rgba(244, 67, 54, .70);
45
+ }
46
+ &.waves-yellow .waves-ripple {
47
+ background-color: rgba(255, 235, 59, .70);
48
+ }
49
+ &.waves-orange .waves-ripple {
50
+ background-color: rgba(255, 152, 0, .70);
51
+ }
52
+ &.waves-purple .waves-ripple {
53
+ background-color: rgba(156, 39, 176, 0.70);
54
+ }
55
+ &.waves-green .waves-ripple {
56
+ background-color: rgba(76, 175, 80, 0.70);
57
+ }
58
+ &.waves-teal .waves-ripple {
59
+ background-color: rgba(0, 150, 136, 0.70);
60
+ }
61
+
62
+ // Style input button bug.
63
+ input[type="button"], input[type="reset"], input[type="submit"] {
64
+ border: 0;
65
+ font-style: normal;
66
+ font-size: inherit;
67
+ text-transform: inherit;
68
+ background: none;
69
+ }
70
+
71
+ img {
13
72
  position: relative;
14
- cursor: pointer;
15
- display: inline-block;
16
- overflow: hidden;
17
- -webkit-user-select: none;
18
- -moz-user-select: none;
19
- -ms-user-select: none;
20
- user-select: none;
21
- -webkit-tap-highlight-color: transparent;
22
- // white-space: nowrap;
23
- // outline: 0;
24
-
25
- vertical-align: middle;
26
- // cursor: pointer;
27
- // border: none;
28
- // outline: none;
29
- // color: inherit;
30
- // background-color: rgba(0, 0, 0, 0);
31
- // font-size: 1em;
32
- // line-height:1em;
33
- // text-align: center;
34
- // text-decoration: none;
35
- z-index: 1;
36
- will-change: opacity, transform;
37
- transition: .3s ease-out;
38
-
39
- .waves-ripple {
40
- position: absolute;
41
- border-radius: 50%;
42
- width: 20px;
43
- height: 20px;
44
- margin-top:-10px;
45
- margin-left:-10px;
46
- opacity: 0;
47
-
48
- background: rgba(0,0,0,0.2);
49
- // $gradient: rgba(0,0,0,0.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%;
50
- // background: -webkit-radial-gradient($gradient);
51
- // background: -o-radial-gradient($gradient);
52
- // background: -moz-radial-gradient($gradient);
53
- // background: radial-gradient($gradient);
54
- transition: all 0.7s ease-out;
55
- transition-property: transform, opacity;
56
- transform: scale(0);
57
- pointer-events: none;
58
- }
59
-
60
- // Waves Colors
61
- &.waves-light .waves-ripple {
62
- background-color: rgba(255, 255, 255, 0.45);
63
- }
64
-
65
- &.waves-red .waves-ripple {
66
- background-color: rgba(244, 67, 54, .70);
67
- }
68
- &.waves-yellow .waves-ripple {
69
- background-color: rgba(255, 235, 59, .70);
70
- }
71
- &.waves-orange .waves-ripple {
72
- background-color: rgba(255, 152, 0, .70);
73
- }
74
- &.waves-purple .waves-ripple {
75
- background-color: rgba(156, 39, 176, 0.70);
76
- }
77
- &.waves-green .waves-ripple {
78
- background-color: rgba(76, 175, 80, 0.70);
79
- }
80
- &.waves-teal .waves-ripple {
81
- background-color: rgba(0, 150, 136, 0.70);
82
- }
83
-
84
- // Style input button bug.
85
- input[type="button"], input[type="reset"], input[type="submit"] {
86
- border: 0;
87
- font-style: normal;
88
- font-size: inherit;
89
- text-transform: inherit;
90
- background: none;
91
- }
92
-
93
- img {
94
- position: relative;
95
- z-index: -1;
96
- }
73
+ z-index: -1;
74
+ }
97
75
  }
98
76
 
99
77
  .waves-notransition {
100
- transition: none #{"!important"};
78
+ transition: none #{"!important"};
101
79
  }
102
80
 
103
81
  .waves-circle {
104
- transform: translateZ(0);
105
- -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
82
+ transform: translateZ(0);
83
+ -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
106
84
  }
107
85
 
108
- // .waves-button,
109
- // .waves-button:hover,
110
- // .waves-button:visited,
111
- // .waves-button-input {
112
- // white-space: nowrap;
113
- // vertical-align: middle;
114
- // cursor: pointer;
115
- // border: none;
116
- // outline: none;
117
- // color: inherit;
118
- // background-color: rgba(0, 0, 0, 0);
119
- // font-size: 1em;
120
- // line-height:1em;
121
- // text-align: center;
122
- // text-decoration: none;
123
- // z-index: 1;
124
- // }
125
-
126
- // .waves-button {
127
- // padding: 0.85em 1.1em;
128
- // border-radius: 0.2em;
129
- // }
130
-
131
- // .waves-button-input {
132
- // margin: 0;
133
- // padding: 0.85em 1.1em;
134
- // }
135
-
136
86
  .waves-input-wrapper {
137
- border-radius: 0.2em;
138
- vertical-align: bottom;
87
+ border-radius: 0.2em;
88
+ vertical-align: bottom;
139
89
 
140
- // &.waves-button {
141
- // padding: 0;
142
- // }
143
-
144
- .waves-button-input {
145
- position: relative;
146
- top: 0;
147
- left: 0;
148
- z-index: 1;
149
- }
90
+ .waves-button-input {
91
+ position: relative;
92
+ top: 0;
93
+ left: 0;
94
+ z-index: 1;
95
+ }
150
96
  }
151
97
 
152
98
  .waves-circle {
153
- text-align: center;
154
- width: 2.5em;
155
- height: 2.5em;
156
- line-height: 2.5em;
157
- border-radius: 50%;
158
- -webkit-mask-image: none;
99
+ text-align: center;
100
+ width: 2.5em;
101
+ height: 2.5em;
102
+ line-height: 2.5em;
103
+ border-radius: 50%;
104
+ -webkit-mask-image: none;
159
105
  }
160
106
 
161
- // .waves-float {
162
- // -webkit-mask-image: none;
163
- // @include box-shadow(0px 1px 1.5px 1px rgba(0, 0, 0, 0.12));
164
-
165
- // &:active {
166
- // @include box-shadow(0px 8px 20px 1px rgba(0, 0, 0, 0.30));
167
- // }
168
- // }
169
-
170
107
  .waves-block {
171
- display: block;
108
+ display: block;
172
109
  }
173
110
 
174
111
  /* Firefox Bug: link not triggered */
175
112
  .waves-effect .waves-ripple {
176
- z-index: -1;
113
+ z-index: -1;
177
114
  }
@@ -158,11 +158,11 @@ textarea.materialize-textarea {
158
158
  font-size: 1rem;
159
159
  cursor: text;
160
160
  transition: .2s ease-out;
161
- }
162
161
 
163
- label.active {
164
- font-size: $label-font-size;
165
- transform: translateY(-140%);
162
+ &:not(.label-icon).active {
163
+ font-size: $label-font-size;
164
+ transform: translateY(-140%);
165
+ }
166
166
  }
167
167
 
168
168
  // Prefix Icons
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: mtl
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.1.0
4
+ version: 1.1.1
5
5
  platform: ruby
6
6
  authors:
7
7
  - Marco Plüss
@@ -10,7 +10,7 @@ authors:
10
10
  autorequire:
11
11
  bindir: exe
12
12
  cert_chain: []
13
- date: 2017-01-15 00:00:00.000000000 Z
13
+ date: 2017-02-03 00:00:00.000000000 Z
14
14
  dependencies:
15
15
  - !ruby/object:Gem::Dependency
16
16
  name: railties
@@ -243,6 +243,7 @@ files:
243
243
  - vendor/assets/javascripts/materialize/velocity.min.js
244
244
  - vendor/assets/javascripts/materialize/waves.js
245
245
  - vendor/assets/javascripts/pdfobject.js
246
+ - vendor/assets/stylesheets/materialize/_badges.scss
246
247
  - vendor/assets/stylesheets/materialize/_buttons.scss
247
248
  - vendor/assets/stylesheets/materialize/_cards.scss
248
249
  - vendor/assets/stylesheets/materialize/_carousel.scss
@@ -267,6 +268,7 @@ files:
267
268
  - vendor/assets/stylesheets/materialize/_tabs.scss
268
269
  - vendor/assets/stylesheets/materialize/_toast.scss
269
270
  - vendor/assets/stylesheets/materialize/_tooltip.scss
271
+ - vendor/assets/stylesheets/materialize/_transitions.scss
270
272
  - vendor/assets/stylesheets/materialize/_typography.scss
271
273
  - vendor/assets/stylesheets/materialize/_variables.scss
272
274
  - vendor/assets/stylesheets/materialize/_waves.scss
@@ -285,7 +287,11 @@ homepage: https://github.com/at-point/mtl
285
287
  licenses:
286
288
  - MIT
287
289
  metadata: {}
288
- post_install_message:
290
+ post_install_message: "\n Some component have been extend with configuration variables,
291
+ don't forget to re-generate the scss configuration or\n add the following values
292
+ to your existing one:\n\n $chip-height: 32px !default;\n $chip-line-height:
293
+ 32px !default;\n $chip-font-size: 13px !default;\n $chip-font-weight:
294
+ 500 !default;\n $chip-border-radius: 16px !default;\n "
289
295
  rdoc_options: []
290
296
  require_paths:
291
297
  - lib
@@ -306,4 +312,3 @@ signing_key:
306
312
  specification_version: 4
307
313
  summary: Rails gem to package materialize-css for reuse between projects.
308
314
  test_files: []
309
- has_rdoc: