Merge pull request #2 from nhsevidence/colour-refresh

brand#196 - Colour refresh

bower.json

@@ -0,0 +1,21 @@
+{
+  "name": "nice.tophat",
+  "description": "Distributable, branded tophat component for NICE Services and Web Applications",
+  "main": "dist/tophat.js",
+  "authors": [
+    "NICE Digital Services"
+  ],
+  "license": "MIT",
+  "keywords": [
+    "nice",
+    "tophat"
+  ],
+  "homepage": "https://github.com/nhsevidence/NICE.TopHat",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ]
+}

lib/config/evidence.js

@@ -1,26 +1,26 @@
 module.exports = {
     search: {
-        href: "http://www.evidence.nhs.uk",
+        href: "https://www.evidence.nhs.uk",
         label: "Evidence search",
         title: "Evidence search"
     },
     bnf: {
-        href: "http://www.evidence.nhs.uk/formulary/bnf/current",
+        href: "https://www.evidence.nhs.uk/formulary/bnf/current",
         label: "BNF",
         title: "British National Formulary"
     },
     bnfc: {
-        href: "http://www.evidence.nhs.uk/formulary/bnfc/current",
+        href: "https://www.evidence.nhs.uk/formulary/bnfc/current",
         label: "BNFC",
         title: "British National Formulary for Children"
     },
     cks: {
-        href: "http://cks.nice.org.uk",
+        href: "https://cks.nice.org.uk",
         label: "CKS",
         title: "Clinical Knowledge Summaries"
     },
     journals: {
-        href: "http://www.nice.org.uk/about/what-we-do/evidence-services/journals-and-databases",
+        href: "https://www.nice.org.uk/about/what-we-do/evidence-services/journals-and-databases",
         label: "Journals and databases",
         title: "Journals and databases"
     }

lib/config/services.js

@@ -1,14 +1,14 @@
 module.exports = {
     pathways: {
-        href: "http://pathways.nice.org.uk",
+        href: "https://pathways.nice.org.uk/",
         label: "NICE Pathways"
     },
     guidance: {
-        href: "http://www.nice.org.uk/Guidance",
+        href: "https://www.nice.org.uk/guidance",
         label: "NICE Guidance"
     },
     standards: {
-        href: "http://www.nice.org.uk/standards-and-indicators",
+        href: "https://www.nice.org.uk/standards-and-indicators",
         label: "Standards and indicators"
     }
 };

lib/styles/core.less

@@ -20,8 +20,6 @@
   font-size: @baseFontSize;
   font-weight: 400;
   line-height: @baseLineHeight;
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
 }
 
 // widths
@@ -83,6 +81,7 @@
     &:hover,
     &:focus {
       color: @foregroundColor;
+      font-weight: 600;
     }
   }
 }
