woocommerce/plugins/woocommerce-admin/client/marketing/components/knowledge-base/style.scss

122 lines
1.8 KiB
SCSS

.woocommerce-marketing-knowledgebase-card {
.woocommerce-marketing-slider {
margin: 0 0 14px;
}
.woocommerce-pagination {
justify-content: flex-start;
flex-direction: row; // Required for mobile
}
&__page {
width: 100%;
display: flex;
@include breakpoint( '<960px' ) {
display: block;
}
}
.components-spinner {
float: none;
margin: 45px auto 50px;
display: block;
}
&__post {
display: flex;
flex-wrap: wrap;
width: 100%;
text-decoration: none;
&:not(:last-child) {
margin-bottom: 16px;
}
@include breakpoint( '>960px' ) {
flex-wrap: nowrap;
width: 50%;
&:not(:last-child) {
margin-bottom: 0;
padding-right: 16px;
}
}
&-img {
width: 100%;
// Make image container height relative to width
padding-bottom: 52%;
overflow: hidden;
position: relative;
flex: none;
border-radius: 3px;
@include breakpoint( '>960px' ) {
width: 144px;
height: 103px;
margin-right: 16px;
padding-bottom: 0;
}
img {
position: absolute;
top: 0;
right: 0;
display: block;
width: 100%;
@include breakpoint( '>960px' ) {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: auto;
}
}
}
&-text {
margin: 10px 0 0;
@include breakpoint('>960px') {
margin: 0;
}
}
h3 {
margin-top: 0;
margin-bottom: 6px;
font-size: 16px;
line-height: 24px;
font-weight: 600;
white-space: normal;
color: $core-grey-dark-800;
transition: color 0.2s ease;
}
&:hover {
h3 {
color: $theme-color;
}
}
&-meta {
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 12px;
line-height: 17px;
color: $core-grey-dark-500;
margin: 0;
padding: 0;
height: 17px;
.woocommerce-gravatar {
margin: 1px 0 0 5px;
}
}
}
}