Add banner component styling, update layout

export_elements/overrides/govuk_elements/elements/_layout.scss

@@ -6,7 +6,7 @@
 
 #content {
   max-width: none;
-  padding: 30px 0;
+  padding: 0;
   margin: 0;
 }
 

export_elements/sass/components/banner/_base.scss

@@ -0,0 +1,68 @@
+
+// BANNER
+// ======
+
+.information-banner {
+  p {
+    margin: 0;
+  }
+
+  .banner-content {
+    width: 100%;
+    display: table;
+    margin: 0;
+
+    & > * {
+      display: table-cell;
+      vertical-align: top;
+      padding-left: 15px;
+    }
+
+    & > *:first-child {
+      padding-left: 0;
+    }
+  }
+
+  .banner-badge {
+    // force element to shrink to fit content
+    white-space: nowrap;
+    width: 1px;
+
+    span {
+      padding: 2px 15px;
+    }
+  }
+
+  .banner-close-button {
+    float: right;
+  }
+}
+
+@media (max-width: 520px) {
+  .information-banner {
+    .banner-content {
+      display: block;
+      position: relative;
+
+      & > * {
+        display: block;
+        padding-left: 0;
+      }
+
+      & > *:last-child {
+        padding: 0;
+      }
+
+      .banner-badge {
+        width: auto;
+        padding-bottom: 15px;
+      }
+
+      .banner-close-button {
+        position: absolute;
+        top: 0;
+        right: 0;
+      }
+    }
+  }
+}

export_elements/sass/components/elements-components.scss

@@ -12,3 +12,4 @@
 @import 'social-share-links/base';
 @import 'boxes/base';
 @import 'utils/base';
+@import 'banner/base';

export_elements/sass/components/error-reporting/_base.scss

@@ -5,7 +5,7 @@
 @import '../partials/spacings';
 
 section.error-reporting {
-  padding: $spacing-1 0;
+  padding: $spacing-3 0;
 }
 
 .error-reporting {

export_elements/sass/components/utils/_base.scss

@@ -92,3 +92,14 @@
 .border-thick  { border-style: solid; border-width: 6px }
 .border-medium { border-style: solid; border-width: 4px }
 .border-thin   { border-style: solid; border-width: 2px }
+
+// Padding
+
+.padding-60 { padding: 60px }
+.padding-45 { padding: 45px }
+.padding-30 { padding: 30px }
+.padding-15 { padding: 15px }
+
+// Text
+
+.uppercase { text-transform: uppercase }

export_elements/static/export_elements/stylesheets/elements-components.css

@@ -570,7 +570,7 @@
     width: 100%; } }
 
 section.error-reporting {
-  padding: 60px 0; }
+  padding: 30px 0; }
 
 .error-reporting a {
   font-size: 16px;
@@ -1183,3 +1183,58 @@ ul.tag-list li {
 .border-thin {
   border-style: solid;
   border-width: 2px; }
+
+.padding-60 {
+  padding: 60px; }
+
+.padding-45 {
+  padding: 45px; }
+
+.padding-30 {
+  padding: 30px; }
+
+.padding-15 {
+  padding: 15px; }
+
+.uppercase {
+  text-transform: uppercase; }
+
+.information-banner p {
+  margin: 0; }
+
+.information-banner .banner-content {
+  width: 100%;
+  display: table;
+  margin: 0; }
+  .information-banner .banner-content > * {
+    display: table-cell;
+    vertical-align: top;
+    padding-left: 15px; }
+  .information-banner .banner-content > *:first-child {
+    padding-left: 0; }
+
+.information-banner .banner-badge {
+  white-space: nowrap;
+  width: 1px; }
+  .information-banner .banner-badge span {
+    padding: 2px 15px; }
+
+.information-banner .banner-close-button {
+  float: right; }
+
+@media (max-width: 520px) {
+  .information-banner .banner-content {
+    display: block;
+    position: relative; }
+    .information-banner .banner-content > * {
+      display: block;
+      padding-left: 0; }
+    .information-banner .banner-content > *:last-child {
+      padding: 0; }
+    .information-banner .banner-content .banner-badge {
+      width: auto;
+      padding-bottom: 15px; }
+    .information-banner .banner-content .banner-close-button {
+      position: absolute;
+      top: 0;
+      right: 0; } }

export_elements/static/export_elements/stylesheets/govuk-elements-styles.css

@@ -281,7 +281,7 @@ legend {
 
 #content {
   max-width: none;
-  padding: 30px 0;
+  padding: 0;
   margin: 0; }
 
 .grid-row > * {

export_elements/version.py

@@ -1 +1 @@
-__version__ = '0.20.0'
+__version__ = '0.21.0'