diff options
author | Jan-Christoph Borchardt <hey@jancborchardt.net> | 2017-11-02 17:54:19 +0300 |
---|---|---|
committer | Jan-Christoph Borchardt <hey@jancborchardt.net> | 2017-11-02 17:54:19 +0300 |
commit | 89749ab7f958849a8d06d73b07770536e5114663 (patch) | |
tree | 0cd0185059be38e86d5fa0bb2b9fbf35f443b652 /css | |
parent | dff76cb43dcf929bdce66f67c641d17b87795a82 (diff) |
Move from CSS to SCSS
Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
Diffstat (limited to 'css')
-rwxr-xr-x | css/mail.scss (renamed from css/mail.css) | 166 |
1 files changed, 166 insertions, 0 deletions
diff --git a/css/mail.css b/css/mail.scss index a412729c8..9ae88e333 100755 --- a/css/mail.css +++ b/css/mail.scss @@ -804,3 +804,169 @@ input.submit-message, .icon-trash { background-image: url('../img/trash.svg'); } + + + +#app-navigation { + width: 250px; + height: 100%; + float: left; + box-sizing: border-box; + background-color: $color-main-background; + padding-bottom: 44px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + border-right: 1px solid $color-border; + display: flex; + flex-direction: column; + li { + position: relative; + } + > ul { + position: relative; + height: 100%; + width: inherit; + overflow-x: hidden; + overflow-y: auto; + box-sizing: border-box; + display: flex; + flex-direction: column; + > li { + display: inline-flex; + flex-wrap: wrap; + order: 1; + flex-shrink: 0; + + /* Pinned-to-bottom entries */ + &.pinned { + order: 2; + &.first-pinned { + margin-top: auto !important; + } + } + + > a, + > .app-navigation-entry-deleted { + /* Ugly hack for overriding the main entry link */ + padding-left: 44px !important; + } + > .app-navigation-entry-edit { + /* Ugly hack for overriding the main entry link */ + /* align the input correctly with the link text + 44px-6px padding for the input */ + padding-left: 38px !important; + } + + &:focus, + &:hover, + &.active, + a.selected { + &, + > a { + opacity: 1; + box-shadow: inset 2px 0 $color-primary; + } + } + + /* align loader */ + &.icon-loading-small:after { + left: 22px; + top: 22px; + } + + /* hide and animate deletion/collapse of subitems */ + &.deleted, + &.collapsible:not(.open) { + > ul { + opacity: 0; + max-height: 0; + /* bezier override the hide/slow effect due to the 2000 max-height */ + transition: max-height 1000ms cubic-bezier(0, 1, 0, 1), + opacity 250ms ease-in-out; + } + } + + /* Second level nesting for lists */ + > ul { + flex: 1 0 100%; + padding-left: 62px; + width: inherit; + transition: max-height 2000ms ease-in-out, + opacity 250ms ease-in-out; + max-height: 9999px; + opacity: 1; + > li { + display: inline-flex; + flex-wrap: wrap; + &:focus, + &:hover, + &.active, + a.selected { + &, + > a { + opacity: 1; + } + } + + /* align loader */ + &.icon-loading-small:after { + left: -10px; + } + + /* Submenu fix for icon */ + > a[class*='icon-'], + > a[style*='background-image'], + .app-navigation-entry-bullet { + margin-left: -32px; /* 44px padding - 12px padding */ + } + + /* Submenu fix for bullet */ + > .app-navigation-entry-bullet { + left: -32px;/* 44px padding - 12px padding */ + } + } + } + } + /* Menu and submenu */ + > li, + > li > ul > li { + position: relative; + width: 100%; + box-sizing: border-box; + /* hide icons if loading */ + &.icon-loading-small { + > a, + > .app-navigation-entry-bullet { + background: none !important; + } + } + /* Main entry link */ + > a { + background-size: 16px 16px; + background-position: 14px center; + background-repeat: no-repeat; + display: block; + justify-content: space-between; + line-height: 44px; + min-height: 44px; + padding: 0 12px; + overflow: hidden; + box-sizing: border-box; + white-space: nowrap; + text-overflow: ellipsis; + color: $color-main-text; + opacity: .57; + flex: 1 1 0; + z-index: 100; /* above the bullet */ + /* TODO: forbid using img as icon in menu? */ + &:first-child img { + margin-right: 11px; + width: 16px; + margin-left: -30px; + } + } + } + } +} |