diff options
Diffstat (limited to 'web-ui/app/scss/styles.scss')
| -rw-r--r-- | web-ui/app/scss/styles.scss | 122 |
1 files changed, 95 insertions, 27 deletions
diff --git a/web-ui/app/scss/styles.scss b/web-ui/app/scss/styles.scss index 7292f029..56c9ebbd 100644 --- a/web-ui/app/scss/styles.scss +++ b/web-ui/app/scss/styles.scss @@ -1,3 +1,4 @@ + @import "compass/css3"; @import "colors"; @import "mixins"; @@ -37,7 +38,7 @@ vertical-align: top; input[type=checkbox] { @include check-box; - margin: 7px 8px; + margin: 7px 13px 7px; } select { padding: 1px 3px; @@ -80,9 +81,9 @@ ul#mail-list { clear: both; li { - height: 75px; + height: 66px; position: relative; - padding: 12px 10px; + padding: 8px 10px 10px 10px; background: $contrast; border-bottom: 1px solid white; cursor: pointer; @@ -100,6 +101,11 @@ } a { color: #333; + display: block; + height: 62px; + margin-top: -8px; + padding-top: 3px; + width: 106%; } } .subject-and-tags { @@ -114,8 +120,9 @@ line-height: 1.2; margin: -3px 0 0 0; li { - background-color: #DDD; - color: black; + font-size: 0.6rem; + background-color: lighten($action_buttons, 12); + color: white; display: inline-block; height: auto; font-weight: 400; @@ -156,6 +163,7 @@ } &.selected { background: #FFF; + z-index: 3; a { color: #333; } @@ -222,7 +230,7 @@ section { input { margin: 0; padding: 8px 30px; - color: $secondary; + color: $navigation_background; background: white; border: none; transition: background-color 150ms ease-out; @@ -245,10 +253,10 @@ section { } &#left-pane { - background-color: $secondary; + background-color: $navigation_background; color: white; nav { - border-right: 1px solid lighten($secondary, 10%); + border-right: 1px solid lighten($navigation_background, 10%); ul#default-tag-list, #custom-tag-list { li { transition: background-color 150ms ease-out; @@ -256,12 +264,12 @@ section { cursor: pointer; &:hover { background: #CCC; - color: $secondary; + color: $navigation_background; } &.selected { font-weight: bold; background: $contrast; - color: $secondary; + color: $navigation_background; } } } @@ -273,6 +281,7 @@ section { top: 1px; left: 0; border: 1px solid #FFF; + border-bottom: 1px solid white; position: absolute; opacity: 0.95; } @@ -283,18 +292,24 @@ section { padding-left: 2px; } li { - padding: 5px 10px 5px 16px; + padding: 5px 10px 5px 18px; position: relative; @include searching(4px, 19px, #333, 0.7em); &:before { font-size: 1.5em; font-family: "FontAwesome"; - margin-right: 13px; + margin-right: 16px; font-weight: normal; position: relative; top: 2px; + margin-left: -3px; + } + + &:after { + padding-left: 10px; } + &:nth-child(1) { &:before { content: "\f01c"; @@ -303,6 +318,7 @@ section { &:nth-child(2) { &:before { content: "\f1d8"; + margin-left: -5px; } } &:nth-child(3) { @@ -318,35 +334,72 @@ section { &:nth-child(5) { &:before { content: "\f187"; + margin-left: -5px; } } } } ul#custom-tag-list { + visibility: hidden; + opacity: 0; + transition-duration: 500ms; + 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 { li { color: $action_buttons; - background-color: $secondary; + background-color: $navigation_background; padding: 5px 10px; position: relative; @include searching(4px, 19px, #333, 0.7em); &:hover { background-color: $action_buttons; - color: $secondary; + color: $navigation_background; } div { @@ -370,7 +423,7 @@ section { padding: 5px; font-weight: 600; margin: 0 10px; - border-bottom: 1px dotted lighten($secondary, 10%); + border-bottom: 1px dotted lighten($navigation_background, 10%); } } } @@ -486,28 +539,36 @@ button { } } -.fake-left-off-canvas-toggle { +.side-nav-toggle, .side-nav-toggle-icon { color: white; + cursor: pointer; &:hover, &:focus { color: white; } + background: $navigation_background; + &.logout { + color: $action_buttons; + } +} - padding: 9px 0px 8px 19px; +.side-nav-toggle-icon { + padding: 6px 0px 8px 19px; display: block; left: 0; - background: $secondary; top: 0; position: relative; - &.logout { - color: $action_buttons; - } } .left-off-canvas-logo { - img { - padding: 9px 6px 6px 6px; - width: 163px; + svg { + width: 162px; + height: 56px; + padding-left: 6px; + padding-top: 2px; + path, polygon, rect { + fill: $logo_color; + } } } @@ -515,7 +576,7 @@ button { width: 50px; position: absolute; height: 100vh; - background: $secondary; + background: $navigation_background; ul.shortcuts { li { @@ -527,7 +588,7 @@ button { opacity: 1; cursor: default; a { - color: $secondary; + color: $navigation_background; } } @include searching(6px, 26px, #666, 0.9em); @@ -540,7 +601,7 @@ button { text-align: center; &:hover { background: darken($contrast, 10%); - color: $secondary; + color: $navigation_background; @include btn-transition; &.logout{ color: #000000; @@ -707,4 +768,11 @@ button { } } +div.side-nav-bottom { + width: 100%; + position: fixed; + bottom: 0; + background-color: $navigation_background; +} + @import "mascot.scss"; |