From 4fd0e0d99c90d6d420f0be9d58dafb8077fe01c2 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Wed, 8 Jun 2016 17:43:07 +0200
Subject: [PATCH] Fix Navbar and notification list styling

---
 js/components/header_notifications.js         |   5 +-
 sass/ascribe_custom_style.scss                | 126 ----------------
 sass/ascribe_navbar.scss                      | 139 +++++++++++++++++-
 sass/ascribe_notification_list.scss           |  29 ++--
 .../wallet/ikonotv/ikonotv_custom_style.scss  |  15 --
 5 files changed, 152 insertions(+), 162 deletions(-)

diff --git a/js/components/header_notifications.js b/js/components/header_notifications.js
index aed0e9da..5e94f63b 100644
--- a/js/components/header_notifications.js
+++ b/js/components/header_notifications.js
@@ -97,7 +97,7 @@ let HeaderNotifications = React.createClass({
             }
 
             return (
-                <Nav navbar pullRight>
+                <Nav navbar pullRight className="notification-menu">
                     <DropdownButton
                         ref='dropdownButton'
                         id="header-notification-dropdown"
@@ -107,8 +107,7 @@ let HeaderNotifications = React.createClass({
                                 <Glyphicon glyph='envelope' color="green"/>
                                 <span className="notification-amount">({numNotifications})</span>
                             </span>
-                        }
-                        className="notification-menu">
+                        }>
                         {this.renderNotifications({ notifications: pieceListNotifications, isPiece: true })}
                         {this.renderNotifications({ notifications: editionListNotifications, isPiece: false })}
                     </DropdownButton>
diff --git a/sass/ascribe_custom_style.scss b/sass/ascribe_custom_style.scss
index e0c8c9e9..d6e4872d 100644
--- a/sass/ascribe_custom_style.scss
+++ b/sass/ascribe_custom_style.scss
@@ -17,132 +17,6 @@ hr {
     border-top: 1px solid $ascribe-blue-border;
 }
 
-.nav .open > a,
-.nav .open > a:hover,
-.nav .open > a:focus {
-    border-color: transparent;
-}
-
-.navbar-default {
-    background-color: $ascribe--nav-bg-color;
-    box-shadow: 0 0 1px rgba(0,0,0,.1),
-                0 1px 2px rgba(0,0,0,.2);
-
-    .navbar-nav > li > a,
-    .navbar-nav > li > .active a {
-        text-transform: uppercase;
-        font-size: 12px;
-        font-weight: $ascribe--font-weight-light;
-        color: $ascribe--nav-fg-prim-color;
-        border-bottom: 3px solid transparent;
-    }
-    .navbar-nav > li > a:hover {
-        color: $ascribe--nav-fg-sec-color;
-    }
-
-    .navbar-nav > .active a,
-    .navbar-nav > .active a:hover,
-    .navbar-nav > .active a:focus {
-        color: $ascribe--nav-fg-prim-color;
-        border-bottom-color: $ascribe--nav-fg-prim-color;
-        background-color: $ascribe--nav-bg-color;
-        font-weight: $ascribe--font-weight-light;
-    }
-
-    .navbar-nav > .active {
-        background-color: $ascribe--nav-bg-color;
-    }
-
-    .navbar-nav > .open > a,
-    .dropdown-menu > .active > a {
-        color:  $ascribe--nav-fg-prim-color;
-        background-color: $ascribe--nav-bg-color;
-    }
-
-    .navbar-nav > .open > a:hover,
-    .navbar-nav > .open > a:focus,,
-    .dropdown-menu > .active > a:hover,
-    .dropdown-menu > .active > a:focus {
-        background-color: rgba($ascribe--button-default-color, .05);
-    }
-    .dropdown-menu {
-        background-color: $ascribe--nav-bg-color;
-    }
-    .navbar-nav > li > .dropdown-menu {
-        padding: 0;
-    }
-
-    .dropdown-menu > li > a {
-        color:  $ascribe--nav-fg-prim-color;
-        font-weight: $ascribe--font-weight-light;
-        padding-bottom: 9px;
-        padding-top: 9px;
-    }
-
-    .dropdown-menu > li > a:hover,
-    .dropdown-menu > li > a:focus {
-        background-color: rgba($ascribe--button-default-color, .05);
-    }
-
-    .dropdown-menu > .divider {
-        margin: 0;
-    }
-
-    .notification-menu {
-        .dropdown-menu {
-            background-color: white;
-            li:hover {
-                background-color: $ascribe-white;
-            }
-        }
-        .notification-action{
-            color: $ascribe-pink;
-        }
-    }
-
-    .navbar-brand {
-        font-size: 23px;
-        padding: 12px 15px;
-
-        .icon-ascribe-logo {
-            color: $ascribe--nav-fg-prim-color;
-
-            &:hover {
-                color: $ascribe--nav-fg-sec-color;
-                text-decoration: none;
-            }
-            &:focus {
-                text-decoration: none;
-            }
-        }
-
-        .img-brand {
-            height: 100%;
-        }
-    }
-
-    .img-brand .navbar-brand {
-        width: 0;
-        height: 0;
-        padding-right: 120px;
-        padding-bottom: 36px;
-        padding-left: 30px;
-        background: transparent no-repeat center 4px;
-        background-size: 150px;
-        margin-bottom: 0;
-        position: relative;
-    }
-
-    .navbar-toggle .icon-bar {
-        background-color: $ascribe--nav-fg-prim-color;
-    }
-
-    .navbar-toggle:hover,
-    .navbar-toggle:focus {
-        background-color: $ascribe--nav-bg-color;
-    }
-}
-
 .ascribe-icon {
     font-size: 1.2em;
     font-weight: $ascribe--font-weight-light;
diff --git a/sass/ascribe_navbar.scss b/sass/ascribe_navbar.scss
index 25dff374..2b1c8c55 100644
--- a/sass/ascribe_navbar.scss
+++ b/sass/ascribe_navbar.scss
@@ -1,4 +1,7 @@
 .navbar-default {
+    background-color: $ascribe--nav-bg-color;
+    box-shadow: 0 0 1px rgba(0,0,0,.1),
+                0 1px 2px rgba(0,0,0,.2);
     border: 0;
     border-color: #ccc;
     border-left: 0;
@@ -6,8 +9,142 @@
     border-top: 0;
     font-size: .8em;
     margin-bottom: 1.5em;
+
+    // All Navbar buttons
+    .navbar-nav .dropdown .dropdown-toggle.btn,
+    .navbar-nav > li > a {
+        background-color: transparent;
+        border: none;
+        border-bottom: 3px solid transparent;
+        box-shadow: none;
+        color: $ascribe--nav-fg-prim-color;
+        font-size: 12px;
+        font-weight: $ascribe--font-weight-light;
+        line-height: 20px;
+        padding: 15px;
+        text-transform: uppercase;
+
+        &:focus,
+        &:hover {
+            background-color: transparent;
+            color: $ascribe--nav-fg-sec-color;
+        }
+    }
+
+    // Currently active route
+    .navbar-nav > li.active > a {
+        background-color: transparent;
+        border-bottom-color: $ascribe--nav-fg-prim-color;
+
+        &:focus,
+        &:hover {
+            background-color: transparent;
+            color: $ascribe--nav-fg-prim-color;
+        }
+    }
+
+    // Open dropdowns
+    .navbar-nav .open {
+        .dropdown-toggle.btn {
+            &:focus,
+            &:hover {
+                background-color: rgba($ascribe--button-default-color, .05);
+                color: $ascribe--nav-fg-prim-color;
+            }
+        }
+
+        .dropdown-menu {
+            margin: 0;
+            padding: 0;
+        }
+
+        .dropdown-menu a {
+            color:  $ascribe--nav-fg-prim-color;
+            font-weight: $ascribe--font-weight-light;
+            padding-bottom: 9px;
+            padding-top: 9px;
+        }
+    }
+
+    .dropdown-menu > .divider {
+        margin: 0;
+    }
+
+    .notification-menu {
+        .dropdown-toggle.btn:focus,
+        .dropdown-toggle.btn:hover {
+            box-shadow: none;
+        }
+    }
+
+    .navbar-brand {
+        font-size: 23px;
+        padding: 12px 15px;
+
+        .icon-ascribe-logo {
+            color: $ascribe--nav-fg-prim-color;
+
+            &:focus,
+            &:hover {
+                color: $ascribe--nav-fg-sec-color;
+                text-decoration: none;
+            }
+            &:focus {
+                text-decoration: none;
+            }
+        }
+
+        .img-brand {
+            height: 100%;
+        }
+    }
+
+    .navbar-toggle {
+        .icon-bar {
+            background-color: $ascribe--nav-fg-prim-color;
+        }
+
+        &:hover,
+        &:focus {
+            background-color: $ascribe--nav-bg-color;
+        }
+    }
+
+    /* For mobile toggled menu */
+    @media (max-width: 767px) {
+        .navbar-collapse {
+            padding-left: 0;
+            padding-right: 0;
+        }
+
+        .navbar-nav {
+            margin-left: 0;
+        }
+
+        .navbar-nav .dropdown .dropdown-toggle.btn,
+        .navbar-nav > li > a {
+            display: block;
+            padding-bottom: 10px;
+            padding-top: 10px;
+            text-align: left;
+        }
+
+        .navbar-nav .open .dropdown-menu > li > a {
+            padding: 5px 15px 5px 25px;
+        }
+
+        .navbar-nav .dropdown {
+            display: block;
+        }
+    }
+}
+
+.nav .open > a,
+.nav .open > a:hover,
+.nav .open > a:focus {
+    border-color: transparent;
 }
 
 .navbar-right {
     margin-right: 0;
-}
\ No newline at end of file
+}
diff --git a/sass/ascribe_notification_list.scss b/sass/ascribe_notification_list.scss
index b5f46a4c..dbad7ad4 100644
--- a/sass/ascribe_notification_list.scss
+++ b/sass/ascribe_notification_list.scss
@@ -1,7 +1,3 @@
-$break-small: 764px;
-$break-medium: 991px;
-$break-medium: 1200px;
-
 .notification-header, .notification-wrapper {
     min-width: 350px;
     width: 100%;
@@ -47,27 +43,26 @@ $break-medium: 1200px;
         text-overflow: ellipsis;
         white-space: nowrap;
     }
-    .sub-header{
+    .sub-header {
         margin-bottom: 0.6em;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
     }
-    .notification-action{
-        color: $ascribe-dark-blue;
+    .notification-action {
+        color: $ascribe-pink;
     }
 }
 
-.notification-menu {
-    .dropdown-menu {
-        padding: 0 !important;
-        li a {
-            padding-top: 0;
-        }
-        border-top: 0;
-        overflow-y: auto;
-        overflow-x: hidden;
-        max-height: 70vh;
+.notification-menu .dropdown-menu {
+    background-color: white;
+    border-top: 0;
+    max-height: 70vh;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    li:hover {
+        background-color: $ascribe-white;
     }
 }
 
diff --git a/sass/whitelabel/wallet/ikonotv/ikonotv_custom_style.scss b/sass/whitelabel/wallet/ikonotv/ikonotv_custom_style.scss
index 9d5dc143..5db377f1 100644
--- a/sass/whitelabel/wallet/ikonotv/ikonotv_custom_style.scss
+++ b/sass/whitelabel/wallet/ikonotv/ikonotv_custom_style.scss
@@ -86,21 +86,6 @@ $ikono--font: 'Helvetica Neue', 'Helvetica', sans-serif !important;
         }
     }
 
-    .img-brand.navbar-brand {
-        width: 0;
-        height: 0;
-        padding-right: 120px;
-        padding-bottom: 36px;
-        padding-left: 30px;
-        background-image: url($ikono--logo);
-        background-color: transparent;
-        background-position: center 4px;
-        background-repeat: no-repeat;
-        background-size: 150px;
-        margin-bottom: 0;
-        position: relative;
-    }
-
     .navbar-toggle:hover,
     .navbar-toggle:focus {
         background-color: rgba(255, 255, 255, 0.1);