Material Design Lite is used on a wide range of sites. Below are just a small selection of the Google.com sites that have launched using us. We hope to expand the showcase to cover third-party and community sites built using MDL in the near future. To request your site be added, please file a new issue on our GitHub issue tracker.
34 |
35 |
36 |
--------------------------------------------------------------------------------
/docs/_pages/started.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: started
3 | title: Getting started
4 | bodyclass: started
5 | include_prefix: ../
6 | snippets:
7 | - component_name: button
8 | snippet_group:
9 | - caption: Raised button
10 | file: raised-ripple-accent.html
11 | - caption: Colored FAB
12 | file: fab-colored.html
13 | ---
14 |
--------------------------------------------------------------------------------
/docs/_pages/templates.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: templates
3 | title: Templates
4 | bodyclass: templates
5 | include_prefix: ../
6 | templates:
7 | - name: blog
8 | title: Blog
9 | description: A mobile focused responsive template that showcases image or text based blog entries, a subscription CTA, search & share links, and an expanded article page with comments, counters and bookmarking capabilities built-in.
10 | - name: android-dot-com
11 | title: Android.com MDL skin
12 | description: A Material Design Lite version of the current android.com site, using the same content with a horizontal navigation, feature carousel and long form scrolling sub pages.
13 | - name: dashboard
14 | title: Dashboard
15 | description: A modular responsive template built to display data visualizations and information with a clear vertical nav, user profile, search and dedicated space for updates and filters.
16 | - name: portfolio
17 | title: Portfolio
18 | description: A modern and clean looking template for a portfolio/blog build with Material Design Lite. Included are a top nav bar that comes with the waterfall header component, cards to display different types of content and a footer.
19 | - name: text-only
20 | title: Text-heavy webpage
21 | description: Built for presenting content that is information dense, easily updatable, and optimized for legibility, this template has a sticky horizontal top nav on mobile, feature callouts, cards and a site map footer with a deep-linked table of contents.
22 | - name: article
23 | title: Stand-alone article
24 | description: A clean layout optimized for presenting text-based content with a breadcrumb nav, search, clear headers and a footer that utilizes a card-like structure to showcase the content.
25 | ---
26 |
--------------------------------------------------------------------------------
/docs/_templates/component.html:
--------------------------------------------------------------------------------
1 |
2 | {% block content %}
3 |
4 | {{content|safe}}
5 | {% endblock %}
6 |
--------------------------------------------------------------------------------
/docs/_templates/demo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | {{ page.component }} test
9 |
10 |
11 |
12 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | {% set demo_css = "../../dist/components/" + page.component + "/demo.css" %}
22 |
25 |
26 |
27 |
28 |
29 |
26 |
27 | {% endfor %}
28 | {% endblock %}
29 |
--------------------------------------------------------------------------------
/src/_functions.scss:
--------------------------------------------------------------------------------
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 | @function strip-units($number) {
18 | @return $number / ($number * 0 + 1);
19 | }
20 |
--------------------------------------------------------------------------------
/src/animation/_animation.scss:
--------------------------------------------------------------------------------
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 |
20 | .mdl-animation--default {
21 | transition-timing-function: $animation-curve-default;
22 | }
23 |
24 | .mdl-animation--fast-out-slow-in {
25 | transition-timing-function: $animation-curve-fast-out-slow-in;
26 | }
27 |
28 | .mdl-animation--linear-out-slow-in {
29 | transition-timing-function: $animation-curve-linear-out-slow-in;
30 | }
31 |
32 | .mdl-animation--fast-out-linear-in {
33 | transition-timing-function: $animation-curve-fast-out-linear-in;
34 | }
35 |
--------------------------------------------------------------------------------
/src/animation/demo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
Click me to animate
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/src/badge/_badge.scss:
--------------------------------------------------------------------------------
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-badge {
20 | position : relative;
21 | white-space: nowrap;
22 | margin-right: ($badge-size + $badge-padding);
23 |
24 | &:not([data-badge]) {
25 | margin-right: auto;
26 | }
27 |
28 | &[data-badge]:after {
29 | content: attr(data-badge);
30 |
31 | display: flex;
32 | flex-direction: row;
33 | flex-wrap: wrap;
34 | justify-content: center;
35 | align-content: center;
36 | align-items: center;
37 |
38 | position: absolute;
39 | top: -($badge-size / 2);
40 | right: -($badge-size + $badge-padding);
41 |
42 | .mdl-button & {
43 | top: -10px;
44 | right: -5px;
45 | }
46 |
47 | font-family: $preferred_font;
48 | font-weight: 600;
49 | font-size: $badge-font-size;
50 | width: $badge-size;
51 | height: $badge-size;
52 | border-radius : 50%;
53 |
54 | background: $badge-background;
55 | color: $badge-color;
56 | }
57 |
58 | &.mdl-badge--no-background {
59 | &[data-badge]:after {
60 | color: $badge-color-inverse;
61 | background: $badge-background-inverse;
62 |
63 | box-shadow: 0 0 1px gray;
64 | }
65 | }
66 | &.mdl-badge--overlap {
67 | margin-right: ($badge-size - $badge-overlap);
68 | &:after {
69 | right: -($badge-size - $badge-overlap);
70 | }
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/src/badge/snippets/badge-on-icon-icon-demo.html:
--------------------------------------------------------------------------------
1 |
9 | {% include "badge-on-icon-icon.html" %}
10 |
--------------------------------------------------------------------------------
/src/badge/snippets/badge-on-icon-icon.html:
--------------------------------------------------------------------------------
1 |
2 |
10 |
11 | person
12 | Bryan Cranston
13 |
14 | Bryan Cranston played the role of Walter in Breaking Bad. He is also known
15 | for playing Hal in Malcom in the Middle.
16 |
17 |
18 |
19 | star
20 |
21 |
22 |
23 |
24 | person
25 | Aaron Paul
26 |
27 | Aaron Paul played the role of Jesse in Breaking Bad. He also featured in
28 | the "Need For Speed" Movie.
29 |
30 |
31 |
32 | star
33 |
34 |
35 |
36 |
37 | person
38 | Bob Odenkirk
39 |
40 | Bob Odinkrik played the role of Saul in Breaking Bad. Due to public fondness for the
41 | character, Bob stars in his own show now, called "Better Call Saul".
42 |
43 |
44 |
45 | star
46 |
47 |
14 |
--------------------------------------------------------------------------------
/src/palette/demo.css:
--------------------------------------------------------------------------------
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 | .demo-page--palette.demo-preview-block {
18 | display: inline-block;
19 | }
20 |
21 | .demo-palette {
22 | margin-top: 15px;
23 | width: 360px;
24 | float: left;
25 | }
26 |
27 | @media screen and (max-width: 360px ) {
28 | .demo-palette {
29 | width: 272px;
30 | }
31 | }
32 |
33 | .demo-palette-color, .demo-palette-heading {
34 | max-width: 300px;
35 | padding: 15px;
36 | color: white;
37 | }
38 |
39 | .demo-palette .demo-palette--dark-text,
40 | .demo-palette-heading.demo-palette--dark-text .demo-palette-name {
41 | color: #000;
42 | }
43 |
44 | .demo-palette-name {
45 | padding: 0 0 60px 0;
46 | }
47 |
48 | .demo-palette-single {
49 | padding: 15px 15px 25px;
50 | }
51 |
52 | .demo-palette-single .demo-palette-name {
53 | padding: 0;
54 | float: left;
55 | }
56 |
--------------------------------------------------------------------------------
/src/progress/snippets/progress-buffering-demo.html:
--------------------------------------------------------------------------------
1 |
7 |
8 | {% include "progress-buffering.html" %}
9 |
--------------------------------------------------------------------------------
/src/progress/snippets/progress-buffering.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
9 |
--------------------------------------------------------------------------------
/src/progress/snippets/progress-default-demo.html:
--------------------------------------------------------------------------------
1 |
7 | {% include "progress-default.html" %}
8 |
--------------------------------------------------------------------------------
/src/progress/snippets/progress-default.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 |
--------------------------------------------------------------------------------
/src/progress/snippets/progress-indeterminate-demo.html:
--------------------------------------------------------------------------------
1 |
7 | {% include "progress-indeterminate.html" %}
8 |
--------------------------------------------------------------------------------
/src/progress/snippets/progress-indeterminate.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/src/radio/snippets/radio-off.html:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/radio/snippets/radio-on.html:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/resets/_mobile.scss:
--------------------------------------------------------------------------------
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 |
18 | /* Remove the unwanted box around FAB buttons */
19 | /* More info: http://goo.gl/IPwKi */
20 | a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
21 | .mdl-icon-toggle, .mdl-item, .mdl-radio, .mdl-slider, .mdl-switch, .mdl-tabs__tab {
22 |
23 | -webkit-tap-highlight-color: transparent;
24 | -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
25 | }
26 |
--------------------------------------------------------------------------------
/src/resets/_resets.scss:
--------------------------------------------------------------------------------
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 "h5bp";
18 | @import "mobile";
19 |
20 | /*
21 | * Make html take up the entire screen
22 | * Then set touch-action to avoid touch delay on mobile IE
23 | */
24 | html {
25 | width: 100%;
26 | height: 100%;
27 | -ms-touch-action: manipulation;
28 | touch-action: manipulation;
29 | }
30 |
31 | /*
32 | * Make body take up the entire screen
33 | * Remove body margin so layout containers don't cause extra overflow.
34 | */
35 | body {
36 | width: 100%;
37 | min-height: 100%;
38 | margin: 0;
39 | }
40 |
41 | /*
42 | * Main display reset for IE support.
43 | * Source: http://weblog.west-wind.com/posts/2015/Jan/12/main-HTML5-Tag-not-working-in-Internet-Explorer-91011
44 | */
45 | main {
46 | display: block;
47 | }
48 |
49 | /*
50 | * Apply no display to elements with the hidden attribute.
51 | * IE 9 and 10 support.
52 | */
53 | *[hidden] {
54 | display: none !important;
55 | }
56 |
--------------------------------------------------------------------------------
/src/ripple/_ripple.scss:
--------------------------------------------------------------------------------
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-ripple {
20 | background : $ripple-bg-color;
21 | border-radius : 50%;
22 | height : 50px;
23 | left : 0;
24 | opacity : 0;
25 | pointer-events : none;
26 | position : absolute;
27 | top : 0;
28 | transform : translate(-50%, -50%);
29 | width : 50px;
30 | overflow : hidden;
31 |
32 | &.is-animating {
33 | transition: transform 0.3s $animation-curve-linear-out-slow-in,
34 | width 0.3s $animation-curve-linear-out-slow-in,
35 | height 0.3s $animation-curve-linear-out-slow-in,
36 | opacity 0.6s $animation-curve-linear-out-slow-in;
37 | }
38 |
39 | &.is-visible {
40 | opacity: 0.3;
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/src/shadow/_shadow.scss:
--------------------------------------------------------------------------------
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-shadow--2dp {
21 | @include shadow-2dp();
22 | }
23 |
24 | .mdl-shadow--3dp {
25 | @include shadow-3dp();
26 | }
27 |
28 | .mdl-shadow--4dp {
29 | @include shadow-4dp();
30 | }
31 |
32 | .mdl-shadow--6dp {
33 | @include shadow-6dp();
34 | }
35 |
36 | .mdl-shadow--8dp {
37 | @include shadow-8dp();
38 | }
39 |
40 | .mdl-shadow--16dp {
41 | @include shadow-16dp();
42 | }
43 |
44 | .mdl-shadow--24dp {
45 | @include shadow-24dp();
46 | }
47 |
--------------------------------------------------------------------------------
/src/shadow/demo.css:
--------------------------------------------------------------------------------
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 | .demo-page--shadow .demo-preview-block {
18 | height: 100px;
19 | }
20 |
21 | .demo-shadow-card {
22 | background-color: #fff;
23 | border-radius: 2px;
24 | display: block;
25 | height: 72px;
26 | margin-bottom: 20px;
27 | margin-right: 32px;
28 | padding: 10px;
29 | text-align: center;
30 | float: left;
31 | color: #9E9E9E;
32 | display: flex;
33 | align-items: center;
34 | justify-content: center;
35 | transition-property: opacity, transform;
36 | width: 72px;
37 | }
38 |
39 | @media screen and (max-width: 360px ) {
40 | .demo-shadow-card {
41 | width: 27px;
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/src/shadow/demo.html:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/src/typography/demo.css:
--------------------------------------------------------------------------------
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 | .demo-page--typography {
18 | color: rgba(0, 0, 0, 0.87);
19 | }
20 |
21 | .demo-page--typography table th {
22 | padding-right: 80px;
23 |
24 | vertical-align: top;
25 | text-align: left;
26 | }
27 |
28 | .demo-typography--white {
29 | background-color: white;
30 | color: black;
31 | }
32 |
33 | .demo-typography--black {
34 | background-color: black;
35 | color: white;
36 | }
37 |
38 | .demo-typography--white,
39 | .demo-typography--black,
40 | .demo-typography--img-1,
41 | .demo-typography--img-2 {
42 | width: 360px;
43 | height: 272px;
44 |
45 | padding: 16px;
46 | box-sizing: border-box;
47 | }
48 |
49 | .demo-typography--img-1 {
50 | background-image: url(../demo-images/img-1.png);
51 | color: white;
52 | }
53 |
54 | .demo-typography--img-2 {
55 | background-image: url(../demo-images/img-2.png);
56 | color: white;
57 | }
58 |
--------------------------------------------------------------------------------
/templates/android-dot-com/README.md:
--------------------------------------------------------------------------------
1 | # android.com sample
2 |
3 | ## Why this sample
4 | The goal of this sample is to illustrate implementing a real-world-looking site with **Material Design Lite**.
5 |
6 | We therefore decided to do a cover of the front page of the android.com website, which while not a 1:1 match illustrates MDL usage well.
7 |
--------------------------------------------------------------------------------
/templates/android-dot-com/images/android-logo-white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/android-dot-com/images/android-logo-white.png
--------------------------------------------------------------------------------
/templates/android-dot-com/images/android-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/android-dot-com/images/android-logo.png
--------------------------------------------------------------------------------
/templates/android-dot-com/images/andy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/android-dot-com/images/andy.png
--------------------------------------------------------------------------------
/templates/android-dot-com/images/auto-on.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/android-dot-com/images/auto-on.jpg
--------------------------------------------------------------------------------
/templates/android-dot-com/images/devices.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/android-dot-com/images/devices.jpg
--------------------------------------------------------------------------------
/templates/android-dot-com/images/more-from-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/android-dot-com/images/more-from-1.png
--------------------------------------------------------------------------------
/templates/android-dot-com/images/more-from-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/android-dot-com/images/more-from-2.png
--------------------------------------------------------------------------------
/templates/android-dot-com/images/more-from-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/android-dot-com/images/more-from-3.png
--------------------------------------------------------------------------------
/templates/android-dot-com/images/more-from-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/android-dot-com/images/more-from-4.png
--------------------------------------------------------------------------------
/templates/android-dot-com/images/nexus6-on.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/android-dot-com/images/nexus6-on.jpg
--------------------------------------------------------------------------------
/templates/android-dot-com/images/nexus9-on.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/android-dot-com/images/nexus9-on.jpg
--------------------------------------------------------------------------------
/templates/android-dot-com/images/slide01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/android-dot-com/images/slide01.jpg
--------------------------------------------------------------------------------
/templates/android-dot-com/images/tv-on.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/android-dot-com/images/tv-on.jpg
--------------------------------------------------------------------------------
/templates/android-dot-com/images/wear-black-on.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/android-dot-com/images/wear-black-on.png
--------------------------------------------------------------------------------
/templates/android-dot-com/images/wear-silver-on.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/android-dot-com/images/wear-silver-on.png
--------------------------------------------------------------------------------
/templates/android-dot-com/images/wear.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/android-dot-com/images/wear.png
--------------------------------------------------------------------------------
/templates/android-dot-com/material.scss:
--------------------------------------------------------------------------------
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 '../../src/material-design-lite';
18 |
--------------------------------------------------------------------------------
/templates/article/images/android-desktop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/article/images/android-desktop.png
--------------------------------------------------------------------------------
/templates/article/images/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/article/images/favicon.png
--------------------------------------------------------------------------------
/templates/article/images/ios-desktop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/article/images/ios-desktop.png
--------------------------------------------------------------------------------
/templates/article/styles.css:
--------------------------------------------------------------------------------
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 | .demo-ribbon {
18 | width: 100%;
19 | height: 40vh;
20 | background-color: #3F51B5;
21 | flex-shrink: 0;
22 | }
23 |
24 | .demo-main {
25 | margin-top: -35vh;
26 | flex-shrink: 0;
27 | }
28 |
29 | .demo-header .mdl-layout__header-row {
30 | padding-left: 40px;
31 | }
32 |
33 | .demo-container {
34 | max-width: 1600px;
35 | width: calc(100% - 16px);
36 | margin: 0 auto;
37 | }
38 |
39 | .demo-content {
40 | border-radius: 2px;
41 | padding: 80px 56px;
42 | margin-bottom: 80px;
43 | }
44 |
45 | .demo-layout.is-small-screen .demo-content {
46 | padding: 40px 28px;
47 | }
48 |
49 | .demo-content h3 {
50 | margin-top: 48px;
51 | }
52 |
53 | .demo-footer {
54 | padding-left: 40px;
55 | }
56 |
57 | .demo-footer .mdl-mini-footer--link-list a {
58 | font-size: 13px;
59 | }
60 |
--------------------------------------------------------------------------------
/templates/blog/images/android-desktop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/blog/images/android-desktop.png
--------------------------------------------------------------------------------
/templates/blog/images/avatar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/blog/images/avatar.png
--------------------------------------------------------------------------------
/templates/blog/images/bg_1024.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/blog/images/bg_1024.jpg
--------------------------------------------------------------------------------
/templates/blog/images/bg_2048.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/blog/images/bg_2048.jpg
--------------------------------------------------------------------------------
/templates/blog/images/bg_2880.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/blog/images/bg_2880.jpg
--------------------------------------------------------------------------------
/templates/blog/images/co1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/blog/images/co1.jpg
--------------------------------------------------------------------------------
/templates/blog/images/co2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/blog/images/co2.jpg
--------------------------------------------------------------------------------
/templates/blog/images/coffee.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/blog/images/coffee.jpg
--------------------------------------------------------------------------------
/templates/blog/images/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/blog/images/favicon.png
--------------------------------------------------------------------------------
/templates/blog/images/ios-desktop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/blog/images/ios-desktop.png
--------------------------------------------------------------------------------
/templates/blog/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/blog/images/logo.png
--------------------------------------------------------------------------------
/templates/blog/images/road.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/blog/images/road.jpg
--------------------------------------------------------------------------------
/templates/blog/images/road_big.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/blog/images/road_big.jpg
--------------------------------------------------------------------------------
/templates/blog/images/shopping.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/blog/images/shopping.jpg
--------------------------------------------------------------------------------
/templates/dashboard/images/android-desktop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/dashboard/images/android-desktop.png
--------------------------------------------------------------------------------
/templates/dashboard/images/dog.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/dashboard/images/dog.png
--------------------------------------------------------------------------------
/templates/dashboard/images/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/dashboard/images/favicon.png
--------------------------------------------------------------------------------
/templates/dashboard/images/ios-desktop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/dashboard/images/ios-desktop.png
--------------------------------------------------------------------------------
/templates/dashboard/images/user.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/dashboard/images/user.jpg
--------------------------------------------------------------------------------
/templates/portfolio/Tutorial/images/example-work01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/portfolio/Tutorial/images/example-work01.jpg
--------------------------------------------------------------------------------
/templates/portfolio/Tutorial/images/example-work02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/portfolio/Tutorial/images/example-work02.jpg
--------------------------------------------------------------------------------
/templates/portfolio/Tutorial/images/example-work03.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/portfolio/Tutorial/images/example-work03.jpg
--------------------------------------------------------------------------------
/templates/portfolio/Tutorial/images/example-work04.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/portfolio/Tutorial/images/example-work04.jpg
--------------------------------------------------------------------------------
/templates/portfolio/Tutorial/images/example-work05.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/portfolio/Tutorial/images/example-work05.jpg
--------------------------------------------------------------------------------
/templates/portfolio/Tutorial/images/example-work06.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/portfolio/Tutorial/images/example-work06.jpg
--------------------------------------------------------------------------------
/templates/portfolio/Tutorial/images/example-work07.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/portfolio/Tutorial/images/example-work07.jpg
--------------------------------------------------------------------------------
/templates/portfolio/Tutorial/images/example-work08.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/portfolio/Tutorial/images/example-work08.jpg
--------------------------------------------------------------------------------
/templates/portfolio/Tutorial/images/example-work09.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/portfolio/Tutorial/images/example-work09.jpg
--------------------------------------------------------------------------------
/templates/portfolio/Tutorial/images/header-bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/portfolio/Tutorial/images/header-bg.jpg
--------------------------------------------------------------------------------
/templates/portfolio/Tutorial/images/photo-wide.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/portfolio/Tutorial/images/photo-wide.jpg
--------------------------------------------------------------------------------
/templates/portfolio/Tutorial/images/photo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/portfolio/Tutorial/images/photo.jpg
--------------------------------------------------------------------------------
/templates/portfolio/Tutorial/step01-initial-HTML-setup.html:
--------------------------------------------------------------------------------
1 |
2 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | MDL-Static Website
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/templates/portfolio/Tutorial/styles.css:
--------------------------------------------------------------------------------
1 |
2 | .portfolio-header {
3 | position: relative;
4 | background-color: #D8D8D8;
5 | background-image: url(images/header-bg.jpg);
6 | }
7 |
8 | .portfolio-header .mdl-layout__header-row {
9 | padding: 0;
10 | justify-content: center;
11 | }
12 |
13 | .portfolio-navigation-row {
14 | background-color: rgba(0, 0, 0, 0.08);
15 | text-transform: uppercase;
16 | height: 45px;
17 | }
18 |
19 | .portfolio-navigation-row .mdl-navigation {
20 | text-align: center;
21 | max-width: 900px;
22 | width: 100%;
23 | }
24 |
25 | .portfolio-navigation-row .mdl-navigation__link {
26 | flex: 1;
27 | line-height: 42px;
28 | }
29 |
30 | .portfolio-header .mdl-layout__drawer-button {
31 | background-color: rgba(197, 197, 197, 0.44);
32 | }
33 |
34 | .portfolio-navigation-row .is-active {
35 | position: relative;
36 | font-weight: bold;
37 | }
38 |
39 | .portfolio-navigation-row .is-active:after {
40 | content: "";
41 | width: 70%;
42 | height: 2px;
43 | display: block;
44 | position: absolute;
45 | bottom: 0;
46 | left: 0;
47 | background-color: rgb(255,64,129);
48 | left: 15%;
49 | }
50 |
51 |
52 | img.article-image {
53 | width: 100%;
54 | height: auto;
55 | }
56 |
57 | .portfolio-max-width {
58 | max-width: 900px;
59 | margin: auto;
60 | }
61 |
62 | .portfolio-copy {
63 | max-width: 700px;
64 | }
65 |
66 | .portfolio-card .mdl-card__title {
67 | padding-bottom: 0;
68 | }
69 |
70 | .no-padding {
71 | padding: 0;
72 | }
73 |
74 | .no-left-padding{
75 | padding-left: 0;
76 | }
77 |
78 | .no-bottom-padding {
79 | padding-bottom: 0;
80 | }
81 |
82 | .padding-top {
83 | padding: 10px 0 0;
84 | }
85 |
86 | .portfolio-share-btn {
87 | position: relative;
88 | float: right;
89 | top: -4px;
90 | }
91 |
92 | .demo-card-event > .mdl-card__actions {
93 | align-items: center;
94 | box-sizing: border-box;
95 | display: flex;
96 | }
97 |
98 | .portfolio-contact .mdl-textfield {
99 | width: 100%;
100 | }
101 |
102 | .portfolio-contact form {
103 | max-width: 700px;
104 | margin: auto;
105 | }
--------------------------------------------------------------------------------
/templates/portfolio/images/about-header.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/portfolio/images/about-header.jpg
--------------------------------------------------------------------------------
/templates/portfolio/images/contact-image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/portfolio/images/contact-image.jpg
--------------------------------------------------------------------------------
/templates/portfolio/images/example-blog01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/portfolio/images/example-blog01.jpg
--------------------------------------------------------------------------------
/templates/portfolio/images/example-blog02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/portfolio/images/example-blog02.jpg
--------------------------------------------------------------------------------
/templates/portfolio/images/example-blog03.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/portfolio/images/example-blog03.jpg
--------------------------------------------------------------------------------
/templates/portfolio/images/example-blog04.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/portfolio/images/example-blog04.jpg
--------------------------------------------------------------------------------
/templates/portfolio/images/example-blog05.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/portfolio/images/example-blog05.jpg
--------------------------------------------------------------------------------
/templates/portfolio/images/example-blog06.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/portfolio/images/example-blog06.jpg
--------------------------------------------------------------------------------
/templates/portfolio/images/example-blog07.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/portfolio/images/example-blog07.jpg
--------------------------------------------------------------------------------
/templates/portfolio/images/example-work01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/portfolio/images/example-work01.jpg
--------------------------------------------------------------------------------
/templates/portfolio/images/example-work02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/portfolio/images/example-work02.jpg
--------------------------------------------------------------------------------
/templates/portfolio/images/example-work03.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/portfolio/images/example-work03.jpg
--------------------------------------------------------------------------------
/templates/portfolio/images/example-work04.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/portfolio/images/example-work04.jpg
--------------------------------------------------------------------------------
/templates/portfolio/images/example-work05.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/portfolio/images/example-work05.jpg
--------------------------------------------------------------------------------
/templates/portfolio/images/example-work06.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/portfolio/images/example-work06.jpg
--------------------------------------------------------------------------------
/templates/portfolio/images/example-work07.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/portfolio/images/example-work07.jpg
--------------------------------------------------------------------------------
/templates/portfolio/images/example-work08.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/portfolio/images/example-work08.jpg
--------------------------------------------------------------------------------
/templates/portfolio/images/example-work09.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/portfolio/images/example-work09.jpg
--------------------------------------------------------------------------------
/templates/portfolio/images/footer-background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/portfolio/images/footer-background.png
--------------------------------------------------------------------------------
/templates/portfolio/images/header-bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/portfolio/images/header-bg.jpg
--------------------------------------------------------------------------------
/templates/portfolio/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/portfolio/images/logo.png
--------------------------------------------------------------------------------
/templates/portfolio/images/photo-wide.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/portfolio/images/photo-wide.jpg
--------------------------------------------------------------------------------
/templates/portfolio/images/photo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/portfolio/images/photo.jpg
--------------------------------------------------------------------------------
/templates/portfolio/images/portfolio-example-01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/portfolio/images/portfolio-example-01.jpg
--------------------------------------------------------------------------------
/templates/portfolio/images/portfolio-example-02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/portfolio/images/portfolio-example-02.jpg
--------------------------------------------------------------------------------
/templates/portfolio/images/portfolio-example-03.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/portfolio/images/portfolio-example-03.jpg
--------------------------------------------------------------------------------
/templates/portfolio/images/portfolio-example-04.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/portfolio/images/portfolio-example-04.jpg
--------------------------------------------------------------------------------
/templates/portfolio/images/portfolio-example-05.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/portfolio/images/portfolio-example-05.jpg
--------------------------------------------------------------------------------
/templates/portfolio/images/portfolio-example-06.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/portfolio/images/portfolio-example-06.jpg
--------------------------------------------------------------------------------
/templates/text-only/images/android-desktop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/text-only/images/android-desktop.png
--------------------------------------------------------------------------------
/templates/text-only/images/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/text-only/images/favicon.png
--------------------------------------------------------------------------------
/templates/text-only/images/ios-desktop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/material-design-lite/60f441a22ed98ed2c03f6179adf460d888bf459f/templates/text-only/images/ios-desktop.png
--------------------------------------------------------------------------------
/test/memory/blank.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/test/memory/menu.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | var drool = require('drool');
3 | var heapDiffPrinter = require('./utils.js').heapDiffPrinter;
4 | var webdriver = drool.webdriver;
5 |
6 | module.exports = function(stamps, i, driver) {
7 | drool.flow({
8 | setup: function() {
9 | driver.get('file://' + path.join(__dirname, '../../dist/components/menu/demo.html'));
10 | },
11 | action: function() {
12 | driver.findElement(webdriver.By.css('#demo-menu-lower-left')).click();
13 | driver.sleep(1000);
14 | driver.findElement(webdriver.By.css('#demo-menu-lower-left')).click();
15 | },
16 | beforeAssert: function() {
17 | driver.sleep(1000);
18 | },
19 | assert: function(after, initial) {
20 | heapDiffPrinter(after, initial, i, 'menu');
21 | stamps.push([after.counts.jsEventListeners, initial.counts.jsEventListeners]);
22 | }
23 | }, driver);
24 | };
25 |
--------------------------------------------------------------------------------
/test/memory/snackbar.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | var drool = require('drool');
3 | var heapDiffPrinter = require('./utils.js').heapDiffPrinter;
4 |
5 | module.exports = function(stamps, i, driver) {
6 | drool.flow({
7 | setup: function() {
8 | driver.get('file://' + path.join(__dirname, '../../dist/components/snackbar/demo.html'));
9 | },
10 | action: function() {
11 | driver.executeScript('document.querySelector("#demo-snackbar-example").MaterialSnackbar.showSnackbar({message: "🐐", timeout: 300})');
12 | driver.sleep(400);
13 | },
14 | beforeAssert: function() {
15 | driver.sleep(400);
16 | },
17 | assert: function(after, initial) {
18 | heapDiffPrinter(after, initial, i, 'snackbar');
19 | stamps.push([after.counts.jsEventListeners, initial.counts.jsEventListeners]);
20 | }
21 | }, driver);
22 | }
23 |
--------------------------------------------------------------------------------
/test/memory/test.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var drool = require('drool');
4 | var assert = require('assert');
5 | var webdriver = drool.webdriver;
6 | var controlFlow = webdriver.promise.controlFlow();
7 | var measureSnackbar = require('./snackbar');
8 | var measureMenu = require('./menu');
9 | var measureUpgradeDowngrade = require('./upgrade-downgrade');
10 | var driver = drool.start({chromeOptions: 'no-sandbox'});
11 | var snackbarStamps = [];
12 | var menuStamps = [];
13 |
14 | // commented out tests require special DOM to bootstrap
15 | ['MaterialButton',
16 | 'MaterialSpinner',
17 | 'MaterialTooltip',
18 | // 'MaterialCheckbox',
19 | // 'MaterialIconToggle',
20 | 'MaterialDataTable',
21 | // 'MaterialIconToggle',
22 | // 'MaterialLayout',
23 | // 'MaterialMenu',
24 | 'MaterialProgress',
25 | // 'MaterialRadio',
26 | 'MaterialRipple',
27 | // 'MaterialSlider',
28 | // 'MaterialSnackbar',
29 | // 'MaterialSwitch',
30 | 'MaterialTabs',
31 | // 'MaterialTextfield',
32 | ].forEach(function(v) {
33 | measureUpgradeDowngrade([], 0, driver, v);
34 | });
35 |
36 | for (var i = 0; i < 3; ++i) {
37 | measureSnackbar(snackbarStamps, i, driver);
38 | }
39 |
40 | for (var i = 0; i < 3; ++i) {
41 | measureMenu(menuStamps, i, driver);
42 | }
43 |
44 | controlFlow.execute(function() {
45 | snackbarStamps.some(function(stamp) {
46 | assert.equal(true, stamp[0] <= stamp[1]);
47 | return true;
48 | });
49 |
50 | menuStamps.some(function(stamp) {
51 | assert.equal(true, stamp[0] <= stamp[1]);
52 | return true;
53 | });
54 | });
55 |
56 | driver.quit();
57 |
--------------------------------------------------------------------------------
/test/memory/upgrade-downgrade.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | var drool = require('drool');
3 | var heapDiffPrinter = require('./utils.js').heapDiffPrinter;
4 | var webdriver = drool.webdriver;
5 |
6 | module.exports = function(stamps, i, driver, component) {
7 | drool.flow({
8 | setup: function() {
9 | driver.get('file://' + path.join(__dirname, 'blank.html'));
10 | },
11 | action: function() {
12 | driver.executeScript("(function() { var e = document.createElement('div');" +
13 | "componentHandler.upgradeElement(e, '"+ component + "');" +
14 | "componentHandler.downgradeElements(e);})()");
15 | },
16 | assert: function(after, initial) {
17 | heapDiffPrinter(after, initial, i, component);
18 | }
19 | }, driver);
20 | };
21 |
--------------------------------------------------------------------------------
/test/memory/utils.js:
--------------------------------------------------------------------------------
1 | var humanize = require('humanize');
2 |
3 | module.exports = {
4 | heapDiffPrinter: function(after, initial, i, title) {
5 | console.log('**' + title + '** .. run: ' + (i + 1) + '\n');
6 | console.log('node delta | heap delta | event listener');
7 | console.log('--- | --- | --- |');
8 | console.log((after.counts.nodes - initial.counts.nodes) + '|' +
9 | humanize.filesize(after.counts.jsHeapSizeUsed - initial.counts.jsHeapSizeUsed) + '|' +
10 | (after.counts.jsEventListeners - initial.counts.jsEventListeners) + '\n');
11 | }
12 | };
13 |
--------------------------------------------------------------------------------
/test/unit/button.js:
--------------------------------------------------------------------------------
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 | describe('MaterialButton', function () {
18 |
19 | it('should be globally available', function () {
20 | expect(MaterialButton).to.be.a('function');
21 | });
22 |
23 | it('should ugprade successfully', function () {
24 | var el = document.createElement('button');
25 | componentHandler.upgradeElement(el, 'MaterialButton');
26 | expect($(el)).to.have.data('upgraded', ',MaterialButton');
27 | });
28 |
29 | it('should be upgrade to a raised button with ripples successfully', function () {
30 | var el = document.createElement('div');
31 | el.innerHTML = '';
32 | var btn = el.firstChild;
33 | componentHandler.upgradeElement(btn, 'MaterialButton');
34 | expect($(btn.childNodes[1])).to.have.class('mdl-button__ripple-container');
35 | expect($(btn.childNodes[1].firstChild)).to.have.class('mdl-ripple');
36 | });
37 |
38 | it('should be upgrade to a FAB with ripples successfully', function () {
39 | var el = document.createElement('div');
40 | el.innerHTML = '';
41 | var btn = el.firstChild;
42 | componentHandler.upgradeElement(btn, 'MaterialButton');
43 | expect($(btn.childNodes[1])).to.have.class('mdl-button__ripple-container');
44 | expect($(btn.childNodes[1].firstChild)).to.have.class('mdl-ripple');
45 | });
46 |
47 | });
48 |
--------------------------------------------------------------------------------
/test/unit/icon-toggle.js:
--------------------------------------------------------------------------------
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 | describe('MaterialIconToggle', function () {
18 |
19 | function createToggle() {
20 | var label = document.createElement('label');
21 | var input = document.createElement('input');
22 | var icon = document.createElement('i');
23 | label.className = 'mdl-icon-toggle mdl-js-icon-toggle';
24 | label.for = 'testIconToggle';
25 | input.id = label.for;
26 | input.type = 'checkbox';
27 | input.className = 'mdl-icon-toggle__input';
28 | label.appendChild(input);
29 | icon.className = 'mdl-icon-toggle__label material-icons';
30 | icon.text = 'format_bold';
31 | label.appendChild(icon);
32 | return label;
33 | };
34 |
35 | it('should be globally available', function () {
36 | expect(MaterialIconToggle).to.be.a('function');
37 | });
38 |
39 | it('should upgrade successfully', function () {
40 | var el = createToggle();
41 | componentHandler.upgradeElement(el, 'MaterialIconToggle');
42 | expect($(el)).to.have.data('upgraded', ',MaterialIconToggle');
43 | });
44 |
45 | });
46 |
--------------------------------------------------------------------------------
/test/unit/progress.js:
--------------------------------------------------------------------------------
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 | describe('MaterialProgress', function () {
18 |
19 | it('should be globally available', function () {
20 | expect(MaterialProgress).to.be.a('function');
21 | });
22 |
23 | it('should upgrade successfully', function () {
24 | var el = document.createElement('div');
25 | componentHandler.upgradeElement(el, 'MaterialProgress');
26 | expect($(el)).to.have.data('upgraded', ',MaterialProgress');
27 | });
28 |
29 | it('should be a widget', function () {
30 | var el = document.createElement('div');
31 | componentHandler.upgradeElement(el, 'MaterialProgress');
32 | expect(el.MaterialProgress).to.be.a('object');
33 | });
34 |
35 | it('should have public methods available', function () {
36 | var el = document.createElement('div');
37 | componentHandler.upgradeElement(el, 'MaterialProgress');
38 | methods = [
39 | 'setBuffer',
40 | 'setProgress'
41 | ];
42 | methods.forEach(function(item) {
43 | expect(el.MaterialProgress[item]).to.be.a('function');
44 | });
45 | });
46 |
47 | });
48 |
--------------------------------------------------------------------------------
/test/unit/ripple.js:
--------------------------------------------------------------------------------
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 | describe('MaterialRipple', function () {
18 |
19 | it('should be globally available', function () {
20 | expect(MaterialRipple).to.be.a('function');
21 | });
22 |
23 | });
24 |
--------------------------------------------------------------------------------
/test/unit/slider.js:
--------------------------------------------------------------------------------
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 | describe('MaterialSlider', function () {
18 |
19 | it('should be globally available', function () {
20 | expect(MaterialSlider).to.be.a('function');
21 | });
22 |
23 | it('should upgrade successfully', function () {
24 | var el = document.createElement('input');
25 | el.type = 'range';
26 |
27 | var parent = document.createElement('div');
28 | parent.appendChild(el);
29 |
30 | componentHandler.upgradeElement(el, 'MaterialSlider');
31 | expect($(el)).to.have.data('upgraded', ',MaterialSlider');
32 | });
33 |
34 | });
35 |
--------------------------------------------------------------------------------
/test/unit/tooltip.js:
--------------------------------------------------------------------------------
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 | describe('MaterialTooltip', function () {
18 |
19 | it('should be globally available', function () {
20 | expect(MaterialTooltip).to.be.a('function');
21 | });
22 |
23 | it('should upgrade successfully', function () {
24 | var parent = document.createElement('div');
25 | parent.innerHTML = '';
26 | document.body.appendChild(parent);
27 |
28 | var el = parent.querySelector('#tooltip');
29 | componentHandler.upgradeElement(el, 'MaterialTooltip');
30 | expect($(el)).to.have.data('upgraded', ',MaterialTooltip');
31 | });
32 |
33 | });
34 |
--------------------------------------------------------------------------------
/test/visual/style.css:
--------------------------------------------------------------------------------
1 | .demo-container {
2 | width: 100%;
3 | float: left;
4 | margin: 0 40px 40px 0;
5 | border: 1px solid #888888;
6 | position: relative;
7 | height: 500px;
8 | }
9 |
10 | iframe {
11 | width: auto;
12 | }
13 |
14 | .mdl-layout__content {
15 | padding: 10px;
16 | }
17 |
--------------------------------------------------------------------------------
/test/visual/welcome.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Menu
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
Material Design Lite is a light-weight implementation of Material Design targeted at static content-sites. Select a component on the left to preview it.
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/utils/uniffe.js:
--------------------------------------------------------------------------------
1 | /**
2 | *
3 | * Material Design Lite
4 | * Copyright 2015 Google Inc. All rights reserved.
5 | *
6 | * Licensed under the Apache License, Version 2.0 (the "License");
7 | * you may not use this file except in compliance with the License.
8 | * You may obtain a copy of the License at
9 | *
10 | * https://www.apache.org/licenses/LICENSE-2.0
11 | *
12 | * Unless required by applicable law or agreed to in writing, software
13 | * distributed under the License is distributed on an "AS IS" BASIS,
14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15 | * See the License for the specific language governing permissions and
16 | * limitations under the License
17 | *
18 | */
19 | 'use strict';
20 |
21 | var through = require('through2');
22 | var escodegen = require('escodegen');
23 | var acorn = require('acorn');
24 |
25 | function uniffe(contents) {
26 | var comments = [];
27 | var tokens = [];
28 |
29 | var ast = acorn.parse(contents, {
30 | ranges: true,
31 | onComment: comments,
32 | onToken: tokens
33 | });
34 |
35 | escodegen.attachComments(ast, comments, tokens);
36 |
37 | if (ast.body[0].expression === undefined ||
38 | ast.body[0].expression.callee === undefined) {
39 | return contents;
40 | }
41 |
42 | var rootProgram = ast.body[0].expression.callee.body;
43 |
44 | rootProgram.type = 'Program';
45 | // drop use strict
46 | rootProgram.body = rootProgram.body.slice(1);
47 | // attach all leading comments from outside iffe
48 | rootProgram.leadingComments = ast.body[0].leadingComments;
49 |
50 | return escodegen.generate(rootProgram, {comment: true});
51 | }
52 |
53 | module.exports = function() {
54 | return through.obj(function(file, enc, cb) {
55 | if (file.isBuffer()) {
56 | file.contents = new Buffer(uniffe(file.contents.toString(enc)), enc);
57 | }
58 |
59 | cb(null, file);
60 | });
61 | };
62 |
--------------------------------------------------------------------------------
9 | 
8 |
26 | 
4 | Deletable Contact Chip
5 | cancel
6 |
--------------------------------------------------------------------------------
/src/chip/snippets/deletable.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Deletable Chip
4 |
5 |
--------------------------------------------------------------------------------
/src/data-table/snippets/data-table.html:
--------------------------------------------------------------------------------
1 |