Issue #670: Split up _styles.scss

3 files changed, 757 insertions, 0 deletions

diff --git a/web-ui/app/scss/views/_action-bar.scss b/web-ui/app/scss/views/_action-bar.scss
new file mode 100644
index 00000000..ef4a8cc3
--- /dev/null
+++ b/web-ui/app/scss/views/_action-bar.scss
@@ -0,0 +1,158 @@
+#top-pane {
+    height: auto;
+    overflow: hidden;
+    background: $top_pane;
+    border-top: 1px solid $top_pane;
+
+    #list-actions {
+        width: 100%;
+        height: 34px;
+        margin: 0;
+        border-top: 1px solid $white;
+        border-bottom: 2px solid lighten($top_pane, 30%);
+        background: $top_pane;
+        clear: both;
+        overflow: hidden;
+
+        li {
+            display: inline-block;
+            margin: 1px -3px;
+            vertical-align: top;
+
+            input[type=checkbox] {
+                @include check-box;
+
+                margin: 7px 13px 7px;
+            }
+
+            select {
+                padding: 1px 3px;
+                margin: 0;
+            }
+
+            input[type=button] {
+                margin: 2px;
+                padding: 4px 10px;
+                background: lighten($contrast, 70%);
+                color: $dark_grey;
+                text-transform: uppercase;
+                font-weight: 400;
+                font-size: 0.8em;
+                opacity: 0.7;
+                border: 1px solid darken($contrast, 10%);
+
+                @include border-radius(1px);
+
+                @include btn-transition;
+
+                &:hover {
+                    opacity: 1;
+                }
+
+                &[disabled=disabled] {
+                    opacity: 0.5;
+                    cursor: default;
+                }
+            }
+        }
+
+        #pagination-trigger {
+            cursor: pointer;
+            margin: 4px 12px 0 5px;
+
+            span {
+                padding-left: 5px;
+            }
+        }
+    }
+
+    #compose-search-trigger {
+        padding: 4px;
+    }
+
+    #actions {
+        ul {
+            margin: 0;
+
+            li {
+                display: inline-block;
+                margin-right: -5px;
+
+                a {
+                    transition: background-color 150ms ease-out;
+                    background: $top_pane;
+                    color: $white;
+                    font-size: 1.5em;
+                    display: block;
+                    padding: 14px 20px;
+                    margin: 0 1px 0px;
+                    opacity: 0.35;
+
+                    &.selected {
+                        background: $top_pane;
+                        opacity: 1;
+                        cursor: default;
+                    }
+
+                    &:hover {
+                        opacity: 1;
+                    }
+                }
+            }
+        }
+    }
+
+    #search-trigger {
+        padding: 5px;
+        padding-left: 0;
+
+        input {
+            margin: 0;
+            padding: 8px 30px;
+            color: $navigation_background;
+            background: white;
+            border: none;
+            transition: background-color 150ms ease-out;
+
+            &:hover {
+                background: darken(white, 2%);
+            }
+
+            &:focus {
+                background: darken(white, 5%);
+            }
+        }
+
+        form:before {
+            font-family: "FontAwesome";
+            content: "\f002";
+            position: absolute;
+            padding: 0 10px;
+            top: 15px;
+            color: $medium_light_grey;
+        }
+    }
+}
+
+#refresh-mails-trigger {
+    i {
+        margin-top: 3px;
+        cursor: pointer;
+        opacity: 0.9;
+        padding: 4px;
+
+        &:hover {
+            opacity: 1;
+
+            &:after {
+                content: "\f021";
+            }
+
+            &:before {
+                content: "refresh";
+                font-size: 0.8em;
+                padding-right: 5px;
+            }
+        }
+    }
+}
diff --git a/web-ui/app/scss/views/_compose-view.scss b/web-ui/app/scss/views/_compose-view.scss
index ebfae1da..146aacf5 100644
--- a/web-ui/app/scss/views/_compose-view.scss
+++ b/web-ui/app/scss/views/_compose-view.scss
@@ -382,3 +382,15 @@
         }
     }
 }
+
+.buttons-group {
+    clear: both;
+    margin: 20px 0 0;
+    padding: 0;
+}
+
+#draft-save-status {
+    float: right;
+    padding: 0.4rem 1.1rem;
+    color: $lighter_blue;
+}
diff --git a/web-ui/app/scss/views/_navigation.scss b/web-ui/app/scss/views/_navigation.scss
new file mode 100644
index 00000000..49600c05
--- /dev/null
+++ b/web-ui/app/scss/views/_navigation.scss
@@ -0,0 +1,587 @@
+#logo {
+    color: $white;
+}
+
+#logout {
+    color: $white;
+    cursor: pointer;
+}
+
+#user-settings-box {
+    position: fixed;
+    z-index: 10;
+
+    & > div {
+        position: fixed;
+        left: 70px;
+        bottom: 0px;
+        z-index: 1;
+        padding: 10px 16px 10px 18px;
+        background-color: rgba($dark_slate_gray, 0.9);
+        min-width: 230px;
+
+        &.extra-bottom-space {
+            bottom: 33px;
+        }
+
+        #user-settings-close {
+            float: right;
+        }
+
+        h1, i {
+            font-size: 1.2em;
+            color: white;
+            line-height: 1.2em;
+        }
+
+        i.fa-user {
+            margin-right: 10px;
+            float: left;
+        }
+
+        i.fa-close {
+            margin-left: 10px;
+            float: right;
+            cursor: pointer;
+        }
+
+        p {
+            font-size: 1.2em;
+            color: $light_orange;
+        }
+    }
+}
+
+@keyframes hideshow {
+    0% {
+        fill: lighten($logo_color, 30);
+    }
+
+    25% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
+
+.logo-part-animation-off {
+    animation: none;
+}
+
+.logo-part-animation-on {
+    animation: hideshow 0.6s ease infinite;
+    opacity: 1;
+
+    &:nth-child(2) {
+        opacity: 0;
+        animation-delay: 0.1s;
+    }
+
+    &:nth-child(3) {
+        animation-delay: 0.2s;
+    }
+
+    &:nth-child(4) {
+        animation-delay: 0.3s;
+    }
+
+    &:nth-child(5) {
+        animation-delay: 0.4s;
+    }
+
+    &:nth-child(6) {
+        animation-delay: 0.5s;
+    }
+}
+
+.arrow-box:before {
+    right: 100%;
+    top: 65%;
+    border: 20px solid transparent;
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+    border-right-color: rgba($dark_slate_gray, 0.9);
+    margin-top: -20px;
+}
+
+.side-nav-toggle, .side-nav-toggle-icon {
+    color: white;
+    cursor: pointer;
+
+    &:hover, &:focus {
+        color: white;
+    }
+
+    background: $navigation_background;
+
+    &.logout {
+        color: $action_buttons;
+    }
+}
+
+.side-nav-toggle-icon {
+    padding: 6px 0px 8px 19px;
+    display: block;
+    left: 0;
+    top: 0;
+    position: relative;
+}
+
+.left-off-canvas-logo {
+    svg {
+        width: 162px;
+        height: 56px;
+        padding-left: 6px;
+        padding-top: 2px;
+
+        path, polygon, rect {
+            fill: $logo_color;
+        }
+    }
+}
+
+.collapsed-nav {
+    width: 50px;
+    position: absolute;
+    height: 100vh;
+    background: $navigation_background;
+
+    ul.shortcuts {
+        li {
+            position: relative;
+            margin-bottom: 5px;
+            opacity: 0.8;
+
+            &.selected {
+                background: $contrast;
+                opacity: 1;
+                cursor: default;
+
+                a {
+                    color: $navigation_background;
+                }
+            }
+
+            @include searching(6px, 26px, $medium_dark_grey, 0.9em);
+
+            a {
+                display: block;
+                position: relative;
+                font-size: 1.4em;
+                padding: 5px;
+                color: white;
+                text-align: center;
+
+                &:hover {
+                    background: darken($contrast, 10%);
+                    color: $navigation_background;
+
+                    @include btn-transition;
+
+                    &.logout {
+                        color: $black;
+                        background: $action_buttons;
+                    }
+                }
+
+                &[title]:hover:after {
+                    content: attr(title);
+
+                    @include tooltip;
+                }
+            }
+        }
+    }
+
+    #custom-tags-shortcuts {
+        li {
+            border-top: 1px solid $lighter_gray;
+        }
+    }
+
+    div.shortcut-label {
+        font-size: xx-small;
+        text-transform: uppercase;
+        text-align: center;
+    }
+}
+
+.move-right {
+    ul.shortcuts {
+        li {
+            display: none;
+        }
+    }
+}
+
+.left-off-canvas-menu {
+    width: 222px;
+    -webkit-backface-visibility: hidden;
+    box-sizing: content-box;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    position: absolute;
+    overflow-y: auto;
+}
+
+.left-off-canvas-menu * {
+    -webkit-backface-visibility: hidden;
+}
+
+.off-canvas-wrap {
+    -webkit-backface-visibility: hidden;
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+}
+
+.off-canvas-wrap.move-right, .off-canvas-wrap.move-left {
+    min-height: 100%;
+    -webkit-overflow-scrolling: touch;
+}
+
+.inner-wrap {
+    -webkit-backface-visibility: hidden;
+    width: 100%;
+}
+
+.inner-wrap:before, .inner-wrap:after {
+    content: " ";
+    display: table;
+}
+
+.inner-wrap:after {
+    clear: both;
+}
+
+.off-canvas-wrap.content {
+    -webkit-ransition: -webkit-transform 500ms ease;
+    -moz-transition: -moz-transform 500ms ease;
+    -ms-transition: -ms-transform 500ms ease;
+    -o-transition: -o-transform 500ms ease;
+    transition: transform 500ms ease;
+
+    &.move-right {
+        -webkit-transform: translate3d(10rem, 0, 0);
+        -moz-transform: translate3d(10rem, 0, 0);
+        -ms-transform: translate3d(10rem, 0, 0);
+        -o-transform: translate3d(10rem, 0, 0);
+        transform: translate3d(10rem, 0, 0);
+
+        #user-settings-box > div {
+            left: 20px;
+        }
+    }
+}
+
+.move-right .exit-off-canvas {
+    -webkit-backface-visibility: hidden;
+    transition: background 300ms ease;
+    cursor: pointer;
+    display: block;
+    position: absolute;
+    background: rgba(255, 255, 255, 0.2);
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+@media only screen and (min-width: 40.063em) {
+    .move-right .exit-off-canvas:hover {
+        background: rgba(255, 255, 255, 0.05);
+    }
+}
+
+.off-canvas-wrap.move-right.menu {
+    position: absolute;
+}
+
+.off-canvas-wrap.content {
+    left: 50px;
+    padding-right: 50px;
+}
+
+.offcanvas-overlap .left-off-canvas-menu, .offcanvas-overlap .right-off-canvas-menu {
+    -ms-transform: none;
+    -webkit-transform: none;
+    -moz-transform: none;
+    -o-transform: none;
+    transform: none;
+}
+
+.offcanvas-overlap .exit-offcanvas-menu {
+    -webkit-backface-visibility: hidden;
+    transition: background 300ms ease;
+    cursor: pointer;
+    display: block;
+    position: absolute;
+    background: rgba(255, 255, 255, 0.2);
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+div.side-nav-bottom {
+    width: 100%;
+    position: fixed;
+    bottom: 20px;
+    background-color: $navigation_background;
+
+    .version {
+        padding-left: 55px;
+        padding-bottom: 3px;
+    }
+}
+
+#left-pane nav {
+    border-right: 1px solid lighten($navigation_background, 10%);
+
+    ul#default-tag-list, #custom-tag-list {
+        li {
+            transition: background-color 150ms ease-out;
+            padding: 2px 10px;
+            cursor: pointer;
+
+            &:hover {
+                background: $light_gray;
+                color: $navigation_background;
+            }
+
+            &.selected {
+                font-weight: bold;
+                background: $contrast;
+                color: $navigation_background;
+            }
+        }
+    }
+
+    ul#default-tag-list {
+//            .unread-count, .total-count {
+//                font-size: 0.5em;
+//                padding: 1px 5px 0;
+//                top: 1px;
+//                left: 0;
+//                border: 1px solid $white;
+//                position: absolute;
+//                opacity: 0.95;
+//            }
+//
+//            .total-count {
+//                background: $medium_light_grey;
+//            }
+
+        .unread-count, .total-count {
+            font-size: 0.7em;
+            padding: 0px 5px 0;
+            top: 1px;
+            left: 0;
+            border: 1px solid $white;
+            border-bottom: 1px solid white;
+            position: absolute;
+            opacity: 0.95;
+        }
+
+        .total-count {
+            background: $medium_light_grey;
+        }
+
+        span.tag-label {
+            padding-left: 2px;
+        }
+
+        li {
+            padding: 5px 10px 5px 18px;
+            position: relative;
+
+            @include searching(4px, 19px, $dark_grey, 0.7em);
+
+            &:before {
+                font-size: 1.5em;
+                font-family: "FontAwesome";
+                margin-right: 16px;
+                font-weight: normal;
+                position: relative;
+                top: 2px;
+                margin-left: -3px;
+            }
+
+            &:after {
+                padding-left: 10px;
+            }
+
+            &:nth-child(1) {
+                &:before {
+                    content: "\f01c";
+                }
+            }
+
+            &:nth-child(2) {
+                &:before {
+                    content: "\f1d8";
+                    margin-left: -5px;
+                }
+            }
+
+            &:nth-child(3) {
+                &:before {
+                    content: "\f040";
+                }
+            }
+
+            &:nth-child(4) {
+                &:before {
+                    content: "\f014";
+                }
+            }
+
+            &:nth-child(5) {
+                &:before {
+                    content: "\f187";
+                    margin-left: -5px;
+                }
+            }
+        }
+    }
+
+    ul#custom-tag-list {
+        visibility: hidden;
+        opacity: 0;
+        transition-duration: 500ms;
+        height: 100%;
+        max-height: 220px;
+        overflow: auto;
+        background-color: lighten($navigation_background, 1);
+
+        li {
+            white-space: nowrap;
+            overflow: hidden;
+            font-size: 0.8em;
+            padding: 5px 10px 5px 15px;
+
+            &.custom-tag {
+                text-overflow: ellipsis;
+            }
+
+            span.tag-label {
+                padding: 5px 20px 5px 38px;
+            }
+        }
+    }
+
+    ul#custom-tag-list.expanded {
+        visibility: visible;
+        opacity: 1;
+    }
+
+    div.tags-icon {
+        border-top: 1px solid white;
+        padding-top: 25px;
+        margin-bottom: 20px;
+
+        i {
+            font-size: 1.5em;
+            font-family: "FontAwesome";
+            margin-right: 13px;
+            font-weight: normal;
+            position: relative;
+            top: 2px;
+            left: 16px;
+        }
+
+        span.tag-label {
+            font-size: 0.9rem;
+            padding-left: 16px;
+            margin-bottom: 10px;
+        }
+    }
+
+    ul#logout, ul#feedback, ul#user-settings-icon {
+        margin-bottom: 0;
+
+        li {
+            background-color: $navigation_background;
+            padding: 5px 10px;
+            position: relative;
+
+            @include searching(4px, 19px, $dark_grey, 0.7em);
+
+            &:hover {
+                color: $navigation_background;
+            }
+
+            div {
+                padding-left: 7px;
+
+                &:before {
+                    font-size: 1.5em;
+                    font-family: "FontAwesome";
+                    margin-right: 13px;
+                    font-weight: normal;
+                    position: relative;
+                    top: 2px;
+                }
+            }
+        }
+    }
+
+    ul {
+        &#logout li {
+            color: $action_buttons;
+
+            &:hover {
+                background-color: $action_buttons;
+            }
+        }
+
+        &#user-settings-icon {
+            li {
+                color: white;
+
+                &:hover {
+                    background-color: white;
+                }
+            }
+        }
+
+        &#feedback {
+            margin-bottom: 0;
+
+            li {
+                color: $light_orange;
+
+                &:hover {
+                    background-color: $light_orange;
+                }
+            }
+        }
+    }
+
+    h3 {
+        color: white;
+        text-transform: uppercase;
+        font-size: 0.6em;
+        padding: 5px;
+        font-weight: 600;
+        margin: 0 10px;
+        border-bottom: 1px dotted lighten($navigation_background, 10%);
+    }
+}
+
+.unread-count {
+  @include mail-count($secondary_callout);
+}
+
+.total-count {
+  @include mail-count($medium_light_grey);
+}
+