diff options
Diffstat (limited to 'webapp/sass')
| -rw-r--r-- | webapp/sass/components/_module.scss | 1 | ||||
| -rw-r--r-- | webapp/sass/components/_popover.scss | 2 | ||||
| -rw-r--r-- | webapp/sass/layout/_headers.scss | 11 | ||||
| -rw-r--r-- | webapp/sass/layout/_navigation.scss | 1 | ||||
| -rw-r--r-- | webapp/sass/layout/_sidebar-right.scss | 54 | ||||
| -rw-r--r-- | webapp/sass/responsive/_mobile.scss | 23 | ||||
| -rw-r--r-- | webapp/sass/responsive/_tablet.scss | 29 |
7 files changed, 104 insertions, 17 deletions
diff --git a/webapp/sass/components/_module.scss b/webapp/sass/components/_module.scss index e74404d9c..8c2c575c2 100644 --- a/webapp/sass/components/_module.scss +++ b/webapp/sass/components/_module.scss @@ -14,6 +14,7 @@ @import 'save-button'; @import 'scrollbar'; @import 'search'; +@import 'status-icon'; @import 'suggestion-list'; @import 'tooltip'; @import 'tutorial'; diff --git a/webapp/sass/components/_popover.scss b/webapp/sass/components/_popover.scss index 7526fcb5a..d1e14ec72 100644 --- a/webapp/sass/components/_popover.scss +++ b/webapp/sass/components/_popover.scss @@ -66,7 +66,7 @@ .search-help-popover { @include single-transition(opacity, .3s, ease-in); font-size: em(13px); - max-width: none; + max-width: 350px; top: 36px; visibility: hidden; width: 100%; diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss index 2382a39e4..cc9f0f713 100644 --- a/webapp/sass/layout/_headers.scss +++ b/webapp/sass/layout/_headers.scss @@ -143,9 +143,16 @@ &.popover { white-space: normal; } - } - @import "../components/status-icon"; + .status { + width: 18px; + + svg { + max-height: 20px; + width: 16px; + } + } + } } .channel-intro { diff --git a/webapp/sass/layout/_navigation.scss b/webapp/sass/layout/_navigation.scss index 70b9eb133..50d144b9c 100644 --- a/webapp/sass/layout/_navigation.scss +++ b/webapp/sass/layout/_navigation.scss @@ -72,6 +72,7 @@ color: $white; display: inline-block; font-weight: 600; + line-height: 47px; margin-right: 5px; max-width: calc(100% - 200px); overflow: hidden; diff --git a/webapp/sass/layout/_sidebar-right.scss b/webapp/sass/layout/_sidebar-right.scss index 00e183254..d98474a7f 100644 --- a/webapp/sass/layout/_sidebar-right.scss +++ b/webapp/sass/layout/_sidebar-right.scss @@ -8,6 +8,18 @@ position: fixed; right: 0; width: 400px; + z-index: 5; + + .sidebar--right__bg { + @include single-transition(background-color, .5s, ease); + background-color: alpha-color($black, 0); + height: 100%; + left: -100%; + position: absolute; + top: 0; + visibility: hidden; + width: 300%; + } .post-body { img { @@ -46,17 +58,29 @@ } .sidebar--right__back { - @include opacity(.8); + @include single-transition(all, .2s, ease-in); + @include opacity(.5); color: inherit; display: inline-block; - font-size: 13px; + font-size: 26px; margin: 0 0 0 -14px; text-align: center; + vertical-align: top; width: 30px; + + &:hover, + &:active { + color: inherit; + opacity: .8; + } + + i { + position: relative; + top: -2px; + } } .sidebar-right__body { - @include border-radius(2px 0 0 0); @include display-flex; @include flex(1 1 auto); @include flex-direction(column); @@ -79,18 +103,22 @@ word-break: break-word; } + .sidebar--right__buttons { + float: right; + } + .sidebar--right__close { @include single-transition(all, .2s, ease-in); background: none; border: none; - float: right; - font-size: 22px; + font-size: 20px; height: 22px; line-height: 0; margin: 11px 0 0; opacity: .5; outline: none; - width: 22px; + padding: 0; + width: 30px; &:hover, &:active { @@ -99,8 +127,20 @@ i { position: relative; + } + } + + .sidebar--right__expand { + @extend .sidebar--right__close; + font-size: 17px; + + i { top: -2px; } + + .fa-compress { + display: none; + } } .sidebar--right__header { @@ -110,7 +150,7 @@ font-size: 1em; height: 44px; line-height: 44px; - padding: 0 1em; + padding: 0 5px 0 15px; text-transform: uppercase; } diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index 78bd8580d..884c69d74 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -314,15 +314,15 @@ } } - .row--invite { - .col-sm-6 { - &:first-child { - padding-right: 15px; + .app__body { + .row--invite { + .col-sm-6 { + &:first-child { + padding-right: 15px; + } } } - } - .app__body { .modal { .info__label { padding-bottom: 5px; @@ -590,8 +590,17 @@ .navbar-brand { white-space: nowrap; + } + + .status { + margin: 0 5px 0 3px; + top: 2px; + width: 16px; - @import "../components/status-icon"; + svg { + max-height: 20px; + width: 16px; + } } } } diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss index 44a7be2ac..69443aafc 100644 --- a/webapp/sass/responsive/_tablet.scss +++ b/webapp/sass/responsive/_tablet.scss @@ -75,6 +75,34 @@ &.move--left { @include translateX(0); } + + &.sidebar--right--expanded { + width: calc(100% - 280px); + + .sidebar--right__bg { + background-color: alpha-color($black, .4); + visibility: visible; + } + + .search-bar__container { + padding-left: 10px; + } + + .sidebar-right-container { + position: relative; + z-index: 5; + } + + .sidebar--right__expand { + .fa-expand { + display: none; + } + + .fa-compress { + display: inline-block; + } + } + } } .inner-wrap { @@ -90,6 +118,7 @@ .post__link { margin: 4px 0 7px; + vertical-align: bottom; } .post__time { |