woocommerce/plugins/woocommerce-admin/client/wp-admin-scripts/woo-product-usage-notice/style.scss

137 lines
2.0 KiB
SCSS
Raw Normal View History

$font-sf-pro-text: helveticaneue-light, "Helvetica Neue Light",
"Helvetica Neue", sans-serif;
.woocommerce-product-usage-notice {
border-radius: none;
font-family: $font-sf-pro-text;
.components-modal {
&__content {
margin: 0;
padding: 0;
}
&__header {
height: 0;
padding: 0;
.components-button {
top: 40px;
left: -20px;
}
}
}
.components-card {
box-shadow: none;
&.primary {
padding: 40px;
max-width: 468px;
}
&.secondary {
background-color: #faf7f3;
height: 100%;
min-width: 392px;
}
.subscription-status {
border-radius: 2px;
font-size: 12px;
font-weight: 400;
line-height: 16px;
padding: 6px;
&__expired {
color: var(--wp-red-red-70, #8a2424);
background: var(--wp-red-red-0, #fcf0f1);
}
}
&__header,
&__body,
&__footer {
border: none;
display: flex;
gap: $gap;
padding: 0;
}
&__header {
align-items: stretch;
flex-direction: column;
padding-bottom: 40px;
h2 {
font-size: 24px;
font-weight: 400;
line-height: 35px;
margin: 0;
}
}
&__body {
padding-bottom: 40px;
h3 {
font-size: 16px;
line-height: 24px;
margin: 0;
}
}
&__footer {
justify-content: right;
.is-secondary,
.is-secondary:hover {
box-shadow: none;
}
}
&__media {
align-items: center;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
}
}
}
.woocommerce-subscription-benefits {
display: flex;
flex-direction: column;
gap: $gap-large;
&__item {
display: flex;
flex-direction: row;
gap: $gap;
text-decoration: none;
}
&__icon {
display: flex;
align-items: baseline;
padding: 0;
svg {
fill: #1e1e1e;
}
}
&__content {
display: flex;
flex-direction: column;
gap: $gap-smallest;
}
&__content h4 {
color: #1e1e1e;
font-size: 14px;
font-weight: 600;
line-height: 20px;
}
&__content p {
color: #757575;
font-size: 12px;
font-weight: 400;
line-height: 16px;
}
}