@@ -108,7 +107,7 @@
 
     a {
       display: block;
-      padding: @quarterSpacing @halfSpacing;
+      padding: @halfSpacing;
       color: @foregroundColor;
 
       &:focus,
@@ -160,7 +159,7 @@
   .logo {
     float: left;
     display: block;
-    padding: @quarterSpacing @fullSpacing;
+    padding: @halfSpacing @fullSpacing;
     margin-left: @fullSpacing * -1;
     font-size: 0;
     line-height: 0;

lib/styles/global.less

@@ -1,19 +1,18 @@
 .nice-tophat {
   .nice-global {
     background-color: @globalBackgroundColor;
+    color: @globalForegroundColor;
 
     .menu {
       a {
-        color: #000;
+        color: @globalForegroundColor;
         padding: 19px @halfSpacing 20px;
         line-height: @baseLineHeight;
 
         &:hover,
         &:focus {
-          color: #000;
+          color: @globalHoverForegroundColor;
           background-color: @globalHoverBackgroundColor;
-          padding-bottom: 16px;
-          border-bottom: 4px solid @globalLinkBorderColor;
         }
       }
 
@@ -23,8 +22,6 @@
         &:focus {
           color: #000;
           background-color: @globalActiveBackgroundColor;
-          padding-bottom: 16px;
-          border-bottom: 4px solid @globalLinkBorderColor;
         }
       }
     }

lib/styles/partner.less

@@ -24,7 +24,7 @@
       line-height: 36px;
       margin: 0 0 (@quarterSpacing * -1);
       padding: @halfSpacing 0 0;
-      color: #888;
+      color: @globalForegroundColor;
 
       small {
         float: right;

lib/styles/profile.less

@@ -8,13 +8,14 @@
     &:hover,
     &:focus {
       color: @foregroundColor;
+      font-weight: 600;
     }
   }
 
   .menu-anonymous {
     margin: ( @fullSpacing * .75 ) - 3 0 0 @halfSpacing;
     padding: @quarterSpacing @halfSpacing;
-    border: 1px solid @foregroundColor;
+    border: 2px solid @foregroundColor;
   }
 
   .menu-profile {
@@ -29,6 +30,10 @@
     &:focus {
       background-color: transparent;
     }
+
+    &:hover {
+      color: #999;
+    }
   }
 
   .profile-avatar {
@@ -37,7 +42,6 @@
     height: 100%;
     vertical-align: -35%;
 
-    color: @foregroundColor;
     text-align: center;
     font-size: @serviceIconSize;
     font-style: normal;
@@ -59,12 +63,26 @@
     position: absolute;
     z-index: 2003;
     width: 250px;
-    padding: 6px 0;
     left: 50%;
     margin-left: 340px;
     top: 50px;
     background-color: @evidenceBackgroundColor;
     display: none;
+    border: 1px solid @serviceBorderColor;
+
+    &:before {
+      border: 6px solid transparent;
+      content: '';
+      position: absolute;
+      bottom: 100%;
+      right: 18px;
+      border-bottom-color: @foregroundColor;
+    }
+
+    .tophat-inner {
+      margin-left: 0;
+      width: 100%;
+    }
 
     .menu {
       border-right: 1px solid @evidenceBorderColor;
@@ -99,6 +117,10 @@
         }
       }
     }
+
+    .menu li:first-child a {
+      border-top: 0;
+    }
   }
 }
 
@@ -116,8 +138,21 @@
   .nice-tophat {
     .nice-profile {
       left: auto;
-      right: @halfSpacing;
+      right: 16px;
       margin-left: 0;
+
+      .tophat-inner {
+        margin-left: 0;
+      }
+    }
+  }
+}
+
+@media (max-width: 1220px) {
+  .nice-tophat {
+    .nice-profile {
+      left: auto;
+      right: 1.5%;
     }
   }
 }
@@ -127,6 +162,16 @@
     .menu-anonymous {
       margin-top: @halfSpacing;
     }
+    .nice-profile {
+      right: 5px;
+    }
+  }
+  .layout-fill {
+    .nice-tophat {
+      .nice-profile {
+        right: 5px;
+      }
+    }
   }
 }
 
@@ -153,9 +198,13 @@
       margin: 0;
       padding: 0;
 
+      &:before {
+        right: 21px;
+      }
+
       .menu {
         border: 0;
-        margin: 0 @halfSpacing * -1;
+        margin: 0;
 
         li {
           a {

lib/styles/search.less

@@ -1,4 +1,5 @@
 .nice-search {
+  color: @foregroundColor;
   float: left;
   position: relative;
   width: 40%;
@@ -19,7 +20,7 @@
     font-size: @searchControlFontSize;
     font-weight: 400;
     line-height: @searchControlHeight;
-    color: @globalForegroundColor;
+    color: @foregroundColor;
     border: 1px solid @searchBorderColor;
     border-radius: 0;
     vertical-align: middle;
@@ -54,6 +55,11 @@
     border: 1px solid @searchButtonBackgroundColor;
     font-size: 0;
     line-height: normal;
+
+    &:hover {
+      background-color: @searchButtonHoverBackgroundColor;
+      border-colour: @searchButtonHoverBackgroundColor;
+    }
   }
 
   .icon-search {