diff options
author | Asaad Mahmood <asaadmahmoodspin@users.noreply.github.com> | 2016-06-30 05:04:37 +0500 |
---|---|---|
committer | Corey Hulen <corey@hulen.com> | 2016-06-29 16:04:37 -0800 |
commit | 1f9eb4db6ab4328e44c8587105eb005890052078 (patch) | |
tree | cc649a09b0684af5ea05ecb8dc609595cf662ac4 /webapp/sass/layout/_sidebar-right.scss | |
parent | b97b3ae6179bc15ec23e0697b08cdcbdf53e4ffc (diff) | |
download | chat-1f9eb4db6ab4328e44c8587105eb005890052078.tar.gz chat-1f9eb4db6ab4328e44c8587105eb005890052078.tar.bz2 chat-1f9eb4db6ab4328e44c8587105eb005890052078.zip |
Adding expand icon for RHS (#3386)
* Adding expand icon for RHS
Fixing errors
Adding back getTeamInviteLink with better functionality for mobile
Adding vertical align to post__link
Updating improvements for expand RHS stuff
* Improving transition on mobile
* Removing irrelevant changes
Diffstat (limited to 'webapp/sass/layout/_sidebar-right.scss')
-rw-r--r-- | webapp/sass/layout/_sidebar-right.scss | 54 |
1 files changed, 47 insertions, 7 deletions
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; } |