govuk_template 0.3.8

data/app/assets/stylesheets/govuk-template-print.css.erb

@@ -0,0 +1,78 @@
+@font-face {
+  font-family: GDS-Logo;
+  src: local("HelveticaNeue"), local("Helvetica Neue"), local("Arial"), local("Helvetica"); }
+
+@-ms-viewport {
+  width: device-width; }
+
+@-o-viewport {
+  width: device-width; }
+
+html {
+  font-size: 62.5%; }
+
+/* Global print stylesheet */
+/* reset everything */
+* {
+  background: transparent;
+  color: black;
+  text-shadow: none;
+  filter: none;
+  -ms-filter: none; }
+
+body {
+  font-family: "nta", Arial, sans-serif;
+  font-size: 11pt;
+  line-height: 1.42857;
+  font-weight: 400;
+  text-transform: none;
+  margin: 0;
+  padding: 0;
+  width: 100%; }
+  @media (max-width: 640px) {
+    body {
+      font-size: 12px;
+      line-height: 1.25; } }
+
+a, a:visited {
+  word-wrap: break-word; }
+
+a[href^="/"]:after {
+  content: " (https://www.gov.uk" attr(href) ")";
+  font-size: 90%; }
+
+a[href^="http://"]:after,
+a[href^="https://"]:after {
+  content: " (" attr(href) ")";
+  font-size: 90%; }
+
+a[href^="javascript:"]:after,
+a[href^="#"]:after {
+  content: ""; }
+
+img {
+  max-width: 100% !important; }
+
+select {
+  background: white; }
+
+#global-header {
+  color: #000;
+  font-weight: bold;
+  font-size: 24px;
+  margin-bottom: 1em; }
+  #global-header .content {
+    margin: 0 !important; }
+  #global-header a, #global-header a:visited {
+    text-decoration: none; }
+  #global-header a:after {
+    content: ""; }
+  #global-header img {
+    display: none; }
+
+/* hide the unnecessary page elements */
+body footer,
+.visuallyhidden,
+#global-cookie-message,
+#skiplink-container {
+  display: none !important; }

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

