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.
- checksums.yaml +4 -4
- data/CHANGELOG.md +6 -0
- data/lib/material_design_lite/sass/version.rb +1 -1
- data/vendor/assets/javascripts/material.js +2562 -2993
- data/vendor/assets/javascripts/material/button.js +114 -112
- data/vendor/assets/javascripts/material/checkbox.js +255 -260
- data/vendor/assets/javascripts/material/data-table.js +140 -124
- data/vendor/assets/javascripts/material/icon-toggle.js +239 -243
- data/vendor/assets/javascripts/material/layout.js +392 -388
- data/vendor/assets/javascripts/material/mdlComponentHandler.js +68 -27
- data/vendor/assets/javascripts/material/menu.js +430 -414
- data/vendor/assets/javascripts/material/progress.js +110 -97
- data/vendor/assets/javascripts/material/radio.js +244 -247
- data/vendor/assets/javascripts/material/ripple.js +220 -211
- data/vendor/assets/javascripts/material/slider.js +228 -228
- data/vendor/assets/javascripts/material/spinner.js +122 -119
- data/vendor/assets/javascripts/material/switch.js +246 -250
- data/vendor/assets/javascripts/material/tabs.js +129 -127
- data/vendor/assets/javascripts/material/textfield.js +221 -222
- data/vendor/assets/javascripts/material/tooltip.js +126 -122
- data/vendor/assets/stylesheets/material/_badge.scss +1 -1
- data/vendor/assets/stylesheets/material/_button.scss +15 -8
- data/vendor/assets/stylesheets/material/_card.scss +1 -1
- data/vendor/assets/stylesheets/material/_checkbox.scss +1 -1
- data/vendor/assets/stylesheets/material/_data-table.scss +5 -3
- data/vendor/assets/stylesheets/material/_functions.scss +16 -0
- data/vendor/assets/stylesheets/material/_grid.scss +11 -20
- data/vendor/assets/stylesheets/material/_layout.scss +7 -5
- data/vendor/assets/stylesheets/material/_menu.scss +4 -1
- data/vendor/assets/stylesheets/material/_radio.scss +1 -1
- data/vendor/assets/stylesheets/material/_slider.scss +1 -0
- data/vendor/assets/stylesheets/material/_switch.scss +1 -1
- data/vendor/assets/stylesheets/material/_tabs.scss +1 -1
- data/vendor/assets/stylesheets/material/_textfield.scss +15 -5
- data/vendor/assets/stylesheets/material/_tooltip.scss +2 -2
- data/vendor/assets/stylesheets/material/_variables.scss +18 -43
- data/vendor/assets/stylesheets/material/resets/_h5bp.scss +28 -21
- 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
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
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
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
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
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
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
|
-
*
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
};
|
139
|
-
|
140
|
-
// The component registers itself. It can assume componentHandler is available
|
141
|
-
// in the global scope.
|
142
|
-
componentHandler.register({
|
143
|
-
|
144
|
-
|
145
|
-
|
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
|
+
})();
|
@@ -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
|
-
|
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
|
+
}
|
@@ -22,7 +22,7 @@
|
|
22
22
|
border: $data-table-dividers;
|
23
23
|
border-collapse: collapse;
|
24
24
|
white-space: nowrap;
|
25
|
-
font-size:
|
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:
|
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:
|
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
|
}
|