From f600b1dc2b39ff7b2b3d8450cba43ebb643adddd Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaad@spinpunch.com>
Date: Wed, 16 Mar 2016 20:31:21 +0500
Subject: Updating asss lint stuff with other scss improvements

---
 webapp/sass/components/_alerts.scss          |   6 +-
 webapp/sass/components/_buttons.scss         |   8 +-
 webapp/sass/components/_emoticons.scss       |  12 +-
 webapp/sass/components/_error-bar.scss       |  23 ++-
 webapp/sass/components/_files.scss           | 154 ++++++++--------
 webapp/sass/components/_inputs.scss          |  21 ++-
 webapp/sass/components/_links.scss           |  17 +-
 webapp/sass/components/_mentions.scss        |  38 ++--
 webapp/sass/components/_modal.scss           | 257 +++++++++++++--------------
 webapp/sass/components/_oauth.scss           |  14 +-
 webapp/sass/components/_popover.scss         |  99 ++++++-----
 webapp/sass/components/_scrollbar.scss       |  29 ++-
 webapp/sass/components/_search.scss          | 107 +++++------
 webapp/sass/components/_suggestion-list.scss |  20 +--
 webapp/sass/components/_tooltip.scss         |   4 +-
 webapp/sass/components/_tutorial.scss        | 115 ++++++------
 webapp/sass/components/_videos.scss          |  61 ++++---
 17 files changed, 506 insertions(+), 479 deletions(-)

(limited to 'webapp/sass/components')

diff --git a/webapp/sass/components/_alerts.scss b/webapp/sass/components/_alerts.scss
index 49ca3e8af..cb4c9c9e1 100644
--- a/webapp/sass/components/_alerts.scss
+++ b/webapp/sass/components/_alerts.scss
@@ -1,13 +1,13 @@
 @charset 'UTF-8';
 
 .alert {
-    padding: 8px 12px;
     @include border-radius($border-rad);
+    padding: 8px 12px;
 }
 
 .alert--confirm {
     display: inline-block;
     float: left;
-    padding: 4px 10px;
     margin: 1px 0 0 10px;
-}
\ No newline at end of file
+    padding: 4px 10px;
+}
diff --git a/webapp/sass/components/_buttons.scss b/webapp/sass/components/_buttons.scss
index bb8efbb14..efef11ce9 100644
--- a/webapp/sass/components/_buttons.scss
+++ b/webapp/sass/components/_buttons.scss
@@ -5,19 +5,19 @@
     @include border-radius($border-rad);
 
     &.btn-primary {
+        background: $primary-color;
         border-color: transparent;
-        background: $color--primary;
 
         &:hover,
         &:focus,
         &:active {
-            background: $color--primary--hover;
+            background: $primary-color--hover;
         }
     }
 
     &.btn-inactive {
+        background: $light-gray;
         border-color: transparent;
-        background: #707070;
-        color: #fff;
+        color: $white;
     }
 }
diff --git a/webapp/sass/components/_emoticons.scss b/webapp/sass/components/_emoticons.scss
index 661b25d94..80a800863 100644
--- a/webapp/sass/components/_emoticons.scss
+++ b/webapp/sass/components/_emoticons.scss
@@ -1,27 +1,27 @@
 @charset 'UTF-8';
 
 .emoticon {
-    width: 1.5em;
-    height: 1.5em;
+    background-size: contain;
     display: inline-block;
+    height: 1.5em;
     margin-bottom: .25em;
-    background-size: contain;
+    width: 1.5em;
 }
 
 .emoticon-suggestion {
     @include clearfix;
-    width: 100%;
-    height: 30px;
     cursor: pointer;
     font-size: 13px;
+    height: 30px;
     line-height: 30px;
+    width: 100%;
 }
 
 .emoticon-suggestion__image {
-    width: 20px;
     height: 20px;
     margin: 6px 6px 0 5px;
     padding: 0;
     text-align: center;
     vertical-align: top;
+    width: 20px;
 }
