material_design_lite-sass 1.0.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 +7 -0
- data/.gitignore +11 -0
- data/.rspec +2 -0
- data/.travis.yml +11 -0
- data/CHANGELOG.md +5 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +21 -0
- data/README.md +108 -0
- data/Rakefile +4 -0
- data/bin/console +14 -0
- data/bin/setup +7 -0
- data/lib/material_design_lite-sass.rb +46 -0
- data/lib/material_design_lite/sass/engine.rb +13 -0
- data/lib/material_design_lite/sass/version.rb +5 -0
- data/material_design_lite-sass.gemspec +28 -0
- data/vendor/assets/javascripts/material.js +3919 -0
- data/vendor/assets/javascripts/material/button.js +132 -0
- data/vendor/assets/javascripts/material/checkbox.js +265 -0
- data/vendor/assets/javascripts/material/data-table.js +149 -0
- data/vendor/assets/javascripts/material/icon-toggle.js +248 -0
- data/vendor/assets/javascripts/material/layout.js +434 -0
- data/vendor/assets/javascripts/material/mdlComponentHandler.js +346 -0
- data/vendor/assets/javascripts/material/menu.js +468 -0
- data/vendor/assets/javascripts/material/progress.js +116 -0
- data/vendor/assets/javascripts/material/rAF.js +38 -0
- data/vendor/assets/javascripts/material/radio.js +257 -0
- data/vendor/assets/javascripts/material/ripple.js +244 -0
- data/vendor/assets/javascripts/material/slider.js +252 -0
- data/vendor/assets/javascripts/material/spinner.js +140 -0
- data/vendor/assets/javascripts/material/switch.js +269 -0
- data/vendor/assets/javascripts/material/tabs.js +152 -0
- data/vendor/assets/javascripts/material/textfield.js +247 -0
- data/vendor/assets/javascripts/material/tooltip.js +146 -0
- data/vendor/assets/stylesheets/_material.scss +50 -0
- data/vendor/assets/stylesheets/material/_animation.scss +34 -0
- data/vendor/assets/stylesheets/material/_badge.scss +66 -0
- data/vendor/assets/stylesheets/material/_button.scss +298 -0
- data/vendor/assets/stylesheets/material/_card.scss +111 -0
- data/vendor/assets/stylesheets/material/_checkbox.scss +175 -0
- data/vendor/assets/stylesheets/material/_color-definitions.scss +599 -0
- data/vendor/assets/stylesheets/material/_data-table.scss +105 -0
- data/vendor/assets/stylesheets/material/_functions.scss +3 -0
- data/vendor/assets/stylesheets/material/_grid.scss +180 -0
- data/vendor/assets/stylesheets/material/_icon-toggle.scss +121 -0
- data/vendor/assets/stylesheets/material/_layout.scss +580 -0
- data/vendor/assets/stylesheets/material/_mega_footer.scss +309 -0
- data/vendor/assets/stylesheets/material/_menu.scss +193 -0
- data/vendor/assets/stylesheets/material/_mini_footer.scss +88 -0
- data/vendor/assets/stylesheets/material/_mixins.scss +268 -0
- data/vendor/assets/stylesheets/material/_palette.scss +2303 -0
- data/vendor/assets/stylesheets/material/_progress.scss +115 -0
- data/vendor/assets/stylesheets/material/_radio.scss +155 -0
- data/vendor/assets/stylesheets/material/_resets.scss +55 -0
- data/vendor/assets/stylesheets/material/_ripple.scss +42 -0
- data/vendor/assets/stylesheets/material/_shadow.scss +42 -0
- data/vendor/assets/stylesheets/material/_slider.scss +396 -0
- data/vendor/assets/stylesheets/material/_spinner.scss +248 -0
- data/vendor/assets/stylesheets/material/_switch.scss +199 -0
- data/vendor/assets/stylesheets/material/_tabs.scss +115 -0
- data/vendor/assets/stylesheets/material/_textfield.scss +190 -0
- data/vendor/assets/stylesheets/material/_tooltip.scss +66 -0
- data/vendor/assets/stylesheets/material/_typography.scss +297 -0
- data/vendor/assets/stylesheets/material/_variables.scss +572 -0
- data/vendor/assets/stylesheets/material/resets/_h5bp.scss +284 -0
- data/vendor/assets/stylesheets/material/resets/_mobile.scss +25 -0
- metadata +151 -0
@@ -0,0 +1,105 @@
|
|
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-data-table {
|
21
|
+
position: relative;
|
22
|
+
border: $data-table-dividers;
|
23
|
+
border-collapse: collapse;
|
24
|
+
white-space: nowrap;
|
25
|
+
font-size: 13px;
|
26
|
+
background-color: unquote("rgb(#{$color-white})");
|
27
|
+
|
28
|
+
thead {
|
29
|
+
padding-bottom: 3px;
|
30
|
+
|
31
|
+
.mdl-data-table__select {
|
32
|
+
margin-top: 0;
|
33
|
+
}
|
34
|
+
}
|
35
|
+
|
36
|
+
tbody {
|
37
|
+
tr {
|
38
|
+
position: relative;
|
39
|
+
height: $data-table-row-height;
|
40
|
+
@include material-animation-default(0.28s);
|
41
|
+
transition-property: background-color;
|
42
|
+
|
43
|
+
&.is-selected {
|
44
|
+
background-color: $data-table-selection-color;
|
45
|
+
}
|
46
|
+
|
47
|
+
&:hover {
|
48
|
+
background-color: $data-table-hover-color;
|
49
|
+
}
|
50
|
+
}
|
51
|
+
}
|
52
|
+
|
53
|
+
td, th {
|
54
|
+
padding: 0 $data-table-column-padding 0 $data-table-column-padding;
|
55
|
+
text-align: right;
|
56
|
+
|
57
|
+
&:first-of-type {
|
58
|
+
padding-left: 24px;
|
59
|
+
}
|
60
|
+
|
61
|
+
&:last-of-type {
|
62
|
+
padding-right: 24px;
|
63
|
+
}
|
64
|
+
}
|
65
|
+
|
66
|
+
td {
|
67
|
+
position: relative;
|
68
|
+
vertical-align: top;
|
69
|
+
height: $data-table-row-height;
|
70
|
+
border-top: $data-table-dividers;
|
71
|
+
border-bottom: $data-table-dividers;
|
72
|
+
padding-top: $data-table-cell-top;
|
73
|
+
box-sizing: border-box;
|
74
|
+
|
75
|
+
.mdl-data-table__select {
|
76
|
+
vertical-align: top;
|
77
|
+
position: absolute;
|
78
|
+
left: 24px;
|
79
|
+
}
|
80
|
+
}
|
81
|
+
|
82
|
+
th {
|
83
|
+
position: relative;
|
84
|
+
vertical-align: bottom;
|
85
|
+
text-overflow: ellipsis;
|
86
|
+
@include typo-body-2();
|
87
|
+
height: $data-table-row-height;
|
88
|
+
font-size: 12px;
|
89
|
+
color: $data-table-header-color;
|
90
|
+
padding-bottom: 8px;
|
91
|
+
box-sizing: border-box;
|
92
|
+
|
93
|
+
.mdl-data-table__select {
|
94
|
+
position: relative;
|
95
|
+
}
|
96
|
+
}
|
97
|
+
}
|
98
|
+
|
99
|
+
.mdl-data-table__select {
|
100
|
+
width: 16px;
|
101
|
+
}
|
102
|
+
|
103
|
+
.mdl-data-table__cell--non-numeric.mdl-data-table__cell--non-numeric {
|
104
|
+
text-align: left;
|
105
|
+
}
|
@@ -0,0 +1,180 @@
|
|
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
|
+
|
19
|
+
.mdl-grid {
|
20
|
+
display: flex;
|
21
|
+
flex-flow: row wrap;
|
22
|
+
margin: 0 auto 0 auto;
|
23
|
+
align-items: stretch;
|
24
|
+
|
25
|
+
&.mdl-grid--no-spacing {
|
26
|
+
padding: 0;
|
27
|
+
}
|
28
|
+
}
|
29
|
+
|
30
|
+
.mdl-cell {
|
31
|
+
box-sizing: border-box;
|
32
|
+
}
|
33
|
+
|
34
|
+
|
35
|
+
.mdl-cell--top {
|
36
|
+
align-self: flex-start;
|
37
|
+
}
|
38
|
+
|
39
|
+
.mdl-cell--middle {
|
40
|
+
align-self: center;
|
41
|
+
}
|
42
|
+
|
43
|
+
.mdl-cell--bottom {
|
44
|
+
align-self: flex-end;
|
45
|
+
}
|
46
|
+
|
47
|
+
.mdl-cell--stretch {
|
48
|
+
align-self: stretch;
|
49
|
+
}
|
50
|
+
|
51
|
+
.mdl-grid.mdl-grid--no-spacing > .mdl-cell {
|
52
|
+
margin: 0;
|
53
|
+
}
|
54
|
+
|
55
|
+
|
56
|
+
// Mixins for width calculation.
|
57
|
+
@mixin partial-size($size, $columns, $gutter) {
|
58
|
+
width: calc(#{(($size / $columns) * 100)+"%"} - #{$gutter});
|
59
|
+
|
60
|
+
.mdl-grid--no-spacing > & {
|
61
|
+
width: #{(($size / $columns) * 100)+"%"};
|
62
|
+
}
|
63
|
+
}
|
64
|
+
|
65
|
+
@mixin full-size($gutter) {
|
66
|
+
@include partial-size(1, 1, $gutter);
|
67
|
+
}
|
68
|
+
|
69
|
+
|
70
|
+
|
71
|
+
////////// Phone //////////
|
72
|
+
|
73
|
+
@media (max-width: $grid-tablet-breakpoint - 1) {
|
74
|
+
.mdl-grid {
|
75
|
+
padding: $grid-phone-margin - ($grid-phone-gutter / 2);
|
76
|
+
}
|
77
|
+
|
78
|
+
.mdl-cell {
|
79
|
+
margin: $grid-phone-gutter / 2;
|
80
|
+
@include partial-size($grid-cell-default-columns, $grid-phone-columns,
|
81
|
+
$grid-phone-gutter);
|
82
|
+
}
|
83
|
+
|
84
|
+
.mdl-cell--hide-phone {
|
85
|
+
display: none !important;
|
86
|
+
}
|
87
|
+
|
88
|
+
// Define partial sizes for columnNumber < totalColumns.
|
89
|
+
@for $i from 1 through ($grid-phone-columns - 1) {
|
90
|
+
.mdl-cell--#{$i}-col {
|
91
|
+
@include partial-size($i, $grid-phone-columns, $grid-phone-gutter);
|
92
|
+
}
|
93
|
+
|
94
|
+
.mdl-cell--#{$i}-col-phone.mdl-cell--#{$i}-col-phone {
|
95
|
+
@include partial-size($i, $grid-phone-columns, $grid-phone-gutter);
|
96
|
+
}
|
97
|
+
}
|
98
|
+
|
99
|
+
// Define 100% for everything else.
|
100
|
+
@for $i from $grid-phone-columns through $grid-desktop-columns {
|
101
|
+
.mdl-cell--#{$i}-col {
|
102
|
+
@include full-size($grid-phone-gutter);
|
103
|
+
}
|
104
|
+
|
105
|
+
.mdl-cell--#{$i}-col-phone.mdl-cell--#{$i}-col-phone {
|
106
|
+
@include full-size($grid-phone-gutter);
|
107
|
+
}
|
108
|
+
}
|
109
|
+
}
|
110
|
+
|
111
|
+
|
112
|
+
////////// Tablet //////////
|
113
|
+
|
114
|
+
@media (min-width: $grid-tablet-breakpoint) and (max-width: $grid-desktop-breakpoint - 1) {
|
115
|
+
.mdl-grid {
|
116
|
+
padding: $grid-tablet-margin - ($grid-tablet-gutter / 2);
|
117
|
+
}
|
118
|
+
|
119
|
+
.mdl-cell {
|
120
|
+
margin: $grid-tablet-gutter / 2;
|
121
|
+
@include partial-size($grid-cell-default-columns, $grid-tablet-columns,
|
122
|
+
$grid-tablet-gutter);
|
123
|
+
}
|
124
|
+
|
125
|
+
.mdl-cell--hide-tablet {
|
126
|
+
display: none !important;
|
127
|
+
}
|
128
|
+
|
129
|
+
// Define partial sizes for columnNumber < totalColumns.
|
130
|
+
@for $i from 1 through ($grid-tablet-columns - 1) {
|
131
|
+
.mdl-cell--#{$i}-col {
|
132
|
+
@include partial-size($i, $grid-tablet-columns, $grid-tablet-gutter);
|
133
|
+
}
|
134
|
+
|
135
|
+
.mdl-cell--#{$i}-col-tablet.mdl-cell--#{$i}-col-tablet {
|
136
|
+
@include partial-size($i, $grid-tablet-columns, $grid-tablet-gutter);
|
137
|
+
}
|
138
|
+
}
|
139
|
+
|
140
|
+
// Define 100% for everything else.
|
141
|
+
@for $i from $grid-tablet-columns through $grid-desktop-columns {
|
142
|
+
.mdl-cell--#{$i}-col {
|
143
|
+
@include full-size($grid-tablet-gutter);
|
144
|
+
}
|
145
|
+
|
146
|
+
.mdl-cell--#{$i}-col-tablet.mdl-cell--#{$i}-col-tablet {
|
147
|
+
@include full-size($grid-tablet-gutter);
|
148
|
+
}
|
149
|
+
}
|
150
|
+
}
|
151
|
+
|
152
|
+
|
153
|
+
////////// Desktop //////////
|
154
|
+
|
155
|
+
@media (min-width: $grid-desktop-breakpoint) {
|
156
|
+
.mdl-grid {
|
157
|
+
padding: $grid-desktop-margin - ($grid-desktop-gutter / 2);
|
158
|
+
}
|
159
|
+
|
160
|
+
.mdl-cell {
|
161
|
+
margin: $grid-desktop-gutter / 2;
|
162
|
+
@include partial-size($grid-cell-default-columns, $grid-desktop-columns,
|
163
|
+
$grid-desktop-gutter);
|
164
|
+
}
|
165
|
+
|
166
|
+
.mdl-cell--hide-desktop {
|
167
|
+
display: none !important;
|
168
|
+
}
|
169
|
+
|
170
|
+
// Define partial sizes for all numbers of columns.
|
171
|
+
@for $i from 1 through $grid-desktop-columns {
|
172
|
+
.mdl-cell--#{$i}-col {
|
173
|
+
@include partial-size($i, $grid-desktop-columns, $grid-desktop-gutter);
|
174
|
+
}
|
175
|
+
|
176
|
+
.mdl-cell--#{$i}-col-desktop.mdl-cell--#{$i}-col-desktop {
|
177
|
+
@include partial-size($i, $grid-desktop-columns, $grid-desktop-gutter);
|
178
|
+
}
|
179
|
+
}
|
180
|
+
}
|
@@ -0,0 +1,121 @@
|
|
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
|
+
|
19
|
+
.mdl-icon-toggle {
|
20
|
+
position: relative;
|
21
|
+
|
22
|
+
z-index: 1;
|
23
|
+
|
24
|
+
vertical-align: middle;
|
25
|
+
|
26
|
+
display: inline-block;
|
27
|
+
height: $icon-toggle-size;
|
28
|
+
margin: 0;
|
29
|
+
padding: 0;
|
30
|
+
}
|
31
|
+
|
32
|
+
.mdl-icon-toggle__input {
|
33
|
+
line-height: $icon-toggle-size;
|
34
|
+
|
35
|
+
.mdl-icon-toggle.is-upgraded & {
|
36
|
+
// Hide input element, while still making it respond to focus.
|
37
|
+
position: absolute;
|
38
|
+
width: 0;
|
39
|
+
height: 0;
|
40
|
+
margin: 0;
|
41
|
+
padding: 0;
|
42
|
+
opacity: 0;
|
43
|
+
-ms-appearance: none;
|
44
|
+
-moz-appearance: none;
|
45
|
+
-webkit-appearance: none;
|
46
|
+
appearance: none;
|
47
|
+
border: none;
|
48
|
+
}
|
49
|
+
}
|
50
|
+
|
51
|
+
.mdl-icon-toggle__label {
|
52
|
+
display: inline-block;
|
53
|
+
position: relative;
|
54
|
+
cursor: pointer;
|
55
|
+
height: $icon-toggle-size;
|
56
|
+
width: $icon-toggle-size;
|
57
|
+
min-width: $icon-toggle-size;
|
58
|
+
color: $icon-toggle-color;
|
59
|
+
border-radius: 50%;
|
60
|
+
padding: 0;
|
61
|
+
margin-left: 0;
|
62
|
+
margin-right: 0;
|
63
|
+
text-align: center;
|
64
|
+
background-color: transparent;
|
65
|
+
will-change: background-color;
|
66
|
+
transition: background-color 0.2s $animation-curve-default,
|
67
|
+
color 0.2s $animation-curve-default;
|
68
|
+
|
69
|
+
&.material-icons {
|
70
|
+
line-height: $icon-toggle-size;
|
71
|
+
font-size: $icon-toggle-font-size;
|
72
|
+
}
|
73
|
+
|
74
|
+
.mdl-icon-toggle.is-checked & {
|
75
|
+
color: $icon-toggle-checked-color;
|
76
|
+
}
|
77
|
+
|
78
|
+
.mdl-icon-toggle.is-disabled & {
|
79
|
+
color: $icon-toggle-disabled-color;
|
80
|
+
cursor: auto;
|
81
|
+
transition: none;
|
82
|
+
}
|
83
|
+
|
84
|
+
.mdl-icon-toggle.is-focused & {
|
85
|
+
background-color: $icon-toggle-focus-color;
|
86
|
+
}
|
87
|
+
|
88
|
+
.mdl-icon-toggle.is-focused.is-checked & {
|
89
|
+
background-color: $icon-toggle-checked-focus-color;
|
90
|
+
}
|
91
|
+
}
|
92
|
+
|
93
|
+
|
94
|
+
.mdl-icon-toggle__ripple-container {
|
95
|
+
position: absolute;
|
96
|
+
z-index: 2;
|
97
|
+
top: -(($icon-toggle-ripple-size - $icon-toggle-size) / 2);
|
98
|
+
left: -(($icon-toggle-ripple-size - $icon-toggle-size) / 2);
|
99
|
+
|
100
|
+
box-sizing: border-box;
|
101
|
+
width: $icon-toggle-ripple-size;
|
102
|
+
height: $icon-toggle-ripple-size;
|
103
|
+
border-radius: 50%;
|
104
|
+
|
105
|
+
cursor: pointer;
|
106
|
+
|
107
|
+
overflow: hidden;
|
108
|
+
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
|
109
|
+
|
110
|
+
& .mdl-ripple {
|
111
|
+
background: $icon-toggle-color;
|
112
|
+
}
|
113
|
+
|
114
|
+
.mdl-icon-toggle.is-disabled & {
|
115
|
+
cursor: auto;
|
116
|
+
}
|
117
|
+
|
118
|
+
.mdl-icon-toggle.is-disabled & .mdl-ripple {
|
119
|
+
background: transparent;
|
120
|
+
}
|
121
|
+
}
|
@@ -0,0 +1,580 @@
|
|
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
|
+
// Navigation classes. Only used here for now, but we may at some point move
|
21
|
+
// this to its own component.
|
22
|
+
.mdl-navigation {
|
23
|
+
display: flex;
|
24
|
+
flex-wrap: nowrap;
|
25
|
+
box-sizing: border-box;
|
26
|
+
}
|
27
|
+
|
28
|
+
.mdl-navigation__link {
|
29
|
+
color: $layout-text-color;
|
30
|
+
text-decoration: none;
|
31
|
+
font-weight: 500;
|
32
|
+
font-size: 13px;
|
33
|
+
margin: 0;
|
34
|
+
}
|
35
|
+
|
36
|
+
// Main layout class.
|
37
|
+
.mdl-layout {
|
38
|
+
width: 100%;
|
39
|
+
height: 100%;
|
40
|
+
display: flex;
|
41
|
+
flex-direction: column;
|
42
|
+
overflow-y: auto;
|
43
|
+
overflow-x: hidden;
|
44
|
+
position: relative;
|
45
|
+
-webkit-overflow-scrolling: touch;
|
46
|
+
}
|
47
|
+
|
48
|
+
// Utility classes for screen sizes.
|
49
|
+
.mdl-layout.is-small-screen .mdl-layout--large-screen-only {
|
50
|
+
display: none;
|
51
|
+
}
|
52
|
+
|
53
|
+
.mdl-layout:not(.is-small-screen) .mdl-layout--small-screen-only {
|
54
|
+
display: none;
|
55
|
+
}
|
56
|
+
|
57
|
+
.mdl-layout__container {
|
58
|
+
position: absolute;
|
59
|
+
width: 100%;
|
60
|
+
height: 100%;
|
61
|
+
}
|
62
|
+
|
63
|
+
|
64
|
+
// Optional utility classes for formatting special blocks in this component.
|
65
|
+
.mdl-layout-title {
|
66
|
+
display: block;
|
67
|
+
position: relative;
|
68
|
+
|
69
|
+
@include typo-title();
|
70
|
+
font-weight: 400;
|
71
|
+
box-sizing: border-box;
|
72
|
+
}
|
73
|
+
|
74
|
+
.mdl-layout-spacer {
|
75
|
+
flex-grow: 1;
|
76
|
+
}
|
77
|
+
|
78
|
+
|
79
|
+
// Drawer.
|
80
|
+
.mdl-layout__drawer {
|
81
|
+
display: flex;
|
82
|
+
flex-direction: column;
|
83
|
+
flex-wrap: nowrap;
|
84
|
+
|
85
|
+
width: $layout-drawer-width;
|
86
|
+
height: 100%;
|
87
|
+
max-height: 100%;
|
88
|
+
|
89
|
+
position: absolute;
|
90
|
+
top: 0;
|
91
|
+
left: 0;
|
92
|
+
|
93
|
+
@include shadow-2dp();
|
94
|
+
|
95
|
+
box-sizing: border-box;
|
96
|
+
border-right: 1px solid $layout-drawer-border-color;
|
97
|
+
background: $layout-drawer-bg-color;
|
98
|
+
|
99
|
+
// Transform offscreen.
|
100
|
+
transform: translateX(-$layout-drawer-width - 10px);
|
101
|
+
transform-style: preserve-3d;
|
102
|
+
will-change: transform;
|
103
|
+
|
104
|
+
@include material-animation-default();
|
105
|
+
transition-property: transform;
|
106
|
+
|
107
|
+
color: $layout-text-color;
|
108
|
+
|
109
|
+
overflow: visible;
|
110
|
+
overflow-y: auto;
|
111
|
+
|
112
|
+
z-index: 5;
|
113
|
+
|
114
|
+
&.is-visible {
|
115
|
+
transform: translateX(0);
|
116
|
+
}
|
117
|
+
|
118
|
+
& > * {
|
119
|
+
flex-shrink: 0;
|
120
|
+
}
|
121
|
+
|
122
|
+
& > .mdl-layout-title {
|
123
|
+
line-height: $layout-desktop-header-height;
|
124
|
+
padding-left: $layout-header-desktop-indent;
|
125
|
+
|
126
|
+
@media screen and (max-width: $layout-screen-size-threshold) {
|
127
|
+
line-height: $layout-mobile-header-height;
|
128
|
+
padding-left: $layout-header-mobile-indent;
|
129
|
+
}
|
130
|
+
}
|
131
|
+
|
132
|
+
& .mdl-navigation {
|
133
|
+
flex-direction: column;
|
134
|
+
align-items: stretch;
|
135
|
+
padding-top: 16px;
|
136
|
+
|
137
|
+
& .mdl-navigation__link {
|
138
|
+
display: block;
|
139
|
+
flex-shrink: 0;
|
140
|
+
padding: 16px $layout-header-desktop-indent;
|
141
|
+
margin: 0;
|
142
|
+
color: $layout-drawer-navigation-color;
|
143
|
+
|
144
|
+
@media screen and (max-width: $layout-screen-size-threshold) {
|
145
|
+
padding: 16px $layout-header-mobile-indent;
|
146
|
+
}
|
147
|
+
|
148
|
+
&:hover {
|
149
|
+
background-color: $layout-nav-color;
|
150
|
+
}
|
151
|
+
|
152
|
+
&--current {
|
153
|
+
background-color: $layout-drawer-navigation-link-active-background;
|
154
|
+
color: $layout-drawer-navigation-link-active-color;
|
155
|
+
}
|
156
|
+
}
|
157
|
+
}
|
158
|
+
|
159
|
+
@media screen and (min-width: $layout-screen-size-threshold + 1px) {
|
160
|
+
.mdl-layout--fixed-drawer > & {
|
161
|
+
transform: translateX(0);
|
162
|
+
}
|
163
|
+
}
|
164
|
+
}
|
165
|
+
|
166
|
+
|
167
|
+
// Drawer button.
|
168
|
+
// TODO(sgomes): Replace with an icon button when we have that component.
|
169
|
+
.mdl-layout__drawer-button {
|
170
|
+
display: block;
|
171
|
+
|
172
|
+
position: absolute;
|
173
|
+
height: $layout-drawer-button-desktop-size;
|
174
|
+
width: $layout-drawer-button-desktop-size;
|
175
|
+
border: 0;
|
176
|
+
|
177
|
+
flex-shrink: 0;
|
178
|
+
|
179
|
+
overflow: hidden;
|
180
|
+
text-align: center;
|
181
|
+
cursor: pointer;
|
182
|
+
font-size: 26px;
|
183
|
+
line-height: $layout-drawer-button-desktop-size + 2;
|
184
|
+
font-family: Helvetica, Arial, sans-serif;
|
185
|
+
margin: 10px 12px;
|
186
|
+
top: 0;
|
187
|
+
left: 0;
|
188
|
+
color: $layout-header-text-color;
|
189
|
+
|
190
|
+
z-index: 4;
|
191
|
+
|
192
|
+
.mdl-layout__header & {
|
193
|
+
position: absolute;
|
194
|
+
color: $layout-header-text-color;
|
195
|
+
background-color: inherit;
|
196
|
+
|
197
|
+
@media screen and (max-width: $layout-screen-size-threshold) {
|
198
|
+
margin: 4px;
|
199
|
+
}
|
200
|
+
}
|
201
|
+
|
202
|
+
@media screen and (max-width: $layout-screen-size-threshold) {
|
203
|
+
margin: 4px;
|
204
|
+
color: rgba(0, 0, 0, 0.5);
|
205
|
+
}
|
206
|
+
|
207
|
+
@media screen and (min-width: $layout-screen-size-threshold + 1px) {
|
208
|
+
.mdl-layout--fixed-drawer > & {
|
209
|
+
display: none;
|
210
|
+
}
|
211
|
+
}
|
212
|
+
}
|
213
|
+
|
214
|
+
.mdl-layout__header {
|
215
|
+
display: flex;
|
216
|
+
flex-direction: column;
|
217
|
+
flex-wrap: nowrap;
|
218
|
+
justify-content: flex-start;
|
219
|
+
box-sizing: border-box;
|
220
|
+
flex-shrink: 0;
|
221
|
+
|
222
|
+
width: 100%;
|
223
|
+
margin: 0;
|
224
|
+
padding: 0;
|
225
|
+
border: none;
|
226
|
+
min-height: $layout-desktop-header-height;
|
227
|
+
max-height: 1000px;
|
228
|
+
z-index: 3;
|
229
|
+
|
230
|
+
background-color: $layout-header-bg-color;
|
231
|
+
color: $layout-header-text-color;
|
232
|
+
|
233
|
+
@include shadow-2dp();
|
234
|
+
@include material-animation-default();
|
235
|
+
transition-property: max-height, box-shadow;
|
236
|
+
|
237
|
+
@media screen and (max-width: $layout-screen-size-threshold) {
|
238
|
+
min-height: $layout-mobile-header-height;
|
239
|
+
}
|
240
|
+
|
241
|
+
.mdl-layout--fixed-drawer:not(.is-small-screen) > & {
|
242
|
+
margin-left: $layout-drawer-width;
|
243
|
+
width: calc(100% - #{$layout-drawer-width});
|
244
|
+
}
|
245
|
+
|
246
|
+
& > .mdl-layout-icon {
|
247
|
+
position: absolute;
|
248
|
+
left: $layout-header-desktop-indent;
|
249
|
+
top: ($layout-desktop-header-height - $layout-header-icon-size) / 2;
|
250
|
+
height: $layout-header-icon-size;
|
251
|
+
width: $layout-header-icon-size;
|
252
|
+
overflow: hidden;
|
253
|
+
z-index: 3;
|
254
|
+
display: block;
|
255
|
+
|
256
|
+
@media screen and (max-width: $layout-screen-size-threshold) {
|
257
|
+
left: $layout-header-mobile-indent;
|
258
|
+
top: ($layout-mobile-header-height - $layout-header-icon-size) / 2;
|
259
|
+
}
|
260
|
+
}
|
261
|
+
|
262
|
+
.mdl-layout.has-drawer & > .mdl-layout-icon {
|
263
|
+
display: none;
|
264
|
+
}
|
265
|
+
|
266
|
+
&.is-compact {
|
267
|
+
max-height: $layout-desktop-header-height;
|
268
|
+
|
269
|
+
@media screen and (max-width: $layout-screen-size-threshold) {
|
270
|
+
max-height: $layout-mobile-header-height;
|
271
|
+
}
|
272
|
+
}
|
273
|
+
|
274
|
+
&.is-compact.has-tabs {
|
275
|
+
height: $layout-desktop-header-height + $layout-tab-bar-height;
|
276
|
+
|
277
|
+
@media screen and (max-width: $layout-screen-size-threshold) {
|
278
|
+
min-height: $layout-mobile-header-height + $layout-tab-bar-height;
|
279
|
+
}
|
280
|
+
}
|
281
|
+
|
282
|
+
@media screen and (max-width: $layout-screen-size-threshold) {
|
283
|
+
& {
|
284
|
+
display: none;
|
285
|
+
}
|
286
|
+
|
287
|
+
.mdl-layout--fixed-header > & {
|
288
|
+
display: flex;
|
289
|
+
}
|
290
|
+
}
|
291
|
+
}
|
292
|
+
|
293
|
+
.mdl-layout__header--transparent.mdl-layout__header--transparent {
|
294
|
+
background-color: transparent;
|
295
|
+
box-shadow: none;
|
296
|
+
}
|
297
|
+
|
298
|
+
.mdl-layout__header--seamed {
|
299
|
+
box-shadow: none;
|
300
|
+
}
|
301
|
+
|
302
|
+
.mdl-layout__header--scroll {
|
303
|
+
box-shadow: none;
|
304
|
+
}
|
305
|
+
|
306
|
+
.mdl-layout__header--waterfall {
|
307
|
+
box-shadow: none;
|
308
|
+
overflow: hidden;
|
309
|
+
|
310
|
+
&.is-casting-shadow {
|
311
|
+
@include shadow-2dp();
|
312
|
+
}
|
313
|
+
}
|
314
|
+
|
315
|
+
.mdl-layout__header-row {
|
316
|
+
display: flex;
|
317
|
+
flex-direction: row;
|
318
|
+
flex-wrap: nowrap;
|
319
|
+
flex-shrink: 0;
|
320
|
+
box-sizing: border-box;
|
321
|
+
align-self: stretch;
|
322
|
+
align-items: center;
|
323
|
+
height: $layout-header-desktop-row-height;
|
324
|
+
margin: 0;
|
325
|
+
padding: 0 $layout-header-desktop-indent 0 $layout-header-desktop-baseline;
|
326
|
+
|
327
|
+
@media screen and (max-width: $layout-screen-size-threshold) {
|
328
|
+
height: $layout-header-mobile-row-height;
|
329
|
+
padding: 0 $layout-header-mobile-indent 0 $layout-header-mobile-baseline;
|
330
|
+
}
|
331
|
+
|
332
|
+
& > * {
|
333
|
+
flex-shrink: 0;
|
334
|
+
}
|
335
|
+
|
336
|
+
.mdl-layout__header--scroll & {
|
337
|
+
width: 100%;
|
338
|
+
}
|
339
|
+
|
340
|
+
& .mdl-navigation {
|
341
|
+
margin: 0;
|
342
|
+
padding: 0;
|
343
|
+
height: $layout-header-desktop-row-height;
|
344
|
+
flex-direction: row;
|
345
|
+
align-items: center;
|
346
|
+
|
347
|
+
@media screen and (max-width: $layout-screen-size-threshold) {
|
348
|
+
height: $layout-header-mobile-row-height;
|
349
|
+
}
|
350
|
+
}
|
351
|
+
|
352
|
+
& .mdl-navigation__link {
|
353
|
+
display: block;
|
354
|
+
color: $layout-header-text-color;
|
355
|
+
line-height: $layout-header-desktop-row-height;
|
356
|
+
padding: 0 24px;
|
357
|
+
|
358
|
+
@media screen and (max-width: $layout-screen-size-threshold) {
|
359
|
+
line-height: $layout-header-mobile-row-height;
|
360
|
+
padding: 0 $layout-header-mobile-indent;
|
361
|
+
}
|
362
|
+
} }
|
363
|
+
|
364
|
+
// Obfuscator.
|
365
|
+
.mdl-layout__obfuscator {
|
366
|
+
background-color: transparent;
|
367
|
+
position: absolute;
|
368
|
+
top: 0;
|
369
|
+
left: 0;
|
370
|
+
height: 100%;
|
371
|
+
width: 100%;
|
372
|
+
z-index: 4;
|
373
|
+
visibility: hidden;
|
374
|
+
transition-property: background-color;
|
375
|
+
@include material-animation-default();
|
376
|
+
|
377
|
+
.mdl-layout__drawer.is-visible ~ & {
|
378
|
+
background-color: rgba(0, 0, 0, 0.5);
|
379
|
+
visibility: visible;
|
380
|
+
}
|
381
|
+
}
|
382
|
+
|
383
|
+
|
384
|
+
// Content.
|
385
|
+
.mdl-layout__content {
|
386
|
+
// Fix IE10 bug.
|
387
|
+
-ms-flex: 0 1 auto;
|
388
|
+
|
389
|
+
display: inline-block;
|
390
|
+
overflow-y: auto;
|
391
|
+
overflow-x: hidden;
|
392
|
+
flex-grow: 1;
|
393
|
+
z-index: 1;
|
394
|
+
-webkit-overflow-scrolling: touch;
|
395
|
+
|
396
|
+
.mdl-layout--fixed-drawer > & {
|
397
|
+
margin-left: $layout-drawer-width;
|
398
|
+
}
|
399
|
+
|
400
|
+
.mdl-layout__container.has-scrolling-header & {
|
401
|
+
overflow: visible;
|
402
|
+
}
|
403
|
+
|
404
|
+
@media screen and (max-width: $layout-screen-size-threshold) {
|
405
|
+
.mdl-layout--fixed-drawer > & {
|
406
|
+
margin-left: 0;
|
407
|
+
}
|
408
|
+
|
409
|
+
.mdl-layout__container.has-scrolling-header & {
|
410
|
+
overflow-y: auto;
|
411
|
+
overflow-x: hidden;
|
412
|
+
}
|
413
|
+
}
|
414
|
+
}
|
415
|
+
|
416
|
+
// Tabs.
|
417
|
+
.mdl-layout__tab-bar {
|
418
|
+
height: $layout-tab-bar-height * 2;
|
419
|
+
margin: 0;
|
420
|
+
width: calc(100% -
|
421
|
+
#{(($layout-header-desktop-baseline - $layout-tab-desktop-padding) * 2)});
|
422
|
+
padding: 0 0 0
|
423
|
+
($layout-header-desktop-baseline - $layout-tab-desktop-padding);
|
424
|
+
display: flex;
|
425
|
+
background-color: $layout-header-bg-color;
|
426
|
+
overflow-y: hidden;
|
427
|
+
overflow-x: scroll;
|
428
|
+
|
429
|
+
&::-webkit-scrollbar {
|
430
|
+
display: none;
|
431
|
+
}
|
432
|
+
|
433
|
+
@media screen and (max-width: $layout-screen-size-threshold) {
|
434
|
+
width: calc(100% -
|
435
|
+
#{($layout-header-mobile-baseline - $layout-tab-mobile-padding)});
|
436
|
+
padding: 0 0 0
|
437
|
+
($layout-header-mobile-baseline - $layout-tab-mobile-padding);
|
438
|
+
}
|
439
|
+
|
440
|
+
.mdl-layout--fixed-tabs & {
|
441
|
+
padding: 0;
|
442
|
+
overflow: hidden;
|
443
|
+
width: 100%;
|
444
|
+
}
|
445
|
+
}
|
446
|
+
|
447
|
+
.mdl-layout__tab-bar-container {
|
448
|
+
position: relative;
|
449
|
+
height: $layout-tab-bar-height;
|
450
|
+
width: 100%;
|
451
|
+
border: none;
|
452
|
+
margin: 0;
|
453
|
+
z-index: 2;
|
454
|
+
flex-grow: 0;
|
455
|
+
flex-shrink: 0;
|
456
|
+
overflow: hidden;
|
457
|
+
|
458
|
+
.mdl-layout__container > & {
|
459
|
+
position: absolute;
|
460
|
+
top: 0;
|
461
|
+
left: 0;
|
462
|
+
}
|
463
|
+
}
|
464
|
+
|
465
|
+
.mdl-layout__tab-bar-button {
|
466
|
+
display: inline-block;
|
467
|
+
position: absolute;
|
468
|
+
top: 0;
|
469
|
+
height: $layout-tab-bar-height;
|
470
|
+
width: $layout-header-desktop-baseline - $layout-tab-desktop-padding;
|
471
|
+
z-index: 4;
|
472
|
+
text-align: center;
|
473
|
+
background-color: $layout-header-bg-color;
|
474
|
+
color: transparent;
|
475
|
+
cursor: pointer;
|
476
|
+
user-select: none;
|
477
|
+
|
478
|
+
@media screen and (max-width: $layout-screen-size-threshold) {
|
479
|
+
display: none;
|
480
|
+
width: $layout-header-mobile-baseline - $layout-tab-mobile-padding;
|
481
|
+
}
|
482
|
+
|
483
|
+
.mdl-layout--fixed-tabs & {
|
484
|
+
display: none;
|
485
|
+
}
|
486
|
+
|
487
|
+
& .material-icons {
|
488
|
+
line-height: $layout-tab-bar-height;
|
489
|
+
}
|
490
|
+
|
491
|
+
&.is-active {
|
492
|
+
color: $layout-header-text-color;
|
493
|
+
}
|
494
|
+
}
|
495
|
+
|
496
|
+
.mdl-layout__tab-bar-left-button {
|
497
|
+
left: 0;
|
498
|
+
}
|
499
|
+
|
500
|
+
.mdl-layout__tab-bar-right-button {
|
501
|
+
right: 0;
|
502
|
+
}
|
503
|
+
|
504
|
+
.mdl-layout__tab {
|
505
|
+
margin: 0;
|
506
|
+
border: none;
|
507
|
+
padding: 0 $layout-tab-desktop-padding 0 $layout-tab-desktop-padding;
|
508
|
+
|
509
|
+
float: left;
|
510
|
+
position: relative;
|
511
|
+
display: block;
|
512
|
+
flex-grow: 0;
|
513
|
+
flex-shrink: 0;
|
514
|
+
|
515
|
+
text-decoration: none;
|
516
|
+
height: $layout-tab-bar-height;
|
517
|
+
line-height: $layout-tab-bar-height;
|
518
|
+
|
519
|
+
text-align: center;
|
520
|
+
font-weight: 500;
|
521
|
+
font-size: 14px;
|
522
|
+
text-transform: uppercase;
|
523
|
+
|
524
|
+
color: $layout-header-tab-text-color;
|
525
|
+
overflow: hidden;
|
526
|
+
|
527
|
+
@media screen and (max-width: $layout-screen-size-threshold) {
|
528
|
+
padding: 0 $layout-tab-mobile-padding 0 $layout-tab-mobile-padding;
|
529
|
+
}
|
530
|
+
|
531
|
+
.mdl-layout--fixed-tabs & {
|
532
|
+
float: none;
|
533
|
+
flex-grow: 1;
|
534
|
+
padding: 0;
|
535
|
+
}
|
536
|
+
|
537
|
+
.mdl-layout.is-upgraded &.is-active {
|
538
|
+
color: $layout-header-text-color;
|
539
|
+
}
|
540
|
+
|
541
|
+
.mdl-layout.is-upgraded &.is-active::after {
|
542
|
+
height: $layout-tab-highlight-thickness;
|
543
|
+
width: 100%;
|
544
|
+
display: block;
|
545
|
+
content: " ";
|
546
|
+
bottom: 0;
|
547
|
+
left: 0;
|
548
|
+
position: absolute;
|
549
|
+
background: $layout-header-tab-highlight;
|
550
|
+
animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0.01s alternate forwards;
|
551
|
+
transition: all 1s cubic-bezier(0.4, 0.0, 1, 1);
|
552
|
+
}
|
553
|
+
|
554
|
+
& .mdl-layout__tab-ripple-container {
|
555
|
+
display: block;
|
556
|
+
position: absolute;
|
557
|
+
height: 100%;
|
558
|
+
width: 100%;
|
559
|
+
left: 0;
|
560
|
+
top: 0;
|
561
|
+
z-index: 1;
|
562
|
+
overflow: hidden;
|
563
|
+
|
564
|
+
& .mdl-ripple {
|
565
|
+
background-color: $layout-header-text-color;
|
566
|
+
}
|
567
|
+
}
|
568
|
+
}
|
569
|
+
|
570
|
+
.mdl-layout__tab-panel {
|
571
|
+
display: block;
|
572
|
+
|
573
|
+
.mdl-layout.is-upgraded & {
|
574
|
+
display: none;
|
575
|
+
}
|
576
|
+
|
577
|
+
.mdl-layout.is-upgraded &.is-active {
|
578
|
+
display: block;
|
579
|
+
}
|
580
|
+
}
|