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: 0 $content-spacing-large;
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 {
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;
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;
padding-top: 10px;
@media (width <= $breakpoint-medium) {
margin-right: $content-spacing-small;
padding: 0;
}
}
.woocommerce-marketplace__header-tabs {
align-self: end;
grid-area: mktpl-tabs;
@media (width <= $breakpoint-medium) {
padding: 0 $content-spacing-small;
}
}
.woocommerce-marketplace__search {
margin-right: $medium-gap;
margin-top: 10px;
input[type='search'] {
all: unset;
flex-grow: 1;
}
@media (width <= $breakpoint-medium) {
margin: $content-spacing-small;
}
}