miyamoen / elm-origami / Origami.StyleTag

Create a style tag.

全体に適用したいCSSを書けます。

Create


type alias Block =
Origami.Css.StyleTag.Block

styleTag : List Block -> Origami.VirtualDom.Node msg

Create a style tag.

styleTag
    [ style ".class" [ property "key" "value" ] ]

...outputs

    <style>
    .class {
        key: value;
    }
    </style>

styleTag_ : List Block -> VirtualDom.Node msg

Version of VirtualDom.Node.

Blocks

style : String -> List Property -> Block

Create a style block.

styleTag
    [ style ".class" [ property "key" "value" ] ]

...outputs

    <style>
    .class {
        key: value;
    }
    </style>

media : String -> List Block -> Block

Create a media block.

styleTag
    [ media "screen" [ style ".class" [ property "key" "value" ] ] ]

...outputs

    <style>
    @media screen {
        .class {
            key: value;
        }
    }
    </style>

fontFace : List Property -> Block

Create a font-face block.

styleTag
    [ fontFace [ property "key" "value" ] ]

...outputs

    <style>
    @font-face {
        key: value;
    }
    </style>


type alias Property =
Origami.Css.StyleTag.Property

property : String -> String -> Property

Keyframes

keyframes : String -> List ( String, List Property ) -> Block

Create a keyframes block.

styleTag
    [ keyframes "spin"
        [ ( "from", [ property "key" "value" ] )
        , ( "20%, 80%", [ property "key" "value" ] )
        , ( "to", [ property "key" "value" ] )
        ]
    ]

...outputs

    <style>
    @keyframes spin {
        from {
            key: value;
        }

        20%, 80% {
            key: value;
        }

        to {
            key: value;
        }
    }
    </style>