NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2025-01-07 23:18:53 +03:00
Code Issues Packages Projects Releases Wiki Activity

convert styles to elm css

Browse Source
This commit is contained in:
brookeangel 2019-12-02 14:53:49 -08:00
parent 830b7c07ee
commit 490395d4a7
1 changed files with 23 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/Nri/Ui/Tooltip/V1.elm
View File

@ -352,6 +352,7 @@ viewIf viewFn condition =
viewTooltip : Maybe String -> Tooltip msg -> Html msg viewTooltip : Maybe String -> Tooltip msg -> Html msg
viewTooltip maybeTooltipId (Tooltip config) = viewTooltip maybeTooltipId (Tooltip config) =
Html.div (containerPositioningForArrowPosition config.position) Html.div (containerPositioningForArrowPosition config.position)
Html.div [ css <| containerPositioningForArrowPosition config.position ]
[ Html.div [ Html.div
([ css ([ css
([ Css.borderRadius (Css.px 8) ([ Css.borderRadius (Css.px 8)
@ -426,32 +427,31 @@ tooltipColor =
{-| This returns an absolute positioning style attribute for the popout container for a given arrow position. {-| This returns an absolute positioning style attribute for the popout container for a given arrow position.
-} -}
containerPositioningForArrowPosition : Position -> List (Attribute msg) containerPositioningForArrowPosition : Position -> List Style
containerPositioningForArrowPosition arrowPosition = containerPositioningForArrowPosition arrowPosition =
List.map (\( k, v ) -> Attributes.style k v) <|
case arrowPosition of case arrowPosition of
OnTop -> OnTop ->
[ ( "left", "50%" ) [ Css.left (Css.pct 50)
, ( "top", "calc(-" ++ String.fromFloat arrowSize ++ "px - 2px)" ) , Css.top (Css.calc (Css.px (negate arrowSize)) Css.minus (Css.px 2))
, ( "position", "absolute" ) , Css.position Css.absolute
] ]
OnBottom -> OnBottom ->
[ ( "left", "50%" ) [ Css.left (Css.pct 50)
, ( "bottom", "calc(-" ++ String.fromFloat arrowSize ++ "px - 2px)" ) , Css.bottom (Css.calc (Css.px (negate arrowSize)) Css.minus (Css.px 2))
, ( "position", "absolute" ) , Css.position Css.absolute
] ]
OnLeft -> OnLeft ->
[ ( "top", "50%" ) [ Css.top (Css.pct 50)
, ( "left", "calc(-" ++ String.fromFloat arrowSize ++ "px - 2px)" ) , Css.left (Css.calc (Css.px (negate arrowSize)) Css.minus (Css.px 2))
, ( "position", "absolute" ) , Css.position Css.absolute
] ]
OnRight -> OnRight ->
[ ( "top", "50%" ) [ Css.top (Css.pct 50)
, ( "right", "calc(-" ++ String.fromFloat arrowSize ++ "px - 2px)" ) , Css.right (Css.calc (Css.px (negate arrowSize)) Css.minus (Css.px 2))
, ( "position", "absolute" ) , Css.position Css.absolute
] ]