diff --git a/webapp/sass/components/_error-bar.scss b/webapp/sass/components/_error-bar.scss
index 2b74a33ae..cda7d25bd 100644
--- a/webapp/sass/components/_error-bar.scss
+++ b/webapp/sass/components/_error-bar.scss
@@ -1,29 +1,28 @@
 @charset 'UTF-8';
 
 .error-bar {
-    background-color: #09f;
-    text-align: center;
-    position: relative;
-    color: #fff;
+    background-color: darken($primary-color, 5%);
+    color: $white;
+    padding: 5px 30px;
     position: absolute;
+    text-align: center;
     top: 0;
     width: 100%;
     z-index: 9999;
-    padding: 5px 30px;
 
     &__close {
-        position: absolute;
-        right: 0;
-        top: 0;
-        color: #fff;
+        color: $white;
+        font-family: 'Open Sans', sans-serif;
         font-size: 20px;
         font-weight: 600;
-        text-decoration: none;
         padding: 0 10px;
-        font-family: 'Open Sans', sans-serif;
+        position: absolute;
+        right: 0;
+        text-decoration: none;
+        top: 0;
 
         &:hover {
-            color: #fff;
+            color: $white;
             text-decoration: none;
         }
     }
diff --git a/webapp/sass/components/_files.scss b/webapp/sass/components/_files.scss
index b9e2b5f7d..b854312c1 100644
--- a/webapp/sass/components/_files.scss
+++ b/webapp/sass/components/_files.scss
@@ -1,27 +1,31 @@
 @charset 'UTF-8';
 
 .file-preview__container {
-    position: relative;
+    height: 100px;
     margin: 1px 0 10px;
-    width: 100%;
     max-height: 100px;
-    height: 100px;
-    white-space: nowrap;
     overflow-x: auto;
     overflow-y: hidden;
+    position: relative;
+    white-space: nowrap;
+    width: 100%;
 }
 
 .file-preview {
+    @include clearfix;
+    border: 1px solid $light-gray;
     display: inline-block;
-    width: 120px;
     height: 100px;
     margin: 0 0 0 10px;
     position: relative;
-    border: 1px solid #ddd;
-    @include clearfix;
+    width: 120px;
 
-    &:hover .file-preview__remove:after {
-        @include opacity(1);
+    &:hover {
+        .file-preview__remove {
+            &:after {
+                @include opacity(1);
+            }
+        }
     }
 
     &:first-child {
@@ -29,13 +33,13 @@
     }
 
     .spinner {
-        position: absolute;
-        top: 50%;
+        height: 32px;
         left: 50%;
         margin-left: -16px;
         margin-top: -16px;
+        position: absolute;
+        top: 50%;
         width: 32px;
-        height: 32px;
     }
 }
 
@@ -46,14 +50,15 @@
 }
 
 .file-preview__remove {
-    position: absolute;
-    width: 100%;
     height: 100%;
     left: 0;
+    position: absolute;
     top: 0;
+    width: 100%;
 
     &:after {
-        background: rgba(0, 0, 0, .4);
+        @include opacity(0);
+        @include alpha-property(background, $black, .4);
         content: '';
         height: 100%;
         left: 0;
@@ -61,33 +66,31 @@
         position: absolute;
         top: 0;
         width: 100%;
-        @include opacity(0);
     }
 
     i {
-        top: 5px;
-        right: 5px;
-        position: absolute;
-        color: #fff;
+        color: $white;
         cursor: pointer;
-        z-index: 5;
         opacity: inherit;
-        text-shadow: 0 0px 3px #444;
-        text-shadow: 0 0px 3px rgba(0, 0, 0, .7);
+        position: absolute;
+        right: 5px;
+        text-shadow: 0 0 3px alpha-color($black, .7);
+        top: 5px;
+        z-index: 5;
     }
 }
 
 .image-comment {
     background-position: left top;
     background-repeat: no-repeat;
-    width: 300px;
     height: 300px;
+    width: 300px;
 }
 
 
 .file-icon {
-    width: 100%;
     height: 100%;
+    width: 100%;
 
     &.audio {
         @include file-icon('../images/icons/audio.png');
@@ -131,36 +134,30 @@
 }
 
 .post-image__column {
-    position: relative;
-    width: 240px;
-    height: 100px;
+    border: 1px solid alpha-color($black, .2);
     float: left;
+    height: 100px;
     margin: 5px 10px 5px 0;
-    border: 1px solid lightgrey;
-
-    a {
-        text-decoration: none;
-        color: grey;
-    }
+    position: relative;
+    width: 240px;
 }
 
 .post-image__load {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 20px 20px;
     height: 100%;
     width: 100%;
-    background-size: 20px 20px;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-image: url('~images/load.gif');
 }
 
 .post-image {
-    width: 100%;
-    height: 100%;
-    background-color: #fff;
+    background-color: $white;
     background-repeat: no-repeat;
+    height: 100%;
     overflow: hidden;
     position: relative;
     text-align: center;
+    width: 100%;
 
     &.small {
         background-position: center;
@@ -170,60 +167,59 @@
         background-position: top left;
     }
 
-    .spinner.file__loading {
-        position: absolute;
-        left: 50%;
-        margin-left: -16px;
-        top: 50%;
-        margin-top: -16px;
+    .spinner {
+        .file__loading {
+            left: 50%;
+            margin-left: -16px;
+            margin-top: -16px;
+            position: absolute;
+            top: 50%;
+        }
     }
 
     .file__loaded {
         max-width: initial;
+
         &.landscape,
         &.quadrat {
             height: 100px;
         }
+
         &.portrait {
             width: 120px;
         }
     }
-
-    &:hover .file-playback__controls.stop {
-        @include opacity(1);
-    }
 }
 
 .post-image__thumbnail {
+    @include cursor(zoom-in);
     float: left;
-    width: 50%;
     height: 100%;
-    cursor: zoom-in;
-    cursor: -webkit-zoom-in;
+    width: 50%;
 }
 
 .post-image__details {
-    float: left;
     @include clearfix;
-    word-break: break-word;
-    width: 50%;
-    height: 100%;
-    background: white;
-    border-left: 1px solid #ddd;
+    background: $white;
+    border-left: 1px solid $light-gray;
+    color: alpha-color($black, .8);
+    float: left;
     font-size: 13px;
+    height: 100%;
     padding: 7px;
-    color: #333;
+    width: 50%;
+    word-break: break-word;
 
     .post-image__name {
-        margin-bottom: 3px;
         display: block;
+        margin-bottom: 3px;
     }
 
     .post-image__download {
+        @include opacity(.7);
+        cursor: pointer;
         display: inline-block;
         padding-right: 7px;
-        cursor: pointer;
-        @include opacity(.7);
     }
 
     .post-image__type {
@@ -231,57 +227,55 @@
     }
 
     .post-image__size {
-        margin-left: 4px;
         @include opacity(.6);
+        margin-left: 4px;
     }
 }
 
 .file-details__container {
     @include display-flex;
-    display: -ms-flexbox;
 
     .file-details {
-        width: 320px;
         height: 270px;
         padding: 14px;
         text-align: left;
         vertical-align: top;
+        width: 320px;
 
         .file-details__name {
-            color: #333;
+            color: alpha-color($black, .9);
             font-size: 16px;
         }
 
         .file-details__info {
-            color: grey;
+            color: alpha-color($black, .5);
         }
     }
+
     .file-details__preview {
-        width: 320px;
+        border-right: 1px solid $light-gray;
         height: 270px;
-        border-right: 1px solid #ddd;
         vertical-align: center;
+        width: 320px;
 
         // helper to center the image icon in the preview window
         .file-details__preview-helper {
-            height: 100%;
             display: inline-block;
+            height: 100%;
             vertical-align: middle;
         }
     }
 }
 
 .file-playback__controls {
-    position: absolute;
-    right: 5px;
+    @include single-transition(opacity, .6s);
     bottom: 0;
-    font-size: 22px;
     cursor: pointer;
-    z-index: 2;
-    -webkit-transition: opacity .6s;
-    -moz-transition: opacity .6s;
-    -o-transition: opacity .6s;
+    font-size: 22px;
+    position: absolute;
+    right: 5px;
     transition: opacity .6s;
+    z-index: 2;
 
     &.stop {
         @include opacity(0);
@@ -289,6 +283,6 @@
 }
 
 .view-image__loading {
-    background: black;
+    background: $black;
     min-height: 100px;
 }
diff --git a/webapp/sass/components/_inputs.scss b/webapp/sass/components/_inputs.scss
index 5e3311182..42ab56128 100644
--- a/webapp/sass/components/_inputs.scss
+++ b/webapp/sass/components/_inputs.scss
@@ -15,12 +15,21 @@
     &.no-resize {
         resize: none;
     }
+
+    &[disabled],
+    [readonly] {
+        @include alpha-property(background, $white, .1);
+        color: inherit;
+        cursor: auto;
+    }
 }
 
-.form-control[disabled],
-.form-control[readonly],
-fieldset[disabled] .form-control {
-    cursor: auto;
-    background: rgba(#fff, .1);
-    color: inherit;
+fieldset {
+    &[disabled] {
+        .form-control {
+            @include alpha-property(background, $white, .1);
+            color: inherit;
+            cursor: auto;
+        }
+    }
 }
diff --git a/webapp/sass/components/_links.scss b/webapp/sass/components/_links.scss
index f31008b4f..3d7472670 100644
--- a/webapp/sass/components/_links.scss
+++ b/webapp/sass/components/_links.scss
@@ -1,23 +1,22 @@
 @charset 'UTF-8';
 
 a {
+    color: $primary-color;
     cursor: pointer;
     text-decoration: none;
     word-break: break-word;
-    color: $color--primary;
-}
 
-a:focus,
-a:hover {
-    color: $color--primary--hover;
+    &:hover,
+    &:focus {
+        color: $primary-color--hover;
+    }
 }
 
-.text-danger,
-a.text-danger {
-    color: #e05f5d;
+.text-danger {
+    color: desaturate($red, 20%);
 
     &:hover,
     &:focus {
-        color: #e05f5d;
+        color: desaturate($red, 20%);
     }
 }
diff --git a/webapp/sass/components/_mentions.scss b/webapp/sass/components/_mentions.scss
index 98efc599d..98ae7d320 100644
--- a/webapp/sass/components/_mentions.scss
+++ b/webapp/sass/components/_mentions.scss
@@ -1,24 +1,24 @@
 @charset 'UTF-8';
 
 .mention {
-    color: #fff;
-    background: $color--primary;
+    @include border-radius(3px);
+    background: $primary-color;
+    color: $white;
+    padding-bottom: 2px;
     position: relative;
     z-index: 10;
-    padding-bottom: 2px;
-    @include border-radius(3px);
 }
 
 .mentions__name {
-    position: relative;
-    width: 100%;
+    cursor: pointer;
+    font-size: 13px;
     height: 36px;
-    padding: 2px;
-    z-index: 101;
     line-height: 36px;
-    font-size: 13px;
-    cursor: pointer;
+    padding: 2px;
+    position: relative;
     white-space: nowrap;
+    width: 100%;
+    z-index: 101;
 
     .mention-align {
         @include clearfix;
@@ -28,29 +28,29 @@
 }
 
 .mention__image {
-    margin-right: 6px;
-    height: 32px;
-    width: 32px;
-    line-height: 36px;
+    @include border-radius(32px);
     display: block;
     font-size: 20px;
+    height: 32px;
+    line-height: 36px;
+    margin-right: 6px;
     text-align: center;
-    @include border-radius(32px);
+    width: 32px;
 
     .mention--align {
+        display: inline-block;
         max-width: 80%;
         overflow: hidden;
-        display: inline-block;
-        white-space: nowrap;
         text-overflow: ellipsis;
+        white-space: nowrap;
     }
 }
 
 .mention__fullname {
-    color: grey;
+    color: $dark-gray;
     padding-left: 10px;
 }
 
 .mention--highlight {
-    background-color: #fff2bb;
+    background-color: $yellow;
 }
diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss
index a8e8a99f7..601aa33ab 100644
--- a/webapp/sass/components/_modal.scss
+++ b/webapp/sass/components/_modal.scss
@@ -1,12 +1,24 @@
 @charset 'UTF-8';
 
-#channel_members_modal .modal-body {
-    min-height: 110px;
+.browser--ie {
+    .modal {
+        .modal-dialog {
+            @include translateY(0);
+        }
+    }
 }
 
 .modal-body {
-    padding: 20px 15px;
     overflow: auto;
+    padding: 20px 15px;
+
+    .edit-modal-body {
+        overflow: visible;
+
+        .suggestion-list__content {
+            max-height: 150px;
+        }
+    }
 }
 
 .more-table {
@@ -15,27 +27,23 @@
 }
 
 .modal {
+    color: alpha-color($black, .9);
     width: 100%;
-    color: #333;
 
-    body.browser--IE & {
-        .modal-dialog {
-            @include translateY(0);
-        }
-    }
-
-    &.image_modal {
-        .modal-backdrop.in {
-            @include opacity(.7);
+    &.modal-image {
+        .modal-backdrop {
+            &.in {
+                @include opacity(.7);
+            }
         }
     }
 
     .custom-textarea {
+        border-color: $light-gray;
         color: inherit;
-        border-color: #ccc;
 
         &:focus {
-            border-color: #ccc;
+            border-color: $light-gray;
             box-shadow: none;
         }
     }
@@ -44,15 +52,15 @@
         font-size: 13px;
 
         &.btn-default {
-            border: none;
             background: transparent;
+            border: none;
         }
     }
 
     .info__label {
         font-weight: 600;
-        text-align: right;
         padding-right: 0;
+        text-align: right;
     }
 
     .team-member-list {
@@ -60,21 +68,21 @@
     }
 
     .remove__member {
+        color: $dark-gray;
         float: right;
-        color: #999;
         font-size: 20px;
         line-height: 0;
         padding: 6px;
 
         &:hover {
-            color: #e56565;
+            color: $red;
         }
     }
 
     .modal-dialog {
-        max-width: 95%;
         margin-left: auto;
         margin-right: auto;
+        max-width: 95%;
     }
 
     .modal-push-down {
@@ -82,51 +90,51 @@
     }
 
     .modal-next-bar {
+        height: 100%;
         position: absolute;
-        top: 0px;
         right: 0;
-        height: 100%;
+        top: 0;
     }
 
     .modal-header {
-        border-radius: 0;
-        background: $color--primary;
-        color: #fff;
-        padding: 15px 15px 11px;
-        border: 1px solid #ddd;
-        min-height: 56px;
+        @include border-radius(0);
         @include clearfix;
+        background: $primary-color;
+        border: 1px solid $light-gray;
+        color: $white;
+        min-height: 56px;
+        padding: 15px 15px 11px;
 
         .modal-title {
+            color: $bg--gray;
             float: left;
             font-size: 17px;
             line-height: 27px;
-            color: #f4f4f4;
 
             .name {
+                color: $white;
                 font-weight: 600;
-                color: #fff;
             }
         }
 
         .modal-action {
-            padding: 0;
             margin: 0;
+            padding: 0;
         }
 
-        button.close {
-            color: #fff;
+        .close {
             @include opacity(1);
-            z-index: 5;
-            width: 30px;
+            @include single-transition(all, .25s, ease-in);
+            color: $white;
             height: 30px;
             line-height: 30px;
-            @include single-transition(all, .25s, ease-in);
             position: absolute;
             right: 10px;
+            width: 30px;
+            z-index: 5;
 
             &:hover {
-                background: rgba(0, 0, 0, .1);
+                @include alpha-property(background, $black, .1);
             }
 
             span {
@@ -149,8 +157,8 @@
     }
 
     .no-channel-message {
-        text-align: center;
         padding: 2em 1em;
+        text-align: center;
 
         .primary-message {
             font-size: 1.25em;
@@ -168,46 +176,46 @@
     }
 
     .modal-chevron-icon {
-        top: 50%;
         font-size: 120%;
+        top: 50%;
     }
 
     .modal-prev-bar {
-        position: absolute;
-        top: 0px;
-        left: 0;
         height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
     }
 
-    &#more_channels {
+    &.more-channel__modal {
         .modal-body {
             padding: 0;
         }
     }
 
     .modal-image {
-        position: relative;
-        width: 100%;
         height: 100%;
         margin: 0 auto;
         max-width: 100%;
+        position: relative;
+        width: 100%;
 
         .modal-body {
             @include clearfix;
-            height: 100%;
             display: table;
+            height: 100%;
+            max-height: 100%;
             table-layout: fixed;
             width: 100%;
-            max-height: 100%;
         }
 
-        .image-wrapper {
-            position: relative;
-            max-width: 90%;
+        .modal-image__wrapper {
             @include border-radius(3px);
             display: table-cell;
-            vertical-align: middle;
+            max-width: 90%;
+            position: relative;
             text-align: center;
+            vertical-align: middle;
             width: 100%;
 
             &:hover {
@@ -215,33 +223,31 @@
             }
 
             &.default {
-                width: 100%;
                 height: 80%;
+                width: 100%;
             }
 
             audio,
             canvas,
             progress,
             video {
-                max-width: 100%;
-                height: auto;
                 display: block;
+                height: auto;
+                max-width: 100%;
             }
 
             .modal-close {
-                background: url('../images/close.png') no-repeat;
+                @include single-transition(opacity, .6s);
                 @include background-size(100% 100%);
-                width: 37px;
+                @include opacity(0);
+                background-image: url('../images/close.png');
+                cursor: pointer;
                 height: 37px;
                 position: absolute;
                 right: -13px;
                 top: -13px;
-                @include opacity(0);
-                -webkit-transition: opacity .6s;
-                -moz-transition: opacity .6s;
-                -o-transition: opacity .6s;
                 transition: opacity .6s;
-                cursor: pointer;
+                width: 37px;
                 z-index: 9999;
 
                 &.modal-close--show {
@@ -250,99 +256,95 @@
             }
 
             > div {
+                background: $white;
+                display: inline-block;
                 min-height: 100px;
                 min-width: 320px;
-                background: #fff;
-                display: inline-block;
                 position: relative;
-
-                &:hover .file-playback__controls.stop {
-                    @include opacity(1);
-                }
             }
 
             img {
-                max-width: 100%;
                 max-height: 100%;
+                max-width: 100%;
             }
 
-            .spinner.file__loading {
-                z-index: 2;
-                position: absolute;
-                left: 50%;
-                margin-left: -16px;
-                top: 50%;
-                margin-top: -16px;
+            .spinner {
+                .file__loading {
+                    left: 50%;
+                    margin-left: -16px;
+                    margin-top: -16px;
+                    position: absolute;
+                    top: 50%;
+                    z-index: 2;
+                }
             }
         }
 
         .modal-content {
+            background: alpha-color($black, 0);
+            border: none;
             box-shadow: none;
-            background: rgba(0, 0, 0, 0);
-            width: 100%;
             height: 100%;
             padding: 0;
-            border: none;
+            width: 100%;
         }
 
-        .image-body {
-            vertical-align: middle;
+        .modal-image__body {
             display: table-cell;
-            text-align: center;
             height: 100%;
+            overflow: visible;
             padding: 0;
             position: relative;
-            overflow: visible;
+            text-align: center;
+            vertical-align: middle;
         }
 
         .image-control {
-            width: 50px;
-            height: 45px;
+            background: url('../images/prev.png') left no-repeat;
             float: left;
-            background: url(../images/prev.png) left no-repeat;
-            top: 50%;
-            position: relative;
+            height: 45px;
             margin-top: -23px;
+            position: relative;
+            top: 50%;
+            width: 50px;
+
             &.image-next {
+                background: url('../images/next.png') left no-repeat;
                 float: right;
-                background: url(../images/next.png) left no-repeat;
             }
         }
 
         .loader-image {
-            position: absolute;
-            top: 0;
             bottom: 0;
             left: 0;
-            right: 0;
             margin: auto;
+            position: absolute;
+            right: 0;
+            top: 0;
         }
 
         .loader-percent {
-            position: absolute;
-            top: 55px;
             bottom: 0;
+            color: $dark-gray;
+            height: 20px;
             left: 0;
-            right: 0;
             margin: auto;
-            color: grey;
-            height: 20px;
+            position: absolute;
+            right: 0;
+            top: 55px;
         }
 
         .modal-button-bar {
-            position: absolute;
-            bottom: -40px;
-            left: 0px;
-            right: 0px;
-            background-color: #222;
+            @include single-transition(opacity, .6s);
             @include border-radius(0 0 3px 3px);
             @include opacity(0);
-            -webkit-transition: opacity .6s;
-            -moz-transition: opacity .6s;
-            -o-transition: opacity .6s;
-            transition: opacity .6s;
+            background-color: $black;
+            bottom: -40px;
+            left: 0;
             line-height: 40px;
             padding: 0 10px;
+            position: absolute;
+            right: 0;
 
             &.footer--show {
                 @include opacity(1);
@@ -356,10 +358,10 @@
             }
 
             .text {
-                vertical-align: middle;
                 bottom: 0;
-                color: white;
+                color: $white;
                 margin-left: 5px;
+                vertical-align: middle;
             }
 
             .public-link {
@@ -376,11 +378,12 @@
 }
 
 .row--invite {
-    margin-right: 40px;
     @include clearfix;
+    margin-right: 40px;
 
     .col-sm-6 {
         padding: 0 0 0 15px;
+
         &:first-child {
             padding-left: 0;
         }
@@ -389,26 +392,26 @@
 
 .more-modal {
     .user-list {
-        overflow-y: auto;
-        overflow-x: hidden;
         margin-top: 10px;
+        overflow-x: hidden;
+        overflow-y: auto;
         position: relative;
     }
 
     .modal-body {
-        padding: 10px 0 20px;
         overflow-x: hidden;
+        padding: 10px 0 20px;
     }
 
     .filter-row {
-        margin: 10px 0;
         @include clearfix;
+        margin: 10px 0;
     }
 
     .member-count {
-        margin-top: 5px;
-        float: right;
         @include opacity(.8);
+        float: right;
+        margin-top: 5px;
     }
 
     .more-purpose {
@@ -416,21 +419,13 @@
     }
 }
 
-.modal-body.edit-modal-body {
-    overflow: visible;
-
-    .suggestion-list__content {
-        max-height: 150px;
-    }
-}
-
 .more-modal__list {
-    overflow: auto;
     display: flex;
     flex-direction: column;
+    overflow: auto;
 
     .popover & {
-        font-size: 0.95em;
+        font-size: .95em;
 
         .more-modal__row {
             padding: 5px 10px;
@@ -442,9 +437,9 @@
     }
 
     .more-modal__image {
+        @include border-radius(60px);
         flex-grow: 0;
         flex-shrink: 0;
-        @include border-radius(60px);
         margin-right: 8px;
     }
 
@@ -462,33 +457,33 @@
     }
 
     .more-modal__name {
-        font-weight: 600;
         font-size: .95em;
-        white-space: nowrap;
+        font-weight: 600;
         overflow: hidden;
         text-overflow: ellipsis;
+        white-space: nowrap;
     }
 
     .more-modal__description {
         @include opacity(.7);
         display: block;
-        white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        white-space: nowrap;
     }
 
     .more-modal__row {
+        border-bottom: 1px solid;
         display: flex;
         padding: 8px 15px;
-        border-bottom: 1px solid;
     }
 
     p {
+        @include opacity(.8);
         font-size: .9em;
+        margin: 5px 0;
         overflow: hidden;
         text-overflow: ellipsis;
-        @include opacity(.8);
-        margin: 5px 0;
     }
 }
 
diff --git a/webapp/sass/components/_oauth.scss b/webapp/sass/components/_oauth.scss
index cd8382a5c..04840457c 100644
--- a/webapp/sass/components/_oauth.scss
+++ b/webapp/sass/components/_oauth.scss
@@ -1,18 +1,18 @@
 @charset 'UTF-8';
 
 .prompt {
-    background: #fff;
-    border: 1px solid #ddd;
-    padding: 1em 2em 0;
+    background: $white;
+    border: 1px solid $light-gray;
     margin: 50px auto;
     max-width: 90%;
+    padding: 1em 2em 0;
     width: 600px;
 
     .prompt__heading {
+        display: table;
         font-size: em(20px);
         line-height: normal;
         margin: 1em 0;
-        display: table;
         width: 100%;
 
         > div {
@@ -26,13 +26,13 @@
     }
 
     .prompt__allow {
-        margin: 1em 0;
         font-size: em(24px);
+        margin: 1em 0;
     }
 
     .prompt__buttons {
-        text-align: right;
-        border-top: 1px solid #ddd;
+        border-top: 1px solid $dark-gray;
         padding: 1.5em 0;
+        text-align: right;
     }
 }
diff --git a/webapp/sass/components/_popover.scss b/webapp/sass/components/_popover.scss
index de66b67a7..0b2769f77 100644
--- a/webapp/sass/components/_popover.scss
+++ b/webapp/sass/components/_popover.scss
@@ -3,32 +3,38 @@
 
 .popover {
     @include border-radius($border-rad);
-    color: #333;
+    color: lighten($black, 25%);
 
     &.bottom,
     &.right,
     &.top,
     &.left {
-        > .arrow:after {
-            border-color: transparent;
+        > .arrow {
+            &:after {
+                border-color: transparent;
+            }
         }
     }
 
     .popover-title {
-        background: rgba(black, .05);
+        background: alpha-color($black, .05);
         padding: 8px 10px;
     }
 
     .popover-content {
-        p:last-child {
-            margin-bottom: 5px;
+        p {
+            &:last-child {
+                margin-bottom: 5px;
+            }
         }
     }
 }
 
-.channel-header__info .popover-content {
-    max-height: 250px;
-    overflow: auto;
+.channel-header__info {
+    .popover-content {
+        max-height: 250px;
+        overflow: auto;
+    }
 }
 
 .user-popover {
@@ -36,32 +42,35 @@
     display: inline-block;
 }
 
-.code-popover .popover-content {
-    padding: 5px;
+.code-popover {
+    .popover-content {
+        padding: 5px;
+    }
 }
 
 .user-popover__image {
-    margin: 0 0 10px;
     @include border-radius(128px);
+    margin: 0 0 10px;
 }
 
 .user-popover__email {
+    display: block;
     max-width: 200px;
     overflow: hidden;
     text-overflow: ellipsis;
-    display: block;
 }
 
 .search-help-popover {
-    visibility: hidden;
-    max-width: none;
-    width: 100%;
-    top: 36px;
     @include single-transition(opacity, .3s, ease-in);
     font-size: em(13px);
+    max-width: none;
+    top: 36px;
+    visibility: hidden;
+    width: 100%;
 
     &.autocomplete {
         display: block;
+
         .popover-content {
             padding: 10px;
             position: relative;
@@ -69,65 +78,68 @@
     }
 
     .search-autocomplete__divider {
-        margin: 10px 0 5px;
         line-height: 21px;
+        margin: 10px 0 5px;
         position: relative;
+
         &:first-child {
             margin-top: 5px;
         }
-        span {
+
+        > span {
+            background: $white;
             display: inline-block;
             padding-right: 10px;
-            background: #fff;
-            z-index: 5;
             position: relative;
+            z-index: 5;
         }
+
         &:before {
+            @include opacity(.2);
+            background: $dark-gray;
             content: '';
-            position: absolute;
-            width: 100%;
             height: 1px;
-            background: #ddd;
-            top: 10px;
             left: 0;
-            @include opacity(.2);
+            position: absolute;
+            top: 10px;
+            width: 100%;
         }
     }
 
     .search-autocomplete__item {
+        @include border-radius(2px);
         cursor: pointer;
-        padding: 6px 8px;
         margin: 3px 0 0 5px;
-        @include border-radius(2px);
-        white-space: nowrap;
         overflow: hidden;
+        padding: 6px 8px;
         text-overflow: ellipsis;
+        white-space: nowrap;
 
         &:hover {
-            background: rgba(black, .1);
+            background: alpha-color($black, .1);
         }
 
         &.selected {
-            background: rgba(black, .2);
+            background: alpha-color($black, .2);
         }
 
         .fa {
-            margin-right: 5px;
             @include opacity(.5);
+            margin-right: 5px;
         }
 
         .profile-img {
-            margin-top: -1px;
             height: 16px;
             margin-right: 6px;
+            margin-top: -1px;
             width: 16px;
         }
     }
 
     &.bottom > .arrow {
-        top: -18px;
         border-width: 9px;
         left: 30px;
+        top: -18px;
     }
 
     .popover-content {
@@ -142,9 +154,11 @@
 
     ul {
         padding-left: 17px;
+
         span {
             @include opacity(.8);
         }
+
         strong,
         b {
             @include opacity(1);
@@ -156,25 +170,28 @@
     }
 
     &.visible {
-        visibility: visible;
         @include opacity(1);
+        visibility: visible;
     }
 }
 
-#member-list-popover {
+.member-list__popover {
     max-width: initial;
+
     .popover-content {
-        position: relative;
+        max-height: 350px;
         padding: 0;
+        position: relative;
         width: 260px;
-        max-height: 350px;
+
         .text-nowrap {
+            font-size: 13px;
+            line-height: 26px;
+            overflow: hidden;
             padding: 6px 10px;
             width: 100%;
-            overflow: hidden;
-            line-height: 26px;
-            font-size: 13px;
         }
+
         .more__name {
             margin-left: 6px;
             max-width: 140px;
diff --git a/webapp/sass/components/_scrollbar.scss b/webapp/sass/components/_scrollbar.scss
index 4ecb38b1f..0bb0e7e21 100644
--- a/webapp/sass/components/_scrollbar.scss
+++ b/webapp/sass/components/_scrollbar.scss
@@ -1,28 +1,25 @@
 @charset 'UTF-8';
 
-::-webkit-scrollbar
-{
-  width: 8px;  /* for vertical scrollbars */
-  height: 8px; /* for horizontal scrollbars */
+::-webkit-scrollbar {
+    height: 8px; // for horizontal scrollbars
+    width: 8px;  // for vertical scrollbars
 }
 
-::-webkit-scrollbar-track
-{
-  background: rgba(0, 0, 0, 0.1);
+::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, .1);
 }
 
-::-webkit-scrollbar-thumb
-{
+::-webkit-scrollbar-thumb {
     @include border-radius($border-rad * 2);
-    background: rgba(0, 0, 0, 0.4);
+    background: rgba(0, 0, 0, .4);
 }
 
-body{
-    scrollbar-face-color: rgba(0, 0, 0, 0.1);
-    scrollbar-shadow-color: #2D2C4D;
-    scrollbar-highlight-color:#7D7E94;
+body {
     scrollbar-3dlight-color: #7D7E94;
-    scrollbar-darkshadow-color: #2D2C4D;
-    scrollbar-track-color: rgba(0, 0, 0, 0.1);
     scrollbar-arrow-color: #C1C1D1;
+    scrollbar-darkshadow-color: #2D2C4D;
+    scrollbar-face-color: rgba(0, 0, 0, .1);
+    scrollbar-highlight-color: #7D7E94;
+    scrollbar-shadow-color: #2D2C4D;
+    scrollbar-track-color: rgba(0, 0, 0, .1);
 }
\ No newline at end of file
diff --git a/webapp/sass/components/_search.scss b/webapp/sass/components/_search.scss
index faf0b8177..499c4fad4 100644
--- a/webapp/sass/components/_search.scss
+++ b/webapp/sass/components/_search.scss
@@ -1,15 +1,19 @@
 @charset 'UTF-8';
 
-#channel-header .search-bar__container {
-    padding: 0 9px 0 3px;
+.channel-header {
+    .search-bar__container {
+        padding: 0 9px 0 3px;
+    }
 }
 
 .search-bar__container {
-    padding: 12px 8px 0 0;
     @include flex(0 0 56px);
+    padding: 12px 8px 0 0;
 
-    .sidebar--right.move--left & {
-        padding-right: 42px;
+    .sidebar--right {
+        &.move--left & {
+            padding-right: 42px;
+        }
     }
 }
 
@@ -18,62 +22,60 @@
 }
 
 .search__clear {
+    @include single-transition(all, .2s, linear);
+    @include translateX(60px);
+    cursor: pointer;
     display: none;
-    position: absolute;
-    right: 0;
     line-height: 45px;
     margin-right: 13px;
-    @include single-transition(all, .2s, linear);
-    @include translateX(60px);
+    position: absolute;
+    right: 0;
     z-index: 5;
-    cursor: pointer;
 }
 
 .search-item-snippet {
     @include clearfix;
     text-overflow: ellipsis;
+
+    ul,
+    ol {
+        padding-left: 20px;
+    }
 }
 
 .sidebar__collapse {
+    @include single-transition(all, .2s, linear);
+    @include translateX(0);
     cursor: pointer;
-    z-index: 5;
-    fill: #fff;
-    position: absolute;
-    left: 0;
+    display: none;
+    fill: $white;
     font-size: 35px;
-    width: 49px;
-    @include single-transition(all, .2s, linear);
-    @include translateX(0px);
-    text-align: center;
-    padding-left: 1px;
+    left: 0;
     line-height: 40px;
-    display: none;
-}
-
-.search-item-snippet {
-    ul,
-    ol {
-        padding-left: 20px;
-    }
+    padding-left: 1px;
+    position: absolute;
+    text-align: center;
+    width: 49px;
+    z-index: 5;
 }
 
 .sidebar__search-icon {
-    position: absolute;
-    top: 15px;
-    margin-left: 10px;
-    font-size: 14px;
     @include opacity(.5);
+    color: $dark-gray;
     display: none;
-    color: #777;
+    font-size: 14px;
+    margin-left: 10px;
+    position: absolute;
+    top: 15px;
 }
 
 .search__form {
     position: relative;
 
     .search-bar__container & {
-        margin: 0;
-        border: 1px solid #ddd;
         @include border-radius(2px);
+        border: 1px solid $light-gray;
+        margin: 0;
         width: 300px;
     }
 
@@ -82,21 +84,21 @@
     }
 
     .search-bar {
+        box-shadow: none;
         height: 40px;
         padding-right: 30px;
-        box-shadow: none;
 
         .search-bar__container & {
-            height: 30px;
             border: none;
+            height: 30px;
         }
     }
 
     .glyphicon-refresh-animate {
-        top: 27px;
+        color: $dark-gray;
         position: absolute;
         right: 27px;
-        color: #999;
+        top: 27px;
 
         .search-bar__container & {
             right: 7px;
@@ -106,30 +108,29 @@
 }
 
 .search-items-container {
-    position: relative;
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
     @include flex(1 1 auto);
+    -webkit-overflow-scrolling: touch;
     height: calc(100% - 56px);
+    overflow: auto;
     padding-top: 10px;
+    position: relative;
 }
 
 .search-results-header {
+    border-bottom: $border-gray;
+    color: #999999;
     font-size: 1em;
-    text-transform: uppercase;
-    color: #999;
     font-weight: 400;
-    color: #888;
     height: 44px;
     line-height: 44px;
-    padding: 0 10px 0 10px;
-    border-bottom: $border-gray;
+    padding: 0 10px;
+    text-transform: uppercase;
 }
 
 .search-item__container {
     .post {
-        padding: 0 1em 1em;
         margin: 0;
+        padding: 0 1em 1em;
 
         &:first-child {
             border: none;
@@ -137,17 +138,17 @@
 
         .search-channel__name {
             font-weight: 600;
-            margin: 0 0 10px 0;
+            margin: 0 0 10px;
         }
     }
 }
 
 .search-item__jump {
+    @include opacity(.8);
+    font-size: 13px;
     position: absolute;
     right: 0;
-    top: 0px;
-    font-size: 13px;
-    @include opacity(.8);
+    top: 0;
 
     &:hover {
         @include opacity(1);
@@ -155,9 +156,9 @@
 }
 
 .search-item__comment {
+    margin-right: 35px;
     position: absolute;
     right: 0;
-    margin-right: 35px;
     top: 0;
 }
 
@@ -171,5 +172,5 @@
 }
 
 .search-highlight {
-    background-color: #fff2bb;
+    background-color: $yellow;
 }
diff --git a/webapp/sass/components/_suggestion-list.scss b/webapp/sass/components/_suggestion-list.scss
index 125a3cf32..0100026ca 100644
--- a/webapp/sass/components/_suggestion-list.scss
+++ b/webapp/sass/components/_suggestion-list.scss
@@ -1,9 +1,9 @@
 @charset 'UTF-8';
 
 .suggestion-list {
+    @extend %popover-box-shadow;
     width: 100%;
     z-index: 100;
-    @extend %popover-box-shadow;
 }
 
 .suggestion-list--top {
@@ -11,31 +11,31 @@
 }
 
 .suggestion-list__content {
-    width: 100%;
-    max-height: 292px;
-    background-color: #fff;
+    background-color: $white;
     border: $border-gray;
+    max-height: 292px;
     overflow-x: hidden;
     overflow-y: scroll;
+    width: 100%;
 
     .command {
-        position: relative;
-        width: 100%;
+        border-bottom: 1px solid $light-gray;
+        font-size: .95em;
         line-height: 24px;
         padding: 5px 10px 8px;
+        position: relative;
+        width: 100%;
         z-index: 101;
-        font-size: .95em;
-        border-bottom: 1px solid #ddd;
 
         .command__desc {
-            margin-left: 5px;
             @include opacity(.5);
             line-height: normal;
+            margin-left: 5px;
         }
     }
 }
 
 .suggestion-list__content--top {
-    position: absolute;
     bottom: 0;
+    position: absolute;
 }
diff --git a/webapp/sass/components/_tooltip.scss b/webapp/sass/components/_tooltip.scss
index 44c10edb9..5e71e3a7b 100644
--- a/webapp/sass/components/_tooltip.scss
+++ b/webapp/sass/components/_tooltip.scss
@@ -2,9 +2,9 @@
 
 .tooltip {
     .tooltip-inner {
-        word-break: break-word;
         font-size: 13px;
-        padding: 3px 10px 4px;
         font-weight: 500;
+        padding: 3px 10px 4px;
+        word-break: break-word;
     }
 }
diff --git a/webapp/sass/components/_tutorial.scss b/webapp/sass/components/_tutorial.scss
index f15919009..6545d7764 100644
--- a/webapp/sass/components/_tutorial.scss
+++ b/webapp/sass/components/_tutorial.scss
@@ -1,72 +1,76 @@
 @charset 'UTF-8';
 
 .tip-backdrop {
-    background: rgba(black, .5);
+    background: alpha-color($black, .5);
+    height: 100%;
+    left: 0;
     position: absolute;
     top: 0;
-    left: 0;
     width: 100%;
-    height: 100%;
     z-index: 999;
 }
 
 .tip-overlay {
-    width: 350px;
-    max-width: 90%;
-    position: absolute;
-    background-color: #fff;
     @include border-radius(3px);
+    background-color: $white;
+    max-width: 90%;
     padding: 20px;
+    position: absolute;
+    width: 350px;
     z-index: 1000;
 
     .arrow {
+        border-color: transparent;
+        border-style: solid;
         border-width: 10px;
-        position: absolute;
         display: block;
-        width: 0;
         height: 0;
-        border-color: transparent;
-        border-style: solid;
+        position: absolute;
+        width: 0;
     }
 
     &.tip-overlay--sidebar {
-        max-width: 75%;
         margin: 50px 0 0 10px;
+        max-width: 75%;
         min-height: 330px;
+
         .tutorial__footer {
-            position: absolute;
-            width: 100%;
             bottom: 20px;
             left: 0;
             padding: 0 20px;
+            position: absolute;
+            width: 100%;
         }
+
         .arrow {
-            top: 80px;
+            border-left-width: 0;
+            border-right-color: $white;
             left: -10px;
             margin-top: -10px;
-            border-left-width: 0;
-            border-right-color: #fff;
+            top: 80px;
         }
     }
 
     &.tip-overlay--header {
         margin: 10px 0 0 10px;
+
         .arrow {
-            top: 15px;
-            left: -10px;
             border-left-width: 0;
-            border-right-color: #fff;
+            border-right-color: $white;
+            left: -10px;
+            top: 15px;
         }
     }
 
     &.tip-overlay--chat {
         margin-top: -10px;
+
         .arrow {
-            left: 50%;
-            margin-left: -10px;
             border-bottom-width: 0;
-            border-top-color: #fff;
+            border-top-color: $white;
             bottom: -10px;
+            left: 50%;
+            margin-left: -10px;
         }
     }
 
@@ -86,18 +90,18 @@
     }
 
     .btn {
-        background: #ccc;
-        color: #fff;
         @include border-radius(3px);
+        background: alpha-color($black, .3);
         border: none;
+        color: $white;
         margin: 10px 0;
 
         &:hover,
         &:active,
         &:focus {
-            color: #fff;
+            background: alpha-color($black, .4);
             border: none;
-            background: #bbb;
+            color: $white;
         }
     }
 
@@ -110,81 +114,88 @@
     }
 
     .tutorial__circles {
-        margin: 1.5em 0px -1.7em -4px;
+        margin: 1.5em 0 -1.7em -4px;
 
         .circle {
-            width: 7px;
             height: 7px;
             margin: 0 4px;
+            width: 7px;
         }
     }
 }
 
 .tip-button {
-    z-index: 998;
+    cursor: pointer;
+    position: relative;
     right: -10px;
     top: -10px;
-    position: relative;
-    cursor: pointer;
+    z-index: 998;
 }
 
 .tip-div {
     position: absolute;
-    top: 0px;
-    right: 0px;
+    right: 0;
+    top: 0;
 
     &.tip-overlay--header {
-        top: 21px;
         right: 2px;
+        top: 21px;
+
         .tip-button {
             @include opacity(.8);
         }
     }
 
     &.tip-overlay--sidebar {
-        left: 0;
         @include opacity(.8);
+        left: 0;
         top: -9px;
     }
 }
 
 .tutorial-steps__container {
-    text-align: center;
-    width: 100%;
     display: table;
     height: 100%;
+    text-align: center;
+    width: 100%;
+
     .tutorial__content {
         display: table-cell;
-        vertical-align: middle;
-        padding-bottom: 100px;
         padding: 20px 40px 40px;
+        vertical-align: middle;
+
         .tutorial__steps {
-            position: relative;
+            display: inline-block;
+            margin-bottom: 50px;
             max-width: 310px;
             min-height: 370px;
-            margin-bottom: 50px;
+            position: relative;
             text-align: left;
-            display: inline-block;
         }
     }
+
     .tutorial__footer {
-        position: absolute;
         bottom: 0;
+        position: absolute;
     }
+
     h1 {
         font-size: em(40px);
-        margin: -20px 0 30px;
         font-weight: 600;
+        margin: -20px 0 30px;
     }
+
     h3 {
         font-size: em(24px);
-        margin-bottom: 30px;
         font-weight: 600;
+        margin-bottom: 30px;
     }
+
     .tutorial__circles {
-        position: absolute;
         bottom: 40px;
+        position: absolute;
     }
+
     .tutorial-skip {
         margin-left: 13px;
     }
@@ -192,17 +203,19 @@
 
 .tutorial__circles {
     margin: 2em 0;
+
     .circle {
-        width: 9px;
-        height: 9px;
         @include border-radius(9px);
         @include opacity(.2);
-        background: #000;
+        background: $black;
         display: inline-block;
+        height: 9px;
         margin: 0 5px;
+        width: 9px;
+
         &.active {
-            background: $color--primary;
             @include opacity(1);
+            background: $primary-color;
         }
     }
 }
diff --git a/webapp/sass/components/_videos.scss b/webapp/sass/components/_videos.scss
index 91db750bd..e009e6538 100644
--- a/webapp/sass/components/_videos.scss
+++ b/webapp/sass/components/_videos.scss
@@ -1,65 +1,68 @@
 @charset 'UTF-8';
 
 .video-div {
-    position: relative;
-    max-width: 480px;
     margin-bottom: 8px;
+    max-width: 480px;
+    position: relative;
+
     .video-thumbnail {
-        max-width: 100%;
         height: auto;
+        max-width: 100%;
     }
+
     .block {
-        background-color: rgba(0,0,0,.5);
+        background-color: alpha-color($black, .5);
         border-radius: 10px;
+        height: 150px;
+        left: 50%;
+        margin: -75px 0 0 -100px;
         position: absolute;
         top: 50%;
-        left: 50%;
-        margin-top: -100px;
         width: 200px;
-        margin: -75px 0 0 -100px;
-        height: 150px;
     }
 }
 
 .video-type {
     @include opacity(.8);
     font-size: 15px;
-    margin: 0px;
-    padding: 0px;
+    margin: 0;
+    padding: 0;
 }
 
 .video-title {
     font-size: 15px;
     margin-top: 3px;
 }
+
 .play-button {
-    width: 100px;
+    @include border-radius(14px);
+    border: 4px solid alpha-color($white, .4);
     height: 100px;
     position: absolute;
-    top: 26px;
     right: 51px;
-    border: 4px solid;
-    border-color: rgba(255,255,255,.4);
-    border-radius: 14px;
-}
-.play-button span {
-    position: absolute;
-    top: 10px;
-    left: 20px;
-    width: 0;
-    height: 0;
-    border-top: 36px solid transparent;
-    border-bottom: 36px solid transparent;
-    border-left: 60px solid rgba(255,255,255,.4);
+    top: 26px;
+    width: 100px;
+
+    span {
+        border-bottom: 36px solid transparent;
+        border-left: 60px solid alpha-color($white, .4);
+        border-top: 36px solid transparent;
+        height: 0;
+        left: 20px;
+        position: absolute;
+        top: 10px;
+        width: 0;
+    }
 }
 
 .img-div {
     -moz-force-broken-image-icon: 1;
-    position: relative;
-    max-width: 450px;
-    max-height: 500px;
-    margin-bottom: 8px;
     border-radius: 5px;
+    margin-bottom: 8px;
+    max-height: 500px;
+    max-width: 450px;
+    position: relative;
+
     &.placeholder {
         height: 500px;
     }
-- 
cgit v1.2.3-1-g7c22


From 529513606b74fce60cbb066b381b27fbb6ea9d52 Mon Sep 17 00:00:00 2001
From: Rodrigo Corsi <rodrigocorsi@gmail.com>
Date: Tue, 8 Mar 2016 09:38:09 -0300
Subject: Created component CodePreview

---
 webapp/sass/components/_files.scss |  1 +
 webapp/sass/components/_modal.scss | 16 +++++++++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

(limited to 'webapp/sass/components')

diff --git a/webapp/sass/components/_files.scss b/webapp/sass/components/_files.scss
index b854312c1..5522c6db8 100644
--- a/webapp/sass/components/_files.scss
+++ b/webapp/sass/components/_files.scss
@@ -234,6 +234,7 @@
 
 .file-details__container {
     @include display-flex;
+    background: $white;
 
     .file-details {
         height: 270px;
diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss
index 601aa33ab..94378aabe 100644
--- a/webapp/sass/components/_modal.scss
+++ b/webapp/sass/components/_modal.scss
@@ -256,13 +256,27 @@
             }
 
             > div {
-                background: $white;
                 display: inline-block;
                 min-height: 100px;
                 min-width: 320px;
                 position: relative;
             }
 
+            code {
+                min-height: 130px;
+                min-width: 330px;
+            }
+
+            pre, code {
+                display: inline-block;
+            }
+
+            .post-body--code {
+                max-height: calc(100vh - 80px);
+                max-width: calc(100vw - 80px);
+                overflow: auto;
+            }
+
             img {
                 max-height: 100%;
                 max-width: 100%;
-- 
cgit v1.2.3-1-g7c22