NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2025-01-02 19:34:46 +03:00
Code Issues Packages Projects Releases Wiki Activity

Basic basic fading

Browse Source
This commit is contained in:
Tessa Kelly 2019-04-11 13:39:28 -07:00
parent da3261898a
commit d4078999ec
1 changed files with 22 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/Nri/Ui/SlideModal/V2.elm
View File

@ -17,7 +17,9 @@ import Accessibility.Styled.Aria exposing (labelledBy)
import Accessibility.Styled.Role as Role
import Accessibility.Styled.Style
import Accessibility.Styled.Widget as Widget
import Color
import Css
import Css.Animations
import Css.Global
import Html.Styled
import Html.Styled.Attributes exposing (css)
@ -351,7 +353,7 @@ type Dot msg
dot : Dot msg -> Html.Html msg
dot type_ =
let
styles backgroundColor cursor =
styles ( startColor, endColor ) cursor =
css
[ Css.height (Css.px 10)
, Css.width (Css.px 10)
@ -360,24 +362,39 @@ dot type_ =
, Css.display Css.inlineBlock
, Css.verticalAlign Css.middle
, Css.cursor cursor
, Css.backgroundColor backgroundColor
-- Color
, Css.animationDuration (Css.ms 600)
, Css.property "animation-timing-function" "linear"
, Css.animationName
(Css.Animations.keyframes
[ ( 0, [ animateBackgroundColor startColor ] )
, ( 100, [ animateBackgroundColor endColor ] )
]
)
, Css.backgroundColor endColor
-- resets
, Css.borderWidth Css.zero
, Css.padding Css.zero
, Css.hover [ Css.outline Css.none ]
]
animateBackgroundColor color =
Nri.Ui.Colors.Extra.toCoreColor color
|> Color.toCssString
|> Css.Animations.property "background-color"
in
case type_ of
Active ->
Html.div
[ styles Colors.azure Css.auto
[ styles ( Colors.gray75, Colors.azure ) Css.auto
]
[]
Inactive goTo title ->
Html.button
[ styles Colors.gray75 Css.pointer
[ styles ( Colors.gray75, Colors.gray75 ) Css.pointer
, onClick goTo
]
[ span Accessibility.Styled.Style.invisible
@ -386,7 +403,7 @@ dot type_ =
InactiveDisabled goTo title ->
Html.button
[ styles Colors.gray75 Css.auto
[ styles ( Colors.gray75, Colors.gray75 ) Css.auto
, Html.Styled.Attributes.disabled True
]
[ span Accessibility.Styled.Style.invisible