woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-04 08:47:23 +08:00
Code Issues Projects Packages Wiki Activity Actions 11

🚧 Refactor the Styling tab

Browse source
This commit is contained in:
Philipp Stracker 2025-01-15 12:25:37 +01:00
parent e9644ba026
commit 491352710e
No known key found for this signature in database
9 changed files with 301 additions and 345 deletions
Download patch file Download diff file Expand all files Collapse all files

2
modules/ppcp-settings/resources/css/_variables.scss
View file

@ -55,6 +55,8 @@ $card-vertical-gap: 48px;
--color-gray-100: #{$color-gray-100};
--color-gradient-dark: #{$color-gradient-dark};
--color-preview-background: #FAF8F5;
--color-separators: #{$color-gray-200};
--color-text-title: #{$color-gray-900};
--color-text-main: #{$color-text-text};
--color-text-teriary: #{$color-text-tertiary};

2
modules/ppcp-settings/resources/css/components/screens/settings/_tab-paylater-configurator.scss
View file

@ -1,6 +1,6 @@
.ppcp-r-paylater-configurator {
display: flex;
border: 1px solid $color-gray-200;
border: 1px solid var(--color-separators);
border-radius: 8px;
overflow: hidden;

65
modules/ppcp-settings/resources/css/components/screens/settings/_tab-styling.scss
View file

@ -1,61 +1,49 @@
$width-settings-panel: 422px;
.ppcp-r-styling {
display: flex;
border: 1px solid $color-gray-200;
border: 1px solid var(--color-separators);
border-radius: 8px;
overflow: hidden;
&__section:not(:last-child) {
border-bottom: 1px solid black;
padding-bottom: 24px;
margin-bottom: 28px;
border-bottom: 1px solid $color-gray-600;
}
.ppcp-r-styling__title {
@include font(14, 16, 600);
&__main-title {
@include font(14, 20, 600);
color: $color-gray-800;
margin: 0 0 8px 0;
color: var(--color-text-title);
display: block;
}
&__description {
@include font(13, 20, 400);
color: $color-gray-800;
margin: 0 0 18px 0;
}
&__settings {
width: 422px;
background-color: $color-white;
padding: 48px;
.header-section .ppcp-r-styling__title {
@include font(16, 20, 600);
}
&__preview {
width: calc(100% - 422px);
background-color: #FAF8F5;
/* The settings-panel (left side) */
.settings-panel {
width: $width-settings-panel;
padding: 48px;
.ppcp-r-styling__section {
padding-bottom: 24px;
margin-bottom: 28px;
border-bottom: 1px solid var(--color-separators);
}
}
/* The preview area (right side) */
.preview-panel {
width: calc(100% - $width-settings-panel);
background-color: var(--color-preview-background);
display: flex;
align-items: center;
&-inner {
.preview-panel-inner {
width: 100%;
padding: 24px;
}
}
&__section--rc {
.ppcp-r-styling__title {
@include font(13, 20, 600);
color: $color-black;
display: block;
margin: 0 0 18px 0;
}
}
&__section--empty.ppcp-r-styling__section {
padding-bottom: 0;
margin-bottom: 0;
border-bottom: none;
}
/* --- *
&__select {
label {
@ -118,4 +106,5 @@
}
}
}
// */
}