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 {
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-footer"] {
h4 {
font-size: 1.1em;
.marketplace-listitem-container-content {
h4 {
font-size: 1.1em;
margin: 0;
margin-bottom: 0;
}
}
}
.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context="products-list-empty-body"] {
.marketplace-listitem-container {
align-items: center;
align-items: flex-start;
display: flex;
flex-direction: column;
.marketplace-listitem-container-content {
flex: 1 0 70%;
h4 {
margin: 0;
margin-bottom: 0.5em;
}
p {
margin-top: 0.5em;
margin: 0;
margin-bottom: 0.5em;
}
}
@ -87,6 +99,14 @@ a.suggestion-dismiss::before {
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"],
@ -97,16 +117,21 @@ a.suggestion-dismiss::before {
border: 1px solid #ccc;
border-bottom: none;
h4 {
margin: 0;
}
&:last-child {
border-bottom: 1px solid #ccc;
}
.marketplace-listitem-container {
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 {
@ -129,16 +154,28 @@ a.suggestion-dismiss::before {
.suggestion-dismiss {
text-decoration: none;
position: relative;
top: 7px;
}
}
.marketplace-listitem-container-content {
p {
margin: 0;
position: absolute;
top: 1em;
right: 1em;
}
}
}
@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;
}
}
}
}
}