woocommerce-paypal-payments/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-modal.scss

145 lines
2.1 KiB
SCSS

.ppcp-r-modal {
@import "../../global";
@import './button';
@import './fields';
.components-modal {
&__header {
height: 52px;
padding: 20px 20px 0 20px;
button {
padding: 4px;
}
}
&__content {
margin-top: 60px;
padding: 0 24px 28px 24px;
}
}
&__container {
width: 352px;
max-width: 100%;
}
.has-size-small {
.ppcp-r-modal__container {
max-width: 252px;
}
.components-modal__content {
margin-top: 48px;
}
}
&__header {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
border-bottom: 1px solid $color-gray-500;
padding-bottom: 18px;
margin-bottom: 18px;
}
&__title {
@include font(14, 20, 600);
color: $color-black;
}
&__content {
padding: 0;
}
.components-toggle-control {
gap: 8px;
margin: 0;
label {
@include font(13, 20, 400);
color: $color-text-text;
}
.components-form-toggle__track {
border-color: $color-border;
}
}
&__field-row {
display: flex;
flex-direction: column;
gap: 8px;
&--save {
align-items: flex-end;
}
input[type='text'] {
margin: 0;
border-color: $color-gray-700;
}
}
&__field-rows {
display: flex;
flex-direction: column;
gap: 18px;
&--acdc {
gap: 18px;
.ppcp-r-modal__field-row--save {
margin-top: 2px;
}
}
.components-radio-control {
label {
@include font(14, 20, 400);
color: $color-black;
}
&__input {
border-color: $color-gray-700;
margin-right: 0;
&:checked {
border: 1px solid $color-gray-700;
background-color: $color-white;
&::before {
border-color: $color-blueberry;
}
}
}
}
}
.ppcp-r-modal__field-row--save button.is-primary {
@include small-button;
width: 100%;
justify-content: center;
padding: 6px 12px;
}
.ppcp-r__radio-content {
label {
@include font(13, 20, 400);
}
}
&__content-title {
@include font(13, 20, 600);
color: $color-black;
display: block;
margin: 0 0 4px 0;
}
&__description {
@include font(14, 20, 400);
color: $color-black;
margin: 0 0 12px 0;
}
}