diff options
Diffstat (limited to 'webapp/sass/layout')
-rw-r--r-- | webapp/sass/layout/_headers.scss | 230 | ||||
-rw-r--r-- | webapp/sass/layout/_navigation.scss | 59 | ||||
-rw-r--r-- | webapp/sass/layout/_post.scss | 9 | ||||
-rw-r--r-- | webapp/sass/layout/_sidebar-left.scss | 145 | ||||
-rw-r--r-- | webapp/sass/layout/_sidebar-right.scss | 46 |
5 files changed, 350 insertions, 139 deletions
diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss index 1386b4169..dd8440d19 100644 --- a/webapp/sass/layout/_headers.scss +++ b/webapp/sass/layout/_headers.scss @@ -1,57 +1,82 @@ @charset 'UTF-8'; .channel-header { - @include flex(0 0 57px); - border-left: none; + @include flex(0 0 70px); + border-bottom: 1px solid; font-size: 14px; - line-height: 56px; position: relative; width: 100%; z-index: 9; - .member-popover__trigger, - .pinned-posts-button { + .channel-header__icon { + @include border-radius(50%); + border: 1px solid; cursor: pointer; - display: inline-block; - margin-left: 7px; + height: 37px; + line-height: 36px; + margin: 16px 10px 0 0; min-width: 30px; text-align: center; - white-space: nowrap; + width: 37px; + + &.wide { + @include border-radius(37px); + padding: 0; + white-space: nowrap; + width: auto; + + > div { + padding: 0 13px 0 15px; + } + } + + .icon__text { + font-weight: 600; + margin-right: 9px; + } + + a { + display: block; + } .fa { font-size: 19px; } - } - - .member-popover__container, - .member-popover__trigger { - display: inline; - } - .member-popover__trigger { & + div { display: none; } - } - .member-popover__trigger { - .fa { - margin-left: 4px; + .icon { position: relative; + } + + .icon__pin, + .icon__members { top: 2px; } + + .icon__mentions { + top: 5px; + } + + .icon__flag { + top: 3px; + } } - .pinned-posts-button svg { - position: relative; - top: 5px; + .move--left & { + .icon--hidden { + display: none; + } } &.alt { margin: 0; th { - font-weight: normal !important; + font-weight: normal; + vertical-align: top; &.header-list__right { padding-right: 4px; @@ -69,15 +94,15 @@ &:first-child { border-left: none; - padding-left: 15px; - padding-right: 1em; + padding: 0 0 0 20px; text-align: left !important; width: 100%; } &:last-child { - padding-right: 6px; - width: 8.9%; + .channel-header__icon { + margin-right: 17px; + } } } @@ -93,13 +118,26 @@ .heading { display: inline-block; - font-size: 1.3em; - font-weight: 600; + font-size: 17px; + font-weight: 400; margin: 0 4px 0 0; - max-width: 100%; + max-width: calc(100vw - 780px); overflow: hidden; text-overflow: ellipsis; - vertical-align: middle; + vertical-align: top; + white-space: nowrap; + + .move--left & { + max-width: calc(100vw - 830px); + + .multi-teams & { + max-width: calc(100vw - 880px); + } + } + + .multi-teams & { + max-width: calc(100vw - 830px); + } } .caret { @@ -131,62 +169,74 @@ .header-dropdown__icon { color: inherit; - font-size: 12px; + font-size: 21px; margin-left: 1px; position: relative; - top: 1px; + top: 2px; } .channel-header__info { - display: table; - table-layout: fixed; - width: 100%; + margin-top: 12px; + + .channel-header__title { + .header-dropdown__icon { + color: $dark-gray; + } + + > a { + display: inline-block; + text-decoration: none; + } + + .modal { + white-space: normal; + } + } - > div { - display: block; + .channel-header__description { + display: inline-block; + height: 22px; + margin-top: 3px; + max-width: calc(100vw - 730px); + overflow: hidden; + text-overflow: ellipsis; white-space: nowrap; word-break: break-word; - &.dropdown { - float: left; - max-width: 90%; - padding-right: 1em; + .markdown__heading { + font-size: 1em; + margin: 0; + } - .header-dropdown__icon { - color: $dark-gray; - } + .multi-teams & { + max-width: calc(100vw - 780px); + } - a { - text-decoration: none; - } + &.light { + @include opacity(.6); + color: inherit; - .modal { - white-space: normal; + &:hover, + &:focus { + color: inherit; } } - &.description { - margin-top: 2px; - max-height: 45px; - overflow: hidden; - text-overflow: ellipsis; - - .markdown-inline-img { - max-height: 45px; - } + .move--left & { + max-width: calc(100vw - 780px); } - &.popover { - white-space: normal; + .markdown-inline-img { + max-height: 45px; } + } - .status { - width: 18px; + .status { + width: 18px; - svg { - max-height: 20px; - width: 16px; - } + svg { + max-height: 20px; + width: 16px; } } } @@ -261,7 +311,7 @@ @include legacy-pie-clearfix; @include display-flex(); @include flex-direction(row-reverse); - padding: 9px 10px; + padding: 16px 47px 12px 12px; position: relative; &:before { @@ -305,11 +355,12 @@ .sidebar-header-dropdown, .admin-navbar-dropdown { font-size: .85em; + height: 100%; left: 0; - margin-right: -15px; + margin-right: -22px; position: absolute; right: 22px; - top: 10px; + top: 0; li { width: 100%; @@ -323,7 +374,7 @@ color: $white; display: block; font-size: 1em; - height: 40px; + height: 100%; left: 0; line-height: 1.8; padding: 10px; @@ -331,7 +382,7 @@ } .dropdown-menu { - margin-right: 3px; + margin-right: 10px; margin-top: 4px; width: 199px; @@ -344,8 +395,16 @@ .sidebar-header-dropdown__icon, .admin-navbar-dropdown__icon { + border-radius: 36px; fill: $white; float: right; + height: 36px; + line-height: 36px; + position: relative; + right: -3px; + text-align: center; + top: 7px; + width: 36px; } } @@ -377,9 +436,7 @@ } .team__name { - float: left; line-height: 22px; - margin-top: -2px; } .user__name { @@ -419,8 +476,30 @@ } .channel-header__favorites { + @include opacity(.5); float: left; - margin: 1px 10px 0 0; + height: 20px; + margin: 0 8px 0 0; + padding-top: 3px; + position: relative; + z-index: 1; + + &.inactive { + color: inherit; + + &:hover, + &:active { + color: inherit; + } + } + + &.active { + @include opacity(1); + } + + i { + font-size: 17px; + } } .app__body { @@ -476,6 +555,7 @@ &.active { color: $primary-color; @include opacity(1); + .icon { fill: $primary-color; } diff --git a/webapp/sass/layout/_navigation.scss b/webapp/sass/layout/_navigation.scss index 59b348d9e..09b6534b0 100644 --- a/webapp/sass/layout/_navigation.scss +++ b/webapp/sass/layout/_navigation.scss @@ -31,17 +31,17 @@ .navbar-default { background: $primary-color; border: none; - min-height: 45px; + min-height: 50px; position: absolute; .navbar-nav { > li { > a { - height: 45px; + height: 50px; padding: 0 1.3em; i { - line-height: 45px; + line-height: 50px; } } } @@ -52,22 +52,37 @@ border-radius: 0; fill: $white; float: left; - height: 44px; + height: 50px; line-height: 48px; margin: 0; padding: 0 10px; - width: 43px; + width: 50px; z-index: 5; + &.navbar-right__icon { + @include border-radius(50px); + height: 32px; + line-height: 0; + margin: 9px 10px 0 0; + padding: 0; + width: 32px; + } + + &.menu-toggle { + margin-right: 16px; + } + .icon-bar { background: $white; width: 21px; } - .icon-search { - font-size: 17px; - position: relative; - top: -2px; + .icon__search { + svg { + left: -1px; + position: relative; + width: 17px; + } } .icon--white { @@ -84,15 +99,15 @@ .navbar-brand { float: none; font-size: 16px; - height: 45px; - line-height: 45px; + height: 50px; + line-height: 50px; padding: 0 .5em; .heading { color: $white; display: inline-block; font-weight: 600; - line-height: 47px; + line-height: 50px; margin-right: 5px; max-width: calc(100% - 200px); overflow: hidden; @@ -114,20 +129,26 @@ margin-right: 1em; &.info-popover { - @include background-size(100% 100%); - background-image: url('../images/info__icon.png'); + @include border-radius(50px); cursor: pointer; - height: 19px; + height: 32px; + line-height: 32px; + margin: 9px 10px 0 0; position: relative; - top: 13px; - vertical-align: middle; - width: 19px; + text-align: center; + vertical-align: top; + width: 32px; + + svg { + position: relative; + top: 5px; + } } } } } - .sidebar-channel { + .sidebar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index b8c623e2d..b227d818c 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -1487,16 +1487,21 @@ .flag-icon__container { display: inline-block; - font-size: 12px; + height: 15px; margin-left: 7px; position: relative; - top: 1px; + top: 2px; + vertical-align: top; visibility: hidden; &.visible { visibility: visible; } + svg { + width: 12px; + } + path { fill: inherit; } diff --git a/webapp/sass/layout/_sidebar-left.scss b/webapp/sass/layout/_sidebar-left.scss index ed587305a..cc0c4920f 100644 --- a/webapp/sass/layout/_sidebar-left.scss +++ b/webapp/sass/layout/_sidebar-left.scss @@ -16,6 +16,33 @@ padding-top: 44px; } + .sidebar-item { + .icon { + display: inline-block; + margin: 0 7px 0 1px; + position: relative; + text-align: left; + vertical-align: top; + width: 15px; + } + + .icon__lock { + top: 2px; + } + + .icon__globe { + top: 1px; + } + } + + .sidebar-item__name { + display: inline-block; + max-width: 167px; + overflow: hidden; + text-overflow: ellipsis; + vertical-align: top; + } + .sidebar__divider { color: $white; font-size: .9em; @@ -44,7 +71,6 @@ } .sidebar__switcher { - border-top: 1px solid; bottom: 0; display: block; padding-bottom: 0; @@ -54,18 +80,30 @@ button { @include single-transition(all, .15s, ease-in); display: block; - height: 42px; - text-align: center; + font-weight: 600; + height: 50px; + line-height: 50px; + padding: 0; text-decoration: none; width: 100%; > span { - @include single-transition(all, .15s, ease-in); - @include opacity(.6); + display: inline-block; position: relative; + vertical-align: middle; z-index: 5; } + .icon { + display: none; + margin-right: 15px; + + svg { + position: relative; + top: 7px; + } + } + &:hover { span { @include opacity(1); @@ -93,15 +131,20 @@ } .badge { - background-color: $primary-color; + @include border-radius(100px); + font-size: 11px; + height: 16px; + line-height: 16px; + min-width: 18px; + padding: 0 5px; position: absolute; - right: 10px; - top: 5px; + right: 15px; + top: 8px; } .nav-pills__container { -webkit-overflow-scrolling: touch; - height: calc(100% - 99px); + height: calc(100% - 120px); overflow: auto; position: relative; } @@ -119,11 +162,11 @@ } .nav-pills__unread-indicator-top { - top: 66px; + top: 80px; } .nav-pills__unread-indicator-bottom { - bottom: 50px; + bottom: 60px; } .nav { @@ -135,12 +178,10 @@ li { > h4 { - color: #aaaaaa; font-size: 1em; - font-weight: 400; - letter-spacing: -.3px; - margin: 1.1em 0 .5em; - padding: 0 10px 0 15px; + font-weight: 600; + margin: 1.5em 0 .7em; + padding: 0 12px 0 17px; text-transform: uppercase; } @@ -155,17 +196,24 @@ line-height: 1.5; outline: none; overflow: hidden; - padding: 3px 10px 3px 25px; + padding: 5px 0 5px 17px; text-overflow: ellipsis; white-space: nowrap; + .icon { + &.icon__globe, + &.icon__lock { + @include opacity(.5); + } + } + &.has-badge { - padding-right: 30px; + .sidebar-item__name { + max-width: 142px; + } } &.has-close { - padding-right: 30px; - &:hover { .btn-close { @include opacity(.8); @@ -177,11 +225,11 @@ @include opacity(0); display: none; font-family: 'Open Sans', sans-serif; - font-size: 20px; + font-size: 21px; font-weight: 600; position: absolute; - right: 15px; - top: -1px; + right: 18px; + top: 0px; &:hover { @include opacity(1); @@ -204,7 +252,14 @@ left: 0; position: absolute; top: 0; - width: 5px; + width: 3px; + } + } + + .icon { + &.icon__globe, + &.icon__lock { + @include opacity(.7); } } @@ -229,9 +284,8 @@ } .add-channel-btn { - color: #aaaaaa; float: right; - font-size: 22px; + font-size: 1.9em; font-weight: 700; line-height: 18px; margin: -2px 0 0 0; @@ -245,35 +299,46 @@ } .status-wrapper { + height: 36px; + width: 36px; + .status { - bottom: -9px; + bottom: -4px; height: 18px; right: -5px; width: 18px; - svg { - top: 3px; - max-height: 12px; + &.status-edit { + .fa { + top: 4px; + } } - .icon__container { + .fa { position: relative; - top: 3px; + top: 2px; + } + .icon__container { &:after { border-radius: 20px; content: ''; - height: 9px; - left: 5px; + height: 10px; + left: 4px; position: absolute; - top: 2px; - width: 9px; + top: 4px; + width: 10px; } + } - svg { - top: 0; - z-index: 1; - } + svg { + height: 13px; + left: 3px; + max-height: initial; + position: relative; + top: 3px; + width: 13px; + z-index: 1; } } } diff --git a/webapp/sass/layout/_sidebar-right.scss b/webapp/sass/layout/_sidebar-right.scss index ab73e075b..8181ac270 100644 --- a/webapp/sass/layout/_sidebar-right.scss +++ b/webapp/sass/layout/_sidebar-right.scss @@ -39,6 +39,25 @@ } } + .sidebar-right__table { + display: table; + + > div:not(.sidebar-collapse__container) { + display: table-cell; + + &:last-child { + .channel-header__icon { + margin-right: 17px; + } + } + } + + .search-form__container { + padding-right: 10px; + width: 100%; + } + } + .post-body { img { max-height: 200px; @@ -131,7 +150,6 @@ @include flex(1 1 auto); @include flex-direction(column); border-left: $border-gray; - border-top: $border-gray; height: calc(100% - 56px); } @@ -191,7 +209,7 @@ .sidebar--right__header { @include flex(0 0 44px); - border-bottom: $border-gray; + border-bottom: 1px solid; color: inherit; font-size: 1em; height: 44px; @@ -222,7 +240,7 @@ @include opacity(.9); margin: 0 3px; position: relative; - top: 1px; + top: 3px; } } @@ -234,3 +252,25 @@ .sidebar-right-container { height: 100%; } + +.sidebar-collapse__container { + display: none; +} + +.sidebar-collapse { + @include single-transition(all, .2s, linear); + @include translateX(0); + cursor: pointer; + font-size: 16px; + height: 48px; + line-height: 0; + padding-left: 1px; + text-align: center; + width: 50px; + z-index: 5; + + .fa { + position: relative; + top: 18px; + } +} |