material_design_lite-sass 1.0.6.3 → 1.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.
- checksums.yaml +4 -4
- data/.travis.yml +5 -2
- data/CHANGELOG.md +9 -0
- data/README.md +41 -32
- data/lib/material_design_lite/sass/version.rb +1 -1
- data/vendor/assets/javascripts/material.js +377 -301
- data/vendor/assets/javascripts/material/button.js +0 -24
- data/vendor/assets/javascripts/material/checkbox.js +0 -26
- data/vendor/assets/javascripts/material/data-table.js +18 -10
- data/vendor/assets/javascripts/material/icon-toggle.js +0 -26
- data/vendor/assets/javascripts/material/layout.js +104 -6
- data/vendor/assets/javascripts/material/mdlComponentHandler.js +15 -36
- data/vendor/assets/javascripts/material/menu.js +16 -36
- data/vendor/assets/javascripts/material/progress.js +0 -22
- data/vendor/assets/javascripts/material/radio.js +0 -28
- data/vendor/assets/javascripts/material/ripple.js +6 -35
- data/vendor/assets/javascripts/material/slider.js +0 -23
- data/vendor/assets/javascripts/material/snackbar.js +189 -0
- data/vendor/assets/javascripts/material/switch.js +0 -26
- data/vendor/assets/javascripts/material/tabs.js +2 -2
- data/vendor/assets/javascripts/material/textfield.js +32 -25
- data/vendor/assets/javascripts/material/tooltip.js +39 -49
- data/vendor/assets/stylesheets/_material.scss +3 -0
- data/vendor/assets/stylesheets/material/_badge.scss +6 -0
- data/vendor/assets/stylesheets/material/_button.scss +3 -3
- data/vendor/assets/stylesheets/material/_checkbox.scss +5 -0
- data/vendor/assets/stylesheets/material/_data-table.scss +17 -9
- data/vendor/assets/stylesheets/material/_dialog.scss +57 -0
- data/vendor/assets/stylesheets/material/_grid.scss +60 -0
- data/vendor/assets/stylesheets/material/_layout.scss +77 -3
- data/vendor/assets/stylesheets/material/_list.scss +103 -0
- data/vendor/assets/stylesheets/material/_mega_footer.scss +1 -1
- data/vendor/assets/stylesheets/material/_menu.scss +5 -1
- data/vendor/assets/stylesheets/material/_mixins.scss +33 -0
- data/vendor/assets/stylesheets/material/_progress.scss +5 -0
- data/vendor/assets/stylesheets/material/_radio.scss +5 -0
- data/vendor/assets/stylesheets/material/_shadow.scss +4 -0
- data/vendor/assets/stylesheets/material/_snackbar.scss +81 -0
- data/vendor/assets/stylesheets/material/_switch.scss +5 -1
- data/vendor/assets/stylesheets/material/_tabs.scss +0 -1
- data/vendor/assets/stylesheets/material/_textfield.scss +13 -3
- data/vendor/assets/stylesheets/material/_typography.scss +4 -0
- data/vendor/assets/stylesheets/material/_variables.scss +102 -81
- metadata +7 -3
@@ -28,9 +28,13 @@
|
|
28
28
|
.mdl-navigation__link {
|
29
29
|
color: $layout-text-color;
|
30
30
|
text-decoration: none;
|
31
|
-
font-weight: 500;
|
32
|
-
font-size: $layout-nav-link-font-size;
|
33
31
|
margin: 0;
|
32
|
+
@include typo-body-1(true);
|
33
|
+
|
34
|
+
// Align icons inside link with text
|
35
|
+
& .material-icons {
|
36
|
+
vertical-align: middle;
|
37
|
+
}
|
34
38
|
}
|
35
39
|
|
36
40
|
// Main layout class.
|
@@ -213,6 +217,14 @@
|
|
213
217
|
.mdl-layout--fixed-drawer > & {
|
214
218
|
display: none;
|
215
219
|
}
|
220
|
+
|
221
|
+
.mdl-layout--no-desktop-drawer-button & {
|
222
|
+
display: none;
|
223
|
+
}
|
224
|
+
}
|
225
|
+
|
226
|
+
.mdl-layout--no-drawer-button & {
|
227
|
+
display: none;
|
216
228
|
}
|
217
229
|
}
|
218
230
|
|
@@ -323,6 +335,10 @@
|
|
323
335
|
&.is-casting-shadow {
|
324
336
|
@include shadow-2dp();
|
325
337
|
}
|
338
|
+
|
339
|
+
&.mdl-layout__header--waterfall-hide-top {
|
340
|
+
justify-content: flex-end;
|
341
|
+
}
|
326
342
|
}
|
327
343
|
|
328
344
|
.mdl-layout__header-row {
|
@@ -337,9 +353,23 @@
|
|
337
353
|
margin: 0;
|
338
354
|
padding: 0 $layout-header-desktop-indent 0 $layout-header-desktop-baseline;
|
339
355
|
|
356
|
+
.mdl-layout--no-drawer-button & {
|
357
|
+
padding-left: $layout-header-desktop-indent;
|
358
|
+
}
|
359
|
+
|
360
|
+
@media screen and (min-width: $layout-screen-size-threshold + 1px) {
|
361
|
+
.mdl-layout--no-desktop-drawer-button & {
|
362
|
+
padding-left: $layout-header-desktop-indent;
|
363
|
+
}
|
364
|
+
}
|
365
|
+
|
340
366
|
@media screen and (max-width: $layout-screen-size-threshold) {
|
341
367
|
height: $layout-header-mobile-row-height;
|
342
368
|
padding: 0 $layout-header-mobile-indent 0 $layout-header-mobile-baseline;
|
369
|
+
|
370
|
+
.mdl-layout--no-drawer-button & {
|
371
|
+
padding-left: $layout-header-mobile-indent;
|
372
|
+
}
|
343
373
|
}
|
344
374
|
|
345
375
|
& > * {
|
@@ -372,7 +402,8 @@
|
|
372
402
|
line-height: $layout-header-mobile-row-height;
|
373
403
|
padding: 0 $layout-header-mobile-indent;
|
374
404
|
}
|
375
|
-
}
|
405
|
+
}
|
406
|
+
}
|
376
407
|
|
377
408
|
// Obfuscator.
|
378
409
|
.mdl-layout__obfuscator {
|
@@ -391,6 +422,18 @@
|
|
391
422
|
background-color: rgba(0, 0, 0, 0.5);
|
392
423
|
visibility: visible;
|
393
424
|
}
|
425
|
+
|
426
|
+
@supports (pointer-events: auto) {
|
427
|
+
background-color: rgba(0, 0, 0, 0.5);
|
428
|
+
opacity: 0;
|
429
|
+
transition-property: opacity;
|
430
|
+
visibility: visible;
|
431
|
+
pointer-events: none;
|
432
|
+
&.is-visible {
|
433
|
+
pointer-events: auto;
|
434
|
+
opacity: 1;
|
435
|
+
}
|
436
|
+
}
|
394
437
|
}
|
395
438
|
|
396
439
|
|
@@ -399,6 +442,7 @@
|
|
399
442
|
// Fix IE10 bug.
|
400
443
|
-ms-flex: 0 1 auto;
|
401
444
|
|
445
|
+
position: relative;
|
402
446
|
display: inline-block;
|
403
447
|
overflow-y: auto;
|
404
448
|
overflow-x: hidden;
|
@@ -443,11 +487,31 @@
|
|
443
487
|
display: none;
|
444
488
|
}
|
445
489
|
|
490
|
+
.mdl-layout--no-drawer-button & {
|
491
|
+
padding-left: $layout-header-desktop-indent - $layout-tab-desktop-padding;
|
492
|
+
width: calc(100% -
|
493
|
+
#{(($layout-header-desktop-indent - $layout-tab-desktop-padding) * 2)});
|
494
|
+
}
|
495
|
+
|
496
|
+
@media screen and (min-width: $layout-screen-size-threshold + 1px) {
|
497
|
+
.mdl-layout--no-desktop-drawer-button & {
|
498
|
+
padding-left: $layout-header-desktop-indent - $layout-tab-desktop-padding;
|
499
|
+
width: calc(100% -
|
500
|
+
#{(($layout-header-desktop-indent - $layout-tab-desktop-padding) * 2)});
|
501
|
+
}
|
502
|
+
}
|
503
|
+
|
446
504
|
@media screen and (max-width: $layout-screen-size-threshold) {
|
447
505
|
width: calc(100% -
|
448
506
|
#{($layout-header-mobile-baseline - $layout-tab-mobile-padding)});
|
449
507
|
padding: 0 0 0
|
450
508
|
($layout-header-mobile-baseline - $layout-tab-mobile-padding);
|
509
|
+
|
510
|
+
.mdl-layout--no-drawer-button & {
|
511
|
+
width: calc(100% -
|
512
|
+
#{(($layout-header-mobile-indent - $layout-tab-mobile-padding) * 2)});
|
513
|
+
padding-left: $layout-header-mobile-indent - $layout-tab-mobile-padding;
|
514
|
+
}
|
451
515
|
}
|
452
516
|
|
453
517
|
.mdl-layout--fixed-tabs & {
|
@@ -488,6 +552,16 @@
|
|
488
552
|
cursor: pointer;
|
489
553
|
user-select: none;
|
490
554
|
|
555
|
+
.mdl-layout--no-desktop-drawer-button &,
|
556
|
+
.mdl-layout--no-drawer-button & {
|
557
|
+
width: $layout-header-desktop-indent - $layout-tab-desktop-padding;
|
558
|
+
|
559
|
+
& .material-icons {
|
560
|
+
position: relative;
|
561
|
+
left: ($layout-header-desktop-indent - $layout-tab-desktop-padding - 24px) / 2;
|
562
|
+
}
|
563
|
+
}
|
564
|
+
|
491
565
|
@media screen and (max-width: $layout-screen-size-threshold) {
|
492
566
|
display: none;
|
493
567
|
width: $layout-header-mobile-baseline - $layout-tab-mobile-padding;
|
@@ -0,0 +1,103 @@
|
|
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
|
+
|
17
|
+
@import "variables";
|
18
|
+
@import "mixins";
|
19
|
+
|
20
|
+
|
21
|
+
.mdl-list {
|
22
|
+
display: block;
|
23
|
+
padding: 8px 0 ;
|
24
|
+
list-style: none;
|
25
|
+
}
|
26
|
+
|
27
|
+
.mdl-list__item {
|
28
|
+
@include typo-body-1();
|
29
|
+
display: flex;
|
30
|
+
box-sizing: border-box;
|
31
|
+
height: 48px;
|
32
|
+
flex-direction: row;
|
33
|
+
flex-wrap: nowrap;
|
34
|
+
align-items: center;
|
35
|
+
padding : 16px 16px 20px 16px;
|
36
|
+
cursor: default;
|
37
|
+
& .mdl-list__item-primary-content {
|
38
|
+
order:0;
|
39
|
+
flex-grow: 2;
|
40
|
+
text-decoration: none;
|
41
|
+
|
42
|
+
& .material-icons {
|
43
|
+
font-size: 40px;
|
44
|
+
line-height: 0;
|
45
|
+
vertical-align: middle;
|
46
|
+
padding: 0 12px 0 0;
|
47
|
+
}
|
48
|
+
}
|
49
|
+
|
50
|
+
& .mdl-list__item-secondary-content {
|
51
|
+
display: flex;
|
52
|
+
flex-flow: column;
|
53
|
+
align-items: flex-end;
|
54
|
+
& .mdl-list__item-secondary-action label { display: inline; }
|
55
|
+
& .mdl-list__item-secondary-info {
|
56
|
+
@include typo-caption();
|
57
|
+
margin-bottom: 10px;
|
58
|
+
color: $list-supporting-text-text-color;
|
59
|
+
}
|
60
|
+
& .mdl-list__item-sub-header {
|
61
|
+
padding: 0 0 0 16px;
|
62
|
+
}
|
63
|
+
}
|
64
|
+
}
|
65
|
+
|
66
|
+
.mdl-list__item-avatar {
|
67
|
+
height: 56px;
|
68
|
+
}
|
69
|
+
|
70
|
+
.mdl-list__item--two-line {
|
71
|
+
height: 72px;
|
72
|
+
|
73
|
+
& .mdl-list__item-primary-content {
|
74
|
+
& .material-icons {
|
75
|
+
vertical-align: text-bottom;
|
76
|
+
}
|
77
|
+
|
78
|
+
& .mdl-list__item-sub-title {
|
79
|
+
@include typo-caption();
|
80
|
+
display: block;
|
81
|
+
padding : 0 0 0 56px;
|
82
|
+
}
|
83
|
+
}
|
84
|
+
}
|
85
|
+
|
86
|
+
.mdl-list__item--three-line {
|
87
|
+
height: 88px;
|
88
|
+
|
89
|
+
& .mdl-list__item-primary-content {
|
90
|
+
& .material-icons {
|
91
|
+
vertical-align: text-bottom;
|
92
|
+
}
|
93
|
+
}
|
94
|
+
|
95
|
+
& .mdl-list__item-text-body {
|
96
|
+
@include typo-caption();
|
97
|
+
color: $list-supporting-text-text-color;
|
98
|
+
display: block;
|
99
|
+
height: 24px;
|
100
|
+
padding: 0 0 0 56px;
|
101
|
+
overflow: hidden;
|
102
|
+
}
|
103
|
+
}
|
@@ -151,7 +151,11 @@
|
|
151
151
|
border: 0;
|
152
152
|
}
|
153
153
|
|
154
|
-
|
154
|
+
&--full-bleed-divider {
|
155
|
+
border-bottom: 1px solid $default-item-divider-color;
|
156
|
+
}
|
157
|
+
|
158
|
+
&[disabled], &[data-mdl-disabled] {
|
155
159
|
color: $disabled-item-text-color;
|
156
160
|
background-color: transparent;
|
157
161
|
cursor: auto;
|
@@ -206,6 +206,21 @@
|
|
206
206
|
}
|
207
207
|
}
|
208
208
|
|
209
|
+
@mixin typo-icon() {
|
210
|
+
font-family: 'Material Icons';
|
211
|
+
font-weight: normal;
|
212
|
+
font-style: normal;
|
213
|
+
font-size: 24px;
|
214
|
+
line-height: 1;
|
215
|
+
letter-spacing: normal;
|
216
|
+
text-transform: none;
|
217
|
+
display: inline-block;
|
218
|
+
word-wrap: normal;
|
219
|
+
font-feature-settings: 'liga';
|
220
|
+
-webkit-font-feature-settings: 'liga';
|
221
|
+
-webkit-font-smoothing: antialiased;
|
222
|
+
}
|
223
|
+
|
209
224
|
/* Shadows */
|
210
225
|
|
211
226
|
// Focus shadow mixin.
|
@@ -245,6 +260,12 @@
|
|
245
260
|
0 8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity);
|
246
261
|
}
|
247
262
|
|
263
|
+
@mixin shadow-24dp() {
|
264
|
+
box-shadow: 0 9px 46px 8px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
|
265
|
+
0 11px 15px -7px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
|
266
|
+
0 24px 38px 3px rgba(0, 0, 0, $shadow-key-umbra-opacity);
|
267
|
+
}
|
268
|
+
|
248
269
|
/* Animations */
|
249
270
|
|
250
271
|
@mixin material-animation-fast-out-slow-in($duration:0.2s) {
|
@@ -266,3 +287,15 @@
|
|
266
287
|
transition-duration: $duration;
|
267
288
|
transition-timing-function: $animation-curve-default;
|
268
289
|
}
|
290
|
+
|
291
|
+
/* Dialog */
|
292
|
+
|
293
|
+
@mixin dialog-width($units:5) {
|
294
|
+
@if(type_of($units) != 'number') {
|
295
|
+
@error "The unit given to dialog-width should be a number.";
|
296
|
+
}
|
297
|
+
// 56dp is the base unit width for Dialogs.
|
298
|
+
// With 5 units being the number of units for a mobile device.
|
299
|
+
// https://goo.gl/sK2O5o
|
300
|
+
width: $units * 56px;
|
301
|
+
}
|
@@ -21,6 +21,7 @@
|
|
21
21
|
position: relative;
|
22
22
|
height: $bar-height;
|
23
23
|
width: 500px;
|
24
|
+
max-width: 100%;
|
24
25
|
}
|
25
26
|
|
26
27
|
.mdl-progress > .bar {
|
@@ -51,6 +52,7 @@
|
|
51
52
|
|
52
53
|
// Webkit only
|
53
54
|
@supports (-webkit-appearance:none) {
|
55
|
+
.mdl-progress:not(.mdl-progress--indeterminate):not(.mdl-progress--indeterminate) > .auxbar,
|
54
56
|
.mdl-progress:not(.mdl-progress__indeterminate):not(.mdl-progress__indeterminate) > .auxbar {
|
55
57
|
background-image: linear-gradient(to right, $progress-secondary-color, $progress-secondary-color),
|
56
58
|
linear-gradient(to right, $progress-main-color, $progress-main-color);
|
@@ -58,11 +60,13 @@
|
|
58
60
|
}
|
59
61
|
}
|
60
62
|
|
63
|
+
.mdl-progress:not(.mdl-progress--indeterminate) > .auxbar,
|
61
64
|
.mdl-progress:not(.mdl-progress__indeterminate) > .auxbar {
|
62
65
|
background-image: linear-gradient(to right, $progress-fallback-buffer-color, $progress-fallback-buffer-color),
|
63
66
|
linear-gradient(to right, $progress-main-color, $progress-main-color);
|
64
67
|
}
|
65
68
|
|
69
|
+
.mdl-progress.mdl-progress--indeterminate > .bar1,
|
66
70
|
.mdl-progress.mdl-progress__indeterminate > .bar1 {
|
67
71
|
background-color: $progress-main-color;
|
68
72
|
animation-name: indeterminate1;
|
@@ -71,6 +75,7 @@
|
|
71
75
|
animation-timing-function: linear;
|
72
76
|
}
|
73
77
|
|
78
|
+
.mdl-progress.mdl-progress--indeterminate > .bar3,
|
74
79
|
.mdl-progress.mdl-progress__indeterminate > .bar3 {
|
75
80
|
background-image: none;
|
76
81
|
background-color: $progress-main-color;
|
@@ -76,6 +76,7 @@
|
|
76
76
|
border: 2px solid $radio-color;
|
77
77
|
}
|
78
78
|
|
79
|
+
fieldset[disabled] .mdl-radio,
|
79
80
|
.mdl-radio.is-disabled & {
|
80
81
|
border: 2px solid $radio-disabled-color;
|
81
82
|
cursor: auto;
|
@@ -106,6 +107,7 @@
|
|
106
107
|
transform: scale3d(1, 1, 1);
|
107
108
|
}
|
108
109
|
|
110
|
+
fieldset[disabled] .mdl-radio &,
|
109
111
|
.mdl-radio.is-disabled & {
|
110
112
|
background: $radio-disabled-color;
|
111
113
|
cursor: auto;
|
@@ -119,6 +121,7 @@
|
|
119
121
|
.mdl-radio__label {
|
120
122
|
cursor: pointer;
|
121
123
|
|
124
|
+
fieldset[disabled] .mdl-radio &,
|
122
125
|
.mdl-radio.is-disabled & {
|
123
126
|
color: $radio-disabled-color;
|
124
127
|
cursor: auto;
|
@@ -145,10 +148,12 @@
|
|
145
148
|
background: $radio-color;
|
146
149
|
}
|
147
150
|
|
151
|
+
fieldset[disabled] .mdl-radio &,
|
148
152
|
.mdl-radio.is-disabled & {
|
149
153
|
cursor: auto;
|
150
154
|
}
|
151
155
|
|
156
|
+
fieldset[disabled] .mdl-radio & .mdl-ripple,
|
152
157
|
.mdl-radio.is-disabled & .mdl-ripple {
|
153
158
|
background: transparent;
|
154
159
|
}
|
@@ -0,0 +1,81 @@
|
|
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
|
+
|
17
|
+
@import "variables";
|
18
|
+
@import "mixins";
|
19
|
+
|
20
|
+
.mdl-snackbar {
|
21
|
+
position: fixed;
|
22
|
+
bottom: 0;
|
23
|
+
left: 50%;
|
24
|
+
margin-right: -50%;
|
25
|
+
cursor: default;
|
26
|
+
background-color: $snackbar-background-color;
|
27
|
+
z-index: 10000;
|
28
|
+
display: flex;
|
29
|
+
font-family: $preferred_font;
|
30
|
+
will-change: transform;
|
31
|
+
transform: translate(0, 80px);
|
32
|
+
transition: transform 0.25s $animation-curve-fast-out-linear-in;
|
33
|
+
pointer-events: none;
|
34
|
+
@media(max-width: $snackbar-tablet-breakpoint - 1) {
|
35
|
+
width: 100%;
|
36
|
+
left: 0;
|
37
|
+
min-height: 48px;
|
38
|
+
max-height: 80px;
|
39
|
+
}
|
40
|
+
@media(min-width: $snackbar-tablet-breakpoint) {
|
41
|
+
min-width: 288px;
|
42
|
+
max-width: 568px;
|
43
|
+
border-radius: 2px;
|
44
|
+
}
|
45
|
+
&--active {
|
46
|
+
transform: translate(0, 0);
|
47
|
+
pointer-events: auto;
|
48
|
+
transition: transform 0.25s $animation-curve-linear-out-slow-in;
|
49
|
+
}
|
50
|
+
|
51
|
+
&__text {
|
52
|
+
padding: 14px 24px;
|
53
|
+
vertical-align: middle;
|
54
|
+
color: white;
|
55
|
+
}
|
56
|
+
|
57
|
+
&__action {
|
58
|
+
background: transparent;
|
59
|
+
border: none;
|
60
|
+
color: $snackbar-action-color;
|
61
|
+
text-transform: uppercase;
|
62
|
+
padding: 14px 24px;
|
63
|
+
@include typo-button();
|
64
|
+
overflow: hidden;
|
65
|
+
outline: none;
|
66
|
+
opacity: 0;
|
67
|
+
pointer-events: none;
|
68
|
+
cursor: pointer;
|
69
|
+
text-decoration: none;
|
70
|
+
text-align: center;
|
71
|
+
vertical-align: middle;
|
72
|
+
|
73
|
+
&::-moz-focus-inner {
|
74
|
+
border: 0;
|
75
|
+
}
|
76
|
+
&:not([aria-hidden]) {
|
77
|
+
opacity: 1;
|
78
|
+
pointer-events: auto;
|
79
|
+
}
|
80
|
+
}
|
81
|
+
}
|