diff --git a/app/assets/stylesheets/components/big-number.scss b/app/assets/stylesheets/components/big-number.scss index bed587724..45e006327 100644 --- a/app/assets/stylesheets/components/big-number.scss +++ b/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); diff --git a/app/assets/stylesheets/components/cookie-message.scss b/app/assets/stylesheets/components/cookie-message.scss index f72132ab5..28684d611 100644 --- a/app/assets/stylesheets/components/cookie-message.scss +++ b/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'; diff --git a/app/assets/stylesheets/components/pill.scss b/app/assets/stylesheets/components/pill.scss index 72004fa1a..952155057 100644 --- a/app/assets/stylesheets/components/pill.scss +++ b/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; } } diff --git a/gulpfile.js b/gulpfile.js index d8e8686d9..aef452c39 100644 --- a/gulpfile.js +++ b/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());