362 lines
11 KiB
SCSS
362 lines
11 KiB
SCSS
|
|
.o_legacy_form_view {
|
|
@include media-breakpoint-up(md) {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
min-height: 100%;
|
|
}
|
|
|
|
.o_statusbar_status .o_arrow_button:not(.disabled) {
|
|
@extend .btn-light;
|
|
|
|
&:hover, &:focus, &:active {
|
|
&:after {
|
|
border-left-color: $o-btn-light-background-hover;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Sheet
|
|
.o_form_sheet_bg {
|
|
flex: 1 0 auto;
|
|
background-color: $o-webclient-background-color;
|
|
border-bottom: 1px solid $border-color;
|
|
|
|
> .o_form_sheet {
|
|
@include make-container();
|
|
@include make-container-max-widths();
|
|
|
|
background-color: $o-view-background-color;
|
|
border: 1px solid $border-color;
|
|
box-shadow: 0 5px 20px -15px rgba(#000, 0.4);
|
|
margin: $o-sheet-vpadding*0.2 auto;
|
|
@include media-breakpoint-up(md) {
|
|
margin: $o-sheet-vpadding*0.5 auto;
|
|
}
|
|
padding: $o-sheet-vpadding;
|
|
@include o-form-sheet-inner-right-padding;
|
|
@include o-form-sheet-inner-left-padding;
|
|
|
|
// Selection
|
|
> .o_selection {
|
|
float: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Fields
|
|
.o_td_label .o_form_label:not(.o_status), .o_checkbox_optional_field > .o_form_label {
|
|
min-height: 23px;
|
|
}
|
|
td:not(.o_field_cell) .o_form_uri > span:first-child {
|
|
display: inline-block;
|
|
padding: 1px 0;
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
// Title & avatar
|
|
.oe_title {
|
|
color: $headings-color;
|
|
@include media-breakpoint-up(vsm, $o-extra-grid-breakpoints) {
|
|
padding-right: $o-innergroup-rpadding;
|
|
}
|
|
h1 {
|
|
min-height: 55px;
|
|
}
|
|
h2 {
|
|
min-height: 42px;
|
|
}
|
|
}
|
|
|
|
.oe_avatar + .oe_title {
|
|
padding-right: $o-avatar-size + 10;
|
|
}
|
|
|
|
// Groups
|
|
.o_group {
|
|
// all groups take width 100% in mobile
|
|
@mixin o-generate-groups($n) {
|
|
@for $i from 1 through $n {
|
|
.o_group_col_#{$i} {
|
|
@include media-breakpoint-down(lg) {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@include o-generate-groups($o-form-group-cols);
|
|
|
|
&.o_inner_group {
|
|
> tbody > tr > td {
|
|
padding: 0 $o-innergroup-rpadding 0 0;
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-up(vsm, $o-extra-grid-breakpoints) {
|
|
.o_field_widget {
|
|
&.o_text_overflow {
|
|
width: 1px!important; // hack to make the table layout believe it is a small element (so that the table does not grow too much) ...
|
|
min-width: 100%; // ... but in fact it takes the whole table space
|
|
}
|
|
}
|
|
|
|
.o_form_label {
|
|
margin-bottom: $o-form-spacing-unit;
|
|
}
|
|
}
|
|
@include media-breakpoint-down(lg) {
|
|
&.o_label_nowrap .o_form_label {
|
|
white-space: normal;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Labels
|
|
.o_form_label {
|
|
&.o_form_label_empty, &.o_form_label_false, &.o_form_label_readonly {
|
|
opacity: 0.5;
|
|
font-weight: $font-weight-normal;
|
|
}
|
|
@include media-breakpoint-down(md) {
|
|
font-size: $o-font-size-base-touch;
|
|
}
|
|
}
|
|
|
|
// Notebooks
|
|
.o_notebook {
|
|
> .o_notebook_headers {
|
|
@include o-form-sheet-negative-margin;
|
|
|
|
> .nav.nav-tabs {
|
|
@include o-form-sheet-inner-left-padding;
|
|
|
|
> .nav-item {
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
|
|
> .tab-content {
|
|
border-bottom: 1px solid map-get($grays, '400');
|
|
|
|
> .tab-pane {
|
|
|
|
> :first-child {
|
|
// Reset margin to 0 and use tab-pane's padding
|
|
// to define the distance between panel and content
|
|
margin-top: 0;
|
|
|
|
// These elements will appear attached to the tabs
|
|
&.o_field_html {
|
|
border: none;
|
|
|
|
.note-editor.panel {
|
|
border: none;
|
|
}
|
|
.note-toolbar.panel-heading {
|
|
@include o-form-sheet-inner-left-padding;
|
|
@include o-form-sheet-inner-right-padding;
|
|
border-top: none;
|
|
padding-top: 0;
|
|
background: white;
|
|
}
|
|
|
|
.note-editing-area, .o_readonly {
|
|
padding: $card-spacer-y $card-spacer-x;
|
|
@include o-form-sheet-inner-left-padding;
|
|
@include o-form-sheet-inner-right-padding;
|
|
}
|
|
|
|
.note-editable.panel-body {
|
|
padding: 0;
|
|
}
|
|
|
|
// If immediatly followed by an .clearfix element, the note-editor it's the 'only'
|
|
// tab's element. Reset margins to push the bar at the bottom.
|
|
+ .clearfix:last-child {
|
|
margin-bottom: -$o-horizontal-padding - $o-sheet-vpadding - $o-form-spacing-unit;
|
|
}
|
|
}
|
|
|
|
// Full width on first x2many or on second x2many if first is invisible
|
|
&.o_field_x2many.o_field_x2many_list,
|
|
&.o_field_widget.o_invisible_modifier + .o_field_x2many.o_field_x2many_list {
|
|
display: block;
|
|
width: auto;
|
|
@include o-form-sheet-negative-margin;
|
|
margin-top: -$o-horizontal-padding;
|
|
|
|
// use original padding-left for handle cell in editable list
|
|
tr > :first-child.o_handle_cell {
|
|
padding-left: 0.3rem;
|
|
}
|
|
tr > :first-child {
|
|
@include o-form-sheet-inner-left-padding;
|
|
}
|
|
tr > :last-child {
|
|
@include o-form-sheet-inner-right-padding;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&:last-child > .tab-content {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
// Notebooks inside form without sheet tag
|
|
&.o_form_nosheet .o_notebook {
|
|
> .o_notebook_headers {
|
|
@include o-form-nosheet-negative-margin;
|
|
> .nav.nav-tabs {
|
|
@include o-form-nosheet-inner-left-padding;
|
|
}
|
|
}
|
|
> .tab-content > .tab-pane > :first-child {
|
|
// These elements will appear attached to the tabs
|
|
&.o_field_x2many.o_field_x2many_list {
|
|
@include o-form-nosheet-negative-margin;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Notebooks for small screen
|
|
@include media-breakpoint-down(md) {
|
|
.o_notebook .o_notebook_headers {
|
|
overflow-x: auto;
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.nav.nav-tabs {
|
|
flex-flow: row nowrap;
|
|
}
|
|
}
|
|
.o_cp_buttons {
|
|
width: 100%;
|
|
div, .o-kanban-button-new {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
// One2Many List views
|
|
.o_field_widget .o_list_table {
|
|
&.table-striped {
|
|
> tbody {
|
|
> tr:not(.o_data_row) > td {
|
|
border-top: none;
|
|
}
|
|
}
|
|
// Show "border" if tfoot has content only
|
|
> tfoot > tr {
|
|
box-shadow: inset 0 1px 0 map-get($grays, '300');
|
|
> td {
|
|
border:none;
|
|
|
|
&:empty {
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Translate icon
|
|
.o_field_translate {
|
|
padding-right: 0;
|
|
}
|
|
|
|
// Specific style classes
|
|
.o_group.o_inner_group.oe_subtotal_footer {
|
|
border-top: 1px solid map-get($grays, '300');
|
|
.oe_subtotal_footer_separator {
|
|
border-top: 1px solid map-get($grays, '300');
|
|
}
|
|
}
|
|
|
|
// Status Bar
|
|
.o_form_statusbar {
|
|
> .o_statusbar_status > .o_arrow_button {
|
|
font-weight: $font-weight-bold;
|
|
|
|
// Last element at the right should respect overall padding
|
|
&:first-of-type {
|
|
padding-right: $o-horizontal-padding;
|
|
}
|
|
}
|
|
// Match the status bar button styles with rest of the buttons in touch device
|
|
@include media-breakpoint-down(md) {
|
|
> .o_statusbar_buttons > .btn {
|
|
margin: 0;
|
|
padding: $o-touch-btn-padding;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.o_xxl_form_view {
|
|
flex-flow: row nowrap;
|
|
height: 100%;
|
|
|
|
> .o_form_sheet_bg {
|
|
flex: 1 1 auto; // Side chatter is disabled if this has to shrink but this was added for safety
|
|
width: $o-form-sheet-min-width + 2 * $o-horizontal-padding;
|
|
// max-width: map-get($container-max-widths, xl) + 2 * $o-horizontal-padding; // would be logical but breaks no-chatter form views
|
|
padding: 0 $o-horizontal-padding;
|
|
overflow: auto;
|
|
border-bottom: none;
|
|
|
|
> .o_form_statusbar, > .alert {
|
|
margin-left: -$o-horizontal-padding;
|
|
margin-right: -$o-horizontal-padding;
|
|
}
|
|
|
|
> .o_form_sheet {
|
|
width: 100%;
|
|
max-width: map-get($container-max-widths, xl);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Overriden style when form view in modal
|
|
.modal .modal-dialog {
|
|
.o_legacy_form_view {
|
|
@include media-breakpoint-down(lg) {
|
|
.o_group.o_inner_group > tbody > tr > td.o_td_label {
|
|
min-width: 100px;
|
|
}
|
|
}
|
|
}
|
|
&.modal-sm .o_legacy_form_view {
|
|
.o_group {
|
|
@include form-break-table;
|
|
}
|
|
}
|
|
}
|
|
|
|
// XXS form view specific rules
|
|
.o_legacy_form_view.o_xxs_form_view {
|
|
.o_group {
|
|
// Target XXS form view on mobile devices in portrait mode
|
|
@include media-breakpoint-down(md) {
|
|
&.o_inner_group:not(.oe_subtotal_footer) > tbody > tr > td {
|
|
> .o_field_widget {
|
|
margin-bottom: $o-form-spacing-unit * 4;
|
|
}
|
|
}
|
|
}
|
|
.o_td_label .o_form_label {
|
|
font-weight: $font-weight-normal;
|
|
}
|
|
}
|
|
|
|
.o_form_label {
|
|
margin-top: 3px;
|
|
font-size: $o-label-font-size-factor * $o-font-size-base-touch;
|
|
font-weight: $font-weight-normal;
|
|
color: $o-brand-secondary;
|
|
}
|
|
}
|