Merge pull request #1726 from google/more_broken_sibling_ios

More fixes for broken sibling selector in iOS
This commit is contained in:
Sérgio Gomes 2015-10-12 16:50:20 +01:00
commit a7b9c4db84
5 changed files with 35 additions and 32 deletions

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,13 @@
.mdl-mega-footer--heading-checkbox:checked,
.mdl-mega-footer__heading-checkbox:checked {
&~ul {
display:none;
& + .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,23 +261,24 @@
.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 {
background-image: none;
}
}
.mdl-mega-footer--heading-checkbox:checked,
.mdl-mega-footer__heading-checkbox:checked {
&~ul {
display: block;
}
& + .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 {
content: '';
& + .mdl-mega-footer--heading:after,
& + .mdl-mega-footer__heading:after {
content: '';
}
}
}
}
.mdl-mega-footer--bottom-section,
.mdl-mega-footer__bottom-section {

View File

@ -245,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;
@ -345,6 +338,13 @@
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);

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;
}

View File

@ -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>

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,8 @@ a img{
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.android-search-box.is-focused ~ .android-mobile-title {
.android-search-box.is-focused + .android-navigation-container +
.android-mobile-title {
opacity: 0;
}