idsk_template 0.24.0.idsk.alpha.2 → 0.24.1

data/app/assets/stylesheets/idsk-template.css.erb

@@ -1,18 +1,18 @@
-/* govuk_frontend_toolkit includes */
+/* idsk_frontend_toolkit includes */
 #global-header .header-wrapper:after, #global-header .header-wrapper .header-global:after, #global-header .header-wrapper .header-global .header-logo:after, #global-header .header-proposition #proposition-link:after,
 #global-header .header-proposition #proposition-links:after, #footer .footer-meta:after {
   content: "";
   display: block;
   clear: both; }
 
-#global-header-bar, #global-cookie-message p, #footer .footer-wrapper {
+#global-cookie-message p, #footer .footer-wrapper {
   max-width: 960px;
   margin: 0 15px; }
   @media (min-width: 641px) {
-    #global-header-bar, #global-cookie-message p, #footer .footer-wrapper {
+    #global-cookie-message p, #footer .footer-wrapper {
       margin: 0 30px; } }
   @media (min-width: 1020px) {
-    #global-header-bar, #global-cookie-message p, #footer .footer-wrapper {
+    #global-cookie-message p, #footer .footer-wrapper {
       margin: 0 auto; } }
 
 #global-header .header-wrapper:after, #global-header .header-wrapper .header-global:after, #global-header .header-wrapper .header-global .header-logo:after, #global-header .header-proposition #proposition-link:after,
@@ -26,7 +26,7 @@
   width: device-width; }
 
 html, body, button, input, table, td, th {
-  font-family: "nta", Arial, sans-serif; }
+  font-family: "Source Sans Pro", "Arial", sans-serif; }
 
 html, body, div, h1, h2, h3, h4, h5, h6, article, aside, footer, header, hgroup, nav, section {
   margin: 0;
@@ -65,7 +65,7 @@ html {
   /* 1 */
   -ms-text-size-adjust: 100%;
   /* 1 */
-  background-color: #dee0e2; }
+  background-color: #eaeaea; }
 
 /*
   Force the scrollbar to always display in IE10/11
@@ -89,7 +89,7 @@ fieldset {
   padding: 0; }
 
 a:link {
-  color: #005ea5; }
+  color: #215da8; }
 
 a:visited {
   color: #4c2c92; }
@@ -213,7 +213,7 @@ a:focus {
 
 /* Make links slightly darker when focused to improve contrast. */
 a:link:focus {
-  color: #005798; }
+  color: #1f579d; }
 
 /* Make skiplinks visible when they are tabbed to */
 .skiplink {
@@ -263,14 +263,14 @@ button:focus {
   clear: both; }
 
 #global-header {
-  background-color: #0b0c0c;
+  background-color: #313133;
   width: 100%; }
   #global-header .header-wrapper {
-    background-color: #0b0c0c;
+    background-color: #313133;
     max-width: 990px;
     margin: 0 auto;
-    padding-top: 8px;
-    padding-bottom: 8px; }
+    padding-top: 21px;
+    padding-bottom: 21px; }
     @media (min-width: 641px) {
       #global-header .header-wrapper {
         padding-left: 15px;
@@ -279,7 +279,7 @@ button:focus {
       float: left; }
       @media (min-width: 769px) {
         #global-header .header-wrapper .header-global .header-logo {
-          width: 33.33%; } }
+          width: 30%; } }
       @media screen and (max-width: 379px) {
         #global-header .header-wrapper .header-global .header-logo {
           width: auto;
@@ -291,16 +291,20 @@ button:focus {
   @media (min-width: 769px) {
     #global-header.with-proposition .header-wrapper .header-global {
       float: left;
-      width: 33.33%; }
+      width: 25%;
+      min-width: 240px; }
       #global-header.with-proposition .header-wrapper .header-global .header-logo,
       #global-header.with-proposition .header-wrapper .header-global .site-search {
         width: 100%; } }
   @media (min-width: 769px) {
     #global-header.with-proposition .header-wrapper .header-proposition {
-      width: 66.66%;
+      width: 55%;
       float: left; } }
   #global-header.with-proposition .header-wrapper .header-proposition .content {
-    margin: 0 15px; }
+    margin: 8px 15px 0 15px; }
+  @media (min-width: 769px) {
+    #global-header.with-proposition.with-user .header-wrapper .header-proposition {
+      width: 45%; } }
   #global-header #logo {
     float: left;
     overflow: visible;
@@ -310,14 +314,7 @@ button:focus {
     line-height: 1;
     text-decoration: none;
     text-rendering: optimizeLegibility;
-    border-bottom: 1px solid transparent;
-    background: url(<%= asset_path 'images/gov.uk_logotype_crown.png' %>) no-repeat;
-    background-size: 36px 32px;
-    background-position: 0 0; }
-    #global-header #logo img {
-      margin: 2px 1px 0 0;
-      vertical-align: bottom;
-      visibility: hidden; }
+    border-bottom: 1px solid transparent; }
     #global-header #logo:hover, #global-header #logo:focus {
       text-decoration: none;
       border-bottom-color: white; }
