google/material-design-lite
1
1
Fork 0
mirror of https://github.com/google/material-design-lite.git synced 2024-09-20 08:38:27 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1746 from google/consecutive-adjacent-selectors

Browse Source 
Consecutive `+` CSS selectors sometimes cause problems in WebKit.
This commit is contained in:
Sérgio Gomes 2015-10-15 10:39:01 +01:00
commit 978cf71a1a
2 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/footer/_mega_footer.scss
View File

@ -178,6 +178,11 @@
.mdl-mega-footer--heading-checkbox:checked,
.mdl-mega-footer__heading-checkbox:checked {
// 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;
@ -268,8 +273,13 @@
}
.mdl-mega-footer--heading-checkbox:checked,
.mdl-mega-footer__heading-checkbox:checked {
& + .mdl-mega-footer--heading + .mdl-mega-footer__link-list,
& + .mdl-mega-footer__heading + .mdl-mega-footer--link-list {
// 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;
}

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

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