app/assets/stylesheets/govuk-template.css.erb in govuk_template-0.7.1 vs app/assets/stylesheets/govuk-template.css.erb in govuk_template-0.8.0
- old
+ new
@@ -3,84 +3,54 @@
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
+@-ms-viewport {
+ width: device-width; }
- or
+@-o-viewport {
+ width: device-width; }
- @include inline-block("250px")
+#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-links:after, #global-header-bar:after, #global-cookie-message .outer-block:after, #footer .footer-wrapper:after, #footer .footer-meta:after {
+ content: "";
+ display: block;
+ clear: both; }
- which gives a min-height to the inline-block elements.
-*/
-/* Contain floats usage:
+@-ms-viewport {
+ width: device-width; }
- .this-has-floated-children {
- @extend %contain-floats;
- }
+@-o-viewport {
+ width: device-width; }
-*/
-#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-links:after {
+#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-links:after, #global-header-bar:after, #global-cookie-message .outer-block:after, #footer .footer-wrapper:after, #footer .footer-meta: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 */
/* Old depricated greys, new things should use the toolkit greys */
html, body, button, input, table, td, th {
font-family: "nta", Arial, sans-serif; }
@@ -314,37 +284,17 @@
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, #global-header .header-proposition #proposition-links:after {
+#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-links:after, #global-header-bar:after, #global-cookie-message .outer-block:after, #footer .footer-wrapper:after, #footer .footer-meta:after {
content: "";
display: block;
clear: both; }
@-ms-viewport {
@@ -358,14 +308,16 @@
width: 100%; }
#global-header .header-wrapper {
background-color: #0b0c0c;
max-width: 990px;
margin: 0 auto;
- padding: 0.5em 15px; }
- @media (max-width: 640px) {
+ padding-top: 8px;
+ padding-bottom: 8px; }
+ @media (min-width: 641px) {
#global-header .header-wrapper {
- padding: 0.5em 0; } }
+ padding-left: 15px;
+ padding-right: 15px; } }
#global-header .header-wrapper .header-global .header-logo {
float: left; }
@media (min-width: 769px) {
#global-header .header-wrapper .header-global .header-logo {
width: 33.33%; } }
@@ -523,47 +475,72 @@
#global-header .header-proposition #proposition-links li a:hover {
text-decoration: underline; }
#global-header .header-proposition #proposition-links li a.active {
color: #28a197; }
+/* Global header bar */
+#global-header-bar {
+ margin: 0 auto;
+ width: auto;
+ max-width: 1020px; }
+ #global-header-bar .inner-block {
+ padding-left: 15px;
+ padding-right: 15px; }
+ @media (min-width: 641px) {
+ #global-header-bar .inner-block {
+ padding-left: 30px;
+ padding-right: 30px; } }
+ #global-header-bar .header-bar {
+ height: 10px;
+ background-color: #005ea5; }
+
/* Global cookie message */
.js-enabled #global-cookie-message {
display: none;
/* shown with JS, always on for non-JS */ }
#global-cookie-message {
- padding: 8px 15px;
- background-color: #d5e8f3; }
+ background-color: #d5e8f3;
+ padding-top: 10px;
+ padding-bottom: 10px; }
+ #global-cookie-message .outer-block {
+ margin: 0 auto;
+ width: auto;
+ max-width: 1020px; }
+ #global-cookie-message .inner-block {
+ padding-left: 15px;
+ padding-right: 15px; }
+ @media (min-width: 641px) {
+ #global-cookie-message .inner-block {
+ padding-left: 30px;
+ padding-right: 30px; } }
#global-cookie-message p {
font-family: "nta", Arial, sans-serif;
- font-size: 19px;
- line-height: 1.31579;
- font-weight: 400;
+ font-size: 16px;
+ line-height: 1.25;
+ font-weight: 300;
text-transform: none;
- margin: 0 auto;
- max-width: 960px; }
+ margin: 0; }
@media (max-width: 640px) {
#global-cookie-message p {
- font-size: 16px;
- line-height: 1.25; } }
- @media (min-width: 641px) {
- #global-cookie-message {
- padding-left: 30px;
- padding-right: 30px; } }
+ font-size: 14px;
+ line-height: 1.14286; } }
/* Global footer */
#footer {
background-color: #dee0e2;
border-top: 1px solid #a1acb2; }
#footer .footer-wrapper {
- background-color: #dee0e2;
- max-width: 990px;
margin: 0 auto;
- padding: 20px 0 0; }
+ width: auto;
+ max-width: 1020px;
+ padding-top: 20px;
+ background-color: #dee0e2;
+ margin: 0 auto; }
@media (min-width: 641px) {
#footer .footer-wrapper {
- padding: 60px 15px 0; } }
+ padding-top: 60px; } }
#footer a {
color: #454a4c; }
#footer a:hover {
color: #171819; }
#footer h2 {
@@ -580,64 +557,62 @@
font-size: 20px;
line-height: 1.2; } }
#footer h2 a {
color: inherit; }
#footer .footer-meta {
+ padding-left: 15px;
+ padding-right: 15px;
+ padding-bottom: 60px;
clear: both;
font-size: 0;
- color: #454a4c;
- padding: 0 15px 60px; }
- @media (max-width: 640px) {
+ color: #454a4c; }
+ @media (min-width: 641px) {
#footer .footer-meta {
- margin: 0; } }
+ padding-left: 30px;
+ padding-right: 30px; } }
#footer .footer-meta .footer-meta-inner {
display: inline-block;
vertical-align: bottom;
- width: 75%; }
- @media (max-width: 640px) {
+ width: 100%; }
+ @media (min-width: 641px) {
#footer .footer-meta .footer-meta-inner {
- display: block;
- width: 100%; } }
+ width: 75%; } }
#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;
+ margin: 0 0 1.5em 0;
padding: 0; }
@media (max-width: 640px) {
#footer .footer-meta .footer-meta-inner ul {
font-size: 14px;
line-height: 1.5; } }
+ @media (min-width: 641px) {
+ #footer .footer-meta .footer-meta-inner ul {
+ margin: 0 0 1em 0; } }
#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) {
+ position: relative; }
+ @media (min-width: 641px) {
#footer .footer-meta .footer-meta-inner .open-government-licence {
- padding-left: 0; } }
+ padding-left: 53px; } }
#footer .footer-meta .footer-meta-inner .open-government-licence h2 {
- position: absolute;
- left: 0;
- top: 0;
- width: 41px;
- height: 100%; }
- @media (max-width: 640px) {
+ margin-bottom: 1em; }
+ @media (min-width: 641px) {
#footer .footer-meta .footer-meta-inner .open-government-licence h2 {
- position: static;
- width: auto;
- margin-bottom: 1em; } }
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 41px;
+ height: 100%; } }
#footer .footer-meta .footer-meta-inner .open-government-licence h2 a {
display: block;
width: 41px;
height: 17px;
overflow: hidden;
@@ -663,33 +638,37 @@
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; }
+ margin: 30px 0 0 0;
+ width: 100%;
+ display: block; }
@media (max-width: 640px) {
#footer .footer-meta .copyright {
font-size: 14px;
line-height: 1.14286; } }
+ @media (min-width: 641px) {
+ #footer .footer-meta .copyright {
+ display: inline-block;
+ text-align: inherit;
+ width: 25%;
+ padding-top: 15px;
+ margin-top: 0; } }
#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; }
+ 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 (max-width: 640px) {
- #footer .footer-meta .copyright {
- width: 100%;
- display: block;
- padding: 0;
- margin: 30px 0 0 0; }
+ @media (min-width: 641px) {
#footer .footer-meta .copyright a {
- text-align: center;
- background-position: 50% 0%; } }
+ text-align: right; } }