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

/**********************************************************************************
* 
*    Copyright (C) 2017 MuK IT GmbH
*
*    This program is free software: you can redistribute it and/or modify
*    it under the terms of the GNU Affero 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 Affero General Public License for more details.
*
*    You should have received a copy of the GNU Affero 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});
        }
       	.oe_button_box {
        	.btn.oe_stat_button > .o_button_icon {
        		color: $o-brand-odoo; 
        	}
        	.btn.oe_stat_button > .o_stat_info {
        		padding-right: 3px; 
        	}
        }
        .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;
	    }
	    .o_group_col_6 {
	        width: 100%;
	    }
	    .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;
            }
        }
	}
	@include media-breakpoint-down(xs) {
	    .oe_button_box {
	        float: none;
	    	display: block;
            border-radius: 0;
	    	text-align: right;
        	margin-top: -17px;
        	margin-bottom: $o-sheet-vpadding;
	    	margin-left: -$o-horizontal-padding;
            width: calc(100% + #{$o-horizontal-padding*2});
            border-top: 1px solid $o-form-lightsecondary;
            border-bottom: 1px solid $o-form-lightsecondary;
        	> .btn.oe_stat_button {
			    border: none;
			    background: none;
	            flex: 0 0 auto !important;
	            width: percentage(1/3) !important;
			    border-right: 1px solid $o-form-lightsecondary;
            }
            > .btn.o_button_more {
	            flex: 1 1 auto !important;
	            border-right: none;
            }
            > .o_dropdown_more {
	            flex: 0 0 auto !important;
	            width: percentage(1/3) !important;
            }
        	&, & + .oe_avatar {
	            + .oe_title {
	                width: 100%;
	            }
	        }
	    }
	}
}

.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 {
                border-left: 1px solid gray('400');
			    min-width: $mk-chatter-min-width;
			    max-width: $mk-chatter-max-width;
                flex: 1 1 auto;
                overflow: auto;
                .o_followers_title_box {
                	margin-left: 0;
                }
            }
        }
    }
}