Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

👌 Use admin theme color for select2

This commit is contained in:
Panos (Panagiotis) Synetos 2023-07-27 15:47:54 +03:00
parent 66f852fc26
commit 96a52b5923
No known key found for this signature in database
GPG Key ID: 0404F1D7F00137F9
2 changed files with 32 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
plugins/woocommerce/changelog/fix-admin-colors-select2 Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: fix
Use admin theme color for select2, instead of hardcoded theme values.

68
plugins/woocommerce/client/legacy/css/admin.scss
View File

@ -7358,51 +7358,39 @@ table.bar_chart {
/**
* Select2 colors for built-in admin color themes.
*/
.admin-color {
$wp_admin_colors: (
blue: #096484,
coffee: #c7a589,
ectoplasm: #a3b745,
midnight: #e14d43,
ocean: #9ebaa0,
sunrise: #dd823b,
light: #04a4cc,
);
.wp-admin {
&.wc-wp-version-gte-53 {
.select2-dropdown {
border-color: var(--wp-admin-theme-color);
}
@each $name, $color in $wp_admin_colors {
&-#{$name}.wc-wp-version-gte-53 {
.select2-dropdown {
border-color: $color;
}
.select2-dropdown--below {
box-shadow: 0 0 0 1px var(--wp-admin-theme-color), 0 2px 1px rgba(0, 0, 0, 0.1);
}
.select2-dropdown--below {
box-shadow: 0 0 0 1px $color, 0 2px 1px rgba(0, 0, 0, 0.1);
}
.select2-dropdown--above {
box-shadow: 0 0 0 1px var(--wp-admin-theme-color), 0 -2px 1px rgba(0, 0, 0, 0.1);
}
.select2-dropdown--above {
box-shadow: 0 0 0 1px $color, 0 -2px 1px rgba(0, 0, 0, 0.1);
}
.select2-selection--single .select2-selection__rendered:hover {
color: var(--wp-admin-theme-color);
}
.select2-selection--single .select2-selection__rendered:hover {
color: $color;
}
.select2-container.select2-container--focus
.select2-selection--single,
.select2-container.select2-container--open
.select2-selection--single,
.select2-container.select2-container--open
.select2-selection--multiple {
border-color: var(--wp-admin-theme-color);
box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
}
.select2-container.select2-container--focus
.select2-selection--single,
.select2-container.select2-container--open
.select2-selection--single,
.select2-container.select2-container--open
.select2-selection--multiple {
border-color: $color;
box-shadow: 0 0 0 1px $color;
}
.select2-container--default
.select2-results__option--highlighted[aria-selected],
.select2-container--default
.select2-results__option--highlighted[data-selected] {
background-color: $color;
}
.select2-container--default
.select2-results__option--highlighted[aria-selected],
.select2-container--default
.select2-results__option--highlighted[data-selected] {
background-color: var(--wp-admin-theme-color);
}
}
}