Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

mobile styles for products empty state suggestions

This commit is contained in:
haszari 2019-02-19 14:56:34 +13:00
parent a03b9abcfb
commit bf31d8b052
3 changed files with 57 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/marketplace-suggestions-rtl.css
View File

File diff suppressed because one or more lines are too long

2
assets/css/marketplace-suggestions.css
View File

File diff suppressed because one or more lines are too long

73
assets/css/marketplace-suggestions.scss
View File

@ -53,7 +53,7 @@ a.suggestion-dismiss::before {
} }
} }
@media screen and (max-width: 782px) { @media screen and (min-width: 600px) {
.marketplace-table-banner { .marketplace-table-banner {
display: none; display: none;
@ -63,22 +63,34 @@ a.suggestion-dismiss::before {
.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context="products-list-empty-header"], .marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context="products-list-empty-header"],
.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context="products-list-empty-footer"] { .marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context="products-list-empty-footer"] {
h4 { .marketplace-listitem-container-content {
font-size: 1.1em;
h4 {
font-size: 1.1em;
margin: 0;
margin-bottom: 0;
}
} }
} }
.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context="products-list-empty-body"] { .marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context="products-list-empty-body"] {
.marketplace-listitem-container { .marketplace-listitem-container {
align-items: center; align-items: flex-start;
display: flex; display: flex;
flex-direction: column;
.marketplace-listitem-container-content { .marketplace-listitem-container-content {
flex: 1 0 70%; flex: 1 0 70%;
h4 {
margin: 0;
margin-bottom: 0.5em;
}
p { p {
margin-top: 0.5em; margin: 0;
margin-bottom: 0.5em;
} }
} }
@ -87,6 +99,14 @@ a.suggestion-dismiss::before {
text-align: right; text-align: right;
} }
} }
@media screen and (min-width: 600px) {
.marketplace-listitem-container {
align-items: center;
flex-direction: row;
}
}
} }
.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context="products-list-empty-header"], .marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context="products-list-empty-header"],
@ -97,16 +117,21 @@ a.suggestion-dismiss::before {
border: 1px solid #ccc; border: 1px solid #ccc;
border-bottom: none; border-bottom: none;
h4 {
margin: 0;
}
&:last-child { &:last-child {
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
} }
.marketplace-listitem-container { .marketplace-listitem-container {
padding: 1.5em; padding: 1.5em;
border-bottom: 1px solid #ccc;
// Allows us to position the dismiss x button relative to container on mobile.
position: relative;
&:last-child {
border-bottom: none;
padding-bottom: 1.5em;
}
.marketplace-listitem-container-cta { .marketplace-listitem-container-cta {
@ -129,16 +154,28 @@ a.suggestion-dismiss::before {
.suggestion-dismiss { .suggestion-dismiss {
text-decoration: none; text-decoration: none;
position: relative; position: absolute;
top: 7px; top: 1em;
} right: 1em;
}
.marketplace-listitem-container-content {
p {
margin: 0;
} }
} }
} }
@media screen and (min-width: 600px) {
.marketplace-listitem-container {
border-bottom: none;
padding-bottom: 0;
.marketplace-listitem-container-cta {
.suggestion-dismiss {
position: relative;
top: 7px;
right: auto;
}
}
}
}
} }