roundcubemail/skins/elastic/styles/widgets/taskmenu.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.
 */

/*** Taskmenu ***/

#taskmenu {
    background-color: @color-taskmenu-background;

    a {
        text-decoration: none;
        padding: .4em 0;
        display: block;
        text-align: center;
        color: @color-taskmenu-button;

        &:before {
            &:extend(.font-icon-class);
            display: block;
            height: 1.75rem;
            width: @layout-menu-width;
        }

        &:hover {
            color: @color-taskmenu-button-hover;
            background: @color-taskmenu-button-background-hover;
        }

        &.selected {
            color: @color-taskmenu-button-selected;
            background: @color-taskmenu-button-selected-background;
        }

        &.mail:before {
            content: @fa-var-envelope;
        }
        &.addressbook:before {
            content: @fa-var-user;
        }
        &.settings:before {
            content: @fa-var-cog;
        }
        &.help:before {
            content: @fa-var-life-bouy;
        }
        &.logout:before {
            content: @fa-var-power-off;
        }
        &.about:before {
            content: @fa-var-question;
        }
        &.refresh:before {
            content: @fa-var-refresh;
        }
        &.compose:before {
            content: @fa-var-edit;
        }
        &.calendar:before {
            content: @fa-var-calendar;
        }
        &.tasklist:before {
            content: @fa-var-tasks;
        }
        &.files:before {
            content: @fa-var-folder;
        }
        &.notes:before {
            content: @fa-var-sticky-note;
        }

        span.inner {
            font-size: 90%;
        }
    }

    .special-buttons {
        position: absolute;
        bottom: 0;
        left: 0;
        width: @layout-menu-width;

        @media screen and (max-width: @screen-width-xs) {
            position: relative;
        }

        a {
            color: @color-taskmenu-button-special;
            background: @color-taskmenu-button-special-background;

            &:hover {
                color: @color-taskmenu-button-special-hover;
                background: @color-taskmenu-button-special-background-hover;

                &.logout {
                    color: @color-taskmenu-button-logout-hover !important;
                }
            }
        }
    }

    .action-buttons {
        a {
            color: @color-taskmenu-button-action;
            background: @color-taskmenu-button-action-background;

            &:hover {
                color: @color-taskmenu-button-action-hover;
                background: @color-taskmenu-button-action-background-hover;
            }
        }
    }

    @media screen and (max-width: @screen-width-medium) {
        a,
        a:before {
            width: @layout-menu-width/2;
        }

        a {
            height: 3.25rem;
            font-size: 1.25rem;
        }

        span.inner {
            display: none;
        }

        .action-buttons {
            a {
                color: @color-taskmenu-button-action-background;
                background: @color-taskmenu-background;
            }
        }
    }

    @media screen and (max-width: @screen-width-xs) {
        a {
            height: auto;
            margin-top: 1rem;
            background: transparent;
        }

        a,
        a:before {
            height: 2.25rem;
            display: inline-block;
            width: 310px / 3;
            font-size: 1.25em;
        }

        a:hover {
            background: transparent !important;
        }

        span.inner {
            display: block;
        }
    }

    @media screen and (max-width: @screen-width-xs) and (min-width: 320px) and (min-height: 480px) {
        text-align: left;

        .special-buttons,
        .action-buttons {
            display: block;
            width: 100%;
        }
    }

    @media screen and (min-width: (@screen-width-xs + 1px)) {
        .menu-header {
            display: none;
        }

        a:before {
            margin: 0;
        }
    }

    .menu-header {
        border-bottom: 1px solid @color-taskmenu-button;
        height: @layout-touch-header-height;
        line-height: @layout-touch-header-height;
        text-align: left;
        padding: 0 .5em;
        font-size: 1.2rem;

        a {
            color: @color-taskmenu-button;
            font-size: 100%;
            display: inline;

            &:before {
                height: @layout-touch-header-height;
                width: auto;
            }

            &:hover {
                background: inherit;
            }
        }
    }
}