primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-11-29 14:14:26 +03:00
Code Issues Projects Releases Wiki Activity

ActionList item outlines for high contrast theme (#1856)

Browse Source 
* fresh branch

* Stylelint auto-fixes

* Create few-mice-scream.md

* Update src/actionlist/action-list-item.scss

Co-authored-by: Vinicius Depizzol <vdepizzol@github.com>

* change to box-shadow

* lint

* compromise

* add reference

* lint

* fix merge, lint

* adjust active state

* lint

* Stylelint auto-fixes

* Update few-mice-scream.md

Co-authored-by: Actions Auto Build <actions@github.com>
Co-authored-by: Vinicius Depizzol <vdepizzol@github.com>
This commit is contained in:
Katie Langerman 2022-01-13 16:30:26 -08:00 committed by GitHub
parent 815daff9f0
commit cbe3fb56e4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/few-mice-scream.md Normal file
View File

@ -0,0 +1,5 @@
---
"@primer/css": patch
---
ActionList item outlines for high contrast theme

31
src/actionlist/action-list-item.scss
View File

@ -1,4 +1,4 @@
// stylelint-disable max-nesting-depth, selector-max-specificity
// stylelint-disable max-nesting-depth, selector-max-specificity, selector-max-compound-selectors
@mixin focusOutline {
position: relative;
@ -38,34 +38,50 @@
}
// 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 {
@media (hover: hover) {
&:hover {
cursor: pointer;
background-color: var(--color-action-list-item-default-hover-bg);
&:not(.ActionList-item--navActive) {
// Support for "Windows high contrast mode"
outline: $border-style $border-width transparent;
outline-offset: -$border-width;
// stylelint-disable-next-line primer/box-shadow
box-shadow: inset 0 0 0 2px var(--color-action-list-item-default-active-border);
}
}
}
&:active {
background: var(--color-action-list-item-default-active-bg);
&:not(.ActionList-item--navActive) {
// Support for "Windows high contrast mode" https://sarahmhigley.com/writing/whcm-quick-tips/
outline: $border-style $border-width transparent;
outline-offset: -$border-width;
// stylelint-disable-next-line primer/box-shadow
box-shadow: inset 0 0 0 2px var(--color-action-list-item-default-active-border);
}
@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 {
50% {
box-shadow: inset 0 0 0 rgba(#000, 0.04);
// stylelint-disable-next-line primer/box-shadow
box-shadow: inset 0 2px 12px 6px rgba(var(--color-canvas-default), 0.4);
transform: scale(1);
}
100% {
box-shadow: inset 0 3px 9px rgba(#000, 0.04);
transform: scale(0.97);
}
}
// stylelint-enable primer/box-shadow
}
// hide dividers
@ -153,7 +169,6 @@
// has 16px leading visual
.ActionList-content--visual16 + .ActionList--subGroup {
// stylelint-disable-next-line selector-max-compound-selectors
.ActionList-content {
padding-left: $spacer-5;
}
@ -161,7 +176,6 @@
// has 20px leading visual
.ActionList-content--visual20 + .ActionList--subGroup {
// stylelint-disable-next-line selector-max-compound-selectors
.ActionList-content {
padding-left: $spacer-2 * 4.5; // 36px
}
@ -169,7 +183,6 @@
// has 24px leading visual
.ActionList-content--visual24 + .ActionList--subGroup {
// stylelint-disable-next-line selector-max-compound-selectors
.ActionList-content {
padding-left: $spacer-6;
}