[MOV] web: select2, apply customization in its own file.
task-2710677 X-original-commit: 3390d09aca1a98842fcd1b0a4b5e5afc3ebc5f8b Part-of: odoo/odoo#105118
This commit is contained in:
Brieuc-brd
@@ -0,0 +1,90 @@
|
||||
//------------------------------------------------------------------------------
|
||||
// Select2
|
||||
//------------------------------------------------------------------------------
|
||||
// Redefine select2 dropdown color values in variables to be easily handled.
|
||||
// eg. for the dark mode
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.select2-container.select2-drop-above .select2-choice {
|
||||
background-image: var(--Select2Choice__DropAbove-background-image, linear-gradient(to top, #eee 0%, #fff 90%));
|
||||
}
|
||||
|
||||
.select2-drop-mask {
|
||||
background-color: $o-view-background-color;
|
||||
}
|
||||
|
||||
.select2-drop {
|
||||
background-color: $dropdown-bg;
|
||||
color: $o-main-text-color;
|
||||
}
|
||||
|
||||
.select2-container:not(.select2-dropdown-open) .select2-choice .select2-arrow {
|
||||
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-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-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-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-position: 100%;
|
||||
}
|
||||
|
||||
.select2-dropdown-open .select2-choice {
|
||||
box-shadow: var(--Select2Choice-box-shadow, 0 1px 0 #fff inset);
|
||||
}
|
||||
|
||||
.select2-results .select2-highlighted {
|
||||
background: $o-brand-primary;
|
||||
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 {
|
||||
background: $dropdown-bg;
|
||||
color: $o-main-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-container .select2-choice,
|
||||
.select2-container.select2-drop-above .select2-choice,
|
||||
.select2-drop,
|
||||
.select2-drop.select2-drop-above,
|
||||
.select2-drop-auto-width,
|
||||
.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);
|
||||
}
|
||||
|
||||
.select2-drop-active,
|
||||
.select2-drop.select2-drop-above.select2-drop-active,
|
||||
.select2-container-active .select2-choice,
|
||||
.select2-container-active .select2-choices,
|
||||
.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);
|
||||
}
|
||||
@@ -363,91 +363,3 @@ b, strong {
|
||||
border-radius: 0;
|
||||
font-size: 1em; // Override 75% of .label
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Select2
|
||||
//------------------------------------------------------------------------------
|
||||
// Redefine select2 dropdown color values in variables to be easily handled.
|
||||
// eg. for the dark mode
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.select2-container.select2-drop-above .select2-choice {
|
||||
background-image: var(--Select2Choice__DropAbove-background-image, linear-gradient(to top, #eee 0%, #fff 90%));
|
||||
}
|
||||
|
||||
.select2-drop-mask {
|
||||
background-color: $o-view-background-color;
|
||||
}
|
||||
|
||||
.select2-drop {
|
||||
background-color: $dropdown-bg;
|
||||
color: $o-main-text-color;
|
||||
}
|
||||
|
||||
.select2-container:not(.select2-dropdown-open) .select2-choice .select2-arrow {
|
||||
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-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-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-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-position: 100%;
|
||||
}
|
||||
|
||||
.select2-dropdown-open .select2-choice {
|
||||
box-shadow: var(--Select2Choice-box-shadow, 0 1px 0 #fff inset);
|
||||
}
|
||||
|
||||
.select2-results .select2-highlighted {
|
||||
background: $o-brand-primary;
|
||||
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 {
|
||||
background: $dropdown-bg;
|
||||
color: $o-main-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-container .select2-choice,
|
||||
.select2-container.select2-drop-above .select2-choice,
|
||||
.select2-drop,
|
||||
.select2-drop.select2-drop-above,
|
||||
.select2-drop-auto-width,
|
||||
.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);
|
||||
}
|
||||
|
||||
.select2-drop-active,
|
||||
.select2-drop.select2-drop-above.select2-drop-active,
|
||||
.select2-container-active .select2-choice,
|
||||
.select2-container-active .select2-choices,
|
||||
.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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user