2025-01-15 12:25:37 +01:00
|
|
|
$width-settings-panel: 422px;
|
|
|
|
|
2024-11-26 13:28:03 +01:00
|
|
|
.ppcp-r-styling {
|
|
|
|
display: flex;
|
2025-01-15 12:25:37 +01:00
|
|
|
border: 1px solid var(--color-separators);
|
2024-11-26 13:28:03 +01:00
|
|
|
border-radius: 8px;
|
|
|
|
overflow: hidden;
|
|
|
|
|
2025-01-15 12:25:37 +01:00
|
|
|
.ppcp-r-styling__title {
|
|
|
|
@include font(14, 16, 600);
|
2024-11-26 13:28:03 +01:00
|
|
|
|
2025-01-15 12:25:37 +01:00
|
|
|
color: var(--color-text-title);
|
2024-11-26 13:28:03 +01:00
|
|
|
display: block;
|
2025-01-15 12:25:37 +01:00
|
|
|
margin: 0 0 18px 0;
|
2024-11-26 13:28:03 +01:00
|
|
|
}
|
|
|
|
|
2025-01-15 12:25:37 +01:00
|
|
|
.header-section .ppcp-r-styling__title {
|
|
|
|
@include font(16, 20, 600);
|
2024-11-26 13:28:03 +01:00
|
|
|
}
|
|
|
|
|
2025-01-15 12:25:37 +01:00
|
|
|
/* The settings-panel (left side) */
|
|
|
|
.settings-panel {
|
|
|
|
width: $width-settings-panel;
|
2024-11-26 13:28:03 +01:00
|
|
|
padding: 48px;
|
2025-01-15 12:25:37 +01:00
|
|
|
|
|
|
|
.ppcp-r-styling__section {
|
|
|
|
padding-bottom: 24px;
|
|
|
|
margin-bottom: 28px;
|
|
|
|
border-bottom: 1px solid var(--color-separators);
|
|
|
|
}
|
2024-11-26 13:28:03 +01:00
|
|
|
}
|
|
|
|
|
2025-01-15 12:25:37 +01:00
|
|
|
/* The preview area (right side) */
|
|
|
|
.preview-panel {
|
|
|
|
width: calc(100% - $width-settings-panel);
|
|
|
|
background-color: var(--color-preview-background);
|
2024-11-28 10:31:16 +01:00
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
|
2025-01-15 12:25:37 +01:00
|
|
|
.preview-panel-inner {
|
2024-11-28 10:31:16 +01:00
|
|
|
width: 100%;
|
|
|
|
padding: 24px;
|
|
|
|
}
|
2024-11-26 13:28:03 +01:00
|
|
|
}
|
|
|
|
|
2025-01-15 12:25:37 +01:00
|
|
|
/* --- *
|
2024-11-28 10:31:16 +01:00
|
|
|
|
2024-11-26 13:28:03 +01:00
|
|
|
&__select {
|
|
|
|
label {
|
|
|
|
@include font(13, 16, 600);
|
|
|
|
color: $color-black;
|
|
|
|
margin: 0;
|
|
|
|
text-transform: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
select {
|
|
|
|
@include font(13, 20, 400);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.ppcp-r__checkbox {
|
|
|
|
.components-checkbox-control {
|
|
|
|
&__label {
|
|
|
|
@include font(13, 20, 400);
|
|
|
|
color: $color-black;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.components-flex {
|
|
|
|
gap: 12px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&__payment-method-checkboxes {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
gap: 24px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.ppcp-r {
|
|
|
|
&__horizontal-control {
|
|
|
|
.components-flex {
|
|
|
|
flex-direction: row;
|
|
|
|
justify-content: flex-start;
|
|
|
|
gap: 32px;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.components-radio-control {
|
|
|
|
&__option {
|
|
|
|
gap: 12px;
|
|
|
|
|
|
|
|
input {
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
label {
|
|
|
|
@include font(13, 20, 400);
|
|
|
|
color: $color-black;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
input {
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2025-01-15 12:25:37 +01:00
|
|
|
// */
|
2024-11-26 13:28:03 +01:00
|
|
|
}
|