diff --git a/CHANGELOG.md b/CHANGELOG.md index 5b41370ec1..07c942739b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,8 @@ # Changelog +## v2.5.7 +* Removed use of `line-height` to set button height, instead use `padding`. This so line breaks won't look awkward - with padding around every text row. + ## v2.5.6 * Changed primary button background color to @ffe-blue-royal-light-wcag diff --git a/less/back-button.less b/less/back-button.less index 104197a83c..fa8cd73f70 100644 --- a/less/back-button.less +++ b/less/back-button.less @@ -1,31 +1,31 @@ .ffe-back-button { - box-shadow: none; - border: none; - width: auto; - color: @ffe-grey-dark; - font-family: "MuseoSansRounded-500", arial, sans-serif; - font-size: 16px; - height: 24px; - line-height: 20px; - padding-left: 1em; - background: transparent no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='0.8em' height='1.5em' viewBox='0 0 200 200'%3E%3Cpath transform = 'rotate(90 100 100)' fill = '%23676767' d='m16.171492,41.999998c-4.143269,0-8.2852797,1.57464-11.4277496,4.706478-6.3249899,6.283609-6.3249899,16.499474,0,22.803034l84.0286676,83.76282c6.30496,6.30356,16.54928,6.30356,22.87426,0l83.60959-83.26412c6.32499-6.28361,6.32499-16.499477,0-22.803038-6.30496-6.30356-16.55553-6.30356-22.88051,0l-72.13806,71.893768-72.613438-72.373767c-3.14247-3.151781-7.29074-4.725174-11.433999-4.725174h-0.0188z'/%3E%3C/svg%3E"); - cursor: pointer; - display: block; - outline: none; - overflow: hidden; + box-shadow: none; + border: none; + width: auto; + color: @ffe-grey-dark; + font-family: "MuseoSansRounded-500", arial, sans-serif; + font-size: 16px; + height: 24px; + line-height: 20px; + padding-left: 1em; + background: transparent no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='0.8em' height='1.5em' viewBox='0 0 200 200'%3E%3Cpath transform = 'rotate(90 100 100)' fill = '%23676767' d='m16.171492,41.999998c-4.143269,0-8.2852797,1.57464-11.4277496,4.706478-6.3249899,6.283609-6.3249899,16.499474,0,22.803034l84.0286676,83.76282c6.30496,6.30356,16.54928,6.30356,22.87426,0l83.60959-83.26412c6.32499-6.28361,6.32499-16.499477,0-22.803038-6.30496-6.30356-16.55553-6.30356-22.88051,0l-72.13806,71.893768-72.613438-72.373767c-3.14247-3.151781-7.29074-4.725174-11.433999-4.725174h-0.0188z'/%3E%3C/svg%3E"); + cursor: pointer; + display: block; + outline: none; + overflow: hidden; - &:focus { - background-color: transparent; - border-radius: 4px; - box-shadow: 0 0 0 2px @ffe-blue-focus; - } + &:focus { + background-color: transparent; + border-radius: 4px; + box-shadow: 0 0 0 2px @ffe-blue-focus; + } - &:hover { - background-color: transparent; - box-shadow: none; - } + &:hover { + background-color: transparent; + box-shadow: none; + } - &:hover &__label { - border-bottom: 1px solid @ffe-grey-dark; - } -} \ No newline at end of file + &:hover &__label { + border-bottom: 1px solid @ffe-grey-dark; + } +} diff --git a/less/primary-button.less b/less/primary-button.less index f215db17b9..67e214bde0 100644 --- a/less/primary-button.less +++ b/less/primary-button.less @@ -9,10 +9,9 @@ font-family: "MuseoSansRounded-500", arial, sans-serif; font-size: 18px; - line-height: 41px; outline: none; overflow: hidden; - padding: 0 30px; + padding: 8px 30px 7px; text-align: center; text-decoration: none; transition: all 0.2s; @@ -71,8 +70,7 @@ &--condensed { font-size: 14px; - line-height: 36px; - padding: 0 20px; + padding: 5px 20px; [class*="-button__label-spinner"][aria-hidden="false"] { bottom: -3px; diff --git a/less/shortcut-button.less b/less/shortcut-button.less index 6541fee18a..02391daa08 100644 --- a/less/shortcut-button.less +++ b/less/shortcut-button.less @@ -26,9 +26,9 @@ padding-right: 25px; .ffe-shortcut-button__icon-chevron { - height: 14px; - width: 14px; - left: 10px; + height: 14px; + width: 14px; + left: 10px; } &:hover { diff --git a/less/tertiary-button.less b/less/tertiary-button.less index 8fc7871b81..d9ad8a3fd5 100644 --- a/less/tertiary-button.less +++ b/less/tertiary-button.less @@ -11,7 +11,7 @@ margin: 0 -4px; // Hack to allow box-shadow to float outside content on focus padding: 0 4px; - &:after { + &::after { border-bottom: solid 1px @ffe-blue-royal-light-wcag; content: " "; display: block; @@ -28,9 +28,9 @@ color: @ffe-blue-flat; } - &:active:after, - &:focus:after, - &:hover:after { + &:active::after, + &:focus::after, + &:hover::after { border-color: @ffe-blue-flat; } diff --git a/package.json b/package.json index b021e61ab7..3a2de55281 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ffe-buttons", - "version": "2.5.6", + "version": "2.5.7", "main": "less/buttons.less", "scripts": { "compile": "npm run lint && lessc example/example.less example/example.css && cp -R node_modules/ffe-core/fonts/ example/ && echo \"$(date +%T): Updated example\"", diff --git a/visual-tests/baseline-screenshots/example/plain/firefox-large.png b/visual-tests/baseline-screenshots/example/plain/firefox-large.png index ee0e10144d..5a49a2527d 100644 Binary files a/visual-tests/baseline-screenshots/example/plain/firefox-large.png and b/visual-tests/baseline-screenshots/example/plain/firefox-large.png differ diff --git a/visual-tests/baseline-screenshots/example/plain/firefox-medium.png b/visual-tests/baseline-screenshots/example/plain/firefox-medium.png index e3c92fcc0b..46bf969795 100644 Binary files a/visual-tests/baseline-screenshots/example/plain/firefox-medium.png and b/visual-tests/baseline-screenshots/example/plain/firefox-medium.png differ diff --git a/visual-tests/baseline-screenshots/example/plain/firefox-small.png b/visual-tests/baseline-screenshots/example/plain/firefox-small.png index a80cebde18..0bb5478189 100644 Binary files a/visual-tests/baseline-screenshots/example/plain/firefox-small.png and b/visual-tests/baseline-screenshots/example/plain/firefox-small.png differ