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.
Files changed (44) hide show
  1. checksums.yaml +4 -4
  2. data/.travis.yml +5 -2
  3. data/CHANGELOG.md +9 -0
  4. data/README.md +41 -32
  5. data/lib/material_design_lite/sass/version.rb +1 -1
  6. data/vendor/assets/javascripts/material.js +377 -301
  7. data/vendor/assets/javascripts/material/button.js +0 -24
  8. data/vendor/assets/javascripts/material/checkbox.js +0 -26
  9. data/vendor/assets/javascripts/material/data-table.js +18 -10
  10. data/vendor/assets/javascripts/material/icon-toggle.js +0 -26
  11. data/vendor/assets/javascripts/material/layout.js +104 -6
  12. data/vendor/assets/javascripts/material/mdlComponentHandler.js +15 -36
  13. data/vendor/assets/javascripts/material/menu.js +16 -36
  14. data/vendor/assets/javascripts/material/progress.js +0 -22
  15. data/vendor/assets/javascripts/material/radio.js +0 -28
  16. data/vendor/assets/javascripts/material/ripple.js +6 -35
  17. data/vendor/assets/javascripts/material/slider.js +0 -23
  18. data/vendor/assets/javascripts/material/snackbar.js +189 -0
  19. data/vendor/assets/javascripts/material/switch.js +0 -26
  20. data/vendor/assets/javascripts/material/tabs.js +2 -2
  21. data/vendor/assets/javascripts/material/textfield.js +32 -25
  22. data/vendor/assets/javascripts/material/tooltip.js +39 -49
  23. data/vendor/assets/stylesheets/_material.scss +3 -0
  24. data/vendor/assets/stylesheets/material/_badge.scss +6 -0
  25. data/vendor/assets/stylesheets/material/_button.scss +3 -3
  26. data/vendor/assets/stylesheets/material/_checkbox.scss +5 -0
  27. data/vendor/assets/stylesheets/material/_data-table.scss +17 -9
  28. data/vendor/assets/stylesheets/material/_dialog.scss +57 -0
  29. data/vendor/assets/stylesheets/material/_grid.scss +60 -0
  30. data/vendor/assets/stylesheets/material/_layout.scss +77 -3
  31. data/vendor/assets/stylesheets/material/_list.scss +103 -0
  32. data/vendor/assets/stylesheets/material/_mega_footer.scss +1 -1
  33. data/vendor/assets/stylesheets/material/_menu.scss +5 -1
  34. data/vendor/assets/stylesheets/material/_mixins.scss +33 -0
  35. data/vendor/assets/stylesheets/material/_progress.scss +5 -0
  36. data/vendor/assets/stylesheets/material/_radio.scss +5 -0
  37. data/vendor/assets/stylesheets/material/_shadow.scss +4 -0
  38. data/vendor/assets/stylesheets/material/_snackbar.scss +81 -0
  39. data/vendor/assets/stylesheets/material/_switch.scss +5 -1
  40. data/vendor/assets/stylesheets/material/_tabs.scss +0 -1
  41. data/vendor/assets/stylesheets/material/_textfield.scss +13 -3
  42. data/vendor/assets/stylesheets/material/_typography.scss +4 -0
  43. data/vendor/assets/stylesheets/material/_variables.scss +102 -81
  44. 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
+ }
@@ -268,7 +268,7 @@
268
268
 
269
269
  & + .mdl-mega-footer--heading:after,
270
270
  & + .mdl-mega-footer__heading:after {
271
- background-image: none;
271
+ content: '';
272
272
  }
273
273
  }
274
274
  .mdl-mega-footer--heading-checkbox:checked,
@@ -151,7 +151,11 @@
151
151
  border: 0;
152
152
  }
153
153
 
154
- &[disabled] {
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
  }
@@ -40,3 +40,7 @@
40
40
  .mdl-shadow--16dp {
41
41
  @include shadow-16dp();
42
42
  }
43
+
44
+ .mdl-shadow--24dp {
45
+ @include shadow-24dp();
46
+ }
@@ -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
+ }