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
@@ -29,7 +29,7 @@
29
29
  color: $layout-text-color;
30
30
  text-decoration: none;
31
31
  font-weight: 500;
32
- font-size: 13px;
32
+ font-size: $layout-nav-link-font-size;
33
33
  margin: 0;
34
34
  }
35
35
 
@@ -243,9 +243,11 @@
243
243
  width: calc(100% - #{$layout-drawer-width});
244
244
  }
245
245
 
246
- .mdl-layout--fixed-drawer > & {
247
- .mdl-layout__header-row {
248
- padding-left: 40px;
246
+ @media screen and (min-width: $layout-screen-size-threshold) {
247
+ .mdl-layout--fixed-drawer > & {
248
+ .mdl-layout__header-row {
249
+ padding-left: 40px;
250
+ }
249
251
  }
250
252
  }
251
253
 
@@ -524,7 +526,7 @@
524
526
 
525
527
  text-align: center;
526
528
  font-weight: 500;
527
- font-size: 14px;
529
+ font-size: $layout-tab-font-size;
528
530
  text-transform: uppercase;
529
531
 
530
532
  color: $layout-header-tab-text-color;
@@ -26,10 +26,13 @@
26
26
  overflow: visible;
27
27
  height: 0;
28
28
  width: 0;
29
+ visibility: hidden;
29
30
  z-index: -1;
30
31
 
31
- &.is-visible {
32
+ &.is-visible,
33
+ &.is-animating {
32
34
  z-index: 999;
35
+ visibility: visible;
33
36
  }
34
37
  }
35
38
 
@@ -20,7 +20,7 @@
20
20
  .mdl-radio {
21
21
  position: relative;
22
22
 
23
- font-size: 16px;
23
+ font-size: $radio-label-font-size;
24
24
  line-height: $radio-label-height;
25
25
 
26
26
  display: inline-block;
@@ -44,6 +44,7 @@ _:-ms-input-placeholder, :root .mdl-slider.mdl-slider.is-upgraded {
44
44
  color: $range-color;
45
45
  align-self: center;
46
46
  z-index: 1;
47
+ cursor: pointer;
47
48
 
48
49
 
49
50
  // Disable default focus on Firefox.
@@ -148,7 +148,7 @@
148
148
  .mdl-switch__label {
149
149
  position: relative;
150
150
  cursor: pointer;
151
- font-size: 16px;
151
+ font-size: $switch-label-font-size;
152
152
  line-height: $switch-label-height;
153
153
  margin: 0;
154
154
  left: 24px;
@@ -51,7 +51,7 @@
51
51
 
52
52
  text-align: center;
53
53
  font-weight: 500;
54
- font-size: 14px;
54
+ font-size: $layout-tab-font-size;
55
55
  text-transform: uppercase;
56
56
 
57
57
  color: $tab-text-color;
@@ -21,7 +21,7 @@
21
21
  .mdl-textfield {
22
22
  position: relative;
23
23
 
24
- font-size: 16px;
24
+ font-size: $input-text-font-size;
25
25
 
26
26
  display: inline-block;
27
27
 
@@ -59,12 +59,11 @@
59
59
  .mdl-textfield__input {
60
60
  border: none;
61
61
  border-bottom: 1px solid $input-text-bottom-border-color;
62
- display: inline-block;
62
+ display: block;
63
63
  font-size: $input-text-font-size;
64
64
  margin: 0;
65
65
  padding: $input-text-padding 0;
66
66
  width: $input-text-width;
67
- background: $input-text-font-size;
68
67
  text-align: left;
69
68
  color: inherit;
70
69
 
@@ -80,9 +79,14 @@
80
79
  .mdl-textfield.is-disabled & {
81
80
  background-color: transparent;
82
81
  border-bottom: 1px dotted $input-text-disabled-color;
82
+ color: $input-text-disabled-text-color;
83
83
  }
84
84
  }
85
85
 
86
+ .mdl-textfield textarea.mdl-textfield__input {
87
+ display: block;
88
+ }
89
+
86
90
  // Styling for the label / floating label.
87
91
  .mdl-textfield__label {
88
92
  bottom: 0;
@@ -92,6 +96,7 @@
92
96
  right: 0;
93
97
  pointer-events: none;
94
98
  position: absolute;
99
+ display: block;
95
100
  top: ($input-text-padding + $input-text-vertical-spacing);
96
101
  width: 100%;
97
102
  overflow: hidden;
@@ -107,6 +112,10 @@
107
112
  @include material-animation-default();
108
113
  }
109
114
 
115
+ .mdl-textfield.is-disabled.is-disabled & {
116
+ color: $input-text-disabled-text-color;
117
+ }
118
+
110
119
  .mdl-textfield--floating-label.is-focused &,
111
120
  .mdl-textfield--floating-label.is-dirty & {
112
121
  color: $input-text-highlight-color;
@@ -122,7 +131,7 @@
122
131
 
123
132
  .mdl-textfield--floating-label.is-invalid & {
124
133
  color: $input-text-error-color;
125
- font-size: 12px;
134
+ font-size: $input-text-floating-label-fontsize;
126
135
  }
127
136
 
128
137
  // The after label is the colored underline for the TextField.
@@ -153,9 +162,10 @@
153
162
  .mdl-textfield__error {
154
163
  color: $input-text-error-color;
155
164
  position: absolute;
156
- font-size: 12px;
165
+ font-size: $input-text-floating-label-fontsize;
157
166
  margin-top: 3px;
158
167
  visibility: hidden;
168
+ display: block;
159
169
 
160
170
  .mdl-textfield.is-invalid & {
161
171
  visibility: visible;
@@ -25,7 +25,7 @@
25
25
  border-radius: 2px;
26
26
  color: $tooltip-text-color;
27
27
  display: inline-block;
28
- font-size: 10px;
28
+ font-size: $tooltip-font-size;
29
29
  font-weight: 500;
30
30
  line-height: 14px;
31
31
  max-width: 170px;
@@ -41,7 +41,7 @@
41
41
 
42
42
  .mdl-tooltip--large {
43
43
  line-height: 14px;
44
- font-size: 14px;
44
+ font-size: $tooltip-font-size-large;
45
45
  padding: 16px;
46
46
  }
47
47
 
@@ -67,7 +67,7 @@ $performance_font: 'Helvetica', 'Arial', sans-serif !default;
67
67
  *
68
68
  **/
69
69
 
70
- @import "_color-definitions";
70
+ @import "color-definitions";
71
71
  @import "functions";
72
72
 
73
73
  /* ========== Color & Themes ========== */
@@ -233,6 +233,7 @@ $input-text-label-color: unquote("rgba(#{$color-black}, 0.26)") !default;
233
233
  $input-text-bottom-border-color: unquote("rgba(#{$color-black}, 0.12)") !default;
234
234
  $input-text-highlight-color: unquote("rgb(#{$color-primary})") !default;
235
235
  $input-text-disabled-color: $input-text-bottom-border-color !default;
236
+ $input-text-disabled-text-color: $input-text-label-color !default;
236
237
  $input-text-error-color: unquote("rgb(222, 50, 38)") !default;
237
238
 
238
239
  /* ========== Card ========== */
@@ -305,6 +306,7 @@ $input-text-expandable-icon-top: 16px;
305
306
 
306
307
  /* SWITCH */
307
308
 
309
+ $switch-label-font-size: 16px;
308
310
  $switch-label-height: 24px;
309
311
  $switch-track-height: 14px;
310
312
  $switch-track-length: 36px;
@@ -332,11 +334,12 @@ $spinner-duration: 360 * $spinner-arc-time / (
332
334
 
333
335
  /* RADIO */
334
336
 
337
+ $radio-label-font-size: 16px;
335
338
  $radio-label-height: 24px;
336
339
  $radio-button-size: 16px;
337
340
  $radio-inner-margin: $radio-button-size / 4;
338
341
  $radio-padding: 8px;
339
- $radio-top-offset: ($radio-label-height - $radio-button-size) / 2 - 2px;
342
+ $radio-top-offset: ($radio-label-height - $radio-button-size) / 2;
340
343
  $radio-ripple-size: 42px;
341
344
 
342
345
 
@@ -351,10 +354,10 @@ $list-container-height: 500px;
351
354
  $list-container-width: 400px;
352
355
  $list-container-item-height: 70px;
353
356
 
354
- /* ICONS */
357
+ /* LAYOUT */
355
358
 
359
+ $layout-nav-link-font-size: 13px;
356
360
 
357
- // Dimensions
358
361
  $layout-drawer-narrow: 240px;
359
362
  $layout-drawer-wide: 456px;
360
363
  $layout-drawer-width: $layout-drawer-narrow;
@@ -375,6 +378,7 @@ $layout-header-mobile-baseline: 72px;
375
378
  $layout-header-mobile-indent: 16px;
376
379
  $layout-header-desktop-indent: 40px;
377
380
 
381
+ $layout-tab-font-size: 14px;
378
382
  $layout-tab-bar-height: 48px;
379
383
  $layout-tab-mobile-padding: 12px;
380
384
  $layout-tab-desktop-padding: 24px;
@@ -390,11 +394,6 @@ $icon-toggle-ripple-size: 36px !default;
390
394
  /* FOOTER */
391
395
 
392
396
  /*mega-footer*/
393
- /**************
394
- *
395
- * Sizes
396
- *
397
- *************/
398
397
  $footer-min-padding: 16px !default;
399
398
  $footer-padding-sides: 40px !default;
400
399
  $footer-heading-font-size: 14px !default;
@@ -402,47 +401,14 @@ $footer-heading-line-height: (1.7 * $footer-heading-font-size) !default;
402
401
  $footer-btn-size: 36px !default;
403
402
 
404
403
  /*mini-footer*/
405
-
406
- /**************
407
- *
408
- * Sizes
409
- *
410
- *************/
411
404
  $padding: 16px !default;
412
405
  $footer-heading-font-size: 24px !default;
413
406
  $footer-heading-line-height: (1.5 * $footer-heading-font-size) !default;
414
407
  $footer-btn-size: 36px !default;
415
408
 
416
- /* COLUMN LAYOUT */
417
-
418
- // Cutoff points for devices.
419
- $columns-tablet-size: 768px;
420
- $columns-desktop-size: 1024px;
421
-
422
- // Web (desktop) layout. Columns are fixed width, and there's a maximum number
423
- // of 3 columns, after which we just add padding to either side.
424
- $columns-web-count: 3;
425
- $columns-web-size: 360px;
426
- $columns-web-gutter: 40px;
427
-
428
- $columns-web-block-size: $columns-web-size + $columns-web-gutter;
429
- $columns-web-padding-size: $columns-web-count *
430
- ($columns-web-size + $columns-web-gutter) / 2;
431
-
432
- // Tablet layout. There's a fixed number of columns, which grow to fill the
433
- // entire container.
434
- $columns-tablet-count: 2;
435
- $columns-tablet-gutter: 24px;
436
- $columns-tablet-percent: 100% / $columns-tablet-count;
437
-
438
- // Phone layout. There's a fixed number of columns, which grow to fill the
439
- // entire container.
440
- $columns-phone-count: 1;
441
- $columns-phone-gutter: 16px;
442
- $columns-phone-percent: 100% / $columns-phone-count;
443
-
444
409
  /* CHECKBOX */
445
410
 
411
+ $checkbox-label-font-size: 16px;
446
412
  $checkbox-label-height: 24px;
447
413
  $checkbox-button-size: 16px;
448
414
  $checkbox-inner-margin: 2px;
@@ -458,6 +424,7 @@ $card-width: 330px !default;
458
424
  $card-height: 200px !default;
459
425
  $card-font-size: 16px !default;
460
426
  $card-title-font-size: 24px !default;
427
+ $card-subtitle-font-size: 14px !default;
461
428
  $card-horizontal-padding: 16px !default;
462
429
  $card-vertical-padding: 16px !default;
463
430
 
@@ -515,6 +482,7 @@ $animation-curve-default: $animation-curve-fast-out-slow-in !default;
515
482
  $bar-height: 4px !default;
516
483
 
517
484
  /* BADGE */
485
+ $badge-font-size: 12px;
518
486
  $badge-color: unquote("rgb(#{$color-white})") !default;
519
487
  $badge-color-inverse: unquote("rgb(#{$color-accent})") !default;
520
488
  $badge-background: unquote("rgb(#{$color-accent})") !default;
@@ -550,6 +518,9 @@ $grid-cell-default-columns: $grid-phone-columns !default;
550
518
 
551
519
  /* DATA TABLE */
552
520
 
521
+ $data-table-font-size: 13px;
522
+ $data-table-header-font-size: 12px;
523
+
553
524
  $data-table-header-color: rgba(#000, 0.54);
554
525
  $data-table-divider-color: rgba(#000, 0.12);
555
526
 
@@ -570,3 +541,7 @@ $data-table-card-title-top: 20px;
570
541
  $data-table-card-padding: 24px;
571
542
  $data-table-button-padding-right: 16px;
572
543
  $data-table-cell-top: $data-table-card-padding / 2;
544
+
545
+ /* TOOLTIP */
546
+ $tooltip-font-size: 10px !default;
547
+ $tooltip-font-size-large: 14px !default;
@@ -33,16 +33,13 @@ html {
33
33
  }
34
34
 
35
35
  /*
36
- * Remove text-shadow in selection highlight: h5bp.com/i
36
+ * Remove text-shadow in selection highlight:
37
+ * https://twitter.com/miketaylr/status/12228805301
38
+ *
37
39
  * These selection rule sets have to be separate.
38
40
  * Customize the background color to match your design.
39
41
  */
40
42
 
41
- ::-moz-selection {
42
- background: #b3d4fc;
43
- text-shadow: none;
44
- }
45
-
46
43
  ::selection {
47
44
  background: #b3d4fc;
48
45
  text-shadow: none;
@@ -62,12 +59,14 @@ hr {
62
59
  }
63
60
 
64
61
  /*
65
- * Remove the gap between images, videos, audio and canvas and the bottom of
66
- * their containers: h5bp.com/i/440
62
+ * Remove the gap between audio, canvas, iframes,
63
+ * images, videos and the bottom of their containers:
64
+ * https://github.com/h5bp/html5-boilerplate/issues/440
67
65
  */
68
66
 
69
67
  audio,
70
68
  canvas,
69
+ iframe,
71
70
  img,
72
71
  svg,
73
72
  video {
@@ -93,10 +92,10 @@ textarea {
93
92
  }
94
93
 
95
94
  /* ==========================================================================
96
- Browse Happy prompt
95
+ Browser Upgrade Prompt
97
96
  ========================================================================== */
98
97
 
99
- .browsehappy {
98
+ .browserupgrade {
100
99
  margin: 0.2em 0;
101
100
  background: #ccc;
102
101
  color: #000;
@@ -128,16 +127,16 @@ textarea {
128
127
  ========================================================================== */
129
128
 
130
129
  /*
131
- * Hide visually and from screen readers: h5bp.com/u
130
+ * Hide visually and from screen readers:
132
131
  */
133
132
 
134
133
  .hidden {
135
134
  display: none !important;
136
- visibility: hidden;
137
135
  }
138
136
 
139
137
  /*
140
- * Hide only visually, but have it available for screen readers: h5bp.com/v
138
+ * Hide only visually, but have it available for screen readers:
139
+ * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
141
140
  */
142
141
 
143
142
  .visuallyhidden {
@@ -152,8 +151,9 @@ textarea {
152
151
  }
153
152
 
154
153
  /*
155
- * Extends the .visuallyhidden class to allow the element to be focusable
156
- * when navigated to via the keyboard: h5bp.com/p
154
+ * Extends the .visuallyhidden class to allow the element
155
+ * to be focusable when navigated to via the keyboard:
156
+ * https://www.drupal.org/node/897638
157
157
  */
158
158
 
159
159
  .visuallyhidden.focusable:active,
@@ -207,23 +207,25 @@ textarea {
207
207
  }
208
208
 
209
209
  @media print,
210
- (-o-min-device-pixel-ratio: 5/4),
211
- (-webkit-min-device-pixel-ratio: 1.25),
210
+ (min-resolution: 1.25dppx),
212
211
  (min-resolution: 120dpi) {
213
212
  /* Style adjustments for high resolution devices */
214
213
  }
215
214
 
216
215
  /* ==========================================================================
217
216
  Print styles.
218
- Inlined to avoid the additional HTTP request: h5bp.com/r
217
+ Inlined to avoid the additional HTTP request:
218
+ http://www.phpied.com/delay-loading-your-print-css/
219
219
  ========================================================================== */
220
220
 
221
221
  @media print {
222
222
  *,
223
223
  *:before,
224
- *:after {
224
+ *:after,
225
+ *:first-letter,
226
+ *:first-line {
225
227
  background: transparent !important;
226
- color: #000 !important; /* Black prints faster: h5bp.com/s */
228
+ color: #000 !important; /* Black prints faster: http://www.sanbeiji.com/archives/953 */
227
229
  box-shadow: none !important;
228
230
  text-shadow: none !important;
229
231
  }
@@ -257,8 +259,13 @@ textarea {
257
259
  page-break-inside: avoid;
258
260
  }
259
261
 
262
+ /*
263
+ * Printing Tables:
264
+ * http://css-discuss.incutio.com/wiki/Printing_Tables
265
+ */
266
+
260
267
  thead {
261
- display: table-header-group; /* h5bp.com/t */
268
+ display: table-header-group;
262
269
  }
263
270
 
264
271
  tr,