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

Corner

Corner contains everything about corner radius (also called border radius in CSS).

Types

type alias Corner = { topLeft : Maybe ( SizeUnit, SizeUnit ) , topRight : Maybe ( SizeUnit, SizeUnit ) , bottomRight : Maybe ( SizeUnit, SizeUnit ) , bottomLeft : Maybe ( SizeUnit, SizeUnit ) }

The Corner record contains everything about corner radius (also called border radius in CSS). You probably won't use it as is, but instead using Elegant.corner which automatically generate an empty Corner record. You can then use modifiers. I.E.

Elegant.corner
    [ Corner.circular Corner.all (px 30) ]
type CornerSet = Top | TopRight | Right | BottomRight | Bottom | BottomLeft | Left | TopLeft | All

Represents the possible selected corner(s). It can be Top, TopRight, Right, BottomRight, Bottom, BottomLeft, Left, TopLeft or All. They are created by top, topRight, right, bottomRight, bottom, bottomLeft, left, topLeft or all.

Default corner radius

default : Corner

Generate an empty Corner record, with every field equal to Nothing. You are free to use it as you wish, but it is instanciated automatically by Elegant.corner.

Corner radius style

circular : CornerSet -> SizeUnit -> Modifier Corner

Set the corner(s) to be round (the two angles are the same).

elliptic : CornerSet -> SizeUnit -> SizeUnit -> Modifier Corner

Set the corner(s) to be elliptic, i.e. you can specify two different values for the corner(s).

Corner radius selector

top : CornerSet

Select the two top corners.

topRight : CornerSet

Select the top-right corner.

right : CornerSet

Select the two right corners.

bottomRight : CornerSet

Select the bottom-right corner.

bottom : CornerSet

Select the two bottom corners.

bottomLeft : CornerSet

Select the bottom-left corner.

left : CornerSet

Select the two left corners.

topLeft : CornerSet

Select the top-left corner.

all : CornerSet

Select the four corners.

Compilation

cornerToCouples : Corner -> List ( String, String )

Compiles a Corner record to the corresponding CSS tuples. Compiles only parts which are defined, ignoring Nothing fields.

module Corner
    exposing
        ( Corner
        , default
        , CornerSet
        , circular
        , elliptic
        , top
        , topLeft
        , topRight
        , right
        , bottom
        , bottomLeft
        , bottomRight
        , left
        , all
        , cornerToCouples
        )

{-| Corner contains everything about corner radius (also called border radius in CSS).


# Types

@docs Corner
@docs CornerSet


# Default corner radius

@docs default


# Corner radius style

@docs circular
@docs elliptic


# Corner radius selector

@docs top
@docs topRight
@docs right
@docs bottomRight
@docs bottom
@docs bottomLeft
@docs left
@docs topLeft
@docs all


# Compilation

@docs cornerToCouples

-}

import Helpers.Shared exposing (..)
import Elegant.Setters as Setters
import Modifiers exposing (..)


{-| The `Corner` record contains everything about corner radius (also called border radius in CSS).
You probably won't use it as is, but instead using `Elegant.corner`
which automatically generate an empty `Corner` record. You
can then use modifiers. I.E.

    Elegant.corner
        [ Corner.circular Corner.all (px 30) ]

-}
type alias Corner =
    { topLeft : Maybe ( SizeUnit, SizeUnit )
    , topRight : Maybe ( SizeUnit, SizeUnit )
    , bottomRight : Maybe ( SizeUnit, SizeUnit )
    , bottomLeft : Maybe ( SizeUnit, SizeUnit )
    }


{-| Generate an empty `Corner` record, with every field equal to Nothing.
You are free to use it as you wish, but it is instanciated automatically by `Elegant.corner`.
-}
default : Corner
default =
    Corner Nothing Nothing Nothing Nothing


{-| Represents the possible selected corner(s).
It can be Top, TopRight, Right, BottomRight, Bottom, BottomLeft, Left, TopLeft or All.
They are created by `top`, `topRight`, `right`, `bottomRight`, `bottom`, `bottomLeft`,
`left`, `topLeft` or `all`.
-}
type CornerSet
    = Top
    | TopRight
    | Right
    | BottomRight
    | Bottom
    | BottomLeft
    | Left
    | TopLeft
    | All