@@ -327,7 +324,7 @@ button:focus {
       #global-header .header-proposition {
         padding-top: 0; } }
     #global-header .header-proposition #proposition-name {
-      font-family: "nta", Arial, sans-serif;
+      font-family: "Source Sans Pro", "Arial", sans-serif;
       font-weight: 400;
       text-transform: none;
       font-size: 18px;
@@ -337,14 +334,14 @@ button:focus {
       text-decoration: none; }
       @media (min-width: 641px) {
         #global-header .header-proposition #proposition-name {
-          font-size: 24px;
+          font-size: 20px;
           line-height: 1.25; } }
     #global-header .header-proposition a#proposition-name:hover {
       text-decoration: underline; }
     #global-header .header-proposition a#proposition-name:focus {
       color: #0b0c0c; }
     #global-header .header-proposition a.menu {
-      font-family: "nta", Arial, sans-serif;
+      font-family: "Source Sans Pro", "Arial", sans-serif;
       font-weight: 400;
       text-transform: none;
       font-size: 14px;
@@ -353,11 +350,16 @@ button:focus {
       display: block;
       float: right;
       text-decoration: none;
-      padding-top: 6px; }
+      padding-top: 4px;
+      margin-left: 10px; }
       @media (min-width: 641px) {
         #global-header .header-proposition a.menu {
           font-size: 16px;
           line-height: 1.25; } }
+      @media (min-width: 641px) {
+        #global-header .header-proposition a.menu {
+          padding-top: 6px;
+          margin-left: 0; } }
       @media (min-width: 769px) {
         #global-header .header-proposition a.menu {
           display: none; } }
@@ -373,7 +375,8 @@ button:focus {
       #global-header .header-proposition a.menu.js-visible:after {
         content: " \25B2"; }
     #global-header .header-proposition #proposition-menu {
-      margin-top: 5px; }
+      margin-top: 2px;
+      border-top: 1px #515153 solid; }
       @media (min-width: 769px) {
         #global-header .header-proposition #proposition-menu.no-proposition-name {
           margin-top: 37px; } }
@@ -381,7 +384,8 @@ button:focus {
     #global-header .header-proposition #proposition-links {
       clear: both;
       margin: 2px 0 0 0;
-      padding: 0; }
+      padding: 0;
+      list-style-type: none; }
       .js-enabled #global-header .header-proposition #proposition-link, .js-enabled
       #global-header .header-proposition #proposition-links {
         display: none; }
@@ -403,45 +407,35 @@ button:focus {
           #global-header .header-proposition #proposition-links li {
             display: block;
             width: auto;
-            padding: 0 15px 0 0;
+            padding: 0 20px 0 0;
             border-bottom: 0; }
             #global-header .header-proposition #proposition-link li.clear-child,
             #global-header .header-proposition #proposition-links li.clear-child {
               clear: left; } }
       #global-header .header-proposition #proposition-link a,
       #global-header .header-proposition #proposition-links a {
-        color: white;
+        color: #c1d0e2;
         text-decoration: none;
-        font-family: "nta", Arial, sans-serif;
-        font-weight: 700;
+        font-family: "Source Sans Pro", "Arial", sans-serif;
+        font-weight: 400;
         text-transform: none;
-        font-size: 12px;
-        line-height: 1.25; }
+        font-size: 14px;
+        line-height: 1.14286; }
         @media (min-width: 641px) {
           #global-header .header-proposition #proposition-link a,
           #global-header .header-proposition #proposition-links a {
-            font-size: 14px;
-            line-height: 1.42857; } }
+            font-size: 16px;
+            line-height: 1.25; } }
         @media (min-width: 769px) {
           #global-header .header-proposition #proposition-link a,
           #global-header .header-proposition #proposition-links a {
-            font-family: "nta", Arial, sans-serif;
-            font-weight: 700;
-            text-transform: none;
-            font-size: 14px;
-            line-height: 1.14286;
             line-height: 23px; } }
-          @media (min-width: 769px) and (min-width: 641px) {
-            #global-header .header-proposition #proposition-link a,
-            #global-header .header-proposition #proposition-links a {
-              font-size: 16px;
-              line-height: 1.25; } }
         #global-header .header-proposition #proposition-link a:hover,
         #global-header .header-proposition #proposition-links a:hover {
           text-decoration: underline; }
         #global-header .header-proposition #proposition-link a.active,
         #global-header .header-proposition #proposition-links a.active {
-          color: #1d8feb; }
+          color: white; }
         #global-header .header-proposition #proposition-link a:focus,
         #global-header .header-proposition #proposition-links a:focus {
           color: #0b0c0c; }
