Elegant.Corner

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

Types


type alias Corner =

{ topLeft : Maybe.Maybe ( Elegant.Helpers.Shared.SizeUnit, Elegant.Helpers.Shared.SizeUnit ), topRight : Maybe.Maybe ( Elegant.Helpers.Shared.SizeUnit, Elegant.Helpers.Shared.SizeUnit ), bottomRight : Maybe.Maybe ( Elegant.Helpers.Shared.SizeUnit, Elegant.Helpers.Shared.SizeUnit ), bottomLeft : Maybe.Maybe ( Elegant.Helpers.Shared.SizeUnit, Elegant.Helpers.Shared.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

[]

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 : Elegant.Corner.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 : Elegant.Corner.CornerSet -> Elegant.Helpers.Shared.SizeUnit -> Modifiers.Modifier Elegant.Corner.Corner

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



elliptic : Elegant.Corner.CornerSet -> Elegant.Helpers.Shared.SizeUnit -> Elegant.Helpers.Shared.SizeUnit -> Modifiers.Modifier Elegant.Corner.Corner

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


Corner radius selector


top : Elegant.Corner.CornerSet

Select the two top corners.



topRight : Elegant.Corner.CornerSet

Select the top-right corner.



right : Elegant.Corner.CornerSet

Select the two right corners.



bottomRight : Elegant.Corner.CornerSet

Select the bottom-right corner.



bottom : Elegant.Corner.CornerSet

Select the two bottom corners.



bottomLeft : Elegant.Corner.CornerSet

Select the bottom-left corner.



left : Elegant.Corner.CornerSet

Select the two left corners.



topLeft : Elegant.Corner.CornerSet

Select the top-left corner.



all : Elegant.Corner.CornerSet

Select the four corners.


Compilation


cornerToCouples : Elegant.Corner.Corner -> List.List ( String.String, String.String )

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