{-| Set the corner(s) to be round (the two angles are the same).
-}
circular : CornerSet -> SizeUnit -> Modifier Corner
circular set value =
    setCorner set value value


{-| Set the corner(s) to be elliptic, i.e. you can specify two different values
for the corner(s).
-}
elliptic : CornerSet -> SizeUnit -> SizeUnit -> Modifier Corner
elliptic set val1 val2 =
    setCorner set val1 val2


{-| Select the two top corners.
-}
top : CornerSet
top =
    Top


{-| Select the top-right corner.
-}
topRight : CornerSet
topRight =
    TopRight


{-| Select the two right corners.
-}
right : CornerSet
right =
    Right


{-| Select the bottom-right corner.
-}
bottomRight : CornerSet
bottomRight =
    BottomRight


{-| Select the two bottom corners.
-}
bottom : CornerSet
bottom =
    Bottom


{-| Select the bottom-left corner.
-}
bottomLeft : CornerSet
bottomLeft =
    BottomLeft


{-| Select the two left corners.
-}
left : CornerSet
left =
    Left


{-| Select the top-left corner.
-}
topLeft : CornerSet
topLeft =
    TopLeft


{-| Select the four corners.
-}
all : CornerSet
all =
    All


{-| Compiles a `Corner` record to the corresponding CSS tuples.
Compiles only parts which are defined, ignoring `Nothing` fields.
-}
cornerToCouples : Corner -> List ( String, String )
cornerToCouples corner =
    [ unwrapToCouple .topLeft (cornerToCouple "border-top-left")
    , unwrapToCouple .topRight (cornerToCouple "border-top-right")
    , unwrapToCouple .bottomLeft (cornerToCouple "border-bottom-left")
    , unwrapToCouple .bottomRight (cornerToCouple "border-bottom-right")
    ]
        |> List.concatMap (callOn corner)



-- Internals


cornerToCouple : String -> ( SizeUnit, SizeUnit ) -> ( String, String )
cornerToCouple corner values =
    ( corner ++ "-radius", cornerToString values )


cornerToString : ( SizeUnit, SizeUnit ) -> String
cornerToString =
    sizeUnitCoupleToString


setCorner : CornerSet -> SizeUnit -> SizeUnit -> Modifier Corner
setCorner set val1 val2 =
    case set of
        Top ->
            setTop val1 val2

        TopRight ->
            setTopRight val1 val2

        Right ->
            setRight val1 val2

        BottomRight ->
            setBottomRight val1 val2

        Bottom ->
            setBottom val1 val2

        BottomLeft ->
            setBottomLeft val1 val2

        Left ->
            setLeft val1 val2

        TopLeft ->
            setTopLeft val1 val2

        All ->
            setAll val1 val2


setTopLeft : SizeUnit -> SizeUnit -> Modifier Corner
setTopLeft val1 val2 =
    Setters.setTopLeft <| Just ( val1, val2 )


setTopRight : SizeUnit -> SizeUnit -> Modifier Corner
setTopRight val1 val2 =
    Setters.setTopRight <| Just ( val1, val2 )


setBottomLeft : SizeUnit -> SizeUnit -> Modifier Corner
setBottomLeft val1 val2 =
    Setters.setBottomLeft <| Just ( val1, val2 )


setBottomRight : SizeUnit -> SizeUnit -> Modifier Corner
setBottomRight val1 val2 =
    Setters.setBottomRight <| Just ( val1, val2 )


setTop : SizeUnit -> SizeUnit -> Modifier Corner
setTop val1 val2 =
    setTopLeft val1 val2 << setTopRight val1 val2


setBottom : SizeUnit -> SizeUnit -> Modifier Corner
setBottom val1 val2 =
    setBottomLeft val1 val2 << setBottomRight val1 val2


setLeft : SizeUnit -> SizeUnit -> Modifier Corner
setLeft val1 val2 =
    setTopLeft val1 val2 << setBottomLeft val1 val2


setRight : SizeUnit -> SizeUnit -> Modifier Corner
setRight val1 val2 =
    setTopRight val1 val2 << setBottomRight val1 val2


setAll : SizeUnit -> SizeUnit -> Modifier Corner
setAll val1 val2 =
    setTop val1 val2 << setBottom val1 val2