@@ -0,0 +1,575 @@
+/* govuk_frontend_toolkit includes */
+@-ms-viewport {
+  width: device-width; }
+
+@-o-viewport {
+  width: device-width; }
+
+/* CSS 3 Mixins
+
+  Add them as you need them. This should let us manage vendor prefixes in one place.
+ */
+@font-face {
+  font-family: GDS-Logo;
+  src: local("HelveticaNeue"), local("Helvetica Neue"), local("Arial"), local("Helvetica"); }
+
+@-ms-viewport {
+  width: device-width; }
+
+@-o-viewport {
+  width: device-width; }
+
+/* Cross-browser shims
+
+  Ways of normalising properties across browsers.
+ */
+@-ms-viewport {
+  width: device-width; }
+
+@-o-viewport {
+  width: device-width; }
+
+/* Usage:
+   @include inline-block
+
+   or
+
+   @include inline-block("250px")
+
+   which gives a min-height to the inline-block elements.
+*/
+/* Contain floats usage:
+
+   .this-has-floated-children {
+     @extend %contain-floats;
+   }
+
+*/
+#global-header .header-wrapper:after, #global-header .header-wrapper .header-global:after, #global-header .header-wrapper .header-global .header-logo:after {
+  content: "";
+  display: block;
+  clear: both; }
+
+/* CSS 3 Mixins
+
+  Add them as you need them. This should let us manage vendor prefixes in one place.
+ */
+@-ms-viewport {
+  width: device-width; }
+
+@-o-viewport {
+  width: device-width; }
+
+/*
+
+Mixin and defaults for making buttons on GOV.UK services.
+
+For guidance, see: https://www.gov.uk/service-manual/design-and-content/resources/buttons.html
+
+Example usage:
+
+.button{
+  @include button;
+}
+.button-secondary{
+  @include button($grey-3);
+}
+.button-warning{
+  @include button($red);
+}
+
+*/
+/* local styleguide includes */
+/* New Greys */
+html, body, button, input, table, td, th {
+  font-family: "nta", Arial, sans-serif; }
+
+html, body, div, h1, h2, h3, h4, h5, h6, article, aside, footer, header, hgroup, nav, section {
+  margin: 0;
+  padding: 0;
+  vertical-align: baseline; }
+
+.group:before,
+.group:after {
+  content: "\0020";
+  display: block;
+  height: 0;
+  overflow: hidden; }
+
+.group:after {
+  clear: both; }
+
+.group {
+  zoom: 1; }
+
+.content-fixed {
+  top: 0;
+  position: fixed; }
+
+.shim {
+  display: block; }
+
+/*
+ * 1. Prevents iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+html {
+  -webkit-text-size-adjust: 100%;
+  /* 1 */
+  -ms-text-size-adjust: 100%;
+  /* 1 */
+  background: white; }
+
+body {
+  color: #0b0c0c;
+  line-height: 1.5;
+  font-weight: 400;
+  -webkit-font-smoothing: antialiased; }
+
+ol, ul, nav ol, nav ul {
+  list-style: inherit; }
+
+fieldset {
+  border: none;
+  padding: 0; }
+
+a,
+a:visited {
+  color: #2e3191; }
+
+a:hover {
+  color: #2e8aca; }
+
+a:active {
+  color: #2e8aca; }
+
+a[rel="external"]:after {
+  background-image: url(<%= asset_path 'external-link.png' %>);
+  background-repeat: no-repeat; }
+  @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) {
+    a[rel="external"]:after {
+      background-image: url(<%= asset_path 'external-link-24x24.png' %>);
+      background-size: 12px 400px; } }
+a[rel="external"]:after {
+  content: "\A0\A0\A0\A0";
+  background-position: right 6px; }
+a[rel="external"]:hover:after {
+  background-position: right -382px; }
+@media (max-width: 640px) {
+  a[rel="external"]:after {
+    content: "\A0\A0\A0\A0\A0";
+    background-position: right 3px; }
+  a[rel="external"]:hover:after {
+    background-position: right -385px; } }
+
+.external-link:after {
+  content: "\A0\A0\A0\A0\A0\A0\A0\A0";
+  background-position: right 0px; }
+.external-link:hover:after {
+  background-position: right 0px; }
+.external-link:after {
+  background-image: url(<%= asset_path 'external-link-black-12x12.png' %>);
+  background-repeat: no-repeat; }
+  @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) {
+    .external-link:after {
+      background-image: url(<%= asset_path 'external-link-black-24x24.png' %>);
+      background-size: 12px 400px; } }
+
+/*
+ * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
+ *    http://clagnut.com/blog/348/#c790
+ *    note - font-size reduced to 62.5% to allow simple rem/px font-sizing and fallback
+ *    http://snook.ca/archives/html_and_css/font-size-with-rem
+ * 2. Keeps page centred in all browsers regardless of content height
+ * 3. Removes Android and iOS tap highlight color to prevent entire container being highlighted
+ *    www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/
+ */
+html {
+  font-size: 62.5%;
+  /* 1 */
+  overflow-y: scroll;
+  /* 2 */
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  /* 3 */ }
+
+/*
+ * 1. Font-size increased to compensate for change to html element font-size in
+ *    order to support beta typography which was set in ems
+ *    (62.5% * 160% = 100%)
+ * 2. Addresses margins handled incorrectly in IE6/7
+ */
+body {
+  font-size: 160%;
+  /* 1 */
+  margin: 0;
+  /* 2 */ }
+
+b,
+strong {
+  font-weight: 600; }
+
+img {
+  border: 0; }
+
+button {
+  *overflow: visible; }
+
+abbr[title] {
+  cursor: help; }
+
+/*
+ * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
+ *    (include `-moz` to future-proof).
+ */
+input[type="search"] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  /* 2 */
+  box-sizing: content-box; }
+
+input[type="search"]::-webkit-search-cancel-button {
+  -webkit-appearance: searchfield-cancel-button;
+  margin-right: 2px; }
+
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none; }
+
+/* For image replacement */
+.ir {
+  display: block;
+  text-indent: -999em;
+  overflow: hidden;
+  background-repeat: no-repeat;
+  text-align: left;
+  direction: ltr; }
+  .ir br {
+    display: none; }
+
+/* Hide for both screenreaders and browsers */
+.hidden {
+  display: none;
+  visibility: hidden; }
+
+/* Hide only visually, but have it available for screenreaders */
+.visuallyhidden {
+  position: absolute;
+  left: -9999em;
+  /*
+   * Extends the .visuallyhidden class to allow the element to be
+   * focusable when navigated to via the keyboard
+   */ }
+  .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
+    clip: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    position: static;
+    width: auto; }
+
+/* Hide visually and from screenreaders, but maintain layout */
+.invisible {
+  visibility: hidden; }
+
+/* Give a strong clear visual idea as to what is currently in focus */
+a {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3); }
+
+a:focus {
+  background-color: #ffbf47;
+  outline: 3px solid #ffbf47; }
+
+/* Make skiplinks visible when they are tabbed to */
+.skiplink {
+  position: absolute;
+  left: -9999em; }
+
+.skiplink:focus {
+  position: static; }
+
+#skiplink-container {
+  text-align: center;
+  background: #0b0c0c; }
+  #skiplink-container div {
+    text-align: left;
+    margin: 0 auto;
+    max-width: 1020px; }
+  #skiplink-container .skiplink {
+    display: -moz-inline-stack;
+    display: inline-block;
+    margin: 0.75em 0 0 30px; }
+
+input:focus,
+textarea:focus,
+select:focus,
+#global-header input:focus {
+  outline: 3px solid #ffbf47; }
+
+#global-header h1 a:focus {
+  background-color: transparent;
+  outline: none; }
+#global-header a:focus {
+  color: #0b0c0c; }
+
+/* Cross-browser shims
+
+  Ways of normalising properties across browsers.
+ */
+@-ms-viewport {
+  width: device-width; }
+
+@-o-viewport {
+  width: device-width; }
+
+/* Usage:
+   @include inline-block
+
+   or
+
+   @include inline-block("250px")
+
+   which gives a min-height to the inline-block elements.
+*/
+/* Contain floats usage:
+
+   .this-has-floated-children {
+     @extend %contain-floats;
+   }
+
+*/
+#global-header .header-wrapper:after, #global-header .header-wrapper .header-global:after, #global-header .header-wrapper .header-global .header-logo:after {
+  content: "";
+  display: block;
+  clear: both; }
+
+#global-header {
+  background-color: #0b0c0c;
+  width: 100%; }
+  #global-header .header-wrapper {
+    max-width: 990px;
+    margin: 0 auto;
+    padding: 0.5em 15px; }
+    @media (max-width: 640px) {
+      #global-header .header-wrapper {
+        padding: 0.5em 0; } }
+    #global-header .header-wrapper .header-global .header-logo {
+      width: 49%;
+      float: left; }
+      @media (min-width: 769px) {
+        #global-header .header-wrapper .header-global .header-logo {
+          width: 33.33%; } }
+      @media screen and (max-width: 379px) {
+        #global-header .header-wrapper .header-global .header-logo {
+          width: auto;
+          float: none; } }
+      #global-header .header-wrapper .header-global .header-logo .content {
+        margin: 0 15px; }
+    #global-header .header-wrapper .header-global .header-logo {
+      margin: 5px 0 2px; }
+  #global-header #logo {
+    float: left;
+    position: relative;
+    top: 1px;
+    height: 30px;
+    overflow: visible;
+    vertical-align: baseline;
+    color: white;
+    font-weight: bold;
+    font-size: 30px;
+    line-height: 1em;
+    text-decoration: none;
+    margin-bottom: -1px;
+    padding-bottom: 1px; }
+    #global-header #logo img {
+      position: relative;
+      top: -3px;
+      width: 35px;
+      height: 31px;
+      padding-right: 8px;
+      float: left;
+      display: inline;
+      line-height: inherit;
+      border: none; }
+    #global-header #logo span > span {
+      margin: 0 1px 0 -6px; }
+    #global-header #logo:hover, #global-header #logo:focus {
+      text-decoration: none;
+      border-bottom: 1px solid;
+      padding-bottom: 0; }
+    #global-header #logo:active {
+      color: #2b8cc4; }
+
+/* Global cookie message */
+.js-enabled #global-cookie-message {
+  display: none;
+  /* shown with JS, always on for non-JS */ }
+
+#global-cookie-message {
+  padding: 0.5em 2em;
+  background-color: #d5e8f3; }
+  #global-cookie-message p {
+    font-family: "nta", Arial, sans-serif;
+    font-size: 19px;
+    line-height: 1.31579;
+    font-weight: 400;
+    text-transform: none;
+    margin: 0 auto;
+    max-width: 960px; }
+    @media (max-width: 640px) {
+      #global-cookie-message p {
+        font-size: 16px;
+        line-height: 1.25; } }
+  @media (max-width: 640px) {
+    #global-cookie-message {
+      padding: 0.5em 1em; } }
+
+/* Global footer */
+#footer {
+  background-color: #dee0e2;
+  border-top: 1px solid #a1acb2; }
+  #footer .footer-wrapper {
+    max-width: 60em;
+    margin: 0 auto;
+    padding: 60px 1em 0 1em; }
+    @media (max-width: 640px) {
+      #footer .footer-wrapper {
+        padding-top: 20px; } }
+  #footer a {
+    color: #454a4c; }
+    #footer a:hover {
+      color: #171819; }
+  #footer h2 {
+    font-family: "nta", Arial, sans-serif;
+    font-size: 24px;
+    line-height: 1.25;
+    font-weight: 400;
+    text-transform: none;
+    font-weight: bold;
+    color: #171819;
+    margin: 0; }
+    @media (max-width: 640px) {
+      #footer h2 {
+        font-size: 20px;
+        line-height: 1.2; } }
+    #footer h2 a {
+      color: inherit; }
+  #footer .footer-meta {
+    clear: both;
+    font-size: 0;
+    color: #454a4c;
+    padding-bottom: 60px; }
+    @media (max-width: 640px) {
+      #footer .footer-meta {
+        margin: 0; } }
+    #footer .footer-meta .footer-meta-inner {
+      display: inline-block;
+      vertical-align: bottom;
+      width: 75%; }
+      @media (max-width: 640px) {
+        #footer .footer-meta .footer-meta-inner {
+          display: block;
+          width: 100%; } }
+      #footer .footer-meta .footer-meta-inner ul {
+        font-family: "nta", Arial, sans-serif;
+        font-size: 16px;
+        line-height: 1.5;
+        font-weight: 300;
+        text-transform: none;
+        display: inline-block;
+        list-style: none;
+        margin: 0 0 1em;
+        padding: 0; }
+        @media (max-width: 640px) {
+          #footer .footer-meta .footer-meta-inner ul {
+            font-size: 14px;
+            line-height: 1.5; } }
+        #footer .footer-meta .footer-meta-inner ul li {
+          display: inline-block;
+          margin: 0 15px 0 0; }
+        @media (max-width: 640px) {
+          #footer .footer-meta .footer-meta-inner ul {
+            width: auto;
+            margin: 0 0 1.5em 0; } }
+      #footer .footer-meta .footer-meta-inner .open-government-licence {
+        clear: left;
+        position: relative;
+        padding-left: 53px; }
+        @media (max-width: 640px) {
+          #footer .footer-meta .footer-meta-inner .open-government-licence {
+            padding-left: 0; } }
+        #footer .footer-meta .footer-meta-inner .open-government-licence h2 {
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 41px;
+          height: 100%; }
+          @media (max-width: 640px) {
+            #footer .footer-meta .footer-meta-inner .open-government-licence h2 {
+              position: static;
+              width: auto;
+              margin-bottom: 1em; } }
+          #footer .footer-meta .footer-meta-inner .open-government-licence h2 a, #footer .footer-meta .footer-meta-inner .open-government-licence h2 img {
+            display: block;
+            width: 43px;
+            height: 17px; }
+        #footer .footer-meta .footer-meta-inner .open-government-licence p {
+          font-family: "nta", Arial, sans-serif;
+          font-size: 16px;
+          line-height: 1.25;
+          font-weight: 300;
+          text-transform: none;
+          margin: 0;
+          padding-top: 0.1em; }
+          @media (max-width: 640px) {
+            #footer .footer-meta .footer-meta-inner .open-government-licence p {
+              font-size: 14px;
+              line-height: 1.14286; } }
+          #footer .footer-meta .footer-meta-inner .open-government-licence p a {
+            font-family: "nta", Arial, sans-serif;
+            font-size: 14px;
+            line-height: 1.42857;
+            font-weight: 400;
+            text-transform: none; }
+            @media (max-width: 640px) {
+              #footer .footer-meta .footer-meta-inner .open-government-licence p a {
+                font-size: 12px;
+                line-height: 1.25; } }
+            @media (max-width: 640px) {
+              #footer .footer-meta .footer-meta-inner .open-government-licence p a {
+                font-size: 1em; } }
+    #footer .footer-meta .copyright {
+      font-family: "nta", Arial, sans-serif;
+      font-size: 16px;
+      line-height: 1.25;
+      font-weight: 300;
+      text-transform: none;
+      display: inline-block;
+      float: none;
+      text-align: inherit;
+      width: 25%;
+      padding-top: 15px; }
+      @media (max-width: 640px) {
+        #footer .footer-meta .copyright {
+          font-size: 14px;
+          line-height: 1.14286; } }
+      #footer .footer-meta .copyright a {
+        display: block;
+        padding: 115px 0 0 0;
+        background: transparent url(<%= asset_path 'images/govuk-crest.png' %>) no-repeat 100% 0;
+        text-align: right;
+        text-decoration: none; }
+        @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 (max-width: 640px) {
+        #footer .footer-meta .copyright {
+          width: 100%;
+          display: block;
+          padding: 0;
+          margin: 30px 0 0 0; }
+          #footer .footer-meta .copyright a {
+            text-align: center;
+            background-position: 50% 0%; } }