google
/
material-design-lite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'mdl-1.0'

master
Sérgio Gomes 2015-10-15 14:51:01 +01:00
parent e91adf21c4 f33293ca71
commit 714fe21d7c
14 changed files with 83 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
docs/_assets/main.css
View File

@ -268,6 +268,11 @@ body:not(.about) .mdl-navigation__link.download > button {
font-size: 12px;
}
.docs-footer .docs-link-list li {
margin-left: 0.5em;
margin-right: 0.5em;
}
.about-panel {
box-sizing: border-box;
width: 100%;
@ -902,7 +907,7 @@ code[class*=language-], pre[class*=language-] {
position: relative;
}
.styles .content li:before,
.docs-readme li:before {
.docs-readme .content li:before {
position: absolute;
top: 2px;
left: -28px;

2
docs/_templates/layout.html vendored
View File

@ -126,7 +126,7 @@
<a href="https://plus.google.com/+googledesign" class="social-btn social-btn__gplus" role="button" title="Google+"></a>
</li>
</ul>
<ul>
<ul class="docs-link-list">
<li><a class="mdl-color-text--grey-600" href="https://developers.google.com/web/starter-kit/">Web Starter Kit</a></li>
<li><a class="mdl-color-text--grey-600" href="https://github.com/google/material-design-lite/issues">Help</a></li>
</ul>

2
docs/_templates/started.html vendored
View File

@ -229,7 +229,7 @@ gulp</code></pre>
<p>
Material Design Lite is built to provide a lightweight and basic set of Material Design components and templates for web sites.
The project does not intend to provide structures to create all possible UX needs, but to provide a low-friction Material Design implementation you can build on.
Even within Material Design itself, cards specifically, it is unfeasible to provide every combination in a seemless manner.
Even within Material Design itself, cards specifically, it is unfeasible to provide every combination in a seamless manner.
When you find something not provided, such as dropdowns in the drawer, you may need to code your own component.
</p>
<p>

2
src/button/_button.scss
View File

@ -267,7 +267,7 @@ input.mdl-button[type="submit"] {
&[disabled][disabled],
&.mdl-button--disabled.mdl-button--disabled {
color: $button-secondary-color-disabled;
cursor: auto;
cursor: default;
background-color: transparent;
}

36
src/footer/_mega_footer.scss
View File

@ -169,8 +169,8 @@
z-index: 1;
opacity: 0;
&~.mdl-mega-footer--heading:after,
&~.mdl-mega-footer__heading:after {
& + .mdl-mega-footer--heading:after,
& + .mdl-mega-footer__heading:after {
font-family: 'Material Icons';
content: '\E5CE'
}
@ -178,12 +178,18 @@
.mdl-mega-footer--heading-checkbox:checked,
.mdl-mega-footer__heading-checkbox:checked {
&~ul {
display:none;
// WebViews in iOS 9 break the "~" operator, and WebViews in OS X 10.10
// break consecutive "+" operators in some cases. Therefore, we need to use
// both here to cover all the bases.
& ~ .mdl-mega-footer--link-list,
& ~ .mdl-mega-footer__link-list,
& + .mdl-mega-footer--heading + .mdl-mega-footer--link-list,
& + .mdl-mega-footer__heading + .mdl-mega-footer__link-list {
display: none;
}
&~.mdl-mega-footer--heading:after,
&~.mdl-mega-footer__heading:after {
& + .mdl-mega-footer--heading:after,
& + .mdl-mega-footer__heading:after {
font-family: 'Material Icons';
content: '\E5CF'
}
@ -260,19 +266,25 @@
.mdl-mega-footer__heading-checkbox {
display: none;
&~.mdl-mega-footer--heading:after,
&~.mdl-mega-footer__heading:after {
& + .mdl-mega-footer--heading:after,
& + .mdl-mega-footer__heading:after {
content: '';
}
}
.mdl-mega-footer--heading-checkbox:checked,
.mdl-mega-footer__heading-checkbox:checked {
&~ul {
// WebViews in iOS 9 break the "~" operator, and WebViews in OS X 10.10
// break consecutive "+" operators in some cases. Therefore, we need to use
// both here to cover all the bases.
& ~ .mdl-mega-footer--link-list,
& ~ .mdl-mega-footer__link-list,
& + .mdl-mega-footer__heading + .mdl-mega-footer__link-list,
& + .mdl-mega-footer--heading + .mdl-mega-footer--link-list {
display: block;
}
&~.mdl-mega-footer--heading:after,
&~.mdl-mega-footer__heading:after {
& + .mdl-mega-footer--heading:after,
& + .mdl-mega-footer__heading:after {
content: '';
}
}

2
src/layout/README.md
View File

@ -322,7 +322,7 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements
| `mdl-layout--small-screen-only` | Hides an element on larger screens | Optional; goes on any descendant of `mdl-layout` |
| `mdl-layout__header--waterfall` | Allows a "waterfall" effect with multiple header lines | Optional; goes on header element |
| `mdl-layout__header--transparent` | Makes header transparent (draws on top of layout background) | Optional; goes on header element |
| `mdl-layout__header--transparent` | Uses a header without a shadow | Optional; goes on header element |
| `mdl-layout__header--seamed` | Uses a header without a shadow | Optional; goes on header element |
| `mdl-layout__tab-bar` | Defines container as an MDL tab bar | Required on div element inside header (tabbed layout) |
| `mdl-layout__tab` | Defines anchor as MDL tab link | Required on tab bar anchor elements |
| `is-active` | Defines tab as default active tab | Optional; goes on tab bar anchor element and associated tab section element|

2
src/layout/_layout.scss
View File

@ -413,7 +413,7 @@
transition-property: background-color;
@include material-animation-default();
.mdl-layout__drawer.is-visible ~ & {
&.is-visible {
background-color: rgba(0, 0, 0, 0.5);
visibility: visible;
}

17
src/layout/layout.js
View File

@ -151,6 +151,7 @@
// Collapse drawer (if any) when moving to a large screen size.
if (this.drawer_) {
this.drawer_.classList.remove(this.CssClasses_.IS_DRAWER_OPEN);
this.obfuscator_.classList.remove(this.CssClasses_.IS_DRAWER_OPEN);
}
}
};
@ -162,6 +163,7 @@
*/
MaterialLayout.prototype.drawerToggleHandler_ = function() {
this.drawer_.classList.toggle(this.CssClasses_.IS_DRAWER_OPEN);
this.obfuscator_.classList.toggle(this.CssClasses_.IS_DRAWER_OPEN);
};
/**
@ -243,13 +245,6 @@
var mode = this.Mode_.STANDARD;
// Keep an eye on screen size, and add/remove auxiliary class for styling
// of small screens.
this.screenSizeMediaQuery_ = window.matchMedia(
/** @type {string} */ (this.Constant_.MAX_WIDTH));
this.screenSizeMediaQuery_.addListener(this.screenSizeHandler_.bind(this));
this.screenSizeHandler_();
if (this.header_) {
if (this.header_.classList.contains(this.CssClasses_.HEADER_SEAMED)) {
mode = this.Mode_.SEAMED;
@ -329,8 +324,16 @@
this.element_.appendChild(obfuscator);
obfuscator.addEventListener('click',
this.drawerToggleHandler_.bind(this));
this.obfuscator_ = obfuscator;
}
// Keep an eye on screen size, and add/remove auxiliary class for styling
// of small screens.
this.screenSizeMediaQuery_ = window.matchMedia(
/** @type {string} */ (this.Constant_.MAX_WIDTH));
this.screenSizeMediaQuery_.addListener(this.screenSizeHandler_.bind(this));
this.screenSizeHandler_();
// Initialize tabs, if any.
if (this.header_ && this.tabBar_) {
this.element_.classList.add(this.CssClasses_.HAS_TABS);

10
src/slider/_slider.scss
View File

@ -185,7 +185,7 @@ _:-ms-input-placeholder, :root .mdl-slider.mdl-slider.is-upgraded {
background: transparent;
}
&.is-lowest-value ~
&.is-lowest-value +
.mdl-slider__background-flex > .mdl-slider__background-upper {
left: 6px;
}
@ -205,7 +205,7 @@ _:-ms-input-placeholder, :root .mdl-slider.mdl-slider.is-upgraded {
transform: scale(1.5);
}
&.is-lowest-value:active ~
&.is-lowest-value:active +
.mdl-slider__background-flex > .mdl-slider__background-upper {
left: 9px;
}
@ -271,13 +271,13 @@ _:-ms-input-placeholder, :root .mdl-slider.mdl-slider.is-upgraded {
background: $range-bg-color;
}
&:disabled ~
&:disabled +
.mdl-slider__background-flex > .mdl-slider__background-lower {
background-color: $range-bg-color;
left: -6px;
}
&:disabled ~
&:disabled +
.mdl-slider__background-flex > .mdl-slider__background-upper {
left: 6px;
}
@ -298,7 +298,7 @@ _:-ms-input-placeholder, :root .mdl-slider.mdl-slider.is-upgraded {
transform: scale(0.667);
}
&.is-lowest-value:disabled:active ~
&.is-lowest-value:disabled:active +
.mdl-slider__background-flex > .mdl-slider__background-upper {
left: 6px;
}

8
templates/android-dot-com/index.html
View File

@ -27,7 +27,7 @@
<!-- Page styles -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="$$hosted_libs_prefix$$/$$version$$/material.min.css">
<link rel="stylesheet" href="material.min.css">
<link rel="stylesheet" href="styles.css">
<style>
#view-source {
@ -71,6 +71,9 @@
<a class="mdl-navigation__link mdl-typography--text-uppercase" href="">Play</a>
</nav>
</div>
<span class="android-mobile-title mdl-layout-title">
<img class="android-logo-image" src="images/android-logo.png">
</span>
<button class="android-more-button mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect" id="more-button">
<i class="material-icons">more_vert</i>
</button>
@ -80,9 +83,6 @@
<li disabled class="mdl-menu__item">4.3 Jelly Bean</li>
<li class="mdl-menu__item">Android History</li>
</ul>
<span class="android-mobile-title mdl-layout-title">
<img class="android-logo-image" src="images/android-logo.png">
</span>
</div>
</div>

17
templates/android-dot-com/material.scss Normal file
View File

@ -0,0 +1,17 @@
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@import '../../src/material-design-lite';

8
templates/android-dot-com/styles.css
View File

@ -110,7 +110,7 @@ a img{
width: 800px;
}
.android-search-box.is-focused ~ .android-navigation-container {
.android-search-box.is-focused + .android-navigation-container {
opacity: 0;
width: 100px;
}
@ -481,7 +481,11 @@ a img{
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.android-search-box.is-focused ~ .android-mobile-title {
/* WebViews in iOS 9 break the "~" operator, and WebViews in OS X 10.10 break
consecutive "+" operators in some cases. Therefore, we need to use both
here to cover all the bases. */
.android.android-search-box.is-focused ~ .android-mobile-title,
.android-search-box.is-focused + .android-navigation-container + .android-mobile-title {
opacity: 0;
}

10
templates/blog/index.html
View File

@ -89,11 +89,11 @@
<div>
<strong>The Newist</strong>
</div>
<ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right" for="menubtn">
<li class="mdl-menu__item mdl-js-ripple-effect">About</li>
<li class="mdl-menu__item mdl-js-ripple-effect">Message</li>
<li class="mdl-menu__item mdl-js-ripple-effect">Favorite</li>
<li class="mdl-menu__item mdl-js-ripple-effect">Search</li>
<ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right mdl-js-ripple-effect" for="menubtn">
<li class="mdl-menu__item">About</li>
<li class="mdl-menu__item">Message</li>
<li class="mdl-menu__item">Favorite</li>
<li class="mdl-menu__item">Search</li>
</ul>
<button id="menubtn" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
<i class="material-icons" role="presentation">more_vert</i>

2
templates/dashboard/index.html
View File

@ -62,7 +62,7 @@
</head>
<body>
<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<header class="demo-header mdl-layout__header mdl-color--white mdl-color--grey-100 mdl-color-text--grey-600">
<header class="demo-header mdl-layout__header mdl-color--grey-100 mdl-color-text--grey-600">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Home</span>
<div class="mdl-layout-spacer"></div>