Skip to content

Commit

Permalink
Merge pull request #1917 from mysociety/button-focus-state
Browse files Browse the repository at this point in the history 
[WDTK] Improved focus state for buttons
  • Loading branch information
@gbp
gbp authored Oct 11, 2024
2 parents 026fcde + 2061159 commit e13affd
Show file tree
Hide file tree
Showing 3 changed files with 95 additions and 41 deletions.
101 changes: 71 additions & 30 deletions app/assets/stylesheets/responsive/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,23 +7,40 @@


/* Buttons */
@mixin focus-state {
&:focus,
&:visited:focus {
// It overrides any specificity like the Pro buttons
background: $color_yellow !important;
color: $color_black !important;

outline: 3px solid $color_off_white; // Most of the time this won't be visible, but it will be helpful when the button is in a dark background.
outline-offset: 0;
box-shadow: inset 0px 0px 0px 2px $color_black !important; // It overrides any specificity like the Pro buttons
}
}

@mixin button-base {
padding: 0.5em 1.25em;
border-radius: 3px;
display: inline-block;
font-weight: 600;
text-decoration: none;
transition: background-color 300ms ease-out;
-webkit-transition: background 300ms ease-out, color 300ms ease-out, border 300ms ease-out;
-moz-transition: background 300ms ease-out, color 300ms ease-out, border 300ms ease-out;
-o-transition: background 300ms ease-out, color 300ms ease-out, border 300ms ease-out;
transition: background 300ms ease-out, color 300ms ease-out, border 300ms ease-out;
line-height: normal;
margin-bottom: 0;
font-family: $font-family;
&:hover,
&:active,
&:focus {
text-decoration: none;
transition: background-color 300ms ease-out;
}

@include focus-state;

&:disabled {
@include button-disabled;
}
Expand All @@ -32,44 +49,46 @@
@mixin button {
@include button-base;
color: $color_white;
background-color: $button-bg;
border: none;
background: $button-bg;
border: 1.5px solid $button-bg;
&:hover,
&:active,
&:focus,
&:visited:hover,
&:visited:active,
&:visited:focus {
background-color: darken($button-bg, 10%);
color: $color_white;
&:visited:active {
background:lighten($button-bg, 50%);
color: $button-bg;
}
}


@mixin button-secondary {
@include button-base;
background-color: mix($color_light_grey, $color_yellow, 95%);
background: mix($color_light_grey, $color_yellow, 95%);
color: $color_black;
font-weight: normal;
border: 1.5px solid lighten($color_black, 10%);
&:hover,
&:active,
&:focus {
color: $color_black;
background-color: darken($color_light_grey, 7.5%);
color: $color_black;
&:active {
background: $color_black;
color: $color_white;
border: 1.5px solid $color_white;
}
}

@mixin button-tertiary {
@include button-base;
background-color: transparent;
color: $color_black;
background: $color_off_white; // Adding a colour instead of transparent, that way we can use this button even in dark backgrounds
color: $link-color;
font-weight: normal;
border: 1px solid $color_light_grey;
border: 1.5px solid $link-color;
&:hover,
&:active,
&:focus {
background-color: darken($color_light_grey, 7.5%);
border: 1px solid darken($color_light_grey, 12.5%);
&:visited:hover,
&:visited:active {
color: $color_white;
// We are darkening the background and border for cases there is a defaul button and a tertiary button together. In this case when we are hovering over the tertiary one it won't look just like the default button nect to it.
background: darken($link-color, 15%);
border: 1.5px solid darken($link-color, 15%);
}
}

Expand All @@ -78,22 +97,44 @@
&:hover,
&:active,
&:focus {
background-color: inherit;
background: inherit;
}
}

@mixin button-pro {
background-image: linear-gradient(-180deg, #4C858D 0%, #3E6D75 100%);
background: linear-gradient(-180deg, #4C858D 0%, #3E6D75 100%);
border: 1.5px solid #3E6D75;
box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.22);
&:hover,
&:active,
&:focus,
&:visited:hover,
&:visited:active,
&:visited:focus {
&:visited:active {
box-shadow: 0 1px 0 0 rgba(0,0,0,0.22);
color: #3E6D75;
background: linear-gradient(-180deg, #d8edf0 0%, #bfe0e6 100%);
}

&:disabled {
@include button-disabled;
}
}

@mixin button-pro-tertiary {
background: $color-white;
color: #3E6D75;
border: 1.5px solid #3E6D75;
box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.22);
&:hover,
&:active,
&:visited:hover,
&:visited:active {
background: linear-gradient(-180deg, #1a4146 0%, #153a40 100%);
color: $color-white;
box-shadow: 0 1px 0 0 rgba(0,0,0,0.22);
}

@include focus-state;

&:disabled {
@include button-disabled;
}
Expand All @@ -106,22 +147,22 @@
@include ie8 {
color: $main_menu-link_text;
}
transition: background-color 0.5s ease-out;
transition: background 0.5s ease-out;
&:hover,
&:active,
&:focus {
background-color: darken($main_menu-bg, 10%);
background: darken($main_menu-bg, 10%);
color: transparentize($main_menu-link_text, 0);
}
}

@mixin selected-menu-item {
font-weight: 600;
color: $main_menu-active_link_text;
background-color: $main_menu-active_link_bg;
background: $main_menu-active_link_bg;
&:hover,
&:active,
&:focus {
background-color: $main_menu-active_link_bg;
background: $main_menu-active_link_bg;
}
}
19 changes: 14 additions & 5 deletions app/assets/stylesheets/responsive/_mysoc_footer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,11 @@ $high-dpi-screen: '-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi

a {
color: $mysoc-footer-link-text-color;
// Included in the link so it also affects a.mysoc-footer__donate__button
-webkit-transition: background 300ms ease-out, color 300ms ease-out;
-moz-transition: background 300ms ease-out, color 300ms ease-out;
-o-transition: background 300ms ease-out, color 300ms ease-out;
transition: background 300ms ease-out, color 300ms ease-out;

&:hover,
&:focus {
Expand Down Expand Up @@ -126,21 +131,25 @@ $high-dpi-screen: '-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi
}
}

.mysoc-footer__donate__button {
a.mysoc-footer__donate__button {
display: inline-block;
background-color: $mysoc-footer-donate-button-background-color;
color: $mysoc-footer-donate-button-text-color !important;
color: $mysoc-footer-donate-button-text-color;
padding: 0.5em 1em;
border-radius: 0.3em;
font-weight: bold;
text-decoration: none;

&:hover,
&:focus {
&:active,
&:visited:hover,
&:visited:active {
text-decoration: none;
background-color: $mysoc-footer-donate-button-hover-background-color;
color: $mysoc-footer-donate-button-hover-text-color !important;
background:$mysoc-footer-donate-button-hover-background-color;
color: $mysoc-footer-donate-button-hover-text-color;
}

@include focus-state;
}

.mysoc-footer__orgs {
Expand Down
16 changes: 10 additions & 6 deletions app/assets/stylesheets/responsive/custom.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -204,6 +204,9 @@ a.button-secondary,

.button-tertiary {
@include button-tertiary;
.alaveteli-pro & {
@include button-pro-tertiary;
}
}

.button-disabled {
Expand Down Expand Up @@ -792,11 +795,13 @@ $mysoc-footer-background-color: $color_black;
$mysoc-footer-text-color: lighten($color_mid_grey, 4%); // tweak color to pass WCAG AA contrast check
$mysoc-footer-site-name-text-color: #fff;
$mysoc-footer-link-text-color: $color_white;
$mysoc-footer-link-hover-text-color: $button-bg;
$mysoc-footer-link-hover-text-color: lighten($button-bg, 20%); // tweak color to pass WCAG AA contrast check
$mysoc-footer-divider-color: #4C4C4C;
$mysoc-footer-donate-background-color: #434343;
$mysoc-footer-donate-text-color: #fff;
$mysoc-footer-donate-button-hover-text-color: $button-bg;
$mysoc-footer-donate-button-background-color: $button-bg;
$mysoc-footer-donate-button-hover-background-color: lighten($mysoc-footer-donate-button-background-color, 50%);
$mysoc-footer-legal-text-color: $mysoc-footer-text-color;
$mysoc-footer-image-path: '/assets/mysoc-footer/';
$mysoc-footer-breakpoint-sm: 42em;
Expand Down Expand Up @@ -1330,17 +1335,16 @@ p.locale-list-trigger {
}

a.button {
background-color: $color_yellow;
background: $color_yellow;
border-color: darken($color_yellow, 15%);
color: $color_black;
transition: color 300ms ease-out;
&:hover,
&:active,
&:focus {
&:visited:hover,
&:visited:active {
color: $color_white;
background-color: $color_blue;
background: $color_blue;
border-color: darken($color_blue, 15%);
transition: color 300ms ease-out;
}
}
}
Expand Down

0 comments on commit e13affd

Please sign in to comment.