26 |
--------------------------------------------------------------------------------
/_posts/2016-01-01-all-posts-components.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: "All Posts Components"
4 | date: 2016-01-01 18:54:28 +07:00
5 | author: sugeng tigefa
6 | categories: jekmdl posts
7 | ---
8 |
9 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
10 | Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
11 | Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
12 | Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.
--------------------------------------------------------------------------------
/_sass/menu/snippets/lower-left-demo.html:
--------------------------------------------------------------------------------
1 |
19 |
20 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/_sass/_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 |
--------------------------------------------------------------------------------
/_sass/template.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 | /* Material Design Lite */
18 |
19 | $styleguide-generate-template: true;
20 |
21 | @import "styleguide";
22 |
--------------------------------------------------------------------------------
/_sass/snackbar/snippets/toast.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
19 |
--------------------------------------------------------------------------------
/_sass/material-design-lite-grid.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 | /* Material Design Lite Grid*/
18 |
19 | @import "variables";
20 | @import "mixins";
21 | @import "grid/grid";
--------------------------------------------------------------------------------
/_sass/data-table/snippets/data-table.html:
--------------------------------------------------------------------------------
1 |
34 |
--------------------------------------------------------------------------------
/_includes/head.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | {% if page.title %}{{ page.title }} | {{ site.title }}{% else %}{{ site.title }}{% endif %}
7 |
8 |
9 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/_sass/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 |
--------------------------------------------------------------------------------
/_sass/demos.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 {
18 | width: 100%;
19 | height: auto;
20 |
21 | margin: 0;
22 | padding: 0;
23 |
24 | padding: 24px;
25 | box-sizing: border-box;
26 | }
27 |
28 | .demo-preview-block {
29 | padding: 20px;
30 | padding-bottom: 0;
31 | margin-bottom: 0;
32 | box-sizing: border-box;
33 | width: 100%;
34 | }
35 |
36 | .demo-code {
37 | width: 100%;
38 | box-sizing: border-box;
39 | }
40 |
--------------------------------------------------------------------------------
/_sass/snackbar/snippets/snackbar.html:
--------------------------------------------------------------------------------
1 |
2 |
35 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 sugeng tigefa
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/_sass/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 |
--------------------------------------------------------------------------------
/_sass/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 |
--------------------------------------------------------------------------------
/_sass/list/snippets/action.html:
--------------------------------------------------------------------------------
1 |
2 |
7 |
8 |
9 |
10 |
11 | person
12 | Bryan Cranston
13 |
14 | star
15 |
16 |
17 |
18 | person
19 | Aaron Paul
20 |
21 | star
22 |
23 |
24 |
25 | person
26 | Bob Odenkirk
27 |
28 |
29 | star
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/_sass/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 |
--------------------------------------------------------------------------------
/_sass/layout/snippets/fixed-tabs.html:
--------------------------------------------------------------------------------
1 |
2 |
48 |
--------------------------------------------------------------------------------
/_posts/2016-01-01-welcome-to-jekyll.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: "Welcome to Jekyll!"
4 | date: 2016-01-01 06:54:43 +0700
5 | author: sugeng tigefa
6 | categories: jekyll update
7 | ---
8 | You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
9 |
10 | To add new posts, simply add a file in the `_posts` directory that follows the convention `YYYY-MM-DD-name-of-post.ext` and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.
11 |
12 | Jekyll also offers powerful support for code snippets:
13 |
14 | {% highlight ruby %}
15 | def print_hi(name)
16 | puts "Hi, #{name}"
17 | end
18 | print_hi('Tom')
19 | #=> prints 'Hi, Tom' to STDOUT.
20 | {% endhighlight %}
21 |
22 | Check out the [Jekyll docs][jekyll-docs] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll’s GitHub repo][jekyll-gh]. If you have questions, you can ask them on [Jekyll Talk][jekyll-talk].
23 |
24 | [jekyll-docs]: http://jekyllrb.com/docs/home
25 | [jekyll-gh]: https://github.com/jekyll/jekyll
26 | [jekyll-talk]: https://talk.jekyllrb.com/
27 |
--------------------------------------------------------------------------------
/_sass/grid/snippets/grid.html:
--------------------------------------------------------------------------------
1 |
31 |
--------------------------------------------------------------------------------
/feed.xml:
--------------------------------------------------------------------------------
1 | ---
2 | layout: null
3 | ---
4 |
5 |
6 |
7 | {{ site.title | xml_escape }}
8 | {{ site.description | xml_escape }}
9 | {{ site.url }}{{ site.baseurl }}/
10 |
11 | {{ site.time | date_to_rfc822 }}
12 | {{ site.time | date_to_rfc822 }}
13 | Jekyll v{{ jekyll.version }}
14 | {% for post in site.posts limit:10 %}
15 |
16 | {{ post.title | xml_escape }}
17 | {{ post.content | xml_escape }}
18 | {{ post.date | date_to_rfc822 }}
19 | {{ post.url | prepend: site.baseurl | prepend: site.url }}
20 | {{ post.url | prepend: site.baseurl | prepend: site.url }}
21 | {% for tag in post.tags %}
22 | {{ tag | xml_escape }}
23 | {% endfor %}
24 | {% for cat in post.categories %}
25 | {{ cat | xml_escape }}
26 | {% endfor %}
27 |
28 | {% endfor %}
29 |
30 |
31 |
--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | # Welcome to Jekyll!
2 | #
3 | # This config file is meant for settings that affect your whole blog, values
4 | # which you are expected to set up once and rarely need to edit after that.
5 | # For technical reasons, this file is *NOT* reloaded automatically when you use
6 | # 'jekyll serve'. If you change this file, please restart the server process.
7 |
8 | # Site settings
9 | title: jekmdl
10 | email: tigefa@gmail.com
11 | description: > # this means to ignore newlines until "baseurl:"
12 | Write an awesome description for your new site here. You can edit this
13 | line in _config.yml. It will appear in your document head meta (for
14 | Google search results) and in your feed.xml site description.
15 | baseurl: "/jekmdl" # the subpath of your site, e.g. /blog
16 | url: "http://yourdomain.com" # the base hostname & protocol for your site
17 | twitter_username: jekyllrb
18 | github_username: jekyll
19 |
20 | # Google cse -> read the README.md for learn more.
21 | gcse: 006270711061491111331:vsivtajjjh0
22 |
23 | # Conversion
24 | markdown: kramdown
25 |
26 | # Outputting
27 | relative_permalinks: false
28 | permalink: /articles/:title.html
29 | timezone: Asia/Jakarta
30 |
31 | # Markdown Processors
32 | kramdown:
33 | input: GFM
34 |
35 | # Exclude file
36 | exclude:
37 | - Gemfile
38 | - Gemfile.lock
39 | - README.md
40 | - LICENSE
41 | - bower_components
42 | - node_modules
43 | - vendor
44 |
--------------------------------------------------------------------------------
/_sass/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 |
--------------------------------------------------------------------------------
/_sass/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 |
--------------------------------------------------------------------------------
/_sass/layout/snippets/fixed-header-drawer.html:
--------------------------------------------------------------------------------
1 |
3 |
5 |
6 |
7 |
8 |
10 |
14 |
15 |
17 |
18 |
19 |
20 |
21 |
22 | Title
23 |
29 |
30 |
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/_sass/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 |
--------------------------------------------------------------------------------
/_sass/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 |
--------------------------------------------------------------------------------
/_sass/layout/snippets/transparent.html:
--------------------------------------------------------------------------------
1 |
2 |
13 |
14 |
42 |
--------------------------------------------------------------------------------
/_sass/tooltip/_tooltip.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-tooltip {
20 | transform: scale(0);
21 | transform-origin: top center;
22 | z-index: 999;
23 | background: $tooltip-background-color;
24 | border-radius: 2px;
25 | color: $tooltip-text-color;
26 | display: inline-block;
27 | font-size: $tooltip-font-size;
28 | font-weight: 500;
29 | line-height: 14px;
30 | max-width: 170px;
31 | position: fixed;
32 | top: -500px;
33 | left: -500px;
34 | padding: 8px;
35 | text-align: center;
36 | }
37 | .mdl-tooltip.is-active {
38 | animation: pulse 200ms $animation-curve-linear-out-slow-in forwards;
39 | }
40 |
41 | .mdl-tooltip--large {
42 | line-height: 14px;
43 | font-size: $tooltip-font-size-large;
44 | padding: 16px;
45 | }
46 |
47 | @keyframes pulse {
48 | 0% {
49 | transform: scale(0);
50 | opacity: 0;
51 | }
52 | 50% {
53 | // Fixes a weird bug with the interaction between Safari and the result of
54 | // the SASS compilation for the animation.
55 | // Essentially, we need to make sure that "50%" and "100%" don't get merged
56 | // into a single "50%, 100%" entry, so we need to avoid them having any
57 | // matching properties.
58 | transform: scale(0.99);
59 | }
60 | 100% {
61 | transform: scale(1);
62 | opacity: 1;
63 | visibility: visible;
64 | }
65 | }
66 |
--------------------------------------------------------------------------------
/_sass/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 |
--------------------------------------------------------------------------------
/css/main.scss:
--------------------------------------------------------------------------------
1 | ---
2 | # Only the main Sass file needs front matter (the dashes are enough)
3 | ---
4 | @charset "utf-8";
5 | @import "material-design-lite";
6 | @import "syntax-highlighting";
7 |
8 | // jekmdl variables
9 | html, body {
10 | font-family: 'Roboto', 'Helvetica', sans-serif;
11 | margin: 0;
12 | padding: 0;
13 | }
14 | .jekmdl-ribbon {
15 | width: 100%;
16 | height: 40vh;
17 | background-color: #3F51B5;
18 | -webkit-flex-shrink: 0;
19 | -ms-flex-negative: 0;
20 | flex-shrink: 0;
21 | }
22 |
23 | .jekmdl-main {
24 | margin-top: -35vh;
25 | -webkit-flex-shrink: 0;
26 | -ms-flex-negative: 0;
27 | flex-shrink: 0;
28 | }
29 |
30 | .jekmdl-header .mdl-layout__header-row {
31 | padding-left: 40px;
32 | }
33 |
34 | .jekmdl-container {
35 | max-width: 1600px;
36 | width: calc(100% - 16px);
37 | margin: 0 auto;
38 | }
39 |
40 | .jekmdl-post-content {
41 | padding: 10px 10px;
42 | }
43 |
44 | .jekmdl-content {
45 | border-radius: 2px;
46 | padding: 80px 56px;
47 | margin-bottom: 80px;
48 | }
49 |
50 | .jekmdl-layout.is-small-screen .jekmdl-content {
51 | padding: 40px 28px;
52 | }
53 |
54 | .jekmdl-content h3 {
55 | margin-top: 48px;
56 | }
57 |
58 | .jekmdl-footer {
59 | padding-left: 40px;
60 | }
61 |
62 | .jekmdl-footer .mdl-mini-footer--link-list a {
63 | font-size: 13px;
64 | }
65 | .jekmdl-post-list h2 {
66 | font-size: 18px;
67 | }
68 | .jekmdl-post-list {
69 | margin-left: 0;
70 | list-style: none;
71 |
72 | > li {
73 | margin-bottom: 10px;
74 | }
75 | }
76 |
77 | /**
78 | * Code formatting
79 | */
80 | pre,
81 | code {
82 | font-size: 13px;
83 | border: 1px solid grey;
84 | border-radius: 3px;
85 | background-color: #eef;
86 | }
87 |
88 | code {
89 | padding: 1px 5px;
90 | }
91 |
92 | pre {
93 | padding: 8px 12px;
94 | overflow-x: scroll;
95 |
96 | > code {
97 | border: 0;
98 | padding-right: 0;
99 | padding-left: 0;
100 | }
101 | }
102 |
--------------------------------------------------------------------------------
/_sass/third_party/rAF.js:
--------------------------------------------------------------------------------
1 | // Source: https://github.com/darius/requestAnimationFrame/blob/master/requestAnimationFrame.js
2 | // Adapted from https://gist.github.com/paulirish/1579671 which derived from
3 | // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
4 | // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
5 |
6 | // requestAnimationFrame polyfill by Erik Möller.
7 | // Fixes from Paul Irish, Tino Zijdel, Andrew Mao, Klemen Slavič, Darius Bacon
8 |
9 | // MIT license
10 |
11 | (function() {
12 | 'use strict';
13 |
14 | if (!Date.now) {
15 | /**
16 | * Date.now polyfill.
17 | * @return {number} the current Date
18 | */
19 | Date.now = function() { return new Date().getTime(); };
20 | Date['now'] = Date.now;
21 | }
22 |
23 | var vendors = ['webkit', 'moz'];
24 | for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
25 | var vp = vendors[i];
26 | window.requestAnimationFrame = window[vp + 'RequestAnimationFrame'];
27 | window.cancelAnimationFrame = (window[vp + 'CancelAnimationFrame'] ||
28 | window[vp + 'CancelRequestAnimationFrame']);
29 | window['requestAnimationFrame'] = window.requestAnimationFrame;
30 | window['cancelAnimationFrame'] = window.cancelAnimationFrame;
31 | }
32 |
33 | if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) || !window.requestAnimationFrame || !window.cancelAnimationFrame) {
34 | var lastTime = 0;
35 | /**
36 | * requestAnimationFrame polyfill.
37 | * @param {!Function} callback the callback function.
38 | */
39 | window.requestAnimationFrame = function(callback) {
40 | var now = Date.now();
41 | var nextTime = Math.max(lastTime + 16, now);
42 | return setTimeout(function() { callback(lastTime = nextTime); },
43 | nextTime - now);
44 | };
45 | window.cancelAnimationFrame = clearTimeout;
46 | window['requestAnimationFrame'] = window.requestAnimationFrame;
47 | window['cancelAnimationFrame'] = window.cancelAnimationFrame;
48 | }
49 |
50 | })();
51 |
--------------------------------------------------------------------------------
/_sass/list/snippets/three-line.html:
--------------------------------------------------------------------------------
1 |
2 |
7 |
8 |
9 |
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 |
48 |
49 |
--------------------------------------------------------------------------------
/_sass/footer/_mini_footer.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-mini-footer {
20 | display: flex;
21 | flex-flow: row wrap;
22 | justify-content: space-between;
23 |
24 | padding: ($padding * 2) $padding;
25 |
26 | color: $footer-color;
27 | background-color: $footer-bg-color;
28 |
29 | &:after {
30 | content: '';
31 | display: block;
32 | }
33 |
34 | & .mdl-logo {
35 | line-height: $footer-btn-size;
36 | }
37 | }
38 |
39 | .mdl-mini-footer--link-list,
40 | .mdl-mini-footer__link-list {
41 | display: flex;
42 | flex-flow: row nowrap;
43 |
44 | list-style: none;
45 |
46 | margin: 0;
47 | padding: 0;
48 |
49 | & li {
50 | margin-bottom: 0;
51 | margin-right: $padding;
52 |
53 | @media screen and (min-width: 760px) {
54 | line-height: $footer-btn-size;
55 | }
56 | }
57 |
58 | & a {
59 | color: inherit;
60 | text-decoration: none;
61 | white-space: nowrap;
62 | }
63 | }
64 |
65 | .mdl-mini-footer--left-section,
66 | .mdl-mini-footer__left-section {
67 | display: inline-block;
68 | order: 0;
69 | }
70 |
71 | .mdl-mini-footer--right-section,
72 | .mdl-mini-footer__right-section {
73 | display: inline-block;
74 | order: 1;
75 | }
76 |
77 | .mdl-mini-footer--social-btn,
78 | .mdl-mini-footer__social-btn {
79 | width: $footer-btn-size;
80 | height: $footer-btn-size;
81 |
82 | padding: 0;
83 | margin: 0;
84 |
85 | background-color: $footer-button-fill-color;
86 |
87 | border: none;
88 | }
89 |
--------------------------------------------------------------------------------
/_sass/layout/snippets/waterfall-header.html:
--------------------------------------------------------------------------------
1 |
2 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | Title
14 |
15 |
17 |
21 |
22 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
37 |
38 |
39 |
40 | Title
41 |
47 |
48 |
49 |
50 |
51 |
52 |
--------------------------------------------------------------------------------
/_sass/footer/snippets/mega-footer.html:
--------------------------------------------------------------------------------
1 |
58 |
--------------------------------------------------------------------------------
/_sass/styleguide.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 "material-design-lite";
18 |
19 | $padding: 24px;
20 |
21 | body {
22 | margin: 0px;
23 | }
24 |
25 | .styleguide-demo h1 {
26 | margin: ($padding * 2) $padding 0 $padding;
27 | }
28 |
29 | .styleguide-demo h1:after {
30 | content: '';
31 |
32 | display: block;
33 | width: 100%;
34 |
35 | border-bottom: 1px solid rgba(0,0,0,0.5);
36 | margin-top: $padding;
37 | }
38 |
39 | .styleguide-demo {
40 | opacity: 0;
41 |
42 | transition: opacity 0.6s ease;
43 | }
44 |
45 | .styleguide-masthead {
46 | height: 256px;
47 | background: unquote("rgb(#{nth($palette-grey, 10)})");
48 | padding: 115px 16px 0;
49 | }
50 |
51 | .styleguide-container {
52 | position: relative;
53 | max-width: 960px;
54 | width: 100%;
55 | }
56 |
57 | .styleguide-title {
58 | color: #fff;
59 | bottom: auto;
60 | position: relative;
61 | font-size: 56px;
62 | font-weight: 300;
63 | line-height: 1;
64 | letter-spacing: -0.02em;
65 |
66 | &:after {
67 | border-bottom: 0px;
68 | }
69 |
70 | span {
71 | font-weight: 300;
72 | }
73 | }
74 |
75 | .mdl-styleguide .mdl-layout__drawer .mdl-navigation__link {
76 | padding: 10px 24px;
77 | }
78 |
79 | .demosLoaded .styleguide-demo {
80 | opacity: 1;
81 | }
82 |
83 | iframe {
84 | display: block;
85 |
86 | width: 100%;
87 |
88 | border: none;
89 | }
90 |
91 | iframe.heightSet {
92 | overflow: hidden;
93 | }
94 |
95 | .demo-wrapper {
96 | margin: $padding;
97 |
98 | iframe {
99 | border: 1px solid rgba(0,0,0,0.5);
100 | }
101 | }
102 |
--------------------------------------------------------------------------------
/_sass/progress/README.md:
--------------------------------------------------------------------------------
1 | ## Introduction
2 |
3 | The Material Design Lite (MDL) **progress** component is a visual indicator of background activity in a web page or application. A progress indicator consists of a (typically) horizontal bar containing some animation that conveys a sense of motion. While some progress devices indicate an approximate or specific percentage of completion, the MDL progress component simply communicates the fact that an activity is ongoing and is not yet complete.
4 |
5 | Progress indicators are an established but non-standardized feature in user interfaces, and provide users with a visual clue to an application's status. Their design and use is therefore an important factor in the overall user experience. See the progress component's [Material Design specifications page](http://www.google.com/design/spec/components/progress-activity.html) for details.
6 |
7 | ### To include an MDL **progress** component:
8 |
9 | 1. Code a `
` element. Include any desired attributes and values, such as an id or width — typically done using external CSS rather than the inline `style` attribute as shown here.
10 | ```html
11 |
12 | ```
13 | 2. Add one or more MDL classes, separated by spaces, to the div using the `class` attribute.
14 | ```html
15 |
16 | ```
17 |
18 | The progress component is ready for use.
19 |
20 | #### Examples
21 |
22 | A static (non-animated) progress indicator.
23 | ```html
24 |
25 | ```
26 |
27 | An active (animated) progress indicator.
28 | ```html
29 |
31 | ```
32 |
33 | ## Configuration options
34 |
35 | The MDL CSS classes apply various predefined visual and behavioral enhancements to the progress indicator. The table below lists the available classes and their effects.
36 |
37 | | MDL class | Effect | Remarks |
38 | |-----------|--------|---------|
39 | | `mdl-js-progress` | Assigns basic MDL behavior to progress indicator | Required |
40 | | `mdl-progress--indeterminate` | Applies animation effect | Optional |
41 |
42 | > Note: `mdl-progress__intermediate` does exist within the codebase. It is deprecated since the name is not in BEM alignment. It will be removed in 2.0.
43 |
--------------------------------------------------------------------------------
/_sass/chip/_chip.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-chip {
21 | height: $chip-height;
22 | font-family: $preferred_font;
23 | line-height: $chip-height;
24 | padding: 0 12px;
25 | border: 0;
26 | border-radius: $chip-height / 2;
27 | background-color: $chip-bg-color;
28 | display: inline-block;
29 | color: $text-color-primary;
30 | margin: 2px 0;
31 | font-size: 0;
32 | white-space: nowrap;
33 |
34 | &__text {
35 | font-size: $chip-font-size;
36 | vertical-align: middle;
37 | display: inline-block;
38 | }
39 |
40 | &__action {
41 | height: 24px;
42 | width: 24px;
43 | background: transparent;
44 | opacity: 0.54;
45 | display: inline-block;
46 | cursor: pointer;
47 | text-align: center;
48 | vertical-align: middle;
49 | padding: 0;
50 | margin: 0 0 0 4px;
51 | font-size: $chip-font-size;
52 | text-decoration: none;
53 | color: $text-color-primary;
54 | border: none;
55 | outline: none;
56 | overflow: hidden;
57 | }
58 |
59 | &__contact {
60 | height: $chip-height;
61 | width: $chip-height;
62 | border-radius: $chip-height / 2;
63 | display: inline-block;
64 | vertical-align: middle;
65 | margin-right: 8px;
66 | overflow: hidden;
67 | text-align: center;
68 | font-size: 18px;
69 | line-height: 32px;
70 | }
71 |
72 | &:focus {
73 | outline: 0;
74 | @include shadow-2dp();
75 | }
76 |
77 | &:active {
78 | background-color: $chip-bg-active-color;
79 | }
80 |
81 | &--deletable {
82 | padding-right: 4px;
83 | }
84 |
85 | &--contact {
86 | padding-left: 0;
87 | }
88 | }
--------------------------------------------------------------------------------
/_sass/animation/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-animation {
18 | height: 200px;
19 | width: 300px;
20 | padding: 0;
21 | background: none;
22 | }
23 |
24 | .demo-animation__container {
25 | position: relative;
26 | overflow: hidden;
27 | margin: 0;
28 | padding: 0;
29 | width: 100%;
30 | height: 100%;
31 | text-align: center;
32 | background-color: #ddd;
33 | }
34 |
35 | .demo-animation__container-foreground {
36 | width: 100%;
37 | height: 100%;
38 | position: absolute;
39 | left: 0;
40 | top: 0;
41 | z-index: 100;
42 | }
43 |
44 | .demo-animation__container-background {
45 | line-height: 200px;
46 | z-index: -100;
47 | }
48 |
49 | /* Outside the view, on the left.
50 | We leave the view when moving to this state, so we use fast-out-linear-in. */
51 | .demo-animation--position-0 {
52 | left: -102px;
53 | }
54 |
55 | /* Left side.
56 | We enter the view when moving to this state, so we use linear-out-slow-in. */
57 | .demo-animation--position-1 {
58 | left: 20px;
59 | }
60 |
61 | /* Right side.
62 | We're always visible when moving to this state, so we use default. */
63 | .demo-animation--position-2 {
64 | left: 180px;
65 | }
66 |
67 | /* Outside the view, on the right.
68 | We leave the view when moving to this state, so we use fast-out-linear-in. */
69 | .demo-animation--position-3 {
70 | left: 302px;
71 | }
72 |
73 | /* Right side.
74 | We enter the view when moving to this state, so we use linear-out-slow-in. */
75 | .demo-animation--position-4 {
76 | left: 180px;
77 | }
78 |
79 | /* Left side.
80 | We're always visible when moving to this state, so we use default. */
81 | .demo-animation--position-5 {
82 | left: 20px;
83 | }
84 |
85 | .demo-animation__movable {
86 | background-color: red;
87 | border-radius: 2px;
88 | display: block;
89 | height: 100px;
90 | width: 100px;
91 | position: absolute;
92 | top: 50px;
93 | transition-property: left;
94 | transition-duration: 0.2s;
95 | }
96 |
--------------------------------------------------------------------------------
/_sass/snackbar/_snackbar.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-snackbar {
21 | position: fixed;
22 | bottom: 0;
23 | left: 50%;
24 | cursor: default;
25 | background-color: $snackbar-background-color;
26 | z-index: 3;
27 | display: block;
28 | display: flex;
29 | justify-content: space-between;
30 | font-family: $preferred_font;
31 | will-change: transform;
32 | transform: translate(0, 80px);
33 | transition: transform 0.25s $animation-curve-fast-out-linear-in;
34 | pointer-events: none;
35 | @media(max-width: $snackbar-tablet-breakpoint - 1) {
36 | width: 100%;
37 | left: 0;
38 | min-height: 48px;
39 | max-height: 80px;
40 | }
41 | @media(min-width: $snackbar-tablet-breakpoint) {
42 | min-width: 288px;
43 | max-width: 568px;
44 | border-radius: 2px;
45 | transform: translate(-50%, 80px);
46 | }
47 | &--active {
48 | transform: translate(0, 0);
49 | pointer-events: auto;
50 | transition: transform 0.25s $animation-curve-linear-out-slow-in;
51 |
52 | @media(min-width: $snackbar-tablet-breakpoint) {
53 | transform: translate(-50%, 0);
54 | }
55 | }
56 |
57 | &__text {
58 | padding: 14px 12px 14px 24px;
59 | vertical-align: middle;
60 | color: white;
61 | float: left;
62 | }
63 |
64 | &__action {
65 | background: transparent;
66 | border: none;
67 | color: $snackbar-action-color;
68 | float: right;
69 | text-transform: uppercase;
70 | padding: 14px 24px 14px 12px;
71 | @include typo-button();
72 | overflow: hidden;
73 | outline: none;
74 | opacity: 0;
75 | pointer-events: none;
76 | cursor: pointer;
77 | text-decoration: none;
78 | text-align: center;
79 | align-self: center;
80 |
81 | &::-moz-focus-inner {
82 | border: 0;
83 | }
84 | &:not([aria-hidden]) {
85 | opacity: 1;
86 | pointer-events: auto;
87 | }
88 | }
89 | }
90 |
--------------------------------------------------------------------------------
/_sass/shadow/README.md:
--------------------------------------------------------------------------------
1 | ## Introduction
2 |
3 | The Material Design Lite (MDL) **shadow** is not a component in the same sense as an MDL card, menu, or textbox; it is a visual effect that can be assigned to a user interface element. The effect simulates a three-dimensional positioning of the element, as though it is slightly raised above the surface it rests upon — a positive *z-axis* value, in user interface terms. The shadow starts at the edges of the element and gradually fades outward, providing a realistic 3-D effect.
4 |
5 | Shadows are a convenient and intuitive means of distinguishing an element from its surroundings. A shadow can draw the user's eye to an object and emphasize the object's importance, uniqueness, or immediacy.
6 |
7 | Shadows are a well-established feature in user interfaces, and provide users with a visual clue to an object's intended use or value. Their design and use is an important factor in the overall user experience.
8 |
9 | ### To include an MDL **shadow** effect:
10 |
11 | 1. Code an element, such as a `
`, that is to receive the shadow effect; size and style it as desired, and add any required content.
12 | ```html
13 |
14 | Some content
15 |
16 | ```
17 | 2. Add an MDL shadow class to the element using the `class` attribute.
18 | ```html
19 |
20 | Some content
21 |
22 | ```
23 |
24 | The shadowed component is ready for use.
25 |
26 | #### Examples
27 |
28 | A div with a user-specified class and a small shadow.
29 |
30 | ```html
31 |
Small shadow
32 | ```
33 |
34 | A div with a user-specified class and a medium-large shadow.
35 |
36 | ```html
37 |
Medium-large shadow
38 | ```
39 |
40 | ## Configuration options
41 |
42 | The MDL CSS classes apply various predefined visual shadows to the element. The table below lists the available classes and their effects.
43 |
44 | | MDL class | Effect | Remarks |
45 | |-----------|--------|---------|
46 | | `mdl-shadow--2dp` | Assigns a small shadow to the object | Optional; if omitted, no shadow is present |
47 | | `mdl-shadow--3dp` | Assigns a medium-small shadow to the object | Optional; if omitted, no shadow is present |
48 | | `mdl-shadow--4dp` | Assigns a medium shadow to the object | Optional; if omitted, no shadow is present |
49 | | `mdl-shadow--6dp` | Assigns a medium-large shadow to the object | Optional; if omitted, no shadow is present |
50 | | `mdl-shadow--8dp` | Assigns a large shadow to the object | Optional; if omitted, no shadow is present |
51 | | `mdl-shadow--16dp` | Assigns an extra-large shadow to the object | Optional; if omitted, no shadow is present|
52 |
--------------------------------------------------------------------------------
/_sass/list/README.md:
--------------------------------------------------------------------------------
1 | ## Introduction
2 | Lists present multiple line items vertically as a single continuous element. Refer the [Material Design
3 | Spec](https://www.google.com/design/spec/components/lists.html) to know more about the content options.
4 |
5 | ### To include the MDL **list** component:
6 |
7 | ## Create a List with basic items.
8 |
9 | 1. Code a `
` element with the class `mdl-list`; this is the "outer" container, intended to hold all of the list's content.
10 | ```html
11 |
12 |
13 | ```
14 | 2. Code as many `
` elements as required with the class `mdl-list__item`; this is intended to hold all of the **item's** content.
15 | ```html
16 |
17 |
18 |
19 |
20 |
21 | ```
22 |
23 | 3. Add your content as the children of the `
`, with the appropriate content type modification class for example .
24 | ```html
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 | ```
37 |
38 | ## Configuration options
39 |
40 | The MDL CSS classes apply various predefined visual enhancements to the list. The table below lists the available classes and their effects.
41 |
42 | | MDL Class | Effect | Remark |
43 | | ------------- |:-------------:| -----:|
44 | | .mdl-list | Defines list as an MDL component| - |
45 | | .mdl-list__item | Defines the List's Items | required |
46 | | .mdl-list__item--two-line | Defines the List's Items as Two Line | Optional Two Line List Variant |
47 | | .mdl-list__item--three-line | Defines the List's Items as a Three Line | Optional Three Line List Variant |
48 | | .mdl-list__item-primary-content | Defines the primary content sub-division |-|
49 | | .mdl-list__item-avatar | Defines the avatar sub-division |-|
50 | | .mdl-list__item-icon | Defines the icon sub-division |-|
51 | | .mdl-list__item-secondary-content | Defines the secondary content sub-division | requires `.mdl-list__item--two-line` or `.mdl-list__item--three-line` |
52 | | .mdl-list__item-secondary-info | Defines the information sub-division |requires `.mdl-list__item--two-line` or `.mdl-list__item--three-line` |
53 | | .mdl-list__item-secondary-action | Defines the Action sub-division | requires `.mdl-list__item--two-line` or `.mdl-list__item--three-line` |
54 | | .mdl-list__item-text-body | Defines the Text Body sub-division | requires `.mdl-list__item--three-line` |
55 |
--------------------------------------------------------------------------------
/_sass/spinner/README.md:
--------------------------------------------------------------------------------
1 | ## Introduction
2 |
3 | The Material Design Lite (MDL) **spinner** component is an enhanced replacement for the classic "wait cursor" (which varies significantly among hardware and software versions) and indicates that there is an ongoing process, the results of which are not yet available. A spinner consists of an open circle that changes colors as it animates in a clockwise direction, and clearly communicates that a process has been started but not completed.
4 |
5 | A spinner performs no action itself, either by its display nor when the user clicks or touches it, and does not indicate a process's specific progress or degree of completion. The MDL spinner component provides various types of spinners, and allows you to add display effects.
6 |
7 | Spinners are a fairly new feature of most user interfaces, and provide users with a consistent visual cue about ongoing activity, regardless of hardware device, operating system, or browser environment. Their design and use is an important factor in the overall user experience.
8 |
9 | ### To include an MDL **spinner** component:
10 |
11 | 1. Code an element, such as a `
`, `
`, or ``, to contain the spinner; the element should have no content of its own.
12 | ```html
13 |
14 | ```
15 | 2. Add one or more MDL classes, separated by spaces, to the container using the `class` attribute.
16 | ```html
17 |
18 | ```
19 |
20 | The spinner component is ready for use.
21 |
22 | #### Examples
23 |
24 | A default spinner in a div.
25 |
26 | ```html
27 |
28 | ```
29 |
30 | A single-color spinner in a paragraph.
31 |
32 | ```html
33 |
34 | ```
35 |
36 | ## Configuration options
37 |
38 | The MDL CSS classes apply various predefined visual enhancements to the spinner. The table below lists the available classes and their effects.
39 |
40 | | MDL class | Effect | Remarks |
41 | |-----------|--------|---------|
42 | | `mdl-spinner` | Defines the container as an MDL spinner component | Required |
43 | | `mdl-js-spinner` | Assigns basic MDL behavior to spinner | Required |
44 | | `is-active` | Makes the spinner visible and animated | Optional |
45 | | `mdl-spinner--single-color` | Uses a single (primary palette) color instead of changing colors | Optional
46 |
47 | >**Note:** There is no specific *disabled* version of a spinner; the presence or absence of the `is-active` class determines whether the spinner is visible. For example, this spinner is inactive and invisible: ``
48 | >This attribute may be added or removed programmatically via scripting.
49 |
--------------------------------------------------------------------------------
/_sass/chip/README.md:
--------------------------------------------------------------------------------
1 | ## Introduction
2 |
3 | The Material Design Lite (MDL) **chip** component is a small, interactive element.
4 | Chips are commonly used for contacts, text, rules, icons, and photos.
5 |
6 | ## TO INCLUDE AN MDL CHIP COMPONENT:
7 |
8 | 1. Create a container element for the chip; typically `` and `
` are used, but any container element should work equally well. If you need interactivity, use a `
4 | Deletable Contact Chip
5 | cancel
6 |