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

✨ Create a generic select field

Browse source
This commit is contained in:
Philipp Stracker 2025-01-23 15:18:54 +01:00
parent 59d971d5fe
commit 5e9abb8d80
No known key found for this signature in database
3 changed files with 65 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

74
modules/ppcp-settings/resources/css/components/screens/settings/_input.scss
View file

@ -1,5 +1,5 @@
// Fields
.ppcp-r {
.ppcp-r-app {
input[type='text'] {
border-color: $color-gray-700;
width: 100%;
@ -13,7 +13,7 @@
}
// MultiSelect control
.ppcp-r {
.ppcp-r-app {
.ppcp-r__radio-wrapper {
align-items: flex-start;
gap: 12px;
@ -33,45 +33,43 @@
padding-left: 32px;
}
// Select control styles
.ppcp-r__control {
border-radius: 2px;
border-color: $color-gray-700;
min-height: auto;
padding: 0;
}
.ppcp-r__input-container {
padding: 0;
margin: 0;
}
.ppcp-r__value-container {
padding: 0 0 0 7px;
}
.ppcp-r__indicator {
padding: 5px;
}
.ppcp-r__indicator-separator {
display: none;
}
.ppcp-r__value-container--has-value {
.ppcp-r__single-value {
color: $color-gray-800;
// Styles for "react-select" (see `Fields/Select.js`)
.ppcp-r-select {
.ppcp__control {
border-radius: 2px;
border-color: $color-gray-700;
min-height: auto;
padding: 0;
}
}
.ppcp-r__placeholder,
.ppcp-r__single-value {
@include font(13, 20, 400);
}
.ppcp__input-container {
padding: 0;
margin: 0;
}
.ppcp-r__option {
.ppcp-r__option--is-selected {
background-color: $color-gray-200;
.ppcp__value-container {
padding: 0 0 0 7px;
}
.ppcp__indicator {
padding: 5px;
}
.ppcp__value-container--has-value {
.ppcp__single-value {
color: $color-gray-800;
}
}
.ppcp__placeholder,
.ppcp__single-value {
@include font(13, 20, 400);
}
.ppcp__option {
.ppcp__option--is-selected {
background-color: $color-gray-200;
}
}
}
}