|
|
/* 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; }
// 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; } }
max-width: 100%; }
// 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); overflow-x: scroll; }
// Sticky statusbar
.o_form_statusbar { position: sticky; top: 0; z-index: 1; }
// Support for long title (with ellipsis)
.oe_title { width: initial;
span { max-width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: initial; } span:active { white-space: normal; } }
@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; } }
.o_chatter { // Display send button on small screens
.o_thread_composer { padding-left: $o-mail-thread-avatar-size*0.5;
.o_composer_button_send { display: initial !important; // Forced in core
} .o_chatter_avatar { display: none; } }
.o_chatter_topbar { height: auto; flex-wrap: wrap-reverse;
> .o_topbar_right_area { flex: 1 0 auto; flex-wrap: wrap; max-width: 100%;
// Display followers on small screens
.o_followers { display: initial !important; // Forced in core
@include media-breakpoint-down(xs) { padding-bottom: 50px; } } } } } } }
// Sided chatter, if user wants
.o_chatter_position_sided & { @include media-breakpoint-up(lg) { .o_form_view:not(.o_form_nosheet) { display: flex; flex-flow: row nowrap; height: 100%;
.o_form_sheet_bg { flex: 1 1 auto; overflow: auto;
> .o_form_sheet { min-width: unset; } }
.o_chatter { border-left: 1px solid gray('400'); flex: 0 0 35%; max-width: initial; min-width: initial; overflow: auto;
.o_chatter_header_container { padding-top: $grid-gutter-width * 0.5; top: 0; position: sticky; background-color: $o-view-background-color; z-index: 1;
.o_chatter_topbar { margin-top: 0; flex-wrap: wrap; height: auto; button:last-of-type { flex: 1 0 auto; text-align: left; }
.o_topbar_right_area { order: -10; flex: 0 1 100%; border-bottom-color: transparent; } }
.o_attachments_previews { overflow: auto; max-height: $o-mail-attachment-image-size * 6; } } } } } } }
// Sticky Header & Footer in List View
.table-responsive { overflow-x: initial;
.o_list_view { // th & td are here for compatibility with chrome
thead, thead tr:nth-child(1) th { position: sticky; top: 0; z-index: 1; } thead tr:nth-child(1) th { background-color: $o-list-footer-bg-color; } tfoot, tfoot tr:nth-child(1) td { position: sticky; bottom: 0; } tfoot tr:nth-child(1) td { background-color: $o-list-footer-bg-color; } } }
// Waiting Cursor
.oe_wait { cursor: progress; }
|