woocommerce-paypal-payments/modules/ppcp-settings/resources/css/components/screens/settings/_tab-styling.scss

111 lines
1.6 KiB
SCSS
Raw Normal View History

2025-01-15 12:25:37 +01:00
$width-settings-panel: 422px;
.ppcp-r-styling {
display: flex;
2025-01-15 12:25:37 +01:00
border: 1px solid var(--color-separators);
border-radius: 8px;
overflow: hidden;
2025-01-15 12:25:37 +01:00
.ppcp-r-styling__title {
@include font(14, 16, 600);
2025-01-15 12:25:37 +01:00
color: var(--color-text-title);
display: block;
2025-01-15 12:25:37 +01:00
margin: 0 0 18px 0;
}
2025-01-15 12:25:37 +01:00
.header-section .ppcp-r-styling__title {
@include font(16, 20, 600);
}
2025-01-15 12:25:37 +01:00
/* The settings-panel (left side) */
.settings-panel {
width: $width-settings-panel;
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);
}
}
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;
}
}
2025-01-15 12:25:37 +01:00
/* --- *
2024-11-28 10:31:16 +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
// */
}