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

ActionList item outlines for high contrast theme #1856

Merged
merged 15 commits into from
Jan 14, 2022
Merged

ActionList item outlines for high contrast theme #1856

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
045f6a7
fresh branch
langermank Dec 22, 2021
4fd2555
Stylelint auto-fixes
actions-user Dec 22, 2021
69e0153
Create few-mice-scream.md
langermank Dec 22, 2021
60cee7c
Update src/actionlist/action-list-item.scss
langermank Dec 22, 2021
792e3d9
change to box-shadow
langermank Dec 22, 2021
1ddc38e
lint
langermank Dec 22, 2021
b192b13
compromise
langermank Dec 23, 2021
33b6d9a
add reference
langermank Dec 23, 2021
487baa4
lint
langermank Dec 23, 2021
f43ff15
Merge branch 'main' of https://github.com/primer/css into actionlist-…
langermank Jan 13, 2022
832ccf0
fix merge, lint
langermank Jan 13, 2022
cc02948
adjust active state
langermank Jan 13, 2022
08115f1
lint
langermank Jan 13, 2022
ba5ee9e
Stylelint auto-fixes
actions-user Jan 13, 2022
a02806b
Update few-mice-scream.md
langermank Jan 13, 2022
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
5 changes: 5 additions & 0 deletions .changeset/few-mice-scream.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/css": patch
---

ActionList item outlines for high contrast theme
33 changes: 18 additions & 15 deletions src/actionlist/action-list-item.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,28 +34,42 @@
}

// only hover li without list as children
&:not(.ActionList-item--hasSubItem) {
&:not(.ActionList-item--hasSubItem),
// target contents of first child li if sub-item (li wraps item label + nested ul)
&.ActionList-item--hasSubItem > .ActionList-content {
&:hover {
cursor: pointer;
background-color: var(--color-action-list-item-default-hover-bg);

// stylelint-disable-next-line selector-max-specificity
&:not(.ActionList-item--navActive) {
outline: $border-style $border-width var(--color-action-list-item-default-hover-border);
outline-offset: -$border-width;
}
}

&:active {
background: var(--color-action-list-item-default-active-bg);

// stylelint-disable-next-line selector-max-specificity
&:not(.ActionList-item--navActive) {
outline: $border-style $border-width var(--color-action-list-item-default-active-border);
langermank marked this conversation as resolved.
Show resolved Hide resolved
outline-offset: -$border-width;
}

@media screen and (prefers-reduced-motion: no-preference) {
animation: ActionList-item-active-bg 4s forwards cubic-bezier(0.33, 1, 0.68, 1);
}

// stylelint-disable primer/box-shadow
@keyframes ActionList-item-active-bg {
// stylelint-disable-next-line max-nesting-depth
// stylelint-disable-next-line max-nesting-depth, selector-max-specificity
50% {
box-shadow: inset 0 0 0 rgba(#000, 0.04);
transform: scale(1);
}

// stylelint-disable-next-line max-nesting-depth
// stylelint-disable-next-line max-nesting-depth, selector-max-specificity
100% {
box-shadow: inset 0 3px 9px rgba(#000, 0.04);
transform: scale(0.97);
Expand All @@ -67,25 +81,14 @@
&:hover,
&:active {
// hide dividers
// stylelint-disable-next-line selector-max-specificity
// stylelint-disable-next-line selector-max-specificity, selector-max-compound-selectors
.ActionList-item-label::before,
+ .ActionList-item .ActionList-item-label::before {
visibility: hidden;
}
}
}

// target contents of li if sub-item (li wraps item label + nested ul)
// collapse styles here
&.ActionList-item--hasSubItem {
// first child
> .ActionList-content {
&:hover {
background-color: var(--color-action-list-item-default-hover-bg);
}
}
}

// active state [aria-current]

&.ActionList-item--navActive {
Expand Down