diff options
Diffstat (limited to 'addons/web/static/src/less/fields.less')
| -rw-r--r-- | addons/web/static/src/less/fields.less | 367 |
1 files changed, 367 insertions, 0 deletions
diff --git a/addons/web/static/src/less/fields.less b/addons/web/static/src/less/fields.less new file mode 100644 index 00000000000..329b4f62fbd --- /dev/null +++ b/addons/web/static/src/less/fields.less @@ -0,0 +1,367 @@ +// +// This file regroups all the rules which apply to field widgets wherever they +// are in the DOM, in both community and enterprise versions. +// + +// Invalid +.o_field_invalid { + &.o_input, .o_input, &.o_form_label { + color: @brand-danger!important; + border-color: @brand-danger!important; // enterprise o_required_modifier rule overrides this without !important + } +} + +// Empty +.o_field_empty { + display: none!important; +} + +// Numbers +.o_field_number { + white-space: nowrap; +} + +//------------------------------------------------------------------------------ +// Fields +//------------------------------------------------------------------------------ + +.o_field_widget { + display: inline-block; + + // Block fields + &.note-editor, &.oe_form_field_html, &.oe_form_field_html_text, &.oe_form_field_text, &.o_view_manager_content, &.o_field_domain { + display: block; + } + + // Flex fields (inline) + &.o_field_many2one, &.o_field_radio, &.o_field_many2manytags, &.o_field_percent_pie, &.o_field_monetary, &.o_field_binary_file { + @media (min-width: @screen-sm-min) { + .o-inline-flex-display(); + } + > span, > button { + .o-flex(0, 0, auto); + } + } + + // Dropdowns input (many2one, ...) + .o_input_dropdown { + .o-flex(1, 0, auto); + position: relative; + width: 100%; + + > input { + height: 100%; + padding-right: 15px; + cursor: pointer; + } + + .o_dropdown_button { + .o-position-absolute(0, 0); + pointer-events: none; + &:after { + .o-caret-down; + } + } + } + + // Input in field + input[type="text"] { + display: inline-block; + } + + // Text + &.o_field_text, &.oe_form_field_text .oe_form_text_content { + width: 100%; + white-space: pre-wrap; + } + + // Monetary + &.o_field_monetary { + &.o_input { + .o-align-items(baseline); + + > input { + width: 100px; + .o-flex(1, 0, auto); + } + } + } + + // Many2many tags + &.o_field_many2manytags { + .o-flex-flow(row, wrap); + .o-align-items(baseline); + + > .o_field_widget { + .o-flex(1, 0, 100px); + position: initial; + max-width: 100%; + } + + > .badge { + .o-flex(0, 0, auto); + border: 0; + font-size: 12px; + color: white; + cursor: pointer; + + &.o_tag_color_0 { background-color: #4D4D4D; } + &.o_tag_color_1 { background-color: #61BD4F; } + &.o_tag_color_2 { background-color: #F2D600; } + &.o_tag_color_3 { background-color: #FFAB4A; } + &.o_tag_color_4 { background-color: #EB5A46; } + &.o_tag_color_5 { background-color: #875A7B; } + &.o_tag_color_6 { background-color: #0079BF; } + &.o_tag_color_7 { background-color: #00C2E0; } + &.o_tag_color_8 { background-color: #4CD98E; } + &.o_tag_color_9 { background-color: #FF80CE; } + &.o_tag_color_10 { background-color: #B6BBBF; } + + > .o_badge_text { + .o-text-overflow(inline-block); + max-width: 200px; + } + + > ul { + @colored-tag-width: 45px; + width: 5*@colored-tag-width + 3px; + > li { + float: left; + color: black; + > span { + border-radius: 6px; + width: @colored-tag-width; + height: 30px; + display: inline-block; + border: 2px solid white; + cursor: pointer; + padding: 0; + + &:hover { + opacity: 0.8; + } + } + } + > li:last-child { + margin-top: 7px; + cursor: auto; + } + } + + .o_delete { + cursor: pointer; + } + } + } + + // Stars + &.o_priority { + display: inline-block; + padding: 0; + margin: 0; + vertical-align: middle; + > .o_priority_star { + display: inline-block; + font-size: 1.35em; + &:hover, &:focus { + text-decoration: none; + outline: none; + } + + + .o_priority_star { + padding-left: 5px; + } + + &.fa-star-o { + color: @odoo-main-color-muted; + } + &.fa-star { + color: gold; + } + } + } + + // Status + &.o_selection .o_status { + display: inline-block; + height: 12px; + width: 12px; + border-radius: 6px; + vertical-align: middle; + + background-color: @odoo-brand-secondary; + + &.o_status_green { + background-color: @brand-success; + } + &.o_status_red { + background-color: @brand-danger; + } + } + + // Specific success color for toggle_button widget + .fa.o_toggle_button_success { + color: @brand-success; + } + + // Many2One + &.o_field_many2one { + .o-inline-flex-display(); + > span, > button { + .o-flex(0, 0, auto); + } + } + + // Handle widget + &.o_row_handle { + cursor: ns-resize; + } + + // Radio buttons + &.o_field_radio { + .o_radio_input { + outline: none; + } + + .o_radio_item { + .o-flex(0, 0, auto); + .o-flex-display(); + .o-align-items(center); + + > input { + .o-flex(0, 0, auto); + margin: 0 @odoo-form-spacing-unit 0 0; + } + > label { + margin: 0; + } + } + + &.o_horizontal { + .o_radio_item { + margin-right: @odoo-form-spacing-unit * 2; + } + } + + &.o_vertical { + .o-flex-flow(column, nowrap); + .o_radio_item { + margin-bottom: @odoo-form-spacing-unit; + } + } + } + + // Percent pie + &.o_field_percent_pie { + .o-align-items(center); + + > .o_pie { + position: relative; + margin-right: 10px; + border-radius: 100%; + overflow: hidden; + background-color: @odoo-brand-optional; + + &:after { // Outside pie border to go over border-radius irregularities + content: " "; + .o-position-absolute(0, 0); + width: 100%; + height: 100%; + border-radius: 100%; + } + + .o_mask { + .o-position-absolute(0, 0); + .o-transform-origin(0); + width: 50%; + height: 100%; + background-color: @odoo-view-background-color; + &.o_full { + background-color: inherit; + } + } + + .o_pie_value { + .o-flex-display(); + .o-justify-content(center); + .o-align-items(center); + + border-radius: 100%; + + font-weight: 700; + color: @odoo-brand-primary; + } + } + } + + // Ace editor + &.o_ace_view_editor { + width: 100%; + .ace-view-editor { + height: 300px; + padding: 0 1em; + } + } + + // Image + &.o_field_image { + position: relative; + + .o_form_image_controls { + .o-position-absolute(0, 0); + width: 100%; + + color: white; + background-color: @odoo-brand-optional; + opacity: 0; + transition: opacity ease 400ms; + + > .fa { + margin: 5px; + cursor: pointer; + } + } + @media (max-width: @screen-xs-min) { + .o_form_image_controls{ + position: initial; + opacity: 1; + > .fa{ + width: 50%; + padding: 6px; + margin: 0px; + text-align: center; + &.o_select_file_button{ + background: @odoo-brand-optional; + } + &.o_clear_file_button{ + background: @brand-danger; + } + } + } + } + + &:hover .o_form_image_controls { + opacity: 0.8; + } + } + + // Input loading/file + .o_form_binary_progress, .o_hidden_input_file .o_input_file { + display: none; + } + + // Domain + &.o_field_domain { + > .o_field_domain_panel { + margin-top: 8px; + } + &.o_inline_mode.o_edit_mode { + position: relative; + + > .o_field_domain_panel { + .o-position-absolute(0, 0); + margin-top: 0; + } + } + } +} |