pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] web: select2, adapt css selectors and variables

Browse Source 
Prior to this commit, some scss selectors where duplicated
(`.select2-results`) and where not targeting the right element.

This commit also changes the css variables name based on the right
structure : --component__childItem-property--state

task-2710677

closes odoo/odoo#105118

X-original-commit: 25a7ca929b4342fe7b2941f941a001e0dd0370e9
Related: odoo/enterprise#33689
Signed-off-by: Adrien Dieudonné (adr) <adr@odoo.com>
This commit is contained in:
Brieuc-brd
2022-11-07 11:27:10 +01:00
parent 3c90b2efab
commit 6522a6d0c4
1 changed files with 13 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/webclient/select2.scss
+13 -16
View File
@@ -6,12 +6,12 @@
.select2-container .select2-choice {
background-color: $dropdown-bg;
background-image: var(--Select2Choice-background-image, linear-gradient(to top, #eee 0%, #fff 50%));
color: var(--Select2Choice-color, #444);
background-image: var(--select2-background-image, linear-gradient(to top, #eee 0%, #fff 50%));
color: var(--select2-color, #444);
}
.select2-container.select2-drop-above .select2-choice {
background-image: var(--Select2Choice__DropAbove-background-image, linear-gradient(to top, #eee 0%, #fff 90%));
background-image: var(--select2__dropAbove-background-image, linear-gradient(to top, #eee 0%, #fff 90%));
}
.select2-drop-mask {
@@ -24,45 +24,42 @@
}
.select2-container:not(.select2-dropdown-open) .select2-choice .select2-arrow {
background: var(--Select2__Arrow-background, linear-gradient(to top, #ccc 0%, #eee 60%));
background: var(--select2__arrow-background, linear-gradient(to top, #ccc 0%, #eee 60%));
}
.select2-search input,
html[dir="rtl"] .select2-search input,
.select2-search input.select2-active {
background-color: var(--Select2__SearchInput-background-color, #fff);
background-color: var(--select2__searchInput-background-color, #fff);
background-repeat: no-repeat;
}
.select2-search input {
background-image: var(--Select2__SearchInput-background-image, url('/web/static/lib/select2/select2.png'), linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0);
background-image: var(--select2__searchInput-background-image, url('/web/static/lib/select2/select2.png'), linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0);
background-position: 100% -22px;
}
html[dir="rtl"] .select2-search input {
background-image: var(--Select2__SearchInput-background-image, url('/web/static/lib/select2/select2.png'), linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0);
background-image: var(--select2__searchInput-background-image, url('/web/static/lib/select2/select2.png'), linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0);
background-position: -37px -22px;
}
.select2-search input.select2-active {
background-image: var(--Select2__SearchInput--active-background-image, url('/web/static/lib/select2/select2-spinner.gif'), linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0);
background-image: var(--select2__searchInput-background-image--active, url('/web/static/lib/select2/select2-spinner.gif'), linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0);
background-position: 100%;
}
.select2-dropdown-open .select2-choice {
box-shadow: var(--Select2Choice-box-shadow, 0 1px 0 #fff inset);
box-shadow: var(--select2-box-shadow, 0 1px 0 #fff inset);
}
.select2-results .select2-highlighted {
background: $o-brand-primary;
color: var(--Select2__ResultsHighlighted-color, #fff);
color: var(--select2__resultsHighlighted-color, #fff);
}
.select2-results {
.select2-no-results,
.select2-results .select2-searching,
.select2-results .select2-ajax-error,
.select2-results .select2-selection-limit {
.select2-no-results, .select2-searching, .select2-ajax-error, .select2-selection-limit {
background: $dropdown-bg;
color: $o-main-text-color;
}
@@ -76,7 +73,7 @@ html[dir="rtl"] .select2-search input {
.select2-container .select2-choice .select2-arrow,
html[dir="rtl"] .select2-container .select2-choice .select2-arrow,
.select2-search input {
border-color: var(--Select2-border-color, #aaa);
border-color: var(--select2-border-color, #aaa);
}
.select2-drop-active,
@@ -86,5 +83,5 @@ html[dir="rtl"] .select2-container .select2-choice .select2-arrow,
.select2-dropdown-open.select2-drop-above .select2-choice,
.select2-dropdown-open.select2-drop-above .select2-choices,
.form-control.select2-container.select2-dropdown-open {
border-color: var(--Select2Active-border-color, #5897fb);
border-color: var(--select2-border-color--active, #5897fb);
}