woocommerce/plugins/woocommerce-admin/client/tasks/fills/experimental-shipping-recom.../components/plugin-banner.scss

82 lines
1.5 KiB
SCSS
Raw Normal View History

.woocommerce-task-shipping-recommendation__plugins-install {
display: flex;
padding: $gap-large calc($gap + $gap-smallest);
border: 1px solid #ddd;
border-radius: 3px;
justify-content: space-around;
margin-bottom: $gap-large;
&.dual {
flex-direction: column;
justify-content: space-between;
width: 285px;
height: 322px;
p {
margin-top: 0;
margin-bottom: -$gap-smaller;
color: $gray-700;
}
.plugins-install__plugin-banner-image {
display: flex;
img {
width: 120px;
height: 28px;
}
}
}
&.single {
.plugins-install__list {
max-width: 380px;
}
}
.plugins-install__plugin-banner-image {
display: flex;
img {
width: 100%;
}
}
.plugins-install__list {
display: flex;
flex-direction: column;
justify-content: space-around;
gap: calc($gap-smaller + $gap-smallest / 2);
}
.woocommerce-task-shipping-recommendations_plugins-buttons {
display: flex;
justify-content: space-between;
button {
min-width: 40%;
padding-inline: $gap-smaller;
margin-inline: $gap-smallest;
}
}
.plugins-install__list-item {
display: flex;
align-items: center;
}
.plugins-install__list-icon {
margin-right: $gap-small;
}
}
.woocommerce-task-shipping-recommendation_plugins-install-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
}
.woocommerce-task-shipping-recommendations_skip-button.dual {
// we only want this to center this in a dual partner layout
margin-inline: calc(50% - 34px);
}