Merge pull request #2429 from asaadmahmoodspin/ui-improvements

PLT-963 - Improving scss structure

1 files changed, 137 insertions, 0 deletions

diff --git a/web/sass-files/sass/layout/_navigation.scss b/web/sass-files/sass/layout/_navigation.scss
new file mode 100644
index 000000000..65c62cb17
--- /dev/null
+++ b/web/sass-files/sass/layout/_navigation.scss
@@ -0,0 +1,137 @@
+@charset 'UTF-8';
+
+.nav > li > a:focus,
+.nav > li > a:hover {
+    background: transparent;
+}
+
+#navbar {
+    input {
+        margin: 0px 5px 0px 2px;
+    }
+
+    .navbar-default {
+        position: absolute;
+        border: none;
+        min-height: 45px;
+        background: $color--primary;
+
+        .navbar-nav {
+            > li {
+                > a {
+                    height: 45px;
+                    padding: 0 1.3em;
+
+                    i {
+                        line-height: 45px;
+                    }
+                }
+            }
+        }
+
+        .navbar-toggle {
+            width: 43px;
+            float: left;
+            border-color: transparent;
+            border-radius: 0;
+            margin: 0;
+            padding: 0 10px;
+            line-height: 48px;
+            height: 44px;
+            z-index: 5;
+            fill: #fff;
+
+            .icon-bar {
+                background: #fff;
+                width: 21px;
+            }
+
+            .glyphicon-search {
+                top: -1px;
+            }
+
+            .icon--white {
+                color: #fff;
+            }
+
+            &:hover,
+            &:active,
+            &:focus {
+                background: inherit;
+            }
+        }
+
+        .navbar-brand {
+            padding: 0 .5em;
+            height: 45px;
+            line-height: 45px;
+            float: none;
+            font-size: 16px;
+
+            .heading {
+                margin-right: 3px;
+                font-weight: 600;
+                color: #fff;
+            }
+
+            .header-dropdown__icon {
+                top: 1px;
+            }
+
+            .dropdown-toggle {
+                color: #fff;
+            }
+
+            .description {
+                display: inline-block;
+                margin-right: .5em;
+                color: #fff;
+
+                &.info-popover {
+                    width: 19px;
+                    height: 19px;
+                    background: url('../images/info__icon.png');
+                    @include background-size(100% 100%);
+                    vertical-align: middle;
+                    top: -1px;
+                    position: relative;
+                    cursor: pointer;
+                }
+            }
+        }
+    }
+
+    .sidebar-channel {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        span {
+            white-space: nowrap;
+            margin-left: 2px;
+        }
+    }
+
+    .channel-create-btn {
+        margin-right: 15px;
+    }
+
+    .more-channel-table {
+        width: 100%;
+        border: 1px solid #dbdbdc;
+        td {
+            padding: 7px;
+        }
+        button {
+            width: 110px;
+        }
+    }
+}
+
+.badge-notify {
+    background: red;
+    position: absolute;
+    left: 4px;
+    top: 3px;
+    z-index: 100;
+}