summaryrefslogtreecommitdiffstats
path: root/web/sass-files/sass/layout/_sidebar-right.scss
diff options
context:
space:
mode:
authorChristopher Speller <crspeller@gmail.com>2016-03-15 14:05:05 -0400
committerChristopher Speller <crspeller@gmail.com>2016-03-15 14:05:05 -0400
commit3745204097b2f03cd5f3fc1292ea62fb4f931232 (patch)
tree3380ee0fd2341dac1814aed8cf851bfe274a21a7 /web/sass-files/sass/layout/_sidebar-right.scss
parentbf7ae0711743926cfbb031675cc3320d7a942465 (diff)
parent7d79a916dd58d51989d35721060cfca6dce1baca (diff)
downloadchat-3745204097b2f03cd5f3fc1292ea62fb4f931232.tar.gz
chat-3745204097b2f03cd5f3fc1292ea62fb4f931232.tar.bz2
chat-3745204097b2f03cd5f3fc1292ea62fb4f931232.zip
Merge pull request #2429 from asaadmahmoodspin/ui-improvements
PLT-963 - Improving scss structure
Diffstat (limited to 'web/sass-files/sass/layout/_sidebar-right.scss')
-rw-r--r--web/sass-files/sass/layout/_sidebar-right.scss129
1 files changed, 129 insertions, 0 deletions
diff --git a/web/sass-files/sass/layout/_sidebar-right.scss b/web/sass-files/sass/layout/_sidebar-right.scss
new file mode 100644
index 000000000..e1a7d7641
--- /dev/null
+++ b/web/sass-files/sass/layout/_sidebar-right.scss
@@ -0,0 +1,129 @@
+@charset 'UTF-8';
+
+.sidebar--right {
+ position: fixed;
+ width: 400px;
+ height: 100%;
+ right: 0px;
+ padding: 0;
+ background: #fff;
+ @include translateX(400px);
+
+ .post-body {
+ img {
+ max-height: 200px;
+ }
+ }
+
+ .post {
+ .post__header {
+ .col__name {
+ .user-popover {
+ max-width: 130px;
+ }
+ }
+ }
+ }
+
+ .sidebar--right__content {
+ height: 100%;
+ @include display-flex;
+ @include flex-direction(column);
+ }
+
+ .sidebar--right__back {
+ color: inherit;
+ @include opacity(.8);
+ width: 30px;
+ text-align: center;
+ margin: 0 0 0 -14px;
+ font-size: 13px;
+ display: inline-block;
+ }
+
+ .sidebar-right__body {
+ @include flex(1 1 auto);
+ border-left: $border-gray;
+ border-top: $border-gray;
+ @include display-flex;
+ @include flex-direction(column);
+ height: calc(100% - 56px);
+ @include border-radius(2px 0 0 0);
+ }
+
+ .sidebar__overlay {
+ width: 100%;
+ height: 100%;
+ background-color: yellow;
+ @include opacity(.1);
+ position: absolute;
+ z-index: 5;
+ pointer-events: none;
+ }
+
+ .input-group {
+ word-break: break-word;
+ }
+
+ .sidebar--right__close {
+ margin: 11px 0 0 0;
+ width: 22px;
+ height: 22px;
+ opacity: .5;
+ font-size: 22px;
+ line-height: 0;
+ background: none;
+ float: right;
+ outline: none;
+ border: none;
+ @include single-transition(all, .2s, ease-in);
+
+ &:hover,
+ &:active {
+ opacity: .8;
+ }
+
+ i {
+ position: relative;
+ top: -2px;
+ }
+ }
+
+ .sidebar--right__header {
+ font-size: 1em;
+ text-transform: uppercase;
+ color: inherit;
+ height: 44px;
+ padding: 0 1em;
+ line-height: 44px;
+ @include flex(0 0 44px);
+ border-bottom: $border-gray;
+ }
+
+ .sidebar--right__subheader {
+ font-size: 1em;
+ padding: 1em 1em 0;
+
+ h4 {
+ font-size: 1em;
+ }
+
+ ul {
+ @include opacity(.7);
+ padding: 10px 0 0 30px;
+ }
+
+ li {
+ font-size: .95em;
+ padding-bottom: 10px;
+ }
+ }
+
+ .suggestion-list__content {
+ max-height: 120px;
+ }
+}
+
+.sidebar-right-container {
+ height: 100%;
+}