@@ -453,11 +447,112 @@ button:focus {
       @media (min-width: 769px) {
         #global-header .header-proposition #proposition-link {
           float: none; } }
+  #global-header .header-user {
+    width: 100%; }
+    @media (min-width: 769px) {
+      #global-header .header-user {
+        min-width: 155px;
+        width: 20%;
+        float: right;
+        text-align: right; } }
+    #global-header .header-user .user-menu {
+      position: absolute;
+      display: block;
+      right: 15px;
+      top: 25px; }
+      @media (min-width: 769px) {
+        #global-header .header-user .user-menu {
+          display: inline-block;
+          width: 28px;
+          height: 28px;
+          margin-top: 5px;
+          vertical-align: top;
+          position: static; } }
+      #global-header .header-user .user-menu #user-icon {
+        background: url("images/icon_user.png") no-repeat;
+        display: block;
+        width: 28px;
+        height: 28px; }
+    #global-header .header-user #user-signup {
+      position: absolute;
+      font-size: 12px;
+      width: 80px;
+      height: 30px;
+      line-height: 30px;
+      top: 25px;
+      right: 15px;
+      border: 1px white solid;
+      display: block;
+      float: right;
+      color: white;
+      text-decoration: none;
+      text-align: center; }
+      #global-header .header-user #user-signup:hover {
+        background: rgba(0, 0, 0, 0.4);
+        text-decoration: none;
+        color: white;
+        outline: none; }
+      @media (min-width: 641px) {
+        #global-header .header-user #user-signup {
+          top: 20px;
+          width: 125px;
+          height: 40px;
+          font-size: 20px;
+          line-height: 40px; } }
+      @media (min-width: 769px) {
+        #global-header .header-user #user-signup {
+          position: static; } }
+    #global-header .header-user #user-links {
+      background: rgba(0, 0, 0, 0.4);
+      display: block;
+      padding: 15px;
+      margin: 20px 0 -20px 0;
+      text-align: right; }
+      @media (min-width: 641px) {
+        #global-header .header-user #user-links {
+          margin-left: -15px;
+          margin-right: -15px; } }
+      @media (min-width: 769px) {
+        #global-header .header-user #user-links {
+          display: inline-block;
+          padding: 0;
+          text-align: left;
+          margin: 0 0 0 9px;
+          background: transparent;
+          max-width: 65%; } }
+      #global-header .header-user #user-links a#user-name {
+        display: block;
+        color: white;
+        font-size: 16px;
+        line-height: 20px;
+        font-weight: 600;
+        text-decoration: none; }
+        #global-header .header-user #user-links a#user-name:active, #global-header .header-user #user-links a#user-name:hover {
+          text-decoration: underline;
+          outline: none;
+          background: transparent; }
+      #global-header .header-user #user-links a#user-logout {
+        display: block;
+        color: #c1d0e2;
+        font-size: 14px;
+        line-height: 18px;
+        text-decoration: none; }
+        #global-header .header-user #user-links a#user-logout:active, #global-header .header-user #user-links a#user-logout:hover {
+          text-decoration: underline;
+          outline: none;
+          background: transparent; }
+      .js-enabled #global-header .header-user #user-links {
+        display: none; }
+        @media (min-width: 769px) {
+          .js-enabled #global-header .header-user #user-links {
+            display: inline-block; } }
+        .js-enabled #global-header .header-user #user-links.js-visible {
+          display: block; }
 
 /* Global header bar */
 #global-header-bar {
-  height: 10px;
-  background-color: #005ea5; }
+  height: 3px;
+  background: url("images/stripe.png"); }
 
 /* Global cookie message */
 .js-enabled #global-cookie-message {
@@ -470,7 +565,7 @@ button:focus {
   padding-top: 10px;
   padding-bottom: 10px; }
   #global-cookie-message p {
-    font-family: "nta", Arial, sans-serif;
+    font-family: "Source Sans Pro", "Arial", sans-serif;
     font-weight: 400;
     text-transform: none;
     font-size: 14px;
@@ -484,20 +579,19 @@ button:focus {
 
 /* Global footer */
 #footer {
-  background-color: #dee0e2;
-  border-top: 1px solid #a1acb2; }
+  background-color: #eaeaea; }
+  @media (min-width: 769px) {
+    #footer.with-logo .open-government-licence {
+      padding-left: 85px; } }
   #footer .footer-wrapper {
-    background-color: #dee0e2;
-    padding-top: 20px; }
-    @media (min-width: 641px) {
-      #footer .footer-wrapper {
-        padding-top: 60px; } }
+    background-color: #eaeaea;
+    padding-top: 30px; }
   #footer a {
-    color: #454a4c; }
+    color: #005ea5; }
     #footer a:hover {
