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
@@ -29,7 +29,7 @@
|
|
29
29
|
color: $layout-text-color;
|
30
30
|
text-decoration: none;
|
31
31
|
font-weight: 500;
|
32
|
-
font-size:
|
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
|
-
|
247
|
-
.mdl-
|
248
|
-
|
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:
|
529
|
+
font-size: $layout-tab-font-size;
|
528
530
|
text-transform: uppercase;
|
529
531
|
|
530
532
|
color: $layout-header-tab-text-color;
|
@@ -21,7 +21,7 @@
|
|
21
21
|
.mdl-textfield {
|
22
22
|
position: relative;
|
23
23
|
|
24
|
-
font-size:
|
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:
|
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:
|
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:
|
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:
|
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:
|
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 "
|
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
|
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
|
-
/*
|
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:
|
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
|
66
|
-
* their containers:
|
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
|
-
|
95
|
+
Browser Upgrade Prompt
|
97
96
|
========================================================================== */
|
98
97
|
|
99
|
-
.
|
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:
|
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:
|
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
|
156
|
-
* when navigated to via the keyboard:
|
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
|
-
(
|
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:
|
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:
|
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;
|
268
|
+
display: table-header-group;
|
262
269
|
}
|
263
270
|
|
264
271
|
tr,
|