mirror of
https://github.com/OCA/web.git
synced 2025-02-22 13:21:25 +02:00
11dff8f4c9
On screens with less than 768px content is limited to 2 columns. On mobile field labels have their own line. Fix elements width for XS screens
66 lines
2.3 KiB
Plaintext
66 lines
2.3 KiB
Plaintext
/* Copyright 2016 Ponto Suprimentos Ltda.
|
|
* License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */
|
|
|
|
.o_form_view {
|
|
> .o_form_sheet_bg > .o_form_sheet {
|
|
@media (max-width: @screen-xs-max) {
|
|
min-width: 0px; // allow thinner form_sheet width for smaller screens
|
|
}
|
|
}
|
|
@media (max-width: @screen-xs) {
|
|
.o_form_field > .o_form_input_dropdown {
|
|
width: 80%;
|
|
}
|
|
}
|
|
.o_group {
|
|
&.o_inner_group > tbody > tr > td {
|
|
// prevent td content from breaking into lines
|
|
white-space: nowrap;
|
|
.note-editor > .note-toolbar {
|
|
// prevent wysiwyg editor buttons from expanding the screen
|
|
white-space: initial;
|
|
}
|
|
}
|
|
// reduce form maximum columns for smaller screens
|
|
@media (max-width: @screen-xs-max) {
|
|
.o-generate-groups(12);
|
|
.o-generate-groups(@n, @i: 1) when (@i =< @n) {
|
|
.o_group_col_@{i} {
|
|
width: 100%;
|
|
}
|
|
.o-generate-groups(@n, @i + 1);
|
|
}
|
|
}
|
|
// break field label into a separate line from field on small screens
|
|
@media (max-width: @screen-xs) {
|
|
&.o_inner_group {
|
|
display: block;
|
|
> tbody {
|
|
display: block;
|
|
> tr {
|
|
margin-top: 8px;
|
|
.o-flex-display();
|
|
.o-flex-flow(row, wrap);
|
|
> td {
|
|
.o-flex(1, 0, auto);
|
|
padding: 0;
|
|
display: block;
|
|
padding: 0;
|
|
// odoo adds a `style="width: 100%"` by javascript
|
|
// directly on the tag so we need `!important` here:
|
|
width: auto!important;
|
|
max-width: 100%;
|
|
&.o_td_label {
|
|
border-right: 0;
|
|
// keep 6% space on line to fit checkboxes
|
|
// see above about `!important`
|
|
width: 94%!important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|