-      color: #171819; }
+      color: #0b0c0c; }
   #footer h2 {
-    font-family: "nta", Arial, sans-serif;
+    font-family: "Source Sans Pro", "Arial", sans-serif;
     font-weight: 400;
     text-transform: none;
     font-size: 18px;
@@ -507,7 +601,7 @@ button:focus {
     margin: 0; }
     @media (min-width: 641px) {
       #footer h2 {
-        font-size: 24px;
+        font-size: 20px;
         line-height: 1.25; } }
     #footer h2 a {
       color: inherit; }
@@ -515,44 +609,41 @@ button:focus {
     padding-bottom: 60px;
     clear: both;
     font-size: 0;
-    color: #454a4c; }
+    color: #0b0c0c; }
     #footer .footer-meta .footer-meta-inner {
       display: inline-block;
       vertical-align: bottom;
       width: 100%; }
-      @media (min-width: 641px) {
+      @media (min-width: 769px) {
         #footer .footer-meta .footer-meta-inner {
           width: 75%; } }
       #footer .footer-meta .footer-meta-inner ul {
-        font-family: "nta", Arial, sans-serif;
+        font-family: "Source Sans Pro", "Arial", sans-serif;
         font-weight: 400;
         text-transform: none;
         font-size: 14px;
         line-height: 1.5;
         display: inline-block;
         list-style: none;
-        margin: 0 0 1.5em 0;
+        margin: 5px 0;
         padding: 0; }
         @media (min-width: 641px) {
           #footer .footer-meta .footer-meta-inner ul {
             font-size: 16px;
             line-height: 1.5; } }
-        @media (min-width: 641px) {
+        @media (min-width: 769px) {
           #footer .footer-meta .footer-meta-inner ul {
-            margin: 0 0 1em 0; } }
+            margin: 5px 0; } }
         #footer .footer-meta .footer-meta-inner ul li {
           display: inline-block;
           margin: 0 15px 0 0; }
       #footer .footer-meta .footer-meta-inner .open-government-licence {
         clear: left;
         position: relative; }
-        @media (min-width: 641px) {
-          #footer .footer-meta .footer-meta-inner .open-government-licence {
-            padding-left: 53px; } }
         #footer .footer-meta .footer-meta-inner .open-government-licence .logo {
           margin-bottom: 1em;
           padding-top: 0; }
-          @media (min-width: 641px) {
+          @media (min-width: 769px) {
             #footer .footer-meta .footer-meta-inner .open-government-licence .logo {
               position: absolute;
               left: 0;
@@ -571,7 +662,7 @@ button:focus {
                 background-image: url(<%= asset_path 'images/open-government-licence_2x.png' %>);
                 background-size: 41px 17px; } }
         #footer .footer-meta .footer-meta-inner .open-government-licence p {
-          font-family: "nta", Arial, sans-serif;
+          font-family: "Source Sans Pro", "Arial", sans-serif;
           font-weight: 400;
           text-transform: none;
           font-size: 14px;
@@ -583,40 +674,29 @@ button:focus {
               font-size: 16px;
               line-height: 1.25; } }
     #footer .footer-meta .copyright {
-      font-family: "nta", Arial, sans-serif;
+      font-family: "Source Sans Pro", "Arial", sans-serif;
       font-weight: 400;
       text-transform: none;
       font-size: 14px;
       line-height: 1.14286;
-      margin: 30px 0 0 0;
+      text-align: left;
+      margin: 0 0 30px 0;
       width: 100%;
-      display: block; }
+      display: block;
+      vertical-align: top; }
       @media (min-width: 641px) {
         #footer .footer-meta .copyright {
           font-size: 16px;
           line-height: 1.25; } }
-      @media (min-width: 641px) {
+      @media (min-width: 769px) {
         #footer .footer-meta .copyright {
           display: inline-block;
           text-align: inherit;
           width: 25%;
-          padding-top: 15px;
-          margin-top: 0; } }
+          padding-top: 0;
+          margin-bottom: 0; } }
       #footer .footer-meta .copyright a {
         display: block;
-        background-image: url(<%= asset_path 'images/govuk-crest.png' %>);
-        background-repeat: no-repeat;
-        background-position: 50% 0%;
-        text-align: center;
-        text-decoration: none;
-        padding: 115px 0 0 0; }
-        @media (min-width: 641px) {
-          #footer .footer-meta .copyright a {
-            background-position: 100% 0%; } }
-        @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 20 / 10), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
-          #footer .footer-meta .copyright a {
-            background-image: url(<%= asset_path 'images/govuk-crest-2x.png' %>);
-            background-size: 125px 102px; } }
-        @media (min-width: 641px) {
-          #footer .footer-meta .copyright a {
-            text-align: right; } }
+        text-decoration: none; }
+        #footer .footer-meta .copyright a img.logo {
+          max-width: 218px; }