Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(notification): update focus styles for low contrast #5978

Merged
merged 9 commits into from
May 12, 2020
Merged

fix(notification): update focus styles for low contrast #5978

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
5193768
fix(notification): update focus styles for low contrast
joshblack Apr 29, 2020
df30cb6
Update _inline-notification.scss
joshblack Apr 29, 2020
41a5177
Merge branch 'master' into joshblack-patch-1
tw15egan Apr 29, 2020
dfc9cc6
Merge branch 'master' into joshblack-patch-1
joshblack Apr 30, 2020
8974e5c
Merge branch 'master' into joshblack-patch-1
tw15egan May 11, 2020
f831399
Merge branch 'master' into joshblack-patch-1
joshblack May 12, 2020
c9c6e41
fix(notification): update focus styles for action button
joshblack May 12, 2020
bfd9dd0
fix(notification): update hover and focus styles for action button
joshblack May 12, 2020
2e8a7d5
fix(notification): update colors according to new spec
joshblack May 12, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 30 additions & 17 deletions packages/components/src/components/notification/_inline-notification.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,30 +190,43 @@
}

.#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost {
color: $inverse-link;
height: rem(32px);
margin-bottom: $carbon--spacing-03;
margin-left: $carbon--spacing-08;

@include carbon--breakpoint(md) {
margin: $carbon--spacing-03 0;
}
}

&,
&:hover,
&:focus,
&:active {
color: $inverse-link;
}
.#{$prefix}--inline-notification--low-contrast
.#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost {
color: $link-01;
}

&:focus {
border-color: transparent;
outline: 2px solid $inverse-focus-ui;
outline-offset: -2px;
}
.#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:active,
.#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:hover {
background-color: $inverse-hover-ui;
}

&:hover {
background-color: $inverse-hover-ui;
}
.#{$prefix}--inline-notification--low-contrast
.#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:active,
.#{$prefix}--inline-notification--low-contrast
.#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:hover {
background-color: $carbon--white-0;
}

.#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:focus {
border-color: transparent;
box-shadow: none;
outline: 2px solid $inverse-focus-ui;
outline-offset: -2px;
}

.#{$prefix}--inline-notification--low-contrast
.#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:focus {
outline-color: $focus;
}

.#{$prefix}--inline-notification--hide-close-button
Expand Down Expand Up @@ -256,7 +269,7 @@
}

.#{$prefix}--inline-notification--low-contrast
.#{$prefix}--inline-notification__close-button {
.#{$prefix}--inline-notification__close-button:focus {
@include focus-outline('outline');
}

Expand All @@ -267,10 +280,10 @@
}

.#{$prefix}--inline-notification__action-button {
color: $carbon--blue-60;
color: $interactive-01;

&:active {
color: $carbon--blue-80;
color: $interactive-01;
}

&:active,
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/components/notification/_toast-notification.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@
}

.#{$prefix}--toast-notification--low-contrast
.#{$prefix}--toast-notification__close-button {
.#{$prefix}--toast-notification__close-button:focus {
@include focus-outline('outline');
}

Expand Down