audrius/web
1
0
Fork 1
mirror of https://github.com/OCA/web.git synced 2025-02-22 13:21:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

[ADD] new module web_theme_classic to identify better buttons and fields in Odoo form views

Browse Source
This commit is contained in:
Sylvain LE GAL
2022-10-12 18:51:51 +02:00
parent 413a747181
commit 915090d6a5
11 changed files with 147 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
web_theme_classic/static/src/scss/web_theme_classic.scss Normal file
View File

@@ -0,0 +1,92 @@
/***********************************************************
Variables
************************************************************/
$input-border-color: #cccccc;
$input-border-color-focus: #71639e;
$input-background-color-required: #d2d2ff;
$input-color-placeholder-required: #6c757d;
$button-border-color: #dee2e6;
/***********************************************************
Form View : Handle Fields Borders
************************************************************/
.o_input,
.o_field_html > .note-editable {
/* Add border for all editable fields */
border: 1px solid $input-border-color !important;
border-radius: 3px;
/* add darker border on focus */
&:focus {
border-color: $input-border-color-focus !important;
}
}
.o_field_many2many_selection {
.o_input {
/* Prevent to have double border for many2many tags input fields */
border: 0px solid !important;
}
}
/***********************************************************
Form View : Handle Button Borders
************************************************************/
.btn-secondary,
.btn-light {
border-color: $button-border-color;
}
.btn-light {
&:hover {
border-color: $button-border-color;
}
}
/***********************************************************
Form View : Handle Background for required fields
************************************************************/
.o_required_modifier {
.o_input {
/* Add background for all editable and required fields */
background-color: $input-background-color-required !important;
/* darker placeholder as the background is darker */
&::placeholder {
color: $input-color-placeholder-required;
}
}
}
.o_required_modifier.o_field_selection {
/* Specific case for field selection */
background-color: $input-background-color-required !important;
}
/***********************************************************
Search View : Search Bar Input
************************************************************/
div.o_searchview[role="search"] {
/* Add border for the searchable zone */
border: 1px solid $input-border-color !important;
border-radius: 3px;
/* add darker border when input inside has focus */
&:focus-within {
border-color: $input-border-color-focus !important;
}
}
/* Adjust padding to avoid items to be sticked to borders */
div.o_searchview_facet[role="img"] {
padding-left: 2px;
}
i.o_searchview_icon[role="img"] {
padding-right: 2px;
}