material_design_lite-sass 1.0.2.1 → 1.0.3

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 (38) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +6 -0
  3. data/lib/material_design_lite/sass/version.rb +1 -1
  4. data/vendor/assets/javascripts/material.js +2562 -2993
  5. data/vendor/assets/javascripts/material/button.js +114 -112
  6. data/vendor/assets/javascripts/material/checkbox.js +255 -260
  7. data/vendor/assets/javascripts/material/data-table.js +140 -124
  8. data/vendor/assets/javascripts/material/icon-toggle.js +239 -243
  9. data/vendor/assets/javascripts/material/layout.js +392 -388
  10. data/vendor/assets/javascripts/material/mdlComponentHandler.js +68 -27
  11. data/vendor/assets/javascripts/material/menu.js +430 -414
  12. data/vendor/assets/javascripts/material/progress.js +110 -97
  13. data/vendor/assets/javascripts/material/radio.js +244 -247
  14. data/vendor/assets/javascripts/material/ripple.js +220 -211
  15. data/vendor/assets/javascripts/material/slider.js +228 -228
  16. data/vendor/assets/javascripts/material/spinner.js +122 -119
  17. data/vendor/assets/javascripts/material/switch.js +246 -250
  18. data/vendor/assets/javascripts/material/tabs.js +129 -127
  19. data/vendor/assets/javascripts/material/textfield.js +221 -222
  20. data/vendor/assets/javascripts/material/tooltip.js +126 -122
  21. data/vendor/assets/stylesheets/material/_badge.scss +1 -1
  22. data/vendor/assets/stylesheets/material/_button.scss +15 -8
  23. data/vendor/assets/stylesheets/material/_card.scss +1 -1
  24. data/vendor/assets/stylesheets/material/_checkbox.scss +1 -1
  25. data/vendor/assets/stylesheets/material/_data-table.scss +5 -3
  26. data/vendor/assets/stylesheets/material/_functions.scss +16 -0
  27. data/vendor/assets/stylesheets/material/_grid.scss +11 -20
  28. data/vendor/assets/stylesheets/material/_layout.scss +7 -5
  29. data/vendor/assets/stylesheets/material/_menu.scss +4 -1
  30. data/vendor/assets/stylesheets/material/_radio.scss +1 -1
  31. data/vendor/assets/stylesheets/material/_slider.scss +1 -0
  32. data/vendor/assets/stylesheets/material/_switch.scss +1 -1
  33. data/vendor/assets/stylesheets/material/_tabs.scss +1 -1
  34. data/vendor/assets/stylesheets/material/_textfield.scss +15 -5
  35. data/vendor/assets/stylesheets/material/_tooltip.scss +2 -2
  36. data/vendor/assets/stylesheets/material/_variables.scss +18 -43
  37. data/vendor/assets/stylesheets/material/resets/_h5bp.scss +28 -21
  38. metadata +1 -1
@@ -15,132 +15,136 @@
15
15
  * limitations under the License.
16
16
  */
17
17
 
18
- /**
19
- * Class constructor for Tooltip MDL component.
20
- * Implements MDL component design pattern defined at:
21
- * https://github.com/jasonmayes/mdl-component-design-pattern
22
- * @param {HTMLElement} element The element that will be upgraded.
23
- */
24
- function MaterialTooltip(element) {
25
- 'use strict';
26
-
27
- this.element_ = element;
28
-
29
- // Initialize instance.
30
- this.init();
31
- }
32
-
33
- /**
34
- * Store constants in one place so they can be updated easily.
35
- * @enum {string | number}
36
- * @private
37
- */
38
- MaterialTooltip.prototype.Constant_ = {
39
- // None for now.
40
- };
41
-
42
- /**
43
- * Store strings for class names defined by this component that are used in
44
- * JavaScript. This allows us to simply change it in one place should we
45
- * decide to modify at a later date.
46
- * @enum {string}
47
- * @private
48
- */
49
- MaterialTooltip.prototype.CssClasses_ = {
50
- IS_ACTIVE: 'is-active'
51
- };
52
-
53
- /**
54
- * Handle mouseenter for tooltip.
55
- * @param {Event} event The event that fired.
56
- * @private
57
- */
58
- MaterialTooltip.prototype.handleMouseEnter_ = function(event) {
18
+ (function() {
59
19
  'use strict';
60
20
 
61
- event.stopPropagation();
62
- var props = event.target.getBoundingClientRect();
63
- var left = props.left + (props.width / 2);
64
- var marginLeft = -1 * (this.element_.offsetWidth / 2);
65
-
66
- if (left + marginLeft < 0) {
67
- this.element_.style.left = 0;
68
- this.element_.style.marginLeft = 0;
69
- } else {
70
- this.element_.style.left = left + 'px';
71
- this.element_.style.marginLeft = marginLeft + 'px';
72
- }
73
-
74
- this.element_.style.top = props.top + props.height + 10 + 'px';
75
- this.element_.classList.add(this.CssClasses_.IS_ACTIVE);
76
- window.addEventListener('scroll', this.boundMouseLeaveHandler, false);
77
- window.addEventListener('touchmove', this.boundMouseLeaveHandler, false);
78
- };
79
-
80
- /**
81
- * Handle mouseleave for tooltip.
82
- * @param {Event} event The event that fired.
83
- * @private
84
- */
85
- MaterialTooltip.prototype.handleMouseLeave_ = function(event) {
86
- 'use strict';
87
-
88
- event.stopPropagation();
89
- this.element_.classList.remove(this.CssClasses_.IS_ACTIVE);
90
- window.removeEventListener('scroll', this.boundMouseLeaveHandler);
91
- window.removeEventListener('touchmove', this.boundMouseLeaveHandler, false);
92
- };
93
-
94
- /**
95
- * Initialize element.
96
- */
97
- MaterialTooltip.prototype.init = function() {
98
- 'use strict';
99
-
100
- if (this.element_) {
101
- var forElId = this.element_.getAttribute('for');
102
-
103
- if (forElId) {
104
- this.forElement_ = document.getElementById(forElId);
21
+ /**
22
+ * Class constructor for Tooltip MDL component.
23
+ * Implements MDL component design pattern defined at:
24
+ * https://github.com/jasonmayes/mdl-component-design-pattern
25
+ *
26
+ * @param {HTMLElement} element The element that will be upgraded.
27
+ */
28
+ var MaterialTooltip = function MaterialTooltip(element) {
29
+ this.element_ = element;
30
+
31
+ // Initialize instance.
32
+ this.init();
33
+ };
34
+ window.MaterialTooltip = MaterialTooltip;
35
+
36
+ /**
37
+ * Store constants in one place so they can be updated easily.
38
+ *
39
+ * @enum {String | Number}
40
+ * @private
41
+ */
42
+ MaterialTooltip.prototype.Constant_ = {
43
+ // None for now.
44
+ };
45
+
46
+ /**
47
+ * Store strings for class names defined by this component that are used in
48
+ * JavaScript. This allows us to simply change it in one place should we
49
+ * decide to modify at a later date.
50
+ *
51
+ * @enum {String}
52
+ * @private
53
+ */
54
+ MaterialTooltip.prototype.CssClasses_ = {
55
+ IS_ACTIVE: 'is-active'
56
+ };
57
+
58
+ /**
59
+ * Handle mouseenter for tooltip.
60
+ *
61
+ * @param {Event} event The event that fired.
62
+ * @private
63
+ */
64
+ MaterialTooltip.prototype.handleMouseEnter_ = function(event) {
65
+ event.stopPropagation();
66
+ var props = event.target.getBoundingClientRect();
67
+ var left = props.left + (props.width / 2);
68
+ var marginLeft = -1 * (this.element_.offsetWidth / 2);
69
+
70
+ if (left + marginLeft < 0) {
71
+ this.element_.style.left = 0;
72
+ this.element_.style.marginLeft = 0;
73
+ } else {
74
+ this.element_.style.left = left + 'px';
75
+ this.element_.style.marginLeft = marginLeft + 'px';
105
76
  }
106
77
 
107
- if (this.forElement_) {
108
- // Tabindex needs to be set for `blur` events to be emitted
109
- if (!this.forElement_.getAttribute('tabindex')) {
110
- this.forElement_.setAttribute('tabindex', '0');
78
+ this.element_.style.top = props.top + props.height + 10 + 'px';
79
+ this.element_.classList.add(this.CssClasses_.IS_ACTIVE);
80
+ window.addEventListener('scroll', this.boundMouseLeaveHandler, false);
81
+ window.addEventListener('touchmove', this.boundMouseLeaveHandler, false);
82
+ };
83
+
84
+ /**
85
+ * Handle mouseleave for tooltip.
86
+ *
87
+ * @param {Event} event The event that fired.
88
+ * @private
89
+ */
90
+ MaterialTooltip.prototype.handleMouseLeave_ = function(event) {
91
+ event.stopPropagation();
92
+ this.element_.classList.remove(this.CssClasses_.IS_ACTIVE);
93
+ window.removeEventListener('scroll', this.boundMouseLeaveHandler);
94
+ window.removeEventListener('touchmove', this.boundMouseLeaveHandler, false);
95
+ };
96
+
97
+ /**
98
+ * Initialize element.
99
+ */
100
+ MaterialTooltip.prototype.init = function() {
101
+
102
+ if (this.element_) {
103
+ var forElId = this.element_.getAttribute('for');
104
+
105
+ if (forElId) {
106
+ this.forElement_ = document.getElementById(forElId);
111
107
  }
112
108
 
113
- this.boundMouseEnterHandler = this.handleMouseEnter_.bind(this);
114
- this.boundMouseLeaveHandler = this.handleMouseLeave_.bind(this);
115
- this.forElement_.addEventListener('mouseenter', this.boundMouseEnterHandler,
116
- false);
117
- this.forElement_.addEventListener('click', this.boundMouseEnterHandler,
118
- false);
119
- this.forElement_.addEventListener('blur', this.boundMouseLeaveHandler);
120
- this.forElement_.addEventListener('touchstart', this.boundMouseEnterHandler,
121
- false);
122
- this.forElement_.addEventListener('mouseleave', this.boundMouseLeaveHandler);
109
+ if (this.forElement_) {
110
+ // Tabindex needs to be set for `blur` events to be emitted
111
+ if (!this.forElement_.getAttribute('tabindex')) {
112
+ this.forElement_.setAttribute('tabindex', '0');
113
+ }
114
+
115
+ this.boundMouseEnterHandler = this.handleMouseEnter_.bind(this);
116
+ this.boundMouseLeaveHandler = this.handleMouseLeave_.bind(this);
117
+ this.forElement_.addEventListener('mouseenter', this.boundMouseEnterHandler,
118
+ false);
119
+ this.forElement_.addEventListener('click', this.boundMouseEnterHandler,
120
+ false);
121
+ this.forElement_.addEventListener('blur', this.boundMouseLeaveHandler);
122
+ this.forElement_.addEventListener('touchstart', this.boundMouseEnterHandler,
123
+ false);
124
+ this.forElement_.addEventListener('mouseleave', this.boundMouseLeaveHandler);
125
+ }
123
126
  }
124
- }
125
- };
126
-
127
- /*
128
- * Downgrade the component
129
- */
130
- MaterialTooltip.prototype.mdlDowngrade_ = function() {
131
- 'use strict';
132
- if (this.forElement_) {
133
- this.forElement_.removeEventListener('mouseenter', this.boundMouseEnterHandler, false);
134
- this.forElement_.removeEventListener('click', this.boundMouseEnterHandler, false);
135
- this.forElement_.removeEventListener('touchstart', this.boundMouseEnterHandler, false);
136
- this.forElement_.removeEventListener('mouseleave', this.boundMouseLeaveHandler);
137
- }
138
- };
139
-
140
- // The component registers itself. It can assume componentHandler is available
141
- // in the global scope.
142
- componentHandler.register({
143
- constructor: MaterialTooltip,
144
- classAsString: 'MaterialTooltip',
145
- cssClass: 'mdl-tooltip'
146
- });
127
+ };
128
+
129
+ /**
130
+ * Downgrade the component
131
+ *
132
+ * @private
133
+ */
134
+ MaterialTooltip.prototype.mdlDowngrade_ = function() {
135
+ if (this.forElement_) {
136
+ this.forElement_.removeEventListener('mouseenter', this.boundMouseEnterHandler, false);
137
+ this.forElement_.removeEventListener('click', this.boundMouseEnterHandler, false);
138
+ this.forElement_.removeEventListener('touchstart', this.boundMouseEnterHandler, false);
139
+ this.forElement_.removeEventListener('mouseleave', this.boundMouseLeaveHandler);
140
+ }
141
+ };
142
+
143
+ // The component registers itself. It can assume componentHandler is available
144
+ // in the global scope.
145
+ componentHandler.register({
146
+ constructor: MaterialTooltip,
147
+ classAsString: 'MaterialTooltip',
148
+ cssClass: 'mdl-tooltip'
149
+ });
150
+ })();
@@ -46,7 +46,7 @@
46
46
 
47
47
  font-family: $preferred_font;
48
48
  font-weight: 600;
49
- font-size: 12px;
49
+ font-size: $badge-font-size;
50
50
  width: $badge-size;
51
51
  height: $badge-size;
52
52
  border-radius : 50%;
@@ -23,7 +23,6 @@
23
23
  border: none;
24
24
  border-radius: $button-border-radius;
25
25
  color: $button-secondary-color;
26
- display: block;
27
26
  position: relative;
28
27
  height: $button-height;
29
28
  min-width: $button-min-width;
@@ -231,7 +230,8 @@ input.mdl-button[type="submit"] {
231
230
  z-index: 0;
232
231
  overflow: hidden;
233
232
 
234
- .mdl-button[disabled] & .mdl-ripple {
233
+ .mdl-button[disabled] & .mdl-ripple,
234
+ .mdl-button.mdl-button--disabled & .mdl-ripple {
235
235
  background-color: transparent;
236
236
  }
237
237
  }
@@ -264,7 +264,8 @@ input.mdl-button[type="submit"] {
264
264
 
265
265
  .mdl-button {
266
266
  // Bump up specificity by using [disabled] twice.
267
- &[disabled][disabled] {
267
+ &[disabled][disabled],
268
+ &.mdl-button--disabled.mdl-button--disabled {
268
269
  color: $button-secondary-color-disabled;
269
270
  cursor: auto;
270
271
  background-color: transparent;
@@ -272,7 +273,8 @@ input.mdl-button[type="submit"] {
272
273
 
273
274
  &--fab {
274
275
  // Bump up specificity by using [disabled] twice.
275
- &[disabled][disabled] {
276
+ &[disabled][disabled],
277
+ &.mdl-button--disabled.mdl-button--disabled {
276
278
  background-color: $button-primary-color-disabled;
277
279
  color: $button-secondary-color-disabled;
278
280
  @include shadow-2dp();
@@ -281,7 +283,8 @@ input.mdl-button[type="submit"] {
281
283
 
282
284
  &--raised {
283
285
  // Bump up specificity by using [disabled] twice.
284
- &[disabled][disabled] {
286
+ &[disabled][disabled],
287
+ &.mdl-button--disabled.mdl-button--disabled {
285
288
  background-color: $button-primary-color-disabled;
286
289
  color: $button-secondary-color-disabled;
287
290
  @include shadow-2dp();
@@ -289,10 +292,14 @@ input.mdl-button[type="submit"] {
289
292
  }
290
293
  &--colored {
291
294
  // Bump up specificity by using [disabled] twice.
292
- &[disabled][disabled] {
293
- background-color: $button-primary-color-disabled;
295
+ &[disabled][disabled],
296
+ &.mdl-button--disabled.mdl-button--disabled {
294
297
  color: $button-secondary-color-disabled;
295
- @include shadow-2dp();
296
298
  }
297
299
  }
298
300
  }
301
+
302
+ // Align icons inside buttons with text
303
+ .mdl-button .material-icons {
304
+ vertical-align: middle;
305
+ }
@@ -72,7 +72,7 @@
72
72
  }
73
73
 
74
74
  .mdl-card__subtitle-text {
75
- font-size: 14px;
75
+ font-size: $card-subtitle-font-size;
76
76
  color: grey;
77
77
  margin: 0;
78
78
  }
@@ -135,7 +135,7 @@
135
135
  .mdl-checkbox__label {
136
136
  position: relative;
137
137
  cursor: pointer;
138
- font-size: 16px;
138
+ font-size: $checkbox-label-font-size;
139
139
  line-height: $checkbox-label-height;
140
140
  margin: 0;
141
141
 
@@ -22,7 +22,7 @@
22
22
  border: $data-table-dividers;
23
23
  border-collapse: collapse;
24
24
  white-space: nowrap;
25
- font-size: 13px;
25
+ font-size: $data-table-font-size;
26
26
  background-color: unquote("rgb(#{$color-white})");
27
27
 
28
28
  thead {
@@ -85,13 +85,15 @@
85
85
  text-overflow: ellipsis;
86
86
  @include typo-body-2();
87
87
  height: $data-table-row-height;
88
- font-size: 12px;
88
+ font-size: $data-table-header-font-size;
89
89
  color: $data-table-header-color;
90
90
  padding-bottom: 8px;
91
91
  box-sizing: border-box;
92
92
 
93
93
  .mdl-data-table__select {
94
- position: relative;
94
+ position: absolute;
95
+ bottom: 8px;
96
+ left: 24px;
95
97
  }
96
98
  }
97
99
  }
@@ -1,3 +1,19 @@
1
+ /**
2
+ * Copyright 2015 Google Inc. All Rights Reserved.
3
+ *
4
+ * Licensed under the Apache License, Version 2.0 (the "License");
5
+ * you may not use this file except in compliance with the License.
6
+ * You may obtain a copy of the License at
7
+ *
8
+ * http://www.apache.org/licenses/LICENSE-2.0
9
+ *
10
+ * Unless required by applicable law or agreed to in writing, software
11
+ * distributed under the License is distributed on an "AS IS" BASIS,
12
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
+ * See the License for the specific language governing permissions and
14
+ * limitations under the License.
15
+ */
16
+
1
17
  @function strip-units($number) {
2
18
  @return $number / ($number * 0 + 1);
3
19
  }
@@ -14,6 +14,12 @@
14
14
  * limitations under the License.
15
15
  */
16
16
 
17
+ /*
18
+ * NOTE: Some rules here are applied using duplicate selectors.
19
+ * This is on purpose to increase their specificity when applied.
20
+ * For example: `.mdl-cell--1-col-phone.mdl-cell--1-col-phone`
21
+ */
22
+
17
23
  @import "variables";
18
24
 
19
25
  .mdl-grid {
@@ -87,10 +93,7 @@
87
93
 
88
94
  // Define partial sizes for columnNumber < totalColumns.
89
95
  @for $i from 1 through ($grid-phone-columns - 1) {
90
- .mdl-cell--#{$i}-col {
91
- @include partial-size($i, $grid-phone-columns, $grid-phone-gutter);
92
- }
93
-
96
+ .mdl-cell--#{$i}-col,
94
97
  .mdl-cell--#{$i}-col-phone.mdl-cell--#{$i}-col-phone {
95
98
  @include partial-size($i, $grid-phone-columns, $grid-phone-gutter);
96
99
  }
@@ -98,10 +101,7 @@
98
101
 
99
102
  // Define 100% for everything else.
100
103
  @for $i from $grid-phone-columns through $grid-desktop-columns {
101
- .mdl-cell--#{$i}-col {
102
- @include full-size($grid-phone-gutter);
103
- }
104
-
104
+ .mdl-cell--#{$i}-col,
105
105
  .mdl-cell--#{$i}-col-phone.mdl-cell--#{$i}-col-phone {
106
106
  @include full-size($grid-phone-gutter);
107
107
  }
@@ -128,10 +128,7 @@
128
128
 
129
129
  // Define partial sizes for columnNumber < totalColumns.
130
130
  @for $i from 1 through ($grid-tablet-columns - 1) {
131
- .mdl-cell--#{$i}-col {
132
- @include partial-size($i, $grid-tablet-columns, $grid-tablet-gutter);
133
- }
134
-
131
+ .mdl-cell--#{$i}-col,
135
132
  .mdl-cell--#{$i}-col-tablet.mdl-cell--#{$i}-col-tablet {
136
133
  @include partial-size($i, $grid-tablet-columns, $grid-tablet-gutter);
137
134
  }
@@ -139,10 +136,7 @@
139
136
 
140
137
  // Define 100% for everything else.
141
138
  @for $i from $grid-tablet-columns through $grid-desktop-columns {
142
- .mdl-cell--#{$i}-col {
143
- @include full-size($grid-tablet-gutter);
144
- }
145
-
139
+ .mdl-cell--#{$i}-col,
146
140
  .mdl-cell--#{$i}-col-tablet.mdl-cell--#{$i}-col-tablet {
147
141
  @include full-size($grid-tablet-gutter);
148
142
  }
@@ -169,10 +163,7 @@
169
163
 
170
164
  // Define partial sizes for all numbers of columns.
171
165
  @for $i from 1 through $grid-desktop-columns {
172
- .mdl-cell--#{$i}-col {
173
- @include partial-size($i, $grid-desktop-columns, $grid-desktop-gutter);
174
- }
175
-
166
+ .mdl-cell--#{$i}-col,
176
167
  .mdl-cell--#{$i}-col-desktop.mdl-cell--#{$i}-col-desktop {
177
168
  @include partial-size($i, $grid-desktop-columns, $grid-desktop-gutter);
178
169
  }