woocommerce/plugins/woocommerce-admin/client/marketplace/components/header/header.scss

82 lines
1.7 KiB
SCSS

@import '../../stylesheets/_variables.scss';
.woocommerce-marketplace__header {
align-items: center;
background: #fff;
border-bottom: 1px solid $gutenberg-gray-300;
display: grid;
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;
position: absolute;
top: -60px;
width: 100%;
/* On narrow screens, "stack" header items and hide the bottom border */
@media (width <= $breakpoint-medium) {
border-bottom: 0;
grid-template: 'mktpl-title mktpl-meta' 60px
'mktpl-tabs mktpl-tabs' 48px
'mktpl-search mktpl-search' auto / auto 48px;
padding: 0;
}
}
.woocommerce-marketplace__header-title {
align-items: center;
align-self: stretch;
display: flex;
font-size: 14px;
font-weight: 700;
grid-area: mktpl-title;
line-height: 18px;
@media (width <= $breakpoint-medium) {
padding: 0 $content-spacing-small;
}
}
.woocommerce-marketplace__header-meta {
grid-area: mktpl-meta;
justify-self: end;
@media (width <= $breakpoint-medium) {
margin-right: $content-spacing-small;
}
}
.woocommerce-marketplace__header-tabs {
align-self: end;
grid-area: mktpl-tabs;
@media (width <= $breakpoint-medium) {
padding: 0 $content-spacing-small;
}
}
.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;
input[type='search'] {
all: unset;
flex-grow: 1;
}
@media (width <= $breakpoint-medium) {
margin: $content-spacing-small;
}
}
.woocommerce-marketplace__search-button {
all: unset;
cursor: pointer;
}