web/web_responsive/static/src/css/web_responsive.scss

/* Copyright 2018 Tecnativa - Jairo Llopis
 * License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */

@mixin full-screen-dropdown {
    border: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    height: calc(100vh - #{$o-navbar-height});
    max-height: calc(100vh - #{$o-navbar-height});
    position: fixed;
    width: 100vw;
    z-index: 100;
    // Inline style will override our `top`, so we need !important here
    top: $o-navbar-height !important;
    transform: none !important;
}

// Main navbar (with apps menu, user menu, debug menu...)
@include media-breakpoint-down(sm) {
    .o_main_navbar {
        // This allows to have a sane layout for mobiles
        display: flex;

        // Remove clutter to only have small icons that fit in a small screen
        > .dropdown {
            display: flex;

            .navbar-toggler {
                color: white;
            }

            .o_menu_sections,
            .o_menu_systray,
            {
                padding: 0;
            }
        }

        // Whitespace before systray icons
        .o_menu_systray {
            margin-left: auto;
        }

        // Hide big things
        .o_menu_brand,
        .o_menu_sections,
        .oe_topbar_name,
        {
            display: none;
        }

        // Fix toggler button padding
        .o-menu-toggle {
            cursor: pointer;
            padding: 0 $o-horizontal-padding;
        }

        // Custom fullscreen layout when showing submenus
        .o_menu_sections.show {
            @include full-screen-dropdown();
            background-color: $dropdown-bg;

            .show {
                display: flex;
                flex-direction: column;

                .dropdown-menu {
                    margin-left: 1rem;
                    min-width: auto;
                    width: calc(100vw - 2rem);
                }
            }

            > li,
            .o_menu_entry_lvl_1,
            .o_menu_header_lvl_1,
            {
                // Homogeneous background color
                background-color: $dropdown-bg;
                color: $dropdown-link-color;

                &:hover {
                    background-color: $dropdown-link-hover-bg;
                    color: $dropdown-link-hover-color;
                }

                // Disable the .o-no-caret class effect, to display the caret
                &.o-no-caret::after {
                    content: "";
                }

                // Fix a strange glitch leaving headers invisible
                .dropdown-header {
                    color: $dropdown-header-color;
                }
            }
        }

        // Custom fullscreen layout for systray items
        .o_mail_systray_dropdown.show {
            @include full-screen-dropdown();

            // Fix stretchy images
            .o_mail_preview_image {
                align-items: center;
                display: flex;
                flex-direction: row;

                img {
                    display: block;
                    height: auto;
                }
            }
        }

        // Higher height for dropdown items, for those with sausage fingers
        .dropdown-menu .dropdown-item {
            padding: {
                bottom: 0.5rem;
                top: 0.5rem;
            }
        }
    }
}

// Iconized full screen apps menu
.o_menu_apps {

    .search-input:focus {
        border-color: $o-brand-primary;
    }

    .dropdown-menu.show {
        @include full-screen-dropdown();

        // Display apps in a grid
        align-content: flex-start;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;

        @include media-breakpoint-up(lg) {
            padding: {
                left: 20vw;
                right: 20vw;
            }
        }

        .o_app {
            align-items: center;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;

            // Size depends on screen
            width: 33.33333333%;
            @include media-breakpoint-up(sm) {
                width: 25%;
            }
            @include media-breakpoint-up(md) {
                width: 16.6666666%;
            }
        }

        // Hide app icons when searching
        .has-results ~ .o_app {
            display: none;
        }

        .o-app-icon {
            height: auto;
            max-width: 7rem;
            width: 100%;
        }

        // Search input for menus
        .form-row {
            width: 100%;
        }

        .o-menu-search-result {
            align-items: center;
            background-position: left;
            background-repeat: no-repeat;
            background-size: contain;
            cursor: pointer;
            display: flex;
            padding-left: 3rem;
            white-space: normal;
        }

        // Allow to scroll only on results, keeping static search box above
        .search-container.has-results {
            height: 100%;

            .search-input {
                height: 3em;
            }

            .search-results {
                height: calc(100% - 3em);
                overflow: auto;
            }
        }
    }
}

// Scroll all but top bar
html .o_web_client .o_main .o_main_content {
    @include media-breakpoint-down(sm) {
        overflow: auto;

        .o_content {
            overflow: initial;
        }
    }
}

// Control panel (breadcrumbs, search box, buttons...)
@include media-breakpoint-down(sm) {
    .o_control_panel {
        // Arrange buttons to use space better
        .breadcrumb,
        .o_cp_buttons,
        .o_cp_left,
        .o_cp_right,
        .o_cp_searchview,
        {
            flex: 1 1 100%;
            @include media-breakpoint-up(md) {
                flex-basis: 50%;
            }
        }

        .breadcrumb {
            flex-basis: 80%;
        }

        .o_cp_searchview,
        .o_cp_right,
        {
            flex-basis: 10%;
        }

        .o_cp_left {
            flex-basis: 50%;
            white-space: nowrap;
        }

        .o_cp_pager {
            white-space: nowrap;
        }

        // Hide all but 2 last breadcrumbs, and render 2nd-to-last as arrow
        .breadcrumb-item {
            &:not(.active) {
                padding-left: 0;
            }

            &::before {
                content: none;
                padding-right: 0;
            }

            &:nth-last-of-type(1n+3) {
                display: none;
            }

            &:nth-last-of-type(2) {
                &::before {
                    color: var(--primary);
                    content: "\f048"; // .fa-step-backward
                    cursor: pointer;
                    font-family: FontAwesome;
                }

                a {
                    display: none;
                }
            }
        }

        // Ellipsize long breadcrumbs
        .breadcrumb {
            max-width: 100%;
            text-overflow: ellipsis;
        }

        // Empty sidebar should not break layout
        .o_cp_sidebar:blank {
            display: none;
        }

        // In case you install `mail`, there is a mess on BS vs inline styles
        // we need to fix
        .o_cp_buttons .btn.d-block:not(.d-none) {
            display: inline-block !important;
        }

        // Dropdown with buttons to switch the view type
        .o_cp_switch_buttons.show {
            .dropdown-menu {
                align-content: center;
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                padding: 0;

                .btn {
                    border: {
                        bottom: 0;
                        radius: 0;
                        top: 0;
                    }
                }
            }
        }
    }
}

// Normal views
.o_content, .modal-content {
    max-width: 100%;

    // Form views
    .o_form_view {
        .o_form_sheet {
            max-width: calc(100% - 32px);
        }

        @include media-breakpoint-down(sm) {
            min-width: auto;

            // Avoid overflow on forms with title and/or button box
            .oe_button_box,
            .oe_title,
            {
                max-width: 100%;
            }

            // Avoid overflow on modals
            .o_form_sheet {
                min-width: auto;
            }

            // Render website inputs properly in phones
            .o_group .o_field_widget.o_text_overflow {
                // Overrides another !important
                width: auto !important;
            }

            // Make all input groups vertical
            .o_group_col_6 {
                width: 100%;
            }

            // Statusbar buttons dropdown for mobiles
            .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 {
                // Arrow from rightmost button exceeds allowed width
                .o_arrow_button:first-child::before {
                    content: none;
                    display: none;
                }
            }

            // Full width in form sheets
            .o_form_sheet,
            .oe_chatter,
            {
                min-width: auto;
                max-width: 98%;
            }

            // Settings pages
            .app_settings_block {
                .row {
                    margin: 0;
                }
            }
        }
    }

    // Sided chatter, if user wants
    .o_chatter_position_sided & {
        @include media-breakpoint-up(md) {
            .o_form_view:not(.o_form_nosheet) {
                display: flex;
                flex-flow: row nowrap;
                height: 100%;

                .o_form_sheet_bg {
                    flex: 1 1 60%;
                    overflow: auto;
                }

                .o_chatter {
                    border-left: 1px solid gray('400');
                    flex: 1 1 40%;
                    max-width: 50%;
                    min-width: 30%;
                    overflow: auto;
                }
            }
        }
    }
}