woocommerce/plugins/woocommerce-admin/client/mobile-banner/banner.scss

74 lines
1.3 KiB
SCSS

$element-spacing: 13px;
$banner-height: 56px;
// This class is a hack, added conditionally when displaying the app banner, it
// can be refactored away when the activity panel goes away.
.woocommerce-layout__show-app-banner {
@include breakpoint( '<782px' ) {
.woocommerce-layout__header-wrapper {
padding-top: $banner-height;
}
}
}
.woocommerce-mobile-app-banner {
background-color: $woocommerce-brand-purple;
position: absolute;
top: 0;
left: 0;
width: 100%;
display: flex;
height: $banner-height;
align-items: center;
padding: 0 6px 0 4px;
@include breakpoint( '>400px' ) {
padding: 0 $element-spacing 0 10px;
}
@include breakpoint( '>782px' ) {
display: none;
}
.gridicon {
fill: $white;
margin-right: 10px;
}
.components-button.is-secondary {
margin-left: auto;
color: $white;
box-shadow: inset 0 0 0 1px $white;
&:hover,
&:active {
color: $white;
box-shadow: inset 0 0 0 1px $white;
background: none;
}
}
.woocommerce-mobile-app-banner__description {
color: $white;
margin-left: 8px;
@include breakpoint( '>400px' ) {
margin-left: $element-spacing;
}
.woocommerce-mobile-app-banner__description__text {
&:first-child {
font-weight: bold;
}
margin: 0;
font-size: 10px;
@include breakpoint( '>400px' ) {
margin-left: 13px;
font-size: 13px;
}
}
}
}