material_design_lite-sass 1.1.0 → 1.1.1
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 +9 -0
- data/lib/material_design_lite/sass/version.rb +1 -1
- data/vendor/assets/javascripts/material/layout.js +10 -2
- data/vendor/assets/javascripts/material/mdlComponentHandler.js +1 -1
- data/vendor/assets/javascripts/material.js +8 -3
- data/vendor/assets/stylesheets/material/_list.scss +80 -26
- data/vendor/assets/stylesheets/material/_material-icons.scss +2 -0
- data/vendor/assets/stylesheets/material/_variables.scss +16 -7
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 1526d803fc2195a1e95ceca0960641716ee1aad5
|
4
|
+
data.tar.gz: fd7a77fe0d962aeebc396708bfd4e443f6014ad5
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 5d4e2350472aeaced9398f37ae36d8e02c559bbda70d6cf8541e2d678d7bc88e7e8f4464698e8d9baeb2827dca21bf40f472b6b6366a64d69a1723af771a979a
|
7
|
+
data.tar.gz: 53a152686b37cdfcca1391dc18571be75d12076135d24ca7cee6709793eef650b22614547ed67736657c6d5767511940ccf2fe8b8d9b89a950d3a36a578e68dc
|
data/CHANGELOG.md
CHANGED
@@ -137,16 +137,24 @@
|
|
137
137
|
return;
|
138
138
|
}
|
139
139
|
|
140
|
+
var headerVisible =
|
141
|
+
!this.element_.classList.contains(this.CssClasses_.IS_SMALL_SCREEN) ||
|
142
|
+
this.element_.classList.contains(this.CssClasses_.FIXED_HEADER);
|
143
|
+
|
140
144
|
if (this.content_.scrollTop > 0 &&
|
141
145
|
!this.header_.classList.contains(this.CssClasses_.IS_COMPACT)) {
|
142
146
|
this.header_.classList.add(this.CssClasses_.CASTING_SHADOW);
|
143
147
|
this.header_.classList.add(this.CssClasses_.IS_COMPACT);
|
144
|
-
|
148
|
+
if (headerVisible) {
|
149
|
+
this.header_.classList.add(this.CssClasses_.IS_ANIMATING);
|
150
|
+
}
|
145
151
|
} else if (this.content_.scrollTop <= 0 &&
|
146
152
|
this.header_.classList.contains(this.CssClasses_.IS_COMPACT)) {
|
147
153
|
this.header_.classList.remove(this.CssClasses_.CASTING_SHADOW);
|
148
154
|
this.header_.classList.remove(this.CssClasses_.IS_COMPACT);
|
149
|
-
|
155
|
+
if (headerVisible) {
|
156
|
+
this.header_.classList.add(this.CssClasses_.IS_ANIMATING);
|
157
|
+
}
|
150
158
|
}
|
151
159
|
};
|
152
160
|
|
@@ -224,7 +224,7 @@ componentHandler = (function() {
|
|
224
224
|
}
|
225
225
|
} else {
|
226
226
|
throw new Error(
|
227
|
-
|
227
|
+
'Unable to find a registered component for the given class.');
|
228
228
|
}
|
229
229
|
|
230
230
|
var ev = document.createEvent('Events');
|
@@ -227,7 +227,7 @@ componentHandler = (function() {
|
|
227
227
|
}
|
228
228
|
} else {
|
229
229
|
throw new Error(
|
230
|
-
|
230
|
+
'Unable to find a registered component for the given class.');
|
231
231
|
}
|
232
232
|
|
233
233
|
var ev = document.createEvent('Events');
|
@@ -3213,14 +3213,19 @@ MaterialLayout.prototype.contentScrollHandler_ = function () {
|
|
3213
3213
|
if (this.header_.classList.contains(this.CssClasses_.IS_ANIMATING)) {
|
3214
3214
|
return;
|
3215
3215
|
}
|
3216
|
+
var headerVisible = !this.element_.classList.contains(this.CssClasses_.IS_SMALL_SCREEN) || this.element_.classList.contains(this.CssClasses_.FIXED_HEADER);
|
3216
3217
|
if (this.content_.scrollTop > 0 && !this.header_.classList.contains(this.CssClasses_.IS_COMPACT)) {
|
3217
3218
|
this.header_.classList.add(this.CssClasses_.CASTING_SHADOW);
|
3218
3219
|
this.header_.classList.add(this.CssClasses_.IS_COMPACT);
|
3219
|
-
|
3220
|
+
if (headerVisible) {
|
3221
|
+
this.header_.classList.add(this.CssClasses_.IS_ANIMATING);
|
3222
|
+
}
|
3220
3223
|
} else if (this.content_.scrollTop <= 0 && this.header_.classList.contains(this.CssClasses_.IS_COMPACT)) {
|
3221
3224
|
this.header_.classList.remove(this.CssClasses_.CASTING_SHADOW);
|
3222
3225
|
this.header_.classList.remove(this.CssClasses_.IS_COMPACT);
|
3223
|
-
|
3226
|
+
if (headerVisible) {
|
3227
|
+
this.header_.classList.add(this.CssClasses_.IS_ANIMATING);
|
3228
|
+
}
|
3224
3229
|
}
|
3225
3230
|
};
|
3226
3231
|
/**
|
@@ -20,30 +20,38 @@
|
|
20
20
|
|
21
21
|
.mdl-list {
|
22
22
|
display: block;
|
23
|
-
padding:
|
23
|
+
padding: $list-border 0;
|
24
24
|
list-style: none;
|
25
25
|
}
|
26
26
|
|
27
27
|
.mdl-list__item {
|
28
|
-
@include typo-
|
28
|
+
@include typo-subhead();
|
29
|
+
line-height: 1;
|
29
30
|
display: flex;
|
31
|
+
min-height: $list-min-height;
|
30
32
|
box-sizing: border-box;
|
31
|
-
height: 48px;
|
32
33
|
flex-direction: row;
|
33
34
|
flex-wrap: nowrap;
|
34
35
|
align-items: center;
|
35
|
-
padding
|
36
|
+
padding: $list-min-padding;
|
36
37
|
cursor: default;
|
38
|
+
color: $list-main-text-text-color;
|
39
|
+
overflow: hidden;
|
40
|
+
|
37
41
|
& .mdl-list__item-primary-content {
|
38
|
-
order:0;
|
42
|
+
order: 0;
|
39
43
|
flex-grow: 2;
|
40
44
|
text-decoration: none;
|
45
|
+
box-sizing: border-box;
|
46
|
+
display: flex;
|
47
|
+
align-items: center;
|
48
|
+
|
49
|
+
& .mdl-list__item-icon {
|
50
|
+
margin-right: $list-icon-text-left-distance - $list-icon-size - $list-min-padding;
|
51
|
+
}
|
41
52
|
|
42
|
-
& .
|
43
|
-
|
44
|
-
line-height: 0;
|
45
|
-
vertical-align: middle;
|
46
|
-
padding: 0 12px 0 0;
|
53
|
+
& .mdl-list__item-avatar {
|
54
|
+
margin-right: $list-avatar-text-left-distance - $list-avatar-size - $list-min-padding;
|
47
55
|
}
|
48
56
|
}
|
49
57
|
|
@@ -51,53 +59,99 @@
|
|
51
59
|
display: flex;
|
52
60
|
flex-flow: column;
|
53
61
|
align-items: flex-end;
|
62
|
+
margin-left: $list-min-padding;
|
63
|
+
|
54
64
|
& .mdl-list__item-secondary-action label { display: inline; }
|
55
65
|
& .mdl-list__item-secondary-info {
|
56
66
|
@include typo-caption();
|
57
|
-
margin-bottom: 10px;
|
58
67
|
color: $list-supporting-text-text-color;
|
59
68
|
}
|
60
69
|
& .mdl-list__item-sub-header {
|
61
|
-
padding: 0 0 0
|
70
|
+
padding: 0 0 0 $list-min-padding;
|
62
71
|
}
|
63
72
|
}
|
64
73
|
}
|
65
74
|
|
66
|
-
.mdl-list__item-
|
67
|
-
|
75
|
+
.mdl-list__item-icon,
|
76
|
+
.mdl-list__item-icon.material-icons {
|
77
|
+
height: $list-icon-size;
|
78
|
+
width: $list-icon-size;
|
79
|
+
font-size: $list-icon-size;
|
80
|
+
box-sizing: border-box;
|
81
|
+
color: $list-icon-color;
|
82
|
+
}
|
83
|
+
|
84
|
+
.mdl-list__item-avatar,
|
85
|
+
.mdl-list__item-avatar.material-icons {
|
86
|
+
height: $list-avatar-size;
|
87
|
+
width: $list-avatar-size;
|
88
|
+
box-sizing: border-box;
|
89
|
+
border-radius: 50%;
|
90
|
+
// Set a background colour in case the user doesn't provide an image.
|
91
|
+
background-color: $list-icon-color;
|
92
|
+
// Set a font size and color in case the user provides a Material Icon.
|
93
|
+
font-size: $list-avatar-size;
|
94
|
+
color: $list-avatar-color;
|
68
95
|
}
|
69
96
|
|
70
97
|
.mdl-list__item--two-line {
|
71
|
-
height:
|
98
|
+
height: $list-two-line-height;
|
72
99
|
|
73
100
|
& .mdl-list__item-primary-content {
|
74
|
-
|
75
|
-
|
101
|
+
height: $list-two-line-height - $list-min-padding - $list-bottom-padding;
|
102
|
+
line-height: 20px;
|
103
|
+
display: block;
|
104
|
+
|
105
|
+
& .mdl-list__item-avatar{
|
106
|
+
float: left;
|
107
|
+
}
|
108
|
+
|
109
|
+
& .mdl-list__item-icon {
|
110
|
+
float: left;
|
111
|
+
// Icons are aligned to center of text in a two line list.
|
112
|
+
margin-top:
|
113
|
+
($list-two-line-height - $list-min-padding - $list-bottom-padding -
|
114
|
+
$list-icon-size) / 2;
|
115
|
+
}
|
116
|
+
|
117
|
+
& .mdl-list__item-secondary-content {
|
118
|
+
height: $list-two-line-height - $list-min-padding - $list-bottom-padding;
|
76
119
|
}
|
77
120
|
|
78
121
|
& .mdl-list__item-sub-title {
|
79
|
-
@include typo-
|
122
|
+
@include typo-body-1();
|
123
|
+
line-height: 18px;
|
124
|
+
color: $list-supporting-text-text-color;
|
80
125
|
display: block;
|
81
|
-
padding
|
126
|
+
padding: 0;
|
82
127
|
}
|
83
128
|
}
|
84
129
|
}
|
85
130
|
|
86
131
|
.mdl-list__item--three-line {
|
87
|
-
height:
|
132
|
+
height: $list-three-line-height;
|
88
133
|
|
89
134
|
& .mdl-list__item-primary-content {
|
90
|
-
|
91
|
-
|
135
|
+
height: $list-three-line-height - $list-min-padding - $list-bottom-padding;
|
136
|
+
line-height: 20px;
|
137
|
+
display: block;
|
138
|
+
|
139
|
+
& .mdl-list__item-avatar,
|
140
|
+
& .mdl-list__item-icon {
|
141
|
+
float: left;
|
92
142
|
}
|
93
143
|
}
|
94
144
|
|
145
|
+
& .mdl-list__item-secondary-content {
|
146
|
+
height: $list-three-line-height - $list-min-padding - $list-bottom-padding;
|
147
|
+
}
|
148
|
+
|
95
149
|
& .mdl-list__item-text-body {
|
96
|
-
@include typo-
|
150
|
+
@include typo-body-1();
|
151
|
+
line-height: 18px;
|
152
|
+
height: $list-three-line-height - $list-min-padding - $list-bottom-padding;
|
97
153
|
color: $list-supporting-text-text-color;
|
98
154
|
display: block;
|
99
|
-
|
100
|
-
padding: 0 0 0 56px;
|
101
|
-
overflow: hidden;
|
155
|
+
padding: 0;
|
102
156
|
}
|
103
157
|
}
|
@@ -245,7 +245,7 @@ $input-text-bottom-border-color: unquote("rgba(#{$color-black}, 0.12)") !default
|
|
245
245
|
$input-text-highlight-color: unquote("rgb(#{$color-primary})") !default;
|
246
246
|
$input-text-disabled-color: $input-text-bottom-border-color !default;
|
247
247
|
$input-text-disabled-text-color: $input-text-label-color !default;
|
248
|
-
$input-text-error-color: unquote("rgb(
|
248
|
+
$input-text-error-color: unquote("rgb(#{$palette-red-A700})") !default;
|
249
249
|
|
250
250
|
/* ========== Card ========== */
|
251
251
|
|
@@ -271,9 +271,10 @@ $progress-image-path: $image_path;
|
|
271
271
|
|
272
272
|
/* ========== List ========== */
|
273
273
|
|
274
|
-
$list-
|
275
|
-
$list-container-view-background: unquote("rgb(#{$color-white})") !default;
|
274
|
+
$list-main-text-text-color: unquote("rgba(#{$color-black}, 0.87)") !default;
|
276
275
|
$list-supporting-text-text-color: unquote("rgba(#{$color-black}, 0.54)") !default;
|
276
|
+
$list-icon-color: unquote("rgb(#{$palette-grey-600})") !default;
|
277
|
+
$list-avatar-color: white !default;
|
277
278
|
|
278
279
|
/* ========== Item ========== */
|
279
280
|
|
@@ -364,10 +365,18 @@ $menu-fade-duration: 0.2s !default;
|
|
364
365
|
|
365
366
|
/* LIST */
|
366
367
|
|
367
|
-
$list-
|
368
|
-
$list-
|
369
|
-
$list-
|
370
|
-
|
368
|
+
$list-border: 8px !default;
|
369
|
+
$list-min-height: 48px !default;
|
370
|
+
$list-min-padding: 16px !default;
|
371
|
+
$list-bottom-padding: 20px !default;
|
372
|
+
$list-avatar-text-left-distance: 72px !default;
|
373
|
+
$list-icon-text-left-distance: 72px !default;
|
374
|
+
|
375
|
+
$list-avatar-size: 40px !default;
|
376
|
+
$list-icon-size: 24px !default;
|
377
|
+
|
378
|
+
$list-two-line-height: 72px !default;
|
379
|
+
$list-three-line-height: 88px !default;
|
371
380
|
|
372
381
|
/* LAYOUT */
|
373
382
|
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: material_design_lite-sass
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 1.1.
|
4
|
+
version: 1.1.1
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Dmitriy Tarasov
|
8
8
|
autorequire:
|
9
9
|
bindir: exe
|
10
10
|
cert_chain: []
|
11
|
-
date: 2016-02-
|
11
|
+
date: 2016-02-03 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: sass
|