[wccom-17713] Addressing design feedback.
- Removed duplicate `Search` styles from `header.scss`. - Removed 10px top padding from `Header`. Applied it to title, meta and search containers instead. - Deleted duplicate search button style from `header.scss`. - Swapped round order of search component and header meta div so tab navigation order is correct. - Added focus style to search component. - Reduced footer side padding on mobile. - Changed `.woocommerce-marketplace__header-title` page title to an h1 for accessibility. - Removed top margin from product cards – the css grid handles the gap. - Removed margin from `.woocommerce-marketplace__product-card__description`. - Reduced font weight of price in product cards. - Set margin below product list header. - Removed right margin from tab buttons – css grid handles the gap. - Increased top padding of `.woocommerce-marketplace__content`. Addressing linter error.
This commit is contained in:
And Finally
parent
ec70cd1036
commit
87706c5e5a
|
|
@ -11,7 +11,7 @@
|
|||
box-sizing: content-box;
|
||||
max-width: $content-max-width;
|
||||
margin: auto;
|
||||
padding: 48px $content-spacing-large;
|
||||
padding: $content-spacing-xlarge $content-spacing-small;
|
||||
|
||||
&-title {
|
||||
color: $gutenberg-gray-900;
|
||||
|
|
@ -45,6 +45,10 @@
|
|||
}
|
||||
|
||||
@media screen and (min-width: $breakpoint-medium) {
|
||||
.woocommerce-marketplace__footer {
|
||||
padding: $content-spacing-xlarge $content-spacing-large;
|
||||
}
|
||||
|
||||
.woocommerce-marketplace__footer-columns {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@ import { __ } from '@wordpress/i18n';
|
|||
|
||||
export default function HeaderTitle() {
|
||||
return (
|
||||
<div className="woocommerce-marketplace__header-title">
|
||||
<h1 className="woocommerce-marketplace__header-title">
|
||||
{ __( 'Extensions', 'woocommerce' ) }
|
||||
</div>
|
||||
</h1>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
grid-template: 'mktpl-title mktpl-search mktpl-meta' 60px
|
||||
'mktpl-tabs mktpl-tabs mktpl-tabs' auto / 1fr 320px 36px;
|
||||
left: 0;
|
||||
padding: 10px $content-spacing-large 0;
|
||||
padding: 0 $content-spacing-large;
|
||||
position: absolute;
|
||||
top: -60px;
|
||||
width: 100%;
|
||||
|
|
@ -21,14 +21,23 @@
|
|||
'mktpl-search mktpl-search' auto / auto 48px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.woocommerce-marketplace__header-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
padding: 10px 0 0;
|
||||
|
||||
@media (width <= $breakpoint-medium) {
|
||||
padding-left: var(--large-gap);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-marketplace__header-title {
|
||||
align-items: center;
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
grid-area: mktpl-title;
|
||||
line-height: 18px;
|
||||
|
||||
|
|
@ -40,9 +49,11 @@
|
|||
.woocommerce-marketplace__header-meta {
|
||||
grid-area: mktpl-meta;
|
||||
justify-self: end;
|
||||
padding-top: 10px;
|
||||
|
||||
@media (width <= $breakpoint-medium) {
|
||||
margin-right: $content-spacing-small;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -56,13 +67,8 @@
|
|||
}
|
||||
|
||||
.woocommerce-marketplace__search {
|
||||
grid-area: mktpl-search;
|
||||
background: #f0f0f0;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
height: 40px;
|
||||
margin-right: $medium-gap;
|
||||
padding: 4px 8px 4px 12px;
|
||||
margin-top: 10px;
|
||||
|
||||
input[type='search'] {
|
||||
all: unset;
|
||||
|
|
@ -73,9 +79,3 @@
|
|||
margin: $content-spacing-small;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-marketplace__search-button {
|
||||
all: unset;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -28,10 +28,10 @@ export default function Header( props: HeaderProps ) {
|
|||
selectedTab={ selectedTab }
|
||||
setSelectedTab={ setSelectedTab }
|
||||
/>
|
||||
<Search />
|
||||
<div className="woocommerce-marketplace__header-meta">
|
||||
<HeaderAccount />
|
||||
</div>
|
||||
<Search />
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
&__product-card {
|
||||
padding: $large-gap;
|
||||
border-radius: $grid-unit-05 !important;
|
||||
margin-top: $large-gap;
|
||||
|
||||
&:hover {
|
||||
outline: 1.5px solid var(--wp-admin-theme-color);
|
||||
|
|
@ -99,8 +98,9 @@
|
|||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
text-overflow: ellipsis;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&__price {
|
||||
|
|
@ -110,7 +110,7 @@
|
|||
text-decoration: none !important;
|
||||
color: $gray-900 !important;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
line-height: $medium-gap;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
margin-bottom: $medium-gap;
|
||||
margin-top: $small-gap;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
.woocommerce-marketplace__search {
|
||||
grid-area: mktpl-search;
|
||||
background: $gray-0;
|
||||
background: $gutenberg-gray-100;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
height: 40px;
|
||||
|
|
@ -13,6 +13,11 @@
|
|||
flex-grow: 1;
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
background: #fff;
|
||||
border: 1.5px solid var(--wp-admin-theme-color, #3858e9);
|
||||
}
|
||||
|
||||
@media (width <= $breakpoint-medium) {
|
||||
margin: $content-spacing-small;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@
|
|||
font-weight: 600;
|
||||
height: 48px;
|
||||
line-height: 16px;
|
||||
margin: 0 1.5rem 0 0;
|
||||
padding: 0;
|
||||
|
||||
&:focus:not(:disabled) {
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ $breakpoint-xlarge: 1500px;
|
|||
$breakpoint-huge: 1920px;
|
||||
|
||||
// Header
|
||||
$header-height-desktop: 89px;
|
||||
$header-height-desktop: 96px;
|
||||
$header-height-mobile: 129px;
|
||||
|
||||
// Colours
|
||||
|
|
|
|||
Loading…
Reference in New Issue