87 lines
1.8 KiB
SCSS
87 lines
1.8 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;
|
|
padding: 0 $content-spacing-large;
|
|
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--my-subscriptions {
|
|
@media (width <= $breakpoint-medium) {
|
|
.woocommerce-marketplace__search {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|