Merge pull request #3597 from alphagov/fix-pill-spacing-2nd-attempt

Fix spacing in pill items

app/assets/stylesheets/components/big-number.scss

@@ -16,6 +16,17 @@
 
 }
 
+.pill .big-number-number {
+
+  // reduce padding until screen is bigger than 420px / zoomed below 300%
+  padding-left: govuk-spacing(1);
+
+  @include govuk-media-query($from: 420px) {
+    padding-left: govuk-spacing(2);
+  }
+
+}
+
 .big-number-dark {
   @extend %big-number;
   padding: govuk-spacing(3);

app/assets/stylesheets/components/cookie-message.scss

@@ -1,6 +1,5 @@
 // GOV.UK Publishing components cookie banner styles
 // https://github.com/alphagov/govuk_publishing_components/blob/master/app/assets/stylesheets/govuk_publishing_components/components/_cookie-banner.scss
-// sass-lint:disable mixins-before-declarations
 
 // component uses .govuk-body and .govuk-button classes from govuk-frontend
 @import 'core/typography';

app/assets/stylesheets/components/pill.scss

@@ -31,7 +31,7 @@
     float: left;
     box-sizing: border-box;
     width: 100%;
-    padding: 10px;
+    padding: 10px 0;
   }
 
   a {
@@ -76,8 +76,20 @@
 
   }
 
+  &-label {
+
+    // reduce padding until screen is above 420px / zoomed below 300%
+    padding-left: govuk-spacing(1);
+
+    @include govuk-media-query($from: 420px) {
+      padding-left: govuk-spacing(2);
+    }
+
+  }
+
   &-centered-item {
     text-align: center;
+    padding-left: 0;
   }
 
 }

gulpfile.js

@@ -259,7 +259,8 @@ const lint = {
         paths.src + 'stylesheets/views/*.scss',
       ])
       .pipe(plugins.sassLint({
-        'options': { 'formatter': 'stylish' }
+        'options': { 'formatter': 'stylish' },
+        'rules': { 'mixins-before-declarations': [2, { 'exclude': ['media', 'govuk-media-query'] } ] }
       }))
       .pipe(plugins.sassLint.format())
       .pipe(plugins.sassLint.failOnError());