muk_web/muk_web_theme/static/src/scss/form_view.scss

/**********************************************************************************
*
*    Copyright (c) 2017-2019 MuK IT GmbH.
*
*    This file is part of MuK Backend Theme 
*    (see https://mukit.at).
*
*    This program is free software: you can redistribute it and/or modify
*    it under the terms of the GNU Lesser General Public License as published by
*    the Free Software Foundation, either version 3 of the License, or
*    (at your option) any later version.
*
*    This program is distributed in the hope that it will be useful,
*    but WITHOUT ANY WARRANTY; without even the implied warranty of
*    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
*    GNU Lesser General Public License for more details.
*
*    You should have received a copy of the GNU Lesser General Public License
*    along with this program. If not, see <http://www.gnu.org/licenses/>.
*
**********************************************************************************/

.o_form_view {
    .o_form_sheet_bg {
        background: $o-webclient-background-color;
        border-bottom: 1px solid gray('300');
        > .o_form_sheet {
        	@include mk-container-widths();
         	background-color: $o-view-background-color;
            border: 1px solid gray('400');
            box-shadow: 0 5px 20px -15px black;
            max-width: calc(100% - #{$o-horizontal-padding*2});
        }
        .o_form_statusbar {
            position: sticky;
            z-index: 1;
            top: 0;
        }
        .oe_button_box {
        	.btn.oe_stat_button > .o_button_icon {
        		color: $o-brand-odoo; 
        	}
       	}
        .oe_title {
            max-width: 100%;
            width: initial;
            span.o_field_widget {
                max-width: 100%;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                width: initial;
            }
        }
        .o_notebook {
            .nav-tabs {
                overflow-x : auto;
    			overflow-y: hidden;
                flex-flow: nowrap;
                .nav-item {
                    white-space: nowrap;
                }
            }
        }
    }
   	@include media-breakpoint-down(sm) {			
	    .o_form_sheet, .oe_chatter {
	        min-width: 100% !important;
    		max-width: 100% !important;
			margin-top: 15px !important;
	    }
		.o_group {
			@for $i from 1 through $o-form-group-cols {
				.o_group_col_#{$i} {
					width: 100% !important;
				}
			}
			.o_field_widget.o_text_overflow {
				width: auto !important;
			}
		}
	    .o_statusbar_buttons_dropdown {
	        border: {
	            bottom: 0;
	            radius: 0;
	            top: 0;
	        }
	        height: 100%;
	    }
	    .o_statusbar_buttons > .btn {
	        border-radius: 0;
	        border: 0;
	        width: 100%;
	        margin-bottom: 0.2rem;
	        &:last-child {
	            margin-bottom: 0;
	        }
	    }
	    .o_statusbar_status {
	        .o_arrow_button:first-child::before {
	            content: none;
	            display: none;
	        }
	    }
	    .app_settings_block {
	        .row {
	            margin: 0;
	        }
	    }
	    .o_notebook .nav-tabs {
            &::-webkit-scrollbar {
                display: none;
            }
        }
        .o_cp_buttons {
            width: 100%;
            div, .o-kanban-button-new {
                width: 100%;
            }
        }
	}
	@include media-breakpoint-down(xs) {
    	.oe_title {
           	width: 100% !important;
            max-width: 100% !important;
        }
	}
}

.mk_chatter_position_sided {
	@include media-breakpoint-up(xxl, $o-extra-grid-breakpoints) {
        .o_form_view:not(.o_form_nosheet) {
            display: flex;
            flex-flow: row nowrap;
            height: 100%;
            .o_form_sheet_bg {
			    min-width: $mk-form-min-width;
                flex: 1 1 auto;
                overflow: auto;
            }
            > .o_chatter {
				flex: 1 1 auto;
				overflow: auto;
				min-width: $mk-chatter-min-width;
				max-width: $mk-chatter-max-width;
				border-left: 1px solid gray('400');
            }
        }
    }
}