Use nested rules in less files

8 years ago · 056b08fce0
parent bb2b7e001c
commit 056b08fce0
9 changed files with 651 additions and 610 deletions
--- a/skins/elastic/styles/layout.less
+++ b/skins/elastic/styles/layout.less
@ -57,67 +57,68 @@ body > #layout {
    flex-wrap: nowrap;
    height: 100%;
    width: 100%;
-}

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

-body > #layout > div.content {
+        &.content {
            display: flex;
            flex-grow: 6;
            flex-direction: column;
            min-width: 50%;
            background-color: @layout-content-background-color;
-}

-body > #layout > div.sidebar {
+            & > iframe,
+            & > .content,
+            & > .content > iframe {
+                height: 100%;
+                width: 100%;
+                overflow: auto;
+                border: 0;
+                flex: 1;
+            }
+        }
+
+        &.sidebar {
            min-width: 220px;
            background-color: @layout-sidebar-background-color;
-}
+        }

-body > #layout > div.list {
+        &.list {
            min-width: 300px;
            background-color: @layout-list-background-color;
-}
+        }

-body > #layout > div.menu {
+        &.menu {
            width: @taskmenu-width;
            background-color: @taskmenu-background-color;
-}

-body > #layout > div.menu a,
-body > #layout > div.menu a:before {
+            a,
+            a:before {
                display: block;
                width: @taskmenu-width;
-}
-
-#layout > div.content > iframe,
-#layout > div.content > .content,
-#layout > div.content > .content > iframe {
-    height: 100%;
-    width: 100%;
-    overflow: auto;
-    border: 0;
-    flex: 1;
-}
+            }
+        }

-#layout > div > .scroller {
+        & > .scroller {
            flex: 1;
-}
+        }

-#layout > .content.only > .scroller {
+        & > .content.only > .scroller {
            overflow: auto;
-}
+        }

-#layout > div > .header,
-#layout > div > .footer {
+        & > .header,
+        & > .footer {
            background-color: @layout-header-background-color;
            font-size: 1.2em;
            font-weight: bold;
@ -131,32 +132,22 @@ body > #layout > div.menu a:before {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
-}
-#layout > div > .header {
+        }
+
+        & > .header {
            border-bottom: 1px solid #ddd;
-}
-#layout > div > .footer {
-    border-top: 1px solid #ddd;
-}

-#layout > div > .header > .header-title {
+            .header-title {
                flex: 1;
                overflow: hidden;
                text-overflow: ellipsis;
-}
-
-#taskmenu .special-buttons {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-}
-
-#taskmenu .special-buttons a {
-    color: @taskmenu-special-button-color;
-}
+            }
+        }

-#taskmenu .action-buttons a {
-    color: @taskmenu-action-button-color;
+        & > .footer {
+            border-top: 1px solid #ddd;
+        }
+    }
 }


@ -190,7 +181,7 @@ body > #layout > div.menu a:before {
 }

@media screen and (max-width: @screen-width-small) {
-    #layout > div > .header > .toolbar:not(.searchbar),
+    body > #layout > div > .header > .toolbar:not(.searchbar),
    body > #layout > div:not(.selected) {
        display: none;
    }
@ -226,9 +217,6 @@ body > #layout > div.menu a:before {
        display: inline-block;
        width: 100px;
    }
-    #taskmenu .special-buttons {
-        position: relative;
-    }
 }

@media screen and (max-width: @screen-width-mini) {
--- a/skins/elastic/styles/styles.less
+++ b/skins/elastic/styles/styles.less
@ -115,6 +115,11 @@ button, input, select, textarea {
  }
 }

+.animated-icon-class {
+    -webkit-animation: fa-spin 2s infinite linear;
+    animation: fa-spin 2s infinite linear;
+}
+

 /*** Common UI elements ***/

@ -129,12 +134,14 @@ div.popover-content > .ui.popup {
    display: block !important;
 }

-body.iframe .formcontent {
+body.iframe {
+    .formcontent {
        padding: 1em;
-}
+    }

-body.iframe .formbuttons {
+    .formbuttons {
        padding: 0 1em 1em 1em;
+    }
 }

 .ui-dialog iframe {
@ -174,10 +181,10 @@ body.iframe .formbuttons {

 #folder-selector {
    overflow-y: auto;
-}

-#folder-selector li a.virtual {
+    li a.virtual {
        opacity: .2;
+    }
 }


--- a/skins/elastic/styles/widgets/attachmentlist.less
+++ b/skins/elastic/styles/widgets/attachmentlist.less
@ -1,94 +1,96 @@
 /* Attachments list */


-.attachmentslist li:before {
+.attachmentslist li {
+    &:before {
        &:extend(.font-icon-class);
        content: @fa-var-file-o;
-}
+    }

-.attachmentslist li.txt:before,
-.attachmentslist li.text:before {
+    &.txt:before,
+    &.text:before {
        content: @fa-var-file-text-o;
-}
+    }

-.attachmentslist li.pdf:before {
+    &.pdf:before {
        content: @fa-var-file-pdf-o;
-}
+    }

-.attachmentslist li.odt:before,
-.attachmentslist li.doc:before,
-.attachmentslist li.docx:before,
-.attachmentslist li.msword:before {
+    &.odt:before,
+    &.doc:before,
+    &.docx:before,
+    &.msword:before {
        content: @fa-var-file-word-o;
-}
+    }

-.attachmentslist li.ods:before,
-.attachmentslist li.xls:before,
-.attachmentslist li.xlsx:before,
-.attachmentslist li.msexcel:before {
+    &.ods:before,
+    &.xls:before,
+    &.xlsx:before,
+    &.msexcel:before {
        content: @fa-var-file-excel-o;
-}
+    }

-.attachmentslist li.rar:before,
-.attachmentslist li.zip:before,
-.attachmentslist li.gz:before {
+    &.rar:before,
+    &.zip:before,
+    &.gz:before {
        content: @fa-var-file-zip-o;
-}
+    }

-.attachmentslist li.image:before,
-.attachmentslist li.jpg:before,
-.attachmentslist li.jpeg:before,
-.attachmentslist li.png:before {
+    &.image:before,
+    &.jpg:before,
+    &.jpeg:before,
+    &.png:before {
        content: @fa-var-file-image-o;
-}
+    }

-.attachmentslist li.mp3:before,
-.attachmentslist li.audio:before {
+    &.mp3:before,
+    &.audio:before {
        content: @fa-var-file-audio-o;
-}
+    }

-.attachmentslist li.m4p:before,
-.attachmentslist li.video:before {
+    &.m4p:before,
+    &.video:before {
        content: @fa-var-file-video-o;
-}
+    }

-.attachmentslist li.ics:before,
-.attachmentslist li.calendar:before {
-/* TODO */
-}
+    &.ics:before,
+    &.calendar:before {
+        /* TODO */
+    }

-.attachmentslist li.vcard:before {
+    &.vcard:before {
        content: @fa-var-vcard;
-}
+    }

-.attachmentslist li.html:before {
+    &.html:before {
        content: @fa-var-file-code-o;
-}
-
-.attachmentslist li.eml:before,
-.attachmentslist li.rfc822:before {
-/* TODO */
-}
-
-.attachmentslist li.odp:before,
-.attachmentslist li.otp:before,
-.attachmentslist li.ppt:before,
-.attachmentslist li.pptx:before,
-.attachmentslist li.ppsx:before,
-.attachmentslist li.vnd.mspowerpoint:before {
+    }
+
+    &.eml:before,
+    &.rfc822:before {
+        /* TODO */
+    }
+
+    &.odp:before,
+    &.otp:before,
+    &.ppt:before,
+    &.pptx:before,
+    &.ppsx:before,
+    &.vnd.mspowerpoint:before {
        content: @fa-var-file-powerpoint-o;
-}
+    }

-.attachmentslist li.sig:before,
-.attachmentslist li.pgp-signature:before,
-.attachmentslist li.pkcs7-signature:before {
-/* TODO */
-}
+    &.sig:before,
+    &.pgp-signature:before,
+    &.pkcs7-signature:before {
+        /* TODO */
+    }

-.attachmentslist li.application.asc:before {
-/* TODO */
-}
+    &.application.asc:before {
+        /* TODO */
+    }

-.attachmentslist li.application.pgp-keys:before {
-/* TODO */
+    &.application.pgp-keys:before {
+        /* TODO */
+    }
 }
--- a/skins/elastic/styles/widgets/folderlist.less
+++ b/skins/elastic/styles/widgets/folderlist.less
@ -1,7 +1,10 @@
 /*** Folders list widget ***/


-.folderlist li.mailbox .unreadcount {
+.folderlist {
+    li {
+        &.mailbox {
+            .unreadcount {
                position: absolute;
                top: 0;
                right: 0;
@ -14,40 +17,42 @@
                color: @badge-font-color;
                text-align: center;
                font-weight: bold;
-}
+            }

-.folderlist li.mailbox.selected > a .unreadcount {
+            &.selected > a .unreadcount {
                background: /* todo */;
-}
+            }

-.folderlist li.mailbox.recent > a .unreadcount {
+            &.recent > a .unreadcount {
                background: /* todo */;
-}
+            }
+        }

-/* icons */
-
-.folderlist li a:before {
+        a:before {
            &:extend(.font-icon-class);
            content: @fa-var-folder-o;
-}
-.folderlist li.inbox a:before {
+        }
+
+        &.inbox a:before {
            content: @fa-var-inbox;
-}
-.folderlist li.trash a:before {
+        }
+        &.trash a:before {
            content: @fa-var-trash;
-}
-.folderlist li.trash.empty a:before {
+        }
+        &.trash.empty a:before {
            content: @fa-var-trash-o;
-}
-.folderlist li.drafts a:before {
+        }
+        &.drafts a:before {
            content: @fa-var-edit;
-}
-.folderlist li.sent a:before {
+        }
+        &.sent a:before {
            content: @fa-var-paper-plane;
-}
-.folderlist li.junk a:before {
+        }
+        &.junk a:before {
            content: @fa-var-recycle;
-}
-.folderlist li.archive a:before {
+        }
+        &.archive a:before {
            content: @fa-var-archive;
+        }
+    }
 }
--- a/skins/elastic/styles/widgets/lists.less
+++ b/skins/elastic/styles/widgets/lists.less
@ -1,20 +1,16 @@
 /*** List and treelist widgets ***/

-table.listing {
-    width: 100%;
-    table-layout: fixed;
-}
-
-.listing tbody td,
-.listing li {
+.listing {
+    tbody td,
+    li {
        display: block;
        border-bottom: 1px solid #f4f4f4;
        cursor: default;
        font-weight: normal;
-}
+    }

-.listing tbody td,
-.listing li a {
+    tbody td,
+    li a {
        display: block;
        text-decoration: none;
        cursor: default;
@ -23,27 +19,33 @@ table.listing {
        vertical-align: middle;
        line-height: 2.4em;
        color: @list-color;
-}
+    }

-.listing tbody td {
+    tbody td {
        display: table-cell;
        outline: none;
-}
+    }

-.listing li.selected,
-.listing tr.selected td {
+    li.selected,
+    tr.selected td {
        color: @list-selected-color;
        background-color: @list-selected-color-background;
-}
+    }

-.listing td.selection {
+    td.selection {
        padding: 0 1em;
        width: 3em;
        text-align: center;
-}
+    }

-.listing td.selection > input {
+    td.selection > input {
        vertical-align: middle;
+    }
+}
+
+table.listing {
+    width: 100%;
+    table-layout: fixed;
 }

 ul.listing {
@ -51,134 +53,143 @@ ul.listing {
    list-style: none;
    margin: 0;
    padding: 0;
-}

-ul.listing li {
+    li {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: relative;
-}

-ul.listing li ul {
+        ul {
            border-top: 1px solid #f4f4f4;
            padding-left: 1.5em;
-}

-ul.listing li ul li:last-child {
+            li:last-child {
                border-bottom: none;
-}
+            }
+        }

-ul.listing li input[type=checkbox] {
+        input[type=checkbox] {
            position: absolute;
            top: 0;
            right: 0.2em;
            height: 2.4em;
            vertical-align: middle;
+        }
+    }
 }


-ul.treelist li div.treetoggle {
-    position: absolute;
-    top: 1.2em;
-    left: 1.3em;
-    width: 0.8em;
-    height: 0.8em;
-    line-height: 0.8em;
-    cursor: pointer;
-}
-
 /* icons */

-.listing.iconized tr td:before,
-.listing.iconized li a:before,
-.listing.iconized li > i:before,
-ul.treelist li div.treetoggle:before {
+.listing.iconized li {
+    a:before {
        &:extend(.font-icon-class);
-}
-
-.listing.iconized li.preferences > a:before {
+    }
+    &.preferences > a:before {
        content: @fa-var-sliders;
-}
-.listing.iconized li.folders > a:before {
+    }
+    &.folders > a:before {
        content: @fa-var-folder;
-}
-.listing.iconized li.responses > a:before {
+    }
+    &.responses > a:before {
        content: @fa-var-comment;
-}
-.listing.iconized li.identities > a:before {
+    }
+    &.identities > a:before {
        content: @fa-var-at;
-}
-.listing.iconized li.password > a:before {
+    }
+    &.password > a:before {
        content: @fa-var-lock;
-}
-.listing.iconized li.addressbook a:before {
+    }
+    &.addressbook a:before {
        content: @fa-var-book;
-}
-.listing.iconized li.contactgroup a:before {
+    }
+    &.contactgroup a:before {
        content: @fa-var-group;
-}
-.listing.iconized li.contactsearch a:before {
+    }
+    &.contactsearch a:before {
        content: @fa-var-search;
-}
-.listing.iconized tr.contact.person td.name:before {
+    }
+    &.filter > a:before {
+        content: @fa-var-filter;
+    }
+    &.enigma.keys > a:before {
+        content: @fa-var-key;
+    }
+
+    /* autocomplete popup */
+    & > i:before {
+        &:extend(.font-icon-class);
        content: @fa-var-user;
+    }
+    &.group > i:before {
+        content: @fa-var-group;
+    }
 }
-.listing.iconized tr.general > td.section:before {
+
+.listing.iconized tr {
+    td:before {
+        &:extend(.font-icon-class);
+    }
+    &.contact.person td.name:before {
+        content: @fa-var-user;
+    }
+    &.general > td.section:before {
        content: @fa-var-desktop;
-}
-.listing.iconized tr.mailbox > td.section:before {
+    }
+    &.mailbox > td.section:before {
        content: @fa-var-envelope-o;
-}
-.listing.iconized tr.mailview > td.section:before {
+    }
+    &.mailview > td.section:before {
        content: @fa-var-inbox;
-}
-.listing.iconized tr.compose > td.section:before {
+    }
+    &.compose > td.section:before {
        content: @fa-var-paper-plane;
-}
-.listing.iconized tr.addressbook > td.section:before {
+    }
+    &.addressbook > td.section:before {
        content: @fa-var-user;
-}
-.listing.iconized tr.folders > td.section:before {
+    }
+    &.folders > td.section:before {
        content: @fa-var-folder-o;
-}
-.listing.iconized tr.server > td.section:before {
+    }
+    &.server > td.section:before {
        content: @fa-var-server;
-}
-.listing.iconized li.filter > a:before {
-    content: @fa-var-filter;
-}
-.listing.iconized li.enigma.keys > a:before {
-    content: @fa-var-key;
-}
-.listing.iconized tr.enigma > td.section:before {
+    }
+    &.enigma > td.section:before {
        content: @fa-var-lock;
+    }
 }

-/* autocomplete popup */
-.listing.iconized li > i:before {
-    content: @fa-var-user;
-}
-.listing.iconized li.group > i:before {
-    content: @fa-var-group;
-}
-
-/* selecatable list: spellcheck language selection */
-.listing.iconized.selectable li a:before {
+/* selecatable list: e.g. spellcheck language selection */
+.listing.iconized.selectable li {
+    a:before {
+        &:extend(.font-icon-class);
        content: "";
-}
-.listing.iconized.selectable li a.selected:before {
+    }
+    a.selected:before {
        content: @fa-var-check;
+    }
 }

-ul.treelist li div.treetoggle:before {
+ul.treelist li div.treetoggle {
+    position: absolute;
+    top: 1.2em;
+    left: 1.3em;
+    width: 0.8em;
+    height: 0.8em;
+    line-height: 0.8em;
+    cursor: pointer;
+
+    &:before {
+        &:extend(.font-icon-class);
        content: @fa-var-plus-square-o;
        font-size: 0.8em;
        width: 0.8em;
        height: 0.8em;
        background-color: white;
-}
+    }

-ul.treelist li div.treetoggle.expanded:before {
+    &.expanded:before {
        content: @fa-var-minus-square-o;
+    }
 }
--- a/skins/elastic/styles/widgets/messagelist.less
+++ b/skins/elastic/styles/widgets/messagelist.less
@ -6,69 +6,73 @@ table.fixedcopy {
    display: none;
 }

-.messagelist td {
+.messagelist {
+    td {
        border-left: 0;
        width: 2em;
        vertical-align: top;
-}
+    }

-.messagelist td.subject {
+    td.subject {
        width: 99%;
        white-space: wrap;
        position: relative; /* for span.date positioning in Firefox */
-}
-
-.messagelist td.threads {
-    vertical-align: bottom;
-}

-.messagelist td.subject span {
+        span {
            line-height: 2em;
-}

-.messagelist td.subject span.date {
+            &.date {
                right: 2px;
                top: 3px;
                position: absolute;
                color: #666; /* TODO */
-}
+            }

-.messagelist td.subject span.fromto {
+            &.fromto {
                padding-left: 1.5em;
                display: block;
                margin-right: 10em;
                overflow: hidden;
                text-overflow: ellipsis;
                color: #666; /* TODO */
-}
-
-.messagelist tr.flagged td.subject span.date,
-.messagelist tr.flagged td.subject span.fromto {
-    color: #ff5c33; /* TODO */
-}
+            }

-.messagelist tr.deleted td.subject span.date,
-.messagelist tr.deleted td.subject span.fromto {
-    color: #ccc; /* TODO */
-}
-
-.messagelist td.subject span.subject {
+            &.subject {
                clear: both;
                display: block;
                font-size: 1em;
                overflow: hidden;
                text-overflow: ellipsis;
-}
+            }
+        }
+    }
+
+    td.threads {
+        vertical-align: bottom;
+    }

-.messagelist td.flags span {
+    td.flags {
+        span {
            width: 20px;
            height: 20px;
            display: block;
            margin-left: 1px;
-}

-.messagelist td.flags span.flag {
+            &.flag {
                cursor: pointer;
+            }
+        }
+    }
+
+    tr.flagged td.subject span.date,
+    tr.flagged td.subject span.fromto {
+        color: #ff5c33; /* TODO */
+    }
+
+    tr.deleted td.subject span.date,
+    tr.deleted td.subject span.fromto {
+        color: #ccc; /* TODO */
+    }
 }


@ -82,45 +86,52 @@ table.fixedcopy {
    &:extend(.font-icon-class);
 }

-.messagelist tr.thread td.threads div:before {
+.messagelist {
+    tr.thread td.threads div:before {
        content: @fa-var-caret-square-o-right;
-}
-.messagelist tr.thread.expanded td.threads div:before {
+    }
+    tr.thread.expanded td.threads div:before {
        content: @fa-var-caret-square-o-down;
-}
-.messagelist td.subject span.msgicon.status:before {
+    }
+    td.subject span.msgicon.status:before {
        content: @fa-var-circle-o;
-}
-.messagelist tr.unread td.subject span.msgicon.status:before {
+    }
+    tr.unread td.subject span.msgicon.status:before {
        content: @fa-var-circle;
-}
-.messagelist td.subject span.msgicon.unreadchildren:before {
+    }
+    td.subject span.msgicon.unreadchildren:before {
        content: @fa-var-dot-circle-o;
-}
-.messagelist tr.deleted td.subject span.msgicon.status:before {
-    content: @fa-var-ban;
-}
-.messagelist td.subject span.msgicon.status.replied:before {
+    }
+    td.subject span.msgicon.status.replied:before {
        content: @fa-var-mail-reply;
-}
-.messagelist td.subject span.msgicon.status.forwarded:before {
+    }
+    td.subject span.msgicon.status.forwarded:before {
        content: @fa-var-mail-forward;
-}
-.messagelist td.subject span.msgicon.status.replied.forwarded:before {
+    }
+    td.subject span.msgicon.status.replied.forwarded:before {
        content: @fa-var-mail-forward; /* TODO */
-}
-.messagelist span.attachment span:before {
+    }
+    tr.deleted td.subject span.msgicon.status:before {
+        content: @fa-var-ban;
+    }
+
+    span.attachment span {
+        &:before {
            content: @fa-var-paperclip;
-}
-.messagelist span.attachment span.report:before {
+        }
+        &.report:before {
            content: @fa-var-file-text-o;
-}
-.messagelist span.attachment span.encrypted:before {
+        }
+        &.encrypted:before {
            content: @fa-var-lock;
-}
-.messagelist span.flagged:before {
+        }
+    }
+
+    span.flagged:before {
        content: @fa-var-flag;
-}
-.messagelist tr:hover span.unflagged:before {
+    }
+
+    tr:hover span.unflagged:before {
        content: @fa-var-flag-o;
+    }
 }
--- a/skins/elastic/styles/widgets/messagestack.less
+++ b/skins/elastic/styles/widgets/messagestack.less
@ -9,20 +9,22 @@
    height: auto;
    max-height: 85%;
    overflow-y: auto;
-}

-#messagestack div.voice {
+    div {
+        &.voice {
            position: absolute;
            top: -1000px;
-}
+        }

-#messagestack div i.icon {
+        i.icon {
            font-size: 2em !important;
-}
+        }

-#messagestack div a:hover {
+        a:hover {
            text-decoration: underline;
            cursor: pointer;
+        }
+    }
 }

 .ui.alert {
@ -31,29 +33,25 @@
    opacity: 0.95;
    float: left;
    width: 100%;
-    padding-left: 0.75em;
-}
+    padding: 0.75em;

-.ui.alert > i.icon:before {
+    & > i.icon:before {
        &:extend(.font-icon-class);
-    height: 1em;
-    width: 1em;
-    line-height: 1em;
        content: @fa-var-info-circle;
-}
+    }

-.ui.alert.loading > i.icon:before {
+    &.loading > i.icon:before {
        content: @fa-var-circle-o-notch;
-    -webkit-animation: fa-spin 2s infinite linear;
-    animation: fa-spin 2s infinite linear;
-}
+        .animated-icon-class;
+    }

-.ui.alert.alert-warning > i.icon:before {
+    &.alert-warning > i.icon:before {
        content: @fa-var-warning;
-}
+    }

-.ui.alert.alert-danger > i.icon:before {
+    &.alert-danger > i.icon:before {
        content: @fa-var-exclamation-circle;
+    }
 }


--- a/skins/elastic/styles/widgets/searchbar.less
+++ b/skins/elastic/styles/widgets/searchbar.less
@ -9,39 +9,39 @@
    z-index: 10;
    top: 0;
    right: 0;
-}

-.searchbar > * {
+    & > * {
        height: 2.5em;
-}
+    }

-.searchbar > form,
-.searchbar > a.button.options,
-.searchbar > a.button.reset {
+    & > form,
+    & > a.button.options,
+    & > a.button.reset {
        display: none;
        width: 1%;
-}
+    }

-.searchbar > form,
-.searchbar > form > input {
+    & > form,
+    & > form > input {
        width: 98%;
-}
+    }

-.searchbar input {
+    input {
        border: none;
        border-bottom: 1px solid #ddd;
        background: transparent;
        line-height: 1;
-}
+    }

-.searchbar > a.button.search.active {
+    & > a {
+        &.button.search.active {
            color: @searchbar-icon-active-color;
-}
-
-.searchbar > a.button.reset:before {
+        }
+        &.button.reset:before {
            content: @fa-var-remove;
-}
-
-.searchbar > a.button.options:before {
+        }
+        &.button.options:before {
            content: @fa-var-angle-down;
+        }
+    }
 }
--- a/skins/elastic/styles/widgets/taskmenu.less
+++ b/skins/elastic/styles/widgets/taskmenu.less
@ -1,49 +1,68 @@
 /*** Common UI elements ***/

-#taskmenu a {
+#taskmenu {
+    a {
        text-decoration: none;
        padding: 0.4em 0;
-}
+    }

-#taskmenu a.button,
-#taskmenu a.button:before {
+    a.button {
        display: block;
        width: 60px;
        text-align: center;
-}

-/* Icons */
-
-#taskmenu a.button:before {
+        &:before {
            &:extend(.font-icon-class);
            font-size: 1.5em;
            margin-bottom: 0.1em;
-}
+        }

-#taskmenu a.button.mail:before {
+        &.mail:before {
            content: @fa-var-envelope;
-}
-#taskmenu a.button.addressbook:before {
+        }
+        &.addressbook:before {
            content: @fa-var-user;
-}
-#taskmenu a.button.settings:before {
+        }
+        &.settings:before {
            content: @fa-var-cog;
-}
-#taskmenu a.button.help:before {
+        }
+        &.help:before {
            content: @fa-var-life-bouy;
-}
-#taskmenu a.button.logout:before {
+        }
+        &.logout:before {
            content: @fa-var-power-off;
-}
-#taskmenu a.button.about:before {
+        }
+        &.about:before {
            content: @fa-var-question;
-}
-#taskmenu a.button.logout:hover {
+        }
+        &.logout:hover {
            color: @taskmenu-logout-button-hover-color;
-}
-#taskmenu a.button.refresh:before {
+        }
+        &.refresh:before {
            content: @fa-var-refresh;
-}
-#taskmenu a.button.compose:before {
+        }
+        &.compose:before {
            content: @fa-var-edit;
+        }
+    }
+
+    .special-buttons {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+
+        @media screen and (max-width: @screen-width-xs) {
+            position: relative;
+        }
+
+        a {
+            color: @taskmenu-special-button-color;
+        }
+    }
+
+    .action-buttons {
+        a {
+            color: @taskmenu-action-button-color;
+        }
+    }
 }