forKeyboardUsers : List Css.Global.Snippet
When :focus-visible, add the two-tone focus ring.
Hides default focus ring from elements that are tagged as having a custom focus ring.
forMouseUsers : List Css.Global.Snippet
styles : List Css.Style
A two-tone focus ring that will be visually apparent for any background/element combination.
NOTE: use boxShadows
instead if your focusable element:
tightStyles : List Css.Style
Prefer styles
over tightStyles, except in cases where line spacing/font size will otherwise cause obscured content.
boxShadows : List String -> Css.Style
focus
[ FocusRing.boxShadows [ "inset 0 3px 0 0 " ++ ColorsExtra.toCssString glacier ]
, Css.outline3 (Css.px 2) Css.solid Css.transparent
]
insetBoxShadows : List String -> Css.Style
Please be sure that the padding on the element you add this style too is sufficient (at least 6px on all sides) that the inset box shadow won't cover any content.
focus
[ FocusRing.insetBoxShadows [ "inset 0 3px 0 0 " ++ ColorsExtra.toCssString glacier ]
, Css.outline3 (Css.px 2) Css.solid Css.transparent
]
outerBoxShadow : Css.Style
In special cases, we don't use a two-tone focus ring.
Be very sure this is what you need before using this!
insetBoxShadow : Css.Style
In special cases, we don't use a two-tone focus ring, and an outset focus ring would be obscured.
Be very sure this is what you need before using this!
customClass : String
Add this class to remove global focus styles. Only do this if you'll be adding the two-tone focus ring styles another way.
outerColor : Css.Color
innerColor : Css.Color