woocommerce-paypal-payments/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-modal.scss
2024-11-13 17:29:11 +01:00

103 lines
1.4 KiB
SCSS

.ppcp-r-modal {
@import "../../global";
@import './button';
@import './fields';
&__container {
max-width: 100%;
width: 400px;
&--small {
padding: 0 50px;
@media screen and (max-width: 480px){
padding:0;
}
}
}
.components-modal {
&__header {
height: 52px;
padding: 20px 20px 0 20px;
button {
padding: 4px;
}
}
&__content {
margin-top: 48px;
padding: 0 50px 48px 50px;
}
}
&__header {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
border-bottom: 1px solid $color-gray-500;
padding-bottom: 12px;
margin-bottom: 24px;
}
&__title {
@include font(16, 20, 600);
color: $color-black;
}
&__content {
width: 400px;
max-width: 100%;
}
&__inverted-toggle-control {
.components-form-toggle {
order: 1;
}
}
&__field-row {
display: flex;
flex-direction: column;
gap: 8px;
&--save {
margin-top: 24px;
align-items: flex-end;
}
input[type='text'] {
margin: 0;
border-color: $color-gray-700;
}
}
&__field-rows {
display: flex;
flex-direction: column;
gap: 24px;
&--acdc {
gap: 18px;
}
}
.ppcp-r-modal__field-row--save button.is-primary {
@include small-button;
}
&__content-title {
@include font(14, 20, 600);
color: $color-black;
display: block;
margin: 0 0 4px 0;
}
&__description {
@include font(14, 20, 400);
margin: 0 0 24px 0;
color: $color-black;
}
}