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

♻️ Extract a component from settings.scss

Browse source
This commit is contained in:
Philipp Stracker 2025-01-16 14:55:13 +01:00
parent 560f6ed30d
commit 59a4991cf3
No known key found for this signature in database
2 changed files with 79 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

80
modules/ppcp-settings/resources/css/components/screens/_settings.scss
View file

@ -1,4 +1,5 @@
@import './settings/input';
@import './settings/connection-status';
@import './settings/tab-styling';
@import './settings/tab-paylater-configurator';
@ -122,85 +123,6 @@
}
}
// Connection Status
.ppcp-r-connection-status {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
&__status-status {
margin: 0 0 8px 0;
strong {
@include font(14, 24, 700);
color: $color-black;
}
}
&__status-label {
@include font(11, 22, 600);
color: $color-gray-900;
display: block;
text-transform: uppercase;
}
&__status-value {
@include font(13, 26, 400);
color: $color-text-tertiary;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&__data {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
}
&__status-toggle--toggled {
.ppcp-r-connection-status__show-all-data {
transform: rotate(180deg);
}
}
&__status-row {
display: flex;
flex-direction: column;
strong {
@include font(14, 24, 600);
color: $color-gray-800;
margin-right: 12px;
white-space: nowrap;
}
.ppcp-r-connection-status__status-toggle {
line-height: 0;
}
}
@media screen and (max-width: 767px) {
flex-wrap: wrap;
&__status {
width: 100%;
}
&__status-row {
flex-wrap: wrap;
strong {
width: 100%;
}
span {
word-break: break-all;
}
}
}
}
// Feature Refresh
.ppcp-r-feature-refresh {
display: flex;

78
modules/ppcp-settings/resources/css/components/screens/settings/_connection-status.scss Normal file
View file

@ -0,0 +1,78 @@
// Connection Status
.ppcp-r-connection-status {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
&__status-status {
margin: 0 0 8px 0;
strong {
@include font(14, 24, 700);
color: $color-black;
}
}
&__status-label {
@include font(11, 22, 600);
color: $color-gray-900;
display: block;
text-transform: uppercase;
}
&__status-value {
@include font(13, 26, 400);
color: $color-text-tertiary;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&__data {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
}
&__status-toggle--toggled {
.ppcp-r-connection-status__show-all-data {
transform: rotate(180deg);
}
}
&__status-row {
display: flex;
flex-direction: column;
strong {
@include font(14, 24, 600);
color: $color-gray-800;
margin-right: 12px;
white-space: nowrap;
}
.ppcp-r-connection-status__status-toggle {
line-height: 0;
}
}
@media screen and (max-width: 767px) {
flex-wrap: wrap;
&__status {
width: 100%;
}
&__status-row {
flex-wrap: wrap;
strong {
width: 100%;
}
span {
word-break: break-all;
}
}
}
}