Try Gutenberg callout: improve formatting for Internet Explorer 11.

Correct an issue where the layout of the "Try Gutenberg" callout added in #41316 falls apart under IE11.

Props kjellr, ianbelanger, pbiron, Luciano Croce, belcherj, ryansommers.     
Fixes #44742.


git-svn-id: https://develop.svn.wordpress.org/branches/4.9@43674 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Adam Silverstein 2018-10-05 14:50:31 +00:00
parent b297a03020
commit d9f721d812

View File

@ -226,18 +226,54 @@
} }
.try-gutenberg-panel .try-gutenberg-panel-column-container { .try-gutenberg-panel .try-gutenberg-panel-column-container {
display: -ms-grid; display: flex;
display: grid;
-ms-grid-columns: 36% 32% 32%;
grid-template-columns: 36% 32% 32%;
margin-bottom: 13px; margin-bottom: 13px;
} }
@supports (display: grid) {
.try-gutenberg-panel .try-gutenberg-panel-column-container {
display: -ms-grid;
display: grid;
-ms-grid-columns: 36% 32% 32%;
grid-template-columns: 36% 32% 32%;
}
}
.try-gutenberg-panel .try-gutenberg-panel-image-column {
width: 36%;
}
@supports (display: grid) {
.try-gutenberg-panel .try-gutenberg-panel-image-column {
width: auto;
}
}
.try-gutenberg-panel .try-gutenberg-panel-column:not(.try-gutenberg-panel-image-column) { .try-gutenberg-panel .try-gutenberg-panel-column:not(.try-gutenberg-panel-image-column) {
display: -ms-grid; display: flex;
display: grid; flex-direction: column;
-ms-grid-rows: auto 100px; justify-content: space-between;
grid-template-rows: auto 100px; width: 32%;
}
@supports (display: grid) {
.try-gutenberg-panel .try-gutenberg-panel-column:not(.try-gutenberg-panel-image-column) {
display: -ms-grid;
display: grid;
-ms-grid-rows: auto 100px;
grid-template-rows: auto 100px;
width: auto;
}
}
.try-gutenberg-panel .try-gutenberg-action {
height: 100px;
}
@supports (display: grid) {
.try-gutenberg-panel .try-gutenberg-action {
height: auto;
}
} }
.welcome-panel-column p.hide-if-no-customize { .welcome-panel-column p.hide-if-no-customize {
@ -255,7 +291,7 @@
} }
.welcome-panel .welcome-panel-column ul { .welcome-panel .welcome-panel-column ul {
margin: 0.8em 1em 1em 0; margin: 0.8em 1em 1em 0;
} }
.welcome-panel .welcome-panel-column li { .welcome-panel .welcome-panel-column li {
@ -1269,6 +1305,16 @@ a.rsswidget {
.try-gutenberg-panel .try-gutenberg-panel-image-column { .try-gutenberg-panel .try-gutenberg-panel-image-column {
display: none; display: none;
} }
.try-gutenberg-panel .try-gutenberg-panel-column:not(.try-gutenberg-panel-image-column) {
width: 50%;
}
@supports (display: grid) {
.try-gutenberg-panel .try-gutenberg-panel-column:not(.try-gutenberg-panel-image-column) {
width: auto;
}
}
} }
@media screen and (max-width: 870px) { @media screen and (max-width: 870px) {
@ -1280,8 +1326,18 @@ a.rsswidget {
} }
.try-gutenberg-panel .try-gutenberg-panel-column-container { .try-gutenberg-panel .try-gutenberg-panel-column-container {
-ms-grid-columns: 100%; flex-wrap: wrap;
grid-template-columns: 100%; }
@supports (display: grid) {
.try-gutenberg-panel .try-gutenberg-panel-column-container {
-ms-grid-columns: 100%;
grid-template-columns: 100%;
}
}
.try-gutenberg-panel .try-gutenberg-panel-column:not(.try-gutenberg-panel-image-column) {
width: 100%;
} }
.welcome-panel .welcome-panel-column li { .welcome-panel .welcome-panel-column li {