roundcubemail/skins/elastic/styles/layout.less

/**
 * Roundcube webmail styles for the Elastic skin
 *
 * Copyright (c) 2017, The Roundcube Dev Team
 *
 * The contents are subject to the Creative Commons Attribution-ShareAlike
 * License. It is allowed to copy, distribute, transmit and to adapt the work
 * by keeping credits to the original autors in the README file.
 * See http://creativecommons.org/licenses/by-sa/3.0/ for details.
 */

@screen-width-large:    1200px;
@screen-width-medium:   1024px;
@screen-width-small:    768px;
@screen-width-xs:       480px;
@screen-width-mini:     320px;

@page-font-size:        14px;
@page-min-width:        240px;

@taskmenu-width:        70px;

@layout-header-height-mobile:    2.5rem;

/*** Responsive design - Layout ***/

/*
- Desktop - Big screen (width > 1200px)
   -----------------------------------------------------------------------------------------------------
   |  menu  |        sidebar        |         list          |                 content                  |
   -----------------------------------------------------------------------------------------------------
- Desktop - Normal screen (1200px => width => 768px)
   -------------------------------------------------------------------
   |menu|    sidebar/list     |               content                |
   -------------------------------------------------------------------
- Tablet (480px < width < 768px) - typical: 768x1024 (iPad Mini/Air)
   ------------------------------------------
   |menu|     sidebar/list/content          |
   ------------------------------------------
- Phone (width <= 480px) - typical: 320x480 (iPhone 5), 375x667 (iPhone 6-7), 360x564 (Galaxy S6)
   ------------------------
   | sidebar/list/content |
   ------------------------

NOTE: below 1024px we do some UI elements bigger, as this is good (imho)
      assumption that in this size we're dealing with touch device. Is it?
      should we rather feature detect tables/phones?
*/

html {
    height: 100%;
    font-size: @page-font-size;
}

body {
    min-width: @page-min-width;
    height: 100%;
    overflow: hidden;
}

body > #layout {
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 100%;
    width: 100%;

    & > div {
        &.sidebar,
        &.list {
            display: flex;
            flex-direction: column;
            max-width: 30%;
            border-right: 1px solid @color-layout-border;
        }

        &.content {
            display: flex;
            flex: 6;
            flex-direction: column;
            min-width: 50%;
            background-color: @color-layout-content-background;

            & > iframe,
            & > .content,
            & > .content > iframe {
                height: 100%;
                width: 100%;
                overflow: auto;
                border: 0;
                flex: 1;
            }
        }

        &.sidebar {
            min-width: 220px;
            background-color: @color-layout-sidebar-background;
            flex: 2;
        }

        &.list {
            min-width: 300px;
            background-color: @color-layout-list-background;
            flex: 3;
        }

        &.menu {
            width: @taskmenu-width;
            background-color: @color-taskmenu-background;

            a,
            a:before {
                display: block;
                width: @taskmenu-width;
            }
        }

        & > .scroller {
            flex: 1;
        }

        & > .content.only > .scroller {
            overflow: auto;
        }

        & > .header,
        & > .footer {
            background-color: @color-layout-header-background;
            font-size: 1rem;
            font-weight: bold;
            line-height: 2.5rem;
            height: 2.5rem;
            padding: 0 .25em;
            margin: 0;
            position: relative; /* for absolute positioning of searchbar */
            overflow: hidden;
            white-space: nowrap;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
        }

        & > .header {
            border-bottom: 1px solid #ddd;

            .header-title {
                flex: 1;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        & > .footer {
            border-top: 1px solid #ddd;
        }
    }
}

html.iframe body {
    overflow: auto;

    #content {
        height: 100%;
    }

    .frame-content {
        padding: 1rem;
    }
}


@media screen and (max-width: @screen-width-large) {
    body > #layout > div.sidebar,
    body > #layout > div.list {
        min-width: 260px;
        flex: 3;
    }
    body > #layout > div:not(.selected) {
        display: none;
    }
    body > #layout > div.menu,
    body > #layout > div.content {
        display: flex;
    }
}

@media screen and (max-width: @screen-width-medium) {
    html:not(.iframe) {
        font-size: 120%;
    }

    body > #layout > div.menu a,
    body > #layout > div.menu a:before,
    body > #layout > div.menu {
        width: 45px;
    }
    body > #layout > div.menu span.inner {
        display: none;
    }
}

@media screen and (max-width: @screen-width-small) {
    body > #layout > div > .header > .toolbar:not(.searchbar),
    body > #layout > div:not(.selected) {
        display: none;
    }
    body > #layout > div.menu {
        display: flex;
    }
    body > #layout > div.sidebar,
    body > #layout > div.list {
        max-width: none;
    }
    .hidden-small {
        display: none !important;
    }
}

@media screen and (max-width: @screen-width-xs) {
    body > #layout > div.menu span.inner {
        display: block;
    }
    body > #layout > div.menu {
        display: none;
        position: absolute;
        z-index: 100;
        top: 0;
        left: 0;
        right: 0;
        width: auto;
        margin: 38pt 3pt 3pt 3pt;
        padding-bottom: 8pt;
        opacity: .96;
        text-align:center;
        border-radius: 4pt;
    }
    body > #layout > div.menu a,
    body > #layout > div.menu a:before {
        display: inline-block;
        width: 100px;
    }
}

@media screen and (max-width: @screen-width-mini) {
    body > #layout > div.sidebar,
    body > #layout > div.list {
        min-width: @page-min-width;
    }
}

@media screen and (min-width: (@screen-width-large + 1px)) {
    body > #layout > div > .header > a.back-list-button,
    body > #layout > div > .header > a.back-sidebar-button {
        display: none;
    }
}

@media screen and (min-width: (@screen-width-small + 1px)) {
    body > #layout > .content > .header > .header-title,
    body > #layout > div > .header > .buttons,
    body > #layout > div > .header > a.toolbar-menu-button {
        display: none;
    }
}

@media screen and (min-width: (@screen-width-xs + 1px)) {
    body > #layout > div > .header > a.menu-button {
        display: none;
    }
}