Skip to content

Commit e13affd

Browse files
gbpgbp
authored
Merge pull request #1917 from mysociety/button-focus-state
[WDTK] Improved focus state for buttons
2 parents 026fcde + 2061159 commit e13affd

File tree

3 files changed

+95
-41
lines changed

3 files changed

+95
-41
lines changed

‎app/assets/stylesheets/responsive/_mixins.scss

+71-30
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,40 @@
77

88

99
/* Buttons */
10+
@mixin focus-state {
11+
&:focus,
12+
&:visited:focus {
13+
// It overrides any specificity like the Pro buttons
14+
background: $color_yellow !important;
15+
color: $color_black !important;
16+
17+
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.
18+
outline-offset: 0;
19+
box-shadow: inset 0px 0px 0px 2px $color_black !important; // It overrides any specificity like the Pro buttons
20+
}
21+
}
22+
1023
@mixin button-base {
1124
padding: 0.5em 1.25em;
1225
border-radius: 3px;
1326
display: inline-block;
1427
font-weight: 600;
1528
text-decoration: none;
16-
transition: background-color 300ms ease-out;
29+
-webkit-transition: background 300ms ease-out, color 300ms ease-out, border 300ms ease-out;
30+
-moz-transition: background 300ms ease-out, color 300ms ease-out, border 300ms ease-out;
31+
-o-transition: background 300ms ease-out, color 300ms ease-out, border 300ms ease-out;
32+
transition: background 300ms ease-out, color 300ms ease-out, border 300ms ease-out;
1733
line-height: normal;
1834
margin-bottom: 0;
1935
font-family: $font-family;
2036
&:hover,
2137
&:active,
2238
&:focus {
2339
text-decoration: none;
24-
transition: background-color 300ms ease-out;
2540
}
2641

42+
@include focus-state;
43+
2744
&:disabled {
2845
@include button-disabled;
2946
}
@@ -32,44 +49,46 @@
3249
@mixin button {
3350
@include button-base;
3451
color: $color_white;
35-
background-color: $button-bg;
36-
border: none;
52+
background: $button-bg;
53+
border: 1.5px solid $button-bg;
3754
&:hover,
3855
&:active,
39-
&:focus,
4056
&:visited:hover,
41-
&:visited:active,
42-
&:visited:focus {
43-
background-color: darken($button-bg, 10%);
44-
color: $color_white;
57+
&:visited:active {
58+
background:lighten($button-bg, 50%);
59+
color: $button-bg;
4560
}
4661
}
4762

63+
4864
@mixin button-secondary {
4965
@include button-base;
50-
background-color: mix($color_light_grey, $color_yellow, 95%);
66+
background: mix($color_light_grey, $color_yellow, 95%);
5167
color: $color_black;
5268
font-weight: normal;
69+
border: 1.5px solid lighten($color_black, 10%);
5370
&:hover,
54-
&:active,
55-
&:focus {
56-
color: $color_black;
57-
background-color: darken($color_light_grey, 7.5%);
58-
color: $color_black;
71+
&:active {
72+
background: $color_black;
73+
color: $color_white;
74+
border: 1.5px solid $color_white;
5975
}
6076
}
6177

6278
@mixin button-tertiary {
6379
@include button-base;
64-
background-color: transparent;
65-
color: $color_black;
80+
background: $color_off_white; // Adding a colour instead of transparent, that way we can use this button even in dark backgrounds
81+
color: $link-color;
6682
font-weight: normal;
67-
border: 1px solid $color_light_grey;
83+
border: 1.5px solid $link-color;
6884
&:hover,
6985
&:active,
70-
&:focus {
71-
background-color: darken($color_light_grey, 7.5%);
72-
border: 1px solid darken($color_light_grey, 12.5%);
86+
&:visited:hover,
87+
&:visited:active {
88+
color: $color_white;
89+
// 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.
90+
background: darken($link-color, 15%);
91+
border: 1.5px solid darken($link-color, 15%);
7392
}
7493
}
7594

@@ -78,22 +97,44 @@
7897
&:hover,
7998
&:active,
8099
&:focus {
81-
background-color: inherit;
100+
background: inherit;
82101
}
83102
}
84103

85104
@mixin button-pro {
86-
background-image: linear-gradient(-180deg, #4C858D 0%, #3E6D75 100%);
105+
background: linear-gradient(-180deg, #4C858D 0%, #3E6D75 100%);
106+
border: 1.5px solid #3E6D75;
87107
box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.22);
88108
&:hover,
89109
&:active,
90-
&:focus,
91110
&:visited:hover,
92-
&:visited:active,
93-
&:visited:focus {
111+
&:visited:active {
112+
box-shadow: 0 1px 0 0 rgba(0,0,0,0.22);
113+
color: #3E6D75;
114+
background: linear-gradient(-180deg, #d8edf0 0%, #bfe0e6 100%);
115+
}
116+
117+
&:disabled {
118+
@include button-disabled;
119+
}
120+
}
121+
122+
@mixin button-pro-tertiary {
123+
background: $color-white;
124+
color: #3E6D75;
125+
border: 1.5px solid #3E6D75;
126+
box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.22);
127+
&:hover,
128+
&:active,
129+
&:visited:hover,
130+
&:visited:active {
131+
background: linear-gradient(-180deg, #1a4146 0%, #153a40 100%);
132+
color: $color-white;
94133
box-shadow: 0 1px 0 0 rgba(0,0,0,0.22);
95134
}
96135

136+
@include focus-state;
137+
97138
&:disabled {
98139
@include button-disabled;
99140
}
@@ -106,22 +147,22 @@
106147
@include ie8 {
107148
color: $main_menu-link_text;
108149
}
109-
transition: background-color 0.5s ease-out;
150+
transition: background 0.5s ease-out;
110151
&:hover,
111152
&:active,
112153
&:focus {
113-
background-color: darken($main_menu-bg, 10%);
154+
background: darken($main_menu-bg, 10%);
114155
color: transparentize($main_menu-link_text, 0);
115156
}
116157
}
117158

118159
@mixin selected-menu-item {
119160
font-weight: 600;
120161
color: $main_menu-active_link_text;
121-
background-color: $main_menu-active_link_bg;
162+
background: $main_menu-active_link_bg;
122163
&:hover,
123164
&:active,
124165
&:focus {
125-
background-color: $main_menu-active_link_bg;
166+
background: $main_menu-active_link_bg;
126167
}
127168
}

‎app/assets/stylesheets/responsive/_mysoc_footer.scss

+14-5
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,11 @@ $high-dpi-screen: '-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi
5555

5656
a {
5757
color: $mysoc-footer-link-text-color;
58+
// Included in the link so it also affects a.mysoc-footer__donate__button
59+
-webkit-transition: background 300ms ease-out, color 300ms ease-out;
60+
-moz-transition: background 300ms ease-out, color 300ms ease-out;
61+
-o-transition: background 300ms ease-out, color 300ms ease-out;
62+
transition: background 300ms ease-out, color 300ms ease-out;
5863

5964
&:hover,
6065
&:focus {
@@ -126,21 +131,25 @@ $high-dpi-screen: '-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi
126131
}
127132
}
128133

129-
.mysoc-footer__donate__button {
134+
a.mysoc-footer__donate__button {
130135
display: inline-block;
131136
background-color: $mysoc-footer-donate-button-background-color;
132-
color: $mysoc-footer-donate-button-text-color !important;
137+
color: $mysoc-footer-donate-button-text-color;
133138
padding: 0.5em 1em;
134139
border-radius: 0.3em;
135140
font-weight: bold;
136141
text-decoration: none;
137142

138143
&:hover,
139-
&:focus {
144+
&:active,
145+
&:visited:hover,
146+
&:visited:active {
140147
text-decoration: none;
141-
background-color: $mysoc-footer-donate-button-hover-background-color;
142-
color: $mysoc-footer-donate-button-hover-text-color !important;
148+
background:$mysoc-footer-donate-button-hover-background-color;
149+
color: $mysoc-footer-donate-button-hover-text-color;
143150
}
151+
152+
@include focus-state;
144153
}
145154

146155
.mysoc-footer__orgs {

‎app/assets/stylesheets/responsive/custom.scss

+10-6
Original file line numberDiff line numberDiff line change
@@ -204,6 +204,9 @@ a.button-secondary,
204204

205205
.button-tertiary {
206206
@include button-tertiary;
207+
.alaveteli-pro & {
208+
@include button-pro-tertiary;
209+
}
207210
}
208211

209212
.button-disabled {
@@ -792,11 +795,13 @@ $mysoc-footer-background-color: $color_black;
792795
$mysoc-footer-text-color: lighten($color_mid_grey, 4%); // tweak color to pass WCAG AA contrast check
793796
$mysoc-footer-site-name-text-color: #fff;
794797
$mysoc-footer-link-text-color: $color_white;
795-
$mysoc-footer-link-hover-text-color: $button-bg;
798+
$mysoc-footer-link-hover-text-color: lighten($button-bg, 20%); // tweak color to pass WCAG AA contrast check
796799
$mysoc-footer-divider-color: #4C4C4C;
797800
$mysoc-footer-donate-background-color: #434343;
798801
$mysoc-footer-donate-text-color: #fff;
802+
$mysoc-footer-donate-button-hover-text-color: $button-bg;
799803
$mysoc-footer-donate-button-background-color: $button-bg;
804+
$mysoc-footer-donate-button-hover-background-color: lighten($mysoc-footer-donate-button-background-color, 50%);
800805
$mysoc-footer-legal-text-color: $mysoc-footer-text-color;
801806
$mysoc-footer-image-path: '/assets/mysoc-footer/';
802807
$mysoc-footer-breakpoint-sm: 42em;
@@ -1330,17 +1335,16 @@ p.locale-list-trigger {
13301335
}
13311336

13321337
a.button {
1333-
background-color: $color_yellow;
1338+
background: $color_yellow;
13341339
border-color: darken($color_yellow, 15%);
13351340
color: $color_black;
1336-
transition: color 300ms ease-out;
13371341
&:hover,
13381342
&:active,
1339-
&:focus {
1343+
&:visited:hover,
1344+
&:visited:active {
13401345
color: $color_white;
1341-
background-color: $color_blue;
1346+
background: $color_blue;
13421347
border-color: darken($color_blue, 15%);
1343-
transition: color 300ms ease-out;
13441348
}
13451349
}
13461350
}

0 commit comments

Comments
 (0)