This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
README AccordionMenu

AccordionMenu.Style

Helper functions for styling menus.

All these helpers are intended to be piped onto AccordionMenu.Config instances.

Example usage with inline styles:

AccordionMenu.blankConfig UpdateMenu
    |> Style.resetListStyles
    |> Style.listItemStyles styleListItems
    |> Style.absolutePositioned styleMenuList
    |> Style.staticMenuStyles styleMenu
    |> Style.menuTitleStyles styleMenuTitle
    |> Style.menuListStyles styleMenuList
    |> Style.subMenuTitleStyles styleMenuTitle

Example usage with CSS classes:

AccordionMenu.blankConfig UpdateMenu
    |> Style.listClass "dropdown"
    |> Style.menuClasses
        (\state ->
            [ ("menu-container",True)
            , ("menu-open", state == AccordionMenu.Open)
            , ("menu-closed", state == AccordionMenu.Closed)
            ]
        )
    |> Style.staticMenuTitleClass "menu-title"
    |> Style.menuListClass "menu-list"
    |> Style.subMenuClasses
        (\state ->
            [ ("menu-submenu-container",True)
            , ("menu-submenu-open", state == AccordionMenu.Open)
            , ("menu-submenu-closed", state == AccordionMenu.Closed)
            ]
        )

"Porcelain" styling

These are shortcuts for typical combinations of styles, resets, etc. They still are very minimalistic, leaving all but the most basic structural styling to the application designer.

absolutePositioned : List ( String, String ) -> Config msg -> Config msg

Set up the styles for the menu list to be absolute-positioned under its container, i.e. so it looks like a menu, sticking out of the document flow.

Note that if you use this, you should not set further styles on the menu container, but pass them in as the first parameter.

Also note you will likely want to set the menu list top (or translateY) to at least the height of the menu title, so the list appears below the title instead of obscuring it.

myConfig
    |> absolutePositioned otherMenuStyles
    |> menuListStyles [ ("top", "30px") ]
resetListStyles : Config msg -> Config msg

A reset for all menu lists (ul). Removes padding and margin and list-style-type.

Finer-grained styling

Helpers for setting inline styles or CSS class(es) on various elements of the menu.

Top-level menu

staticMenuClass : String -> Config msg -> Config msg

Set CSS class for menu container (div), ignoring menu state.

staticMenuStyles : List ( String, String ) -> Config msg -> Config msg

Set inline styles for menu container (div), ignoring menu state.

menuClass : (MenuState -> String) -> Config msg -> Config msg

Set CSS class for menu container (div), as a function of menu state.

menuClasses : (MenuState -> List ( String, Bool )) -> Config msg -> Config msg

Set CSS classes for menu container (div), as a function of menu state.

menuStyles : (MenuState -> List ( String, String )) -> Config msg -> Config msg

Set inline styles for menu container (div), as a function of menu state.

Top-level menu title

staticMenuTitleClass : String -> Config msg -> Config msg

Set CSS class for menu title (div), ignoring menu state.

staticMenuTitleStyles : List ( String, String ) -> Config msg -> Config msg

Set inline styles for menu title (div), ignoring menu state.

menuTitleClass : (MenuState -> String) -> Config msg -> Config msg

Set CSS class for menu title (div), as a function of menu state.

menuTitleClasses : (MenuState -> List ( String, Bool )) -> Config msg -> Config msg

Set CSS classes for menu title (div), as a function of menu state.

menuTitleStyles : (MenuState -> List ( String, String )) -> Config msg -> Config msg

Set inline styles for menu title (div), as a function of menu state.

Top-level menu list

menuListClass : String -> Config msg -> Config msg

Set CSS class for menu list (ul).

menuListStyles : List ( String, String ) -> Config msg -> Config msg

Set inline styles for menu list (ul).

Submenu

staticSubMenuClass : String -> Config msg -> Config msg

Set CSS class for submenu container (li), ignoring menu state.

staticSubMenuStyles : List ( String, String ) -> Config msg -> Config msg

Set inline styles for submenu container (li), ignoring menu state.

subMenuClass : (MenuState -> String) -> Config msg -> Config msg

Set CSS class for submenu container (li), as a function of submenu state.

subMenuClasses : (MenuState -> List ( String, Bool )) -> Config msg -> Config msg

Set CSS classes for submenu container (li), as a function of submenu state.

subMenuStyles : (MenuState -> List ( String, String )) -> Config msg -> Config msg

Set inline styles for submenu container (li), as a function of submenu state.

Submenu title

staticSubMenuTitleClass : String -> Config msg -> Config msg

Set CSS class for submenu title (div), ignoring submenu state.

staticSubMenuTitleStyles : List ( String, String ) -> Config msg -> Config msg

Set inline styles for submenu title (div), ignoring submenu state.

subMenuTitleClass : (MenuState -> String) -> Config msg -> Config msg

Set CSS class for submenu title (div), as a function of submenu state.

subMenuTitleClasses : (MenuState -> List ( String, Bool )) -> Config msg -> Config msg

Set CSS classes for submenu title (div), as a function of submenu state.

subMenuTitleStyles : (MenuState -> List ( String, String )) -> Config msg -> Config msg

Set inline styles for submenu title (div), as a function of submenu state.

Submenu list

subMenuListClass : String -> Config msg -> Config msg

Set CSS class for submenu list (ul).

subMenuListStyles : List ( String, String ) -> Config msg -> Config msg

Set inline styles for submenu list (ul).

Lists and list items in general

listClass : String -> Config msg -> Config msg

Set CSS class for all menu lists (ul).

listStyles : List ( String, String ) -> Config msg -> Config msg

Set inline styles for all menu lists (ul).

listItemClass : String -> Config msg -> Config msg

Set CSS class for all menu list items (li).

listItemStyles : List ( String, String ) -> Config msg -> Config msg

Set inline styles for all menu list items (li).

module AccordionMenu.Style
    exposing
        ( absolutePositioned
        , resetListStyles
        , listClass
        , listStyles
        , listItemClass
        , listItemStyles
        , staticMenuClass
        , staticMenuStyles
        , menuClass
        , menuClasses
        , menuStyles
        , staticMenuTitleClass
        , staticMenuTitleStyles
        , menuTitleClass
        , menuTitleClasses
        , menuTitleStyles
        , menuListClass
        , menuListStyles
        , staticSubMenuClass
        , staticSubMenuStyles
        , subMenuClass
        , subMenuClasses
        , subMenuStyles
        , staticSubMenuTitleClass
        , staticSubMenuTitleStyles
        , subMenuTitleClass
        , subMenuTitleClasses
        , subMenuTitleStyles
        , subMenuListClass
        , subMenuListStyles
        )

{-| Helper functions for styling menus.

All these helpers are intended to be piped onto `AccordionMenu.Config`
instances.

Example usage with inline styles:

    AccordionMenu.blankConfig UpdateMenu
        |> Style.resetListStyles
        |> Style.listItemStyles styleListItems
        |> Style.absolutePositioned styleMenuList
        |> Style.staticMenuStyles styleMenu
        |> Style.menuTitleStyles styleMenuTitle
        |> Style.menuListStyles styleMenuList
        |> Style.subMenuTitleStyles styleMenuTitle

Example usage with CSS classes:

    AccordionMenu.blankConfig UpdateMenu
        |> Style.listClass "dropdown"
        |> Style.menuClasses
            (\state ->
                [ ("menu-container",True)
                , ("menu-open", state == AccordionMenu.Open)
                , ("menu-closed", state == AccordionMenu.Closed)
                ]
            )
        |> Style.staticMenuTitleClass "menu-title"
        |> Style.menuListClass "menu-list"
        |> Style.subMenuClasses
            (\state ->
                [ ("menu-submenu-container",True)
                , ("menu-submenu-open", state == AccordionMenu.Open)
                , ("menu-submenu-closed", state == AccordionMenu.Closed)
                ]
            )


# "Porcelain" styling

These are shortcuts for typical combinations of styles, resets, etc. They still
are very minimalistic, leaving all but the most basic structural styling to the
application designer.

@docs absolutePositioned, resetListStyles


# Finer-grained styling

Helpers for setting inline styles or CSS class(es) on various elements of the
menu.


## Top-level menu

@docs staticMenuClass , staticMenuStyles , menuClass , menuClasses , menuStyles


## Top-level menu title

@docs staticMenuTitleClass , staticMenuTitleStyles , menuTitleClass , menuTitleClasses , menuTitleStyles


## Top-level menu list

@docs menuListClass , menuListStyles


## Submenu

@docs staticSubMenuClass , staticSubMenuStyles , subMenuClass , subMenuClasses , subMenuStyles


## Submenu title

@docs staticSubMenuTitleClass , staticSubMenuTitleStyles , subMenuTitleClass , subMenuTitleClasses , subMenuTitleStyles


## Submenu list

@docs subMenuListClass , subMenuListStyles


## Lists and list items in general

@docs listClass , listStyles , listItemClass , listItemStyles

-}

import Html exposing (Attribute)
import Html.Attributes exposing (style, class, classList)
import AccordionMenu exposing (..)


-- PORCELAIN


{-| Set up the styles for the menu list to be absolute-positioned under its
container, i.e. so it looks like a menu, sticking out of the document flow.

Note that if you use this, you should not set further styles on the menu
container, but pass them in as the first parameter.

Also note you will likely want to set the menu list `top` (or `translateY`) to
at least the height of the menu title, so the list appears below the title
instead of obscuring it.

    myConfig
        |> absolutePositioned otherMenuStyles
        |> menuListStyles [ ("top", "30px") ]

-}
absolutePositioned : List ( String, String ) -> Config msg -> Config msg
absolutePositioned styles config =
    config
        |> staticMenuStyles
            (styles
                ++ [ ( "position", "relative" )
                   ]
            )
        |> menuListStyles
            [ ( "position", "absolute" )
            , ( "top", "0" )
            , ( "left", "0" )
            , ( "width", "100%" )
            ]


{-| A reset for all menu lists (`ul`). Removes `padding` and `margin` and
`list-style-type`.
-}
resetListStyles : Config msg -> Config msg
resetListStyles config =
    config
        |> listStyles
            [ ( "list-style-type", "none" )
            , ( "margin", "0" )
            , ( "padding", "0" )
            , ( "-webkit-margin-before", "0" )
            , ( "-webkit-margin-after", "0" )
            , ( "-webkit-padding-start", "0" )
            ]



-- FINER-GRAINED UPDATES


{-| Set CSS class for all menu lists (`ul`).
-}
listClass : String -> Config msg -> Config msg
listClass class_ config =
    addListAttributes [ class class_ ] config


{-| Set inline styles for all menu lists (`ul`).
-}
listStyles : List ( String, String ) -> Config msg -> Config msg
listStyles styles config =
    addListAttributes [ style styles ] config


{-| Set CSS class for all menu list items (`li`).
-}
listItemClass : String -> Config msg -> Config msg
listItemClass class_ config =
    addListItemAttributes [ class class_ ] config


{-| Set inline styles for all menu list items (`li`).
-}
listItemStyles : List ( String, String ) -> Config msg -> Config msg
listItemStyles styles config =
    addListItemAttributes [ style styles ] config


{-| Set CSS class for menu container (`div`), ignoring menu state.
-}
staticMenuClass : String -> Config msg -> Config msg
staticMenuClass class_ config =
    staticMenuAttributes [ class class_ ] config


{-| Set inline styles for menu container (`div`), ignoring menu state.
-}
staticMenuStyles : List ( String, String ) -> Config msg -> Config msg
staticMenuStyles styles config =
    staticMenuAttributes [ style styles ] config


{-| Set CSS class for menu container (`div`), as a function of menu state.
-}
menuClass : (MenuState -> String) -> Config msg -> Config msg
menuClass func config =
    menuAttributes (func >> (\class_ -> [ class class_ ])) config


{-| Set CSS classes for menu container (`div`), as a function of menu state.
-}
menuClasses : (MenuState -> List ( String, Bool )) -> Config msg -> Config msg
menuClasses func config =
    menuAttributes (func >> (\classes -> [ classList classes ])) config


{-| Set inline styles for menu container (`div`), as a function of menu state.
-}
menuStyles : (MenuState -> List ( String, String )) -> Config msg -> Config msg
menuStyles func config =
    menuAttributes (func >> (\styles -> [ style styles ])) config


{-| Set CSS class for menu title (`div`), ignoring menu state.
-}
staticMenuTitleClass : String -> Config msg -> Config msg
staticMenuTitleClass class_ config =
    staticMenuTitleAttributes [ class class_ ] config


{-| Set inline styles for menu title (`div`), ignoring menu state.
-}
staticMenuTitleStyles : List ( String, String ) -> Config msg -> Config msg
staticMenuTitleStyles styles config =
    staticMenuTitleAttributes [ style styles ] config


{-| Set CSS class for menu title (`div`), as a function of menu state.
-}
menuTitleClass : (MenuState -> String) -> Config msg -> Config msg
menuTitleClass func config =
    menuTitleAttributes (func >> (\class_ -> [ class class_ ])) config


{-| Set CSS classes for menu title (`div`), as a function of menu state.
-}
menuTitleClasses : (MenuState -> List ( String, Bool )) -> Config msg -> Config msg
menuTitleClasses func config =
    menuTitleAttributes (func >> (\classes -> [ classList classes ])) config


{-| Set inline styles for menu title (`div`), as a function of menu state.
-}
menuTitleStyles : (MenuState -> List ( String, String )) -> Config msg -> Config msg
menuTitleStyles func config =
    menuTitleAttributes (func >> (\styles -> [ style styles ])) config


{-| Set CSS class for menu list (`ul`).
-}
menuListClass : String -> Config msg -> Config msg
menuListClass class_ config =
    addMenuListAttributes [ class class_ ] config


{-| Set inline styles for menu list (`ul`).
-}
menuListStyles : List ( String, String ) -> Config msg -> Config msg
menuListStyles styles config =
    addMenuListAttributes [ style styles ] config


{-| Set CSS class for submenu container (`li`), ignoring menu state.
-}
staticSubMenuClass : String -> Config msg -> Config msg
staticSubMenuClass class_ config =
    staticSubMenuAttributes [ class class_ ] config


{-| Set inline styles for submenu container (`li`), ignoring menu state.
-}
staticSubMenuStyles : List ( String, String ) -> Config msg -> Config msg
staticSubMenuStyles styles config =
    staticSubMenuAttributes [ style styles ] config


{-| Set CSS class for submenu container (`li`), as a function of submenu state.
-}
subMenuClass : (MenuState -> String) -> Config msg -> Config msg
subMenuClass func config =
    subMenuAttributes (func >> (\class_ -> [ class class_ ])) config


{-| Set CSS classes for submenu container (`li`), as a function of submenu state.
-}
subMenuClasses : (MenuState -> List ( String, Bool )) -> Config msg -> Config msg
subMenuClasses func config =
    subMenuAttributes (func >> (\classes -> [ classList classes ])) config


{-| Set inline styles for submenu container (`li`), as a function of submenu state.
-}
subMenuStyles : (MenuState -> List ( String, String )) -> Config msg -> Config msg
subMenuStyles func config =
    subMenuAttributes (func >> (\styles -> [ style styles ])) config


{-| Set CSS class for submenu title (`div`), ignoring submenu state.
-}
staticSubMenuTitleClass : String -> Config msg -> Config msg
staticSubMenuTitleClass class_ config =
    staticSubMenuTitleAttributes [ class class_ ] config


{-| Set inline styles for submenu title (`div`), ignoring submenu state.
-}
staticSubMenuTitleStyles : List ( String, String ) -> Config msg -> Config msg
staticSubMenuTitleStyles styles config =
    staticSubMenuTitleAttributes [ style styles ] config


{-| Set CSS class for submenu title (`div`), as a function of submenu state.
-}
subMenuTitleClass : (MenuState -> String) -> Config msg -> Config msg
subMenuTitleClass func config =
    subMenuTitleAttributes (func >> (\class_ -> [ class class_ ])) config


{-| Set CSS classes for submenu title (`div`), as a function of submenu state.
-}
subMenuTitleClasses : (MenuState -> List ( String, Bool )) -> Config msg -> Config msg
subMenuTitleClasses func config =
    subMenuTitleAttributes (func >> (\classes -> [ classList classes ])) config


{-| Set inline styles for submenu title (`div`), as a function of submenu state.
-}
subMenuTitleStyles : (MenuState -> List ( String, String )) -> Config msg -> Config msg
subMenuTitleStyles func config =
    subMenuTitleAttributes (func >> (\styles -> [ style styles ])) config


{-| Set CSS class for submenu list (`ul`).
-}
subMenuListClass : String -> Config msg -> Config msg
subMenuListClass class_ config =
    addSubMenuListAttributes [ class class_ ] config


{-| Set inline styles for submenu list (`ul`).
-}
subMenuListStyles : List ( String, String ) -> Config msg -> Config msg
subMenuListStyles styles config =
    addSubMenuListAttributes [ style styles ] config