woocommerce/plugins/woocommerce-admin/client/payments-welcome/style.scss

207 lines
3.1 KiB
SCSS

.woopayments-welcome-page {
max-width: 680px;
margin: 0 auto;
.components-notice.is-error {
margin: 0 0 $gap-large 0;
}
h1,
h2 {
font-size: 20px;
font-weight: 400;
line-height: 28px;
color: $gray-900;
}
&__header {
padding: $gap-larger;
img {
width: 143px;
}
@media (min-width: #{ ($break-small) }) {
padding-right: $gap-larger + 217px;
background: url(./incentive.svg) no-repeat;
background-position: right $gap-larger center;
}
}
&__offer {
margin: $gap-large;
margin-top: $gap-smallest;
padding: $gap-large;
border: 1px solid #ae7dd0;
border-radius: 8px;
background-color: #faf8ff;
&-pill {
display: inline-block;
padding: 0 $gap-small;
border: 1px solid #1d2327; // Gray 90
border-radius: 16px;
text-transform: uppercase;
font-size: 12px;
line-height: 22px;
font-weight: 600;
color: $gray-900;
}
h2 {
margin: $gap-small 0;
}
.components-button.is-tertiary {
margin-left: $gap-large;
}
p {
font-size: 12px;
line-height: 16px;
color: #50575e; // Gray 60
}
}
&__payments {
padding: $gap-large;
}
&__payment-methods {
display: flex;
flex-wrap: wrap;
align-items: center;
svg {
display: inline-block;
height: 24px;
width: auto;
border: 1px solid $gray-300;
border-radius: 2px;
margin: 0 $gap-smaller $gap-smaller 0;
}
}
&__apms {
.components-card__header {
padding: $gap-small $gap-large;
}
.components-card__body {
padding: 0;
.woocommerce-list__item {
> .woocommerce-list__item-inner {
padding: $gap-large;
.woocommerce-list__item-title {
color: $gray-900;
font-weight: 700;
font-size: 14px;
line-height: 18px;
}
.woocommerce-list__item-content {
color: $gray-700;
font-size: 13px;
line-height: 16px;
}
.woocommerce-list__item-after {
margin-left: $gap-large;
}
.woocommerce-list__item-before {
img {
width: 36px;
}
}
}
}
}
.components-card__footer {
padding: $gap $gap-large;
}
&-notice {
margin: 0 0 $gap-large 0;
padding: 0;
background-color: #f0f6fc;
box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 1px;
.components-notice__content {
margin: 0;
padding: $gap $gap-large;
display: flex;
align-items: center;
svg {
margin-right: $gap;
height: 16px;
}
}
}
}
&__faq > div {
display: flex;
padding: $gap $gap;
font-size: 16px;
line-height: 24px;
a {
text-decoration: none;
}
> * {
margin-right: $gap-small;
}
}
&__survey {
.components-modal__content {
padding: 0 $gap-larger $gap-larger;
p {
text-transform: none;
}
}
p {
margin-bottom: 1em;
}
&-intro {
max-width: 500px;
}
&-question {
font-weight: bold;
}
&-selection {
margin: 1em 0;
}
&-comment {
margin-top: 1em;
}
&-buttons {
text-align: right;
button {
margin-left: 0.5em;
}
button.is-destructive {
background-color: #cc1818;
color: #fff;
&:hover {
color: #fff !important;
}
}
}
}
}