woocommerce/plugins/woocommerce-admin/client/marketing/components/recommended-extensions/style.scss

80 lines
1.0 KiB
SCSS

.woocommerce-marketing-recommended-extensions-card {
.components-card__body {
padding: $gap-small;
}
.components-spinner {
float: none;
margin: 45px auto 50px;
display: block;
}
&__items {
display: flex;
flex-wrap: wrap;
@include breakpoint( '>600px' ) {
> a {
width: 50%;
}
}
@include breakpoint( '>960px' ) {
> a {
width: 33.3%;
}
&--count-1 > a {
width: 100%;
}
&--count-2 > a {
width: 50%;
}
&--count-4 > a {
width: 25%;
}
}
}
}
.woocommerce-marketing-recommended-extensions-item {
display: block;
padding: 12px;
text-decoration: none;
position: relative;
h4 {
color: $gray-900;
margin: -2px 0 ( $gap-smallest - 1 );
font-size: 16px;
line-height: 1.3;
transition: color 0.2s ease;
}
p {
color: $gray-700;
margin: 0;
}
&:hover {
h4 {
color: var(--wp-admin-theme-color);
}
p {
color: $gray-900;
}
}
&__text {
padding-left: 46px;
}
.woocommerce-admin-marketing-product-icon {
position: absolute;
top: 12px;
left: 12px;
}
}