Skip to content

Commit 403ef80

Browse files
eebbieebbi
committed
TMS-1164: Remove color changing for button hover-styles
1 parent af6098e commit 403ef80

File tree

12 files changed

+43
-115
lines changed

12 files changed

+43
-115
lines changed

‎CHANGELOG.MD‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
77

88
## [Unreleased]
99

10+
- TMS-1164: Remove color changing for button hover-styles
11+
1012
## [1.5.0] - 2025-10-01
1113

1214
- TMS-1201: Add iframe-field for video fields

‎assets/styles/layouts/_subpages.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,5 +30,13 @@
3030
&.has-background-image {
3131
color: $primary !important;
3232
}
33+
34+
&.has-background-primary {
35+
&:hover,
36+
&:focus {
37+
color: $primary !important;
38+
background-color: $primary-invert !important;
39+
}
40+
}
3341
}
3442
}

‎assets/styles/theme-milavida.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -74,8 +74,8 @@ $pill-outlined-color: $black;
7474
$pagination-item-color: $color-milavida-black;
7575
$pagination-item-color-current: $color-milavida-black;
7676
$pagination-item-background-color-current: $color-milavida-grey;
77-
$pagination-item-background-color-current-hover: $color-white;
78-
$pagination-item-background-color-current-focus: $color-white;
77+
$pagination-item-background-color-current-hover: $pagination-item-background-color-current;
78+
$pagination-item-background-color-current-focus: $pagination-item-background-color-current;
7979
$pagination-item-background-color: $color-white;
8080
$pagination-item-background-color-hover: $pagination-item-background-color;
8181
$pagination-item-background-color-focus: $pagination-item-background-color;
@@ -95,7 +95,7 @@ $navbar-item-grid-item-border-color: $color-ui-border;
9595
$navbar-item-navbar-active-bg-color: $black;
9696

9797
$fly-out-nav-trigger-icon: $color-milavida-grey-dark;
98-
$fly-out-nav-trigger-icon-hover: $color-milavida-grey;
98+
$fly-out-nav-trigger-icon-hover: $color-milavida-grey-dark;
9999
$fly-out-nav-primary-link: $color-milavida-black;
100100
$fly-out-nav-primary-link-hover: $color-milavida-black;
101101
$fly-out-nav-primary-dropdown-active-background: $color-milavida-black;

‎assets/styles/ui-components/_button.scss‎

Lines changed: 8 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -12,29 +12,16 @@ $button-secondary-border-color: $button-primary-border-color;
1212
padding: .5rem 1.5rem;
1313
border-color: transparent !important;
1414
// box-shadow: 1px 1px 8px 0 bulmaLighten($primary-invert, 50);
15-
color: $primary;
16-
background-color: $primary-invert;
1715
font-family: $family-primary;
1816

17+
&,
1918
&:hover,
2019
&.is-hovered,
2120
&:focus,
22-
&.is-focused {
23-
box-shadow: 0 .125rem .375rem rgba(0, 0, 0, .15);
24-
background-color: $primary !important;
25-
color: $primary-invert !important;
26-
border-color: $primary-invert !important;
27-
28-
&:active {
29-
background-color: $primary-invert !important;
30-
color: $primary !important;
31-
text-decoration: underline !important;
32-
outline: none !important;
33-
34-
.icon {
35-
fill: currentColor !important;
36-
}
37-
}
21+
&.is-focused,
22+
&:active {
23+
color: $primary;
24+
background-color: $primary-invert;
3825
}
3926

4027
.icon {
@@ -56,19 +43,12 @@ $button-secondary-border-color: $button-primary-border-color;
5643

5744
&:hover,
5845
&:focus {
59-
color: $primary !important;
60-
background-color: $primary-invert !important;
46+
color: $primary-invert !important;
47+
background-color: $primary !important;
6148
border-color: $primary-invert !important;
6249

6350
.icon {
64-
fill: $primary !important;
65-
}
66-
}
67-
68-
&.is-outlined {
69-
&:hover,
70-
&:focus {
71-
border-color: $primary-invert !important;
51+
fill: $primary-invert !important;
7252
}
7353
}
7454

@@ -87,23 +67,6 @@ $button-secondary-border-color: $button-primary-border-color;
8767
fill: currentColor !important;
8868
color: inherit;
8969
}
90-
91-
&:hover,
92-
&:focus {
93-
background-color: $link-hover !important;
94-
95-
.icon {
96-
fill: currentColor !important;
97-
color: inherit;
98-
}
99-
}
100-
101-
&:active,
102-
&.is-active {
103-
background-color: $primary !important;
104-
color: $primary-invert !important;
105-
border-color: $primary-invert !important;
106-
}
10770
}
10871

10972
&.is-secondary {
@@ -113,30 +76,11 @@ $button-secondary-border-color: $button-primary-border-color;
11376
.icon {
11477
fill: currentColor !important;
11578
}
116-
117-
&:hover,
118-
&.is-hovered,
119-
&:focus,
120-
&.is-focused {
121-
border-color: $primary-invert !important;
122-
background-color: $primary !important;
123-
color: $primary-invert !important;
124-
125-
.icon {
126-
fill: currentColor !important;
127-
}
128-
}
12979
}
13080

13181
&.is-outlined {
13282
border-color: $primary-invert !important;
13383
background-color: transparent !important;
13484
color: $primary-invert !important;
135-
136-
&:hover,
137-
&:focus {
138-
background-color: $primary-invert !important;
139-
color: $primary !important;
140-
}
14185
}
14286
}

‎assets/styles/ui-components/_footer.scss‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -50,13 +50,6 @@ $footer-copy-link-border-color: $white;
5050
}
5151
}
5252

53-
img,
54-
.button {
55-
&:focus {
56-
outline-color: $white !important;
57-
}
58-
}
59-
6053
h2 {
6154
color: $primary-invert !important;
6255
}

‎assets/styles/ui-components/_forms.scss‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,8 @@ select {
3333

3434
&:hover,
3535
&:focus {
36-
color: $primary !important;
37-
background-color: $primary-invert !important;
36+
color: $primary-invert !important;
37+
background-color: $primary !important;
3838
}
3939
}
4040

@@ -55,20 +55,20 @@ select {
5555
&:hover,
5656
&:focus {
5757
&:after {
58-
background-color: $primary;
58+
background-color: $primary-invert;
5959
}
6060
}
6161

6262
&:active {
6363
&:after {
64-
background-color: $primary;
64+
background-color: $primary-invert;
6565
}
6666
}
6767
}
6868

6969
button[type="submit"] {
7070

71-
&:after {
71+
&:after {
7272
mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><path d="M2.13436 0L0.365646 1.76877L6.09688 7.5L0.365646 13.2312L2.13436 15L9.63436 7.5L2.13436 0Z"/></svg>');
7373
mask-size: cover;
7474
mask-repeat: no-repeat;
@@ -93,7 +93,7 @@ select {
9393

9494
.gfield_checkbox {
9595

96-
label {
96+
label {
9797
&::before {
9898
margin-top: 0.25rem;
9999
}
@@ -119,9 +119,6 @@ select {
119119

120120
&:hover,
121121
&:focus {
122-
border-color: $primary-invert !important;
123-
background-color: $primary !important;
124-
color: $primary-invert !important;
125122
outline: 0.15rem dotted $black !important;
126123
outline-offset: 0.25rem !important;
127124
}

‎assets/styles/ui-components/_image-gallery.scss‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -63,13 +63,6 @@
6363
outline: none !important;
6464
}
6565

66-
&:hover,
67-
&:focus {
68-
.icon {
69-
fill: $black !important;
70-
}
71-
}
72-
7366
&:focus {
7467
outline: .15rem dotted $white !important;
7568
}

‎assets/styles/ui-components/_modal.scss‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,17 @@
88
&:focus {
99
outline: 0.15rem dotted $white !important;
1010
outline-offset: 0.25rem !important;
11-
color: $primary !important; // sass-lint:disable-line no-important
11+
color: $black !important; // sass-lint:disable-line no-important
1212
.icon {
13-
fill: $primary !important; // sass-lint:disable-line no-important
13+
fill: $black !important; // sass-lint:disable-line no-important
1414
}
1515
}
1616
&:hover{
17-
background-color: $black !important;
18-
color: $white !important;
17+
background-color: $white !important;
18+
color: $black !important;
1919
outline: 0;
2020
.icon {
21-
fill: $white !important;
21+
fill: $black !important;
2222
}
2323
}
2424
}
@@ -37,9 +37,9 @@
3737
}
3838
&:hover,
3939
&:focus {
40-
background-color: $white;
40+
background-color: $black;
4141
.icon {
42-
fill: $black !important; // sass-lint:disable-line no-important
42+
fill: $white !important; // sass-lint:disable-line no-important
4343
}
4444
}
4545
&:focus {
@@ -94,7 +94,7 @@
9494
.slick-current {
9595
&:focus {
9696
.image-carousel__item {
97-
outline: 0.15rem dotted #fff;
97+
outline: 0.15rem dotted $white;
9898
outline-offset: 0.25rem;
9999
}
100100
}

‎assets/styles/ui-components/_pill.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
text-decoration: none !important;
99
font-weight: $weight-normal !important;
1010
border: 1px solid $primary-invert;
11+
outline-color: $primary-invert !important;
1112

1213
.icon {
1314
fill: currentColor !important;
@@ -17,13 +18,12 @@
1718
&:not(span) {
1819
&:hover,
1920
&:focus {
20-
color: $primary !important;
21-
background-color: $primary-invert !important;
22-
border-color: $primary !important;
21+
border-color: $primary-invert !important;
2322
}
2423
}
2524

26-
&.is-active {
25+
&.is-active,
26+
&.is-primary-invert {
2727
&:not(span) {
2828
&:hover,
2929
&:focus {

‎assets/styles/ui-components/_share-links.scss‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
font-weight: 400;
66
}
77

8-
a {
8+
a,
9+
a.has-background-accent {
910
background-color: $primary-invert;
1011
border: 1px solid $primary-invert;
1112

@@ -17,10 +18,10 @@
1718
&.is-hovered,
1819
&:focus,
1920
&.is-focused {
20-
background-color: $primary !important;
21+
background-color: $primary-invert !important;
2122

2223
.icon {
23-
fill: $primary-invert !important;
24+
fill: $primary !important;
2425
}
2526
}
2627
}

0 commit comments

Comments
 (0)