From b79035b83e81e4fd654b587426083c6033e695ad Mon Sep 17 00:00:00 2001 From: Felix Hammerl Date: Wed, 24 Feb 2016 16:05:22 +0100 Subject: Consolidate stylesheets This removes styles.scss as intermediate stylesheet. Only main.scss is now built, thereby also removing duplicated imports. --- web-ui/app/scss/_mascot.scss | 2 - web-ui/app/scss/_styles.scss | 896 ++++++++++++++++++++++++++++++++++++++++++ web-ui/app/scss/main.scss | 8 +- web-ui/app/scss/styles.scss | 906 ------------------------------------------- 4 files changed, 903 insertions(+), 909 deletions(-) create mode 100644 web-ui/app/scss/_styles.scss delete mode 100644 web-ui/app/scss/styles.scss (limited to 'web-ui') diff --git a/web-ui/app/scss/_mascot.scss b/web-ui/app/scss/_mascot.scss index 5cfac90d..74279063 100644 --- a/web-ui/app/scss/_mascot.scss +++ b/web-ui/app/scss/_mascot.scss @@ -1,5 +1,3 @@ -/* SHEEP */ - #no-message-selected-pane { position: absolute; top: 0; diff --git a/web-ui/app/scss/_styles.scss b/web-ui/app/scss/_styles.scss new file mode 100644 index 00000000..a7d6dedf --- /dev/null +++ b/web-ui/app/scss/_styles.scss @@ -0,0 +1,896 @@ +/* + * Miscellaneous styles without apparent grouping + */ + +#logo { + color: $white; +} + +#logout { + color: $white; +} + +.search-highlight { + background-color: $search-highlight; +} + +#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; + } + } +} + +.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; +} + +@mixin list-actions { + #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; + } + } + } +} + +@mixin email-list { + ul#mail-list { + clear: both; + li { + height: 66px; + position: relative; + padding: 8px 10px 10px 10px; + background: $contrast; + border-bottom: 1px solid white; + cursor: pointer; + font-weight: bold; + transition: background-color 150ms ease-out; + span { + display: inline-block; + vertical-align: top; + &:last-child { + width: 92%; + } + input[type=checkbox] { + @include check-box; + margin-right: 2px; + } + a { + color: $dark_grey; + display: block; + height: 62px; + margin-top: -8px; + padding-top: 3px; + width: 106%; + } + } + .subject-and-tags { + display: block; + width: 90%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + @include tags; + ul.tags { + display: block; + line-height: 1.2; + margin: -3px 0 0 0; + li { + font-size: 0.6rem; + background-color: lighten($action_buttons, 12); + color: white; + display: inline-block; + height: auto; + font-weight: 400; + border: none; + &.tag:hover { + text-decoration: none; + } + } + } + + i.fa-pencil, i.fa-trash-o { + color: $indicator_icon_color; + } + } + + .received-date, .sent-date { + position: absolute; + right: 10px; + font-size: 0.7em; + } + + .attachment-indicator { + margin: 2px 0 0 25px; + font-size: initial; + + i.fa-paperclip { + color: $indicator_icon_color; + } + } + .from { + white-space: nowrap; + font-size: 0.8em; + width: 80%; + overflow: hidden; + text-overflow: ellipsis; + } + + &.status-read { + a { + font-weight: normal; + color: $attachment_text; + } + } + &:hover { + background: darken($contrast, 5%); + } + &.selected { + background: $white; + z-index: 3; + a { + color: $dark_grey; + } + } + } + } +} + +@mixin mail-count($bg_color) { + background: $bg_color; + color: $white; + padding: 2px 5px; + font-size: 0.7em; + margin-left: 5px; + font-weight: 700; + position: relative; + @include border-radius(100px); +} + +section { + display: inline-block; + vertical-align: top; + height: 100vh; + overflow-y: scroll; + &#top-pane { + height: auto; + overflow: hidden; + background: $top_pane; + border-top: 1px solid $top_pane; + @include list-actions; + #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; + } + } + } + + &#left-pane { + background-color: $navigation_background; + color: white; + 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.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%); + } + } + } + + &#middle-pane { + background: $contrast; + @include email-list; + } + + &#right-pane { + padding: 0 10px 60px 0px; + background: $white; + box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.12); + z-index: 2; + overflow-y: auto; + @include read-msg; + [id^=fullView-] { + position: relative; + } + } +} + +.unread-count { + @include mail-count($secondary_callout); +} +.total-count { + @include mail-count($medium_light_grey); +} + + +/* ACTIONS */ +#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; + } + } + } +} + +.buttons-group { + clear: both; + margin: 20px 0 0; + padding: 0; +} + +#draft-save-status { + float: right; + padding: 0.4rem 1.1rem; + color: $lighter_blue; +} + +button { + border: 1px solid transparent; + i { + margin-left: 5px; + } + &#trash-button { + background: $white; + border: 1px solid $medium_light_grey; + color: $medium_light_grey; + float: right; + margin-left: 5px; + &:hover, &:focus { + background: $contrast; + } + } + &.close-mail-button { + background: transparent; + color: $medium_light_grey; + float: right; + &:hover { + color: darken($medium_light_grey, 10%); + } + } + &.close-mail-button { + position: absolute; + left: 0; + top: 0; + margin: 0; + padding: 3px 6px 5px; + background: $lighter_gray; + opacity: 0.7; + @include border-radius(0); + &:hover { + opacity: 1; + } + i { + margin: 0; + } + } + &.no-style { + background: transparent; + color: $medium_light_grey; + padding: 0; + margin: 0; + i { + margin: 0; + padding: 0; + vertical-align: middle; + } + } +} + +.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; + } + } + .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; + } + } + } + #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; + } + } +} + +.hidden { + 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-transition: -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); +} + + +#delete-modal { + button#trash-button, button#archive-button { + width: 40%; + margin: 0 22px 30px; + height: 80px; + } + small { + font-size: 80%; + display: block; + } +} + +div.side-nav-bottom { + width: 100%; + position: fixed; + bottom: 20px; + background-color: $navigation_background; + + .version { + padding-left: 55px; + padding-bottom: 3px; + } +} + +.buttons-group span#attachment-button{ + cursor: pointer; + outline: 0; + margin-left: 18px; + padding-top: 0px; + -ms-transform: rotate(224deg); /* IE 9 */ + -webkit-transform: rotate(224deg); /* Chrome, Safari, Opera */ + transform: rotate(224deg); + + i.fa-paperclip { + font-size: 1.7em; + } + + &.busy { + color: lighten($recipients_font_color, 10%); + cursor: progress; + } +} diff --git a/web-ui/app/scss/main.scss b/web-ui/app/scss/main.scss index 7d081ad1..b582a5d5 100644 --- a/web-ui/app/scss/main.scss +++ b/web-ui/app/scss/main.scss @@ -2,9 +2,15 @@ @import "reset"; @import "foundation"; @import "colors"; +@import "mixins"; +@import "alerts"; +@import "read"; +@import "reply"; +@import "compose"; +@import "security"; +@import "mascot"; @import "styles"; - html { height:100%; } diff --git a/web-ui/app/scss/styles.scss b/web-ui/app/scss/styles.scss deleted file mode 100644 index a5a6dca1..00000000 --- a/web-ui/app/scss/styles.scss +++ /dev/null @@ -1,906 +0,0 @@ - -@import "compass/css3"; -@import "colors"; -@import "mixins"; -@import "alerts"; -@import "read"; -@import "reply"; -@import "compose"; -@import "security"; - - -#logo { - color: $white; -} - -#logout { - color: $white; -} - -.search-highlight { - background-color: $search-highlight; -} - -#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; - } - } -} - -.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; -} - -@mixin list-actions { - #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; - } - } - } -} - -@mixin email-list { - ul#mail-list { - clear: both; - li { - height: 66px; - position: relative; - padding: 8px 10px 10px 10px; - background: $contrast; - border-bottom: 1px solid white; - cursor: pointer; - font-weight: bold; - transition: background-color 150ms ease-out; - span { - display: inline-block; - vertical-align: top; - &:last-child { - width: 92%; - } - input[type=checkbox] { - @include check-box; - margin-right: 2px; - } - a { - color: $dark_grey; - display: block; - height: 62px; - margin-top: -8px; - padding-top: 3px; - width: 106%; - } - } - .subject-and-tags { - display: block; - width: 90%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - @include tags; - ul.tags { - display: block; - line-height: 1.2; - margin: -3px 0 0 0; - li { - font-size: 0.6rem; - background-color: lighten($action_buttons, 12); - color: white; - display: inline-block; - height: auto; - font-weight: 400; - border: none; - &.tag:hover { - text-decoration: none; - } - } - } - - i.fa-pencil, i.fa-trash-o { - color: $indicator_icon_color; - } - } - - .received-date, .sent-date { - position: absolute; - right: 10px; - font-size: 0.7em; - } - - .attachment-indicator { - margin: 2px 0 0 25px; - font-size: initial; - - i.fa-paperclip { - color: $indicator_icon_color; - } - } - .from { - white-space: nowrap; - font-size: 0.8em; - width: 80%; - overflow: hidden; - text-overflow: ellipsis; - } - - &.status-read { - a { - font-weight: normal; - color: $attachment_text; - } - } - &:hover { - background: darken($contrast, 5%); - } - &.selected { - background: $white; - z-index: 3; - a { - color: $dark_grey; - } - } - } - } -} - -@mixin mail-count($bg_color) { - background: $bg_color; - color: $white; - padding: 2px 5px; - font-size: 0.7em; - margin-left: 5px; - font-weight: 700; - position: relative; - @include border-radius(100px); -} - -section { - display: inline-block; - vertical-align: top; - height: 100vh; - overflow-y: scroll; - &#top-pane { - height: auto; - overflow: hidden; - background: $top_pane; - border-top: 1px solid $top_pane; - @include list-actions; - #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; - } - } - } - - &#left-pane { - background-color: $navigation_background; - color: white; - 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.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%); - } - } - } - - &#middle-pane { - background: $contrast; - @include email-list; - } - - &#right-pane { - padding: 0 10px 60px 0px; - background: $white; - box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.12); - z-index: 2; - overflow-y: auto; - @include read-msg; - [id^=fullView-] { - position: relative; - } - } -} - -.unread-count { - @include mail-count($secondary_callout); -} -.total-count { - @include mail-count($medium_light_grey); -} - - -/* ACTIONS */ -#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; - } - } - } -} - -.buttons-group { - clear: both; - margin: 20px 0 0; - padding: 0; -} - -#draft-save-status { - float: right; - padding: 0.4rem 1.1rem; - color: $lighter_blue; -} - -button { - border: 1px solid transparent; - i { - margin-left: 5px; - } - &#trash-button { - background: $white; - border: 1px solid $medium_light_grey; - color: $medium_light_grey; - float: right; - margin-left: 5px; - &:hover, &:focus { - background: $contrast; - } - } - &.close-mail-button { - background: transparent; - color: $medium_light_grey; - float: right; - &:hover { - color: darken($medium_light_grey, 10%); - } - } - &.close-mail-button { - position: absolute; - left: 0; - top: 0; - margin: 0; - padding: 3px 6px 5px; - background: $lighter_gray; - opacity: 0.7; - @include border-radius(0); - &:hover { - opacity: 1; - } - i { - margin: 0; - } - } - &.no-style { - background: transparent; - color: $medium_light_grey; - padding: 0; - margin: 0; - i { - margin: 0; - padding: 0; - vertical-align: middle; - } - } -} - -.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; - } - } - .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; - } - } - } - #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; - } - } -} - -.hidden { - 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-transition: -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); -} - - -#delete-modal { - button#trash-button, button#archive-button { - width: 40%; - margin: 0 22px 30px; - height: 80px; - } - small { - font-size: 80%; - display: block; - } -} - -div.side-nav-bottom { - width: 100%; - position: fixed; - bottom: 20px; - background-color: $navigation_background; - - .version { - padding-left: 55px; - padding-bottom: 3px; - } -} - -.buttons-group span#attachment-button{ - cursor: pointer; - outline: 0; - margin-left: 18px; - padding-top: 0px; - -ms-transform: rotate(224deg); /* IE 9 */ - -webkit-transform: rotate(224deg); /* Chrome, Safari, Opera */ - transform: rotate(224deg); - - i.fa-paperclip { - font-size: 1.7em; - } - - &.busy { - color: lighten($recipients_font_color, 10%); - cursor: progress; - } -} - - -@import "mascot.scss"; -- cgit v1.2.3