Merge branch 'mdl-1.0'
commit
714fe21d7c
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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: '';
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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|
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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&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>
|
||||
|
||||
|
|
|
@ -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';
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue