NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2025-01-06 05:39:12 +03:00
Code Issues Packages Projects Releases Wiki Activity

make a fake focus ring when the checkbox is focused

Browse Source
This commit is contained in:
Brian Hicks 2020-12-10 14:27:48 -06:00
parent 41dba759c0
commit d2651a2e87
1 changed files with 8 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/Nri/Ui/Switch/V1.elm
View File

@ -10,6 +10,7 @@ import Accessibility.Styled as Html exposing (Html)
import Accessibility.Styled.Aria as Aria
import Accessibility.Styled.Widget as Widget
import Css
import Css.Global as Global
import Html.Styled as WildWildHtml
import Html.Styled.Attributes as Attributes
import Html.Styled.Events as Events
@ -95,6 +96,10 @@ view attrs isOn =
[ Css.displayFlex
, Css.alignItems Css.center
, Css.position Css.relative
, Css.pseudoClass "focus-within"
[ Global.descendants
[ Global.svg [ Css.borderColor Colors.azure ] ]
]
]
, Aria.controls config.id
, Widget.checked (Just isOn)
@ -177,6 +182,9 @@ viewSwitch config =
else
Css.batch []
, Css.zIndex (Css.int 1)
, Css.border3 (Css.px 2) Css.solid Css.transparent
, Css.padding (Css.px 3)
, Css.borderRadius (Css.px 21)
]
]
[ Svg.defs []