diff options
Diffstat (limited to 'webapp/sass/layout/_sidebar-left.scss')
-rw-r--r-- | webapp/sass/layout/_sidebar-left.scss | 111 |
1 files changed, 68 insertions, 43 deletions
diff --git a/webapp/sass/layout/_sidebar-left.scss b/webapp/sass/layout/_sidebar-left.scss index ece054a15..4c65d0a65 100644 --- a/webapp/sass/layout/_sidebar-left.scss +++ b/webapp/sass/layout/_sidebar-left.scss @@ -1,86 +1,97 @@ @charset 'UTF-8'; .sidebar--left { + background: #fafafa; + border-right: $border-gray; + height: 100%; + left: 0; position: absolute; width: 220px; - left: 0; - height: 100%; - border-right: $border-gray; - background: #fafafa; z-index: 5; &.sidebar--padded { padding-top: 44px; } + .dropdown-menu { max-height: 400px; + max-width: 200px; overflow-x: hidden; overflow-y: auto; - max-width: 200px; width: 200px; } + .search__form { + display: none; margin: 0; padding: 1em 1em 0; - display: none; } + .badge { - background-color: $color--primary; + background-color: $primary-color; position: absolute; right: 10px; top: 5px; } + .status { + display: inline-block; + margin-right: 6px; position: relative; top: 1px; - margin-right: 6px; width: 12px; - display: inline-block; + svg { max-height: 14px; } + i, path, ellipse { @include opacity(.5); + &.online--icon, &.away--icon { @include opacity(1); } } + .fa-lock { margin-left: 1px; } + .fa-globe { - top: -1px; position: relative; + top: -1px; } } + .nav-pills__container { + -webkit-overflow-scrolling: touch; height: calc(100% - 80px); - position: relative; overflow: auto; - -webkit-overflow-scrolling: touch; + position: relative; } .nav-pills__unread-indicator { - position: absolute; - left: 0; - right: 0; - width: 72%; - color: #fff; - background: #2389d7; @include border-radius(50px); + background: #2389d7; + color: #ffffff; + font-size: 13.5px; + left: 0; margin: 0 auto; padding: 3px 0 4px; - font-size: 13.5px; + position: absolute; + right: 0; text-align: center; + width: 72%; z-index: 1; } .nav-pills__unread-indicator-top { top: 66px; } + .nav-pills__unread-indicator-bottom { bottom: 20px; } @@ -91,71 +102,83 @@ margin: 0; } } + li { > h4 { + color: #aaaaaa; font-size: 1em; - text-transform: uppercase; - margin: 1.1em 0 .5em; font-weight: 400; - color: #aaa; letter-spacing: -.3px; + margin: 1.1em 0 .5em; padding: 0 10px 0 15px; + text-transform: uppercase; } + > a { - padding: 3px 10px 3px 25px; - line-height: 1.5; border-radius: 0; - white-space: nowrap; + line-height: 1.5; overflow: hidden; + padding: 3px 10px 3px 25px; text-overflow: ellipsis; + white-space: nowrap; + &.has-badge { padding-right: 30px; } + &.has-close { padding-right: 30px; + &:hover { .btn-close { - display: block; @include opacity(.8); + display: block; } } + .btn-close { + @include opacity(0); + display: none; font-family: 'Open Sans', sans-serif; + font-size: 20px; + font-weight: 600; position: absolute; right: 15px; top: -1px; - font-size: 20px; - font-weight: 600; - @include opacity(0); - display: none; + &:hover { @include opacity(1); } } } + &.nav-more { text-decoration: underline; } + &.unread-title { font-weight: 600; } + } + &.active { a { &:before { + background: $black; content: ''; + height: 100%; + left: 0; position: absolute; top: 0; - left: 0; width: 5px; - height: 100%; - background: #000; } } + a, a:hover, a:focus { - background-color: rgba(black, .1); + @include alpha-property(background-color, $black, .1); border-radius: 0; font-weight: 400; position: relative; @@ -163,35 +186,37 @@ } } } + .modal-title { line-height: 2em; } .add-channel-btn { + color: #aaaaaa; float: right; - outline: none; + font-size: 22px; + font-weight: 700; + line-height: 18px; margin: -2px 0 0 0; - color: #aaa; + outline: none; padding: 0 5px; text-decoration: none; - font-size: 22px; - line-height: 18px; - font-weight: 700; + &:hover { - color: #666; + color: #666666; } } } .channel-loading-gif { height: 15px; - width: 15px; margin-top: 2px; + width: 15px; } .join-channel-loading-gif { - margin-top: 5px; - margin-left: 10px; height: 25px; + margin-left: 10px; + margin-top: 5px; width: 25px; } |