Elegant.Box

Handles all modifications for the box. You don't need to instanciate one, as it's automatically done by Elegant and the different display elements. It contains only modifiers, and they can be found in the respective modules.

Types

type alias Box =

{ appearance : Maybe String

, background : Maybe Background

, border : Maybe (Surrounded Border)

, boxShadow : Maybe Shadow

, corner : Maybe Corner

, cursor : Maybe Cursor

, margin : Maybe (Surrounded Margin)

, opacity : Maybe Float

, outline : Maybe Outline

, padding : Maybe (Surrounded Padding)

, position : Maybe Position

, typography : Maybe Typography

, visibility : Maybe Visibility

, transform : Maybe Transform

, zIndex : Maybe Int

, willChange : Maybe (List WillChange)

}

Represents a box, handling the properties of blocks. They are automatically instanciated to avoid to deal with it directly. The focus is on the modifiers, available in respective modules.

Elegant.displayBlock []
    [ Box.cursor Cursor.default


    -- You can use any Box functions here to add custom style...
    ]

type Visibility

Defines the visibility of an element. It can be either visible or hidden.

Modifiers

appearanceNone : Box -> Box

Accepts an Int for the zIndex and modifies the Box accordingly.

background : Modifiers Background -> Modifier Box

Accepts a list of modifiers for the Background and modifies the Box accordingly.

border : Modifiers (Surrounded Border) -> Modifier Box

Accepts a list of modifiers for the Border and modifies the Box accordingly.

boxShadow : Modifiers Shadow -> Modifier Box

Accepts a list of modifiers for the Shadow and modifies the Box accordingly.

shadow : Modifiers Shadow -> Modifier Box

Alias of boxShadow

corner : Modifiers Corner -> Modifier Box

Accepts a list of modifiers for the Corner and modifies the Box accordingly.

cursor : Cursor -> Modifier Box

Accepts a Cursor and modifies the Box accordingly.

margin : Modifiers (Surrounded Margin) -> Modifier Box

Accepts a list of modifiers for the Margin and modifies the Box accordingly.

opacity : Float -> Modifier Box

Accepts a size for the opacity and modifies the Box accordingly.

outline : Modifiers Outline -> Modifier Box

Accepts a list of modifiers for the Outline and modifies the Box accordingly.

padding : Modifiers (Surrounded Padding) -> Modifier Box

Accepts a list of modifiers for the Padding and modifies the Box accordingly.

position : Position -> Modifier Box

Accepts a Position and modifies the Box accordingly.

typography : Modifiers Typography -> Modifier Box

Accepts a list of modifiers for the Typography and modifies the Box accordingly.

visibility : Visibility -> Modifier Box

Accepts a Visibility and modifies the Box accordingly.

transform : Modifiers Transform -> Modifier Box

Accepts a list of modifiers for the transform and modifies the Box accordingly.

zIndex : Int -> Modifier Box

Accepts an Int for the zIndex and modifies the Box accordingly.

Shortcuts

outlineNone : Modifier Box

backgroundColor : Color -> Modifier Box

cornerRound : Modifier Box

cornerRadius : Int -> Modifier Box

borderNone : Modifier Box

borderColor : Color -> Modifier Box

borderWidth : Int -> Modifier Box

borderSolid : Modifier Box

paddingAll : SizeUnit -> Modifier Box

paddingHorizontal : SizeUnit -> Modifier Box

paddingVertical : SizeUnit -> Modifier Box

paddingTop : SizeUnit -> Modifier Box

paddingRight : SizeUnit -> Modifier Box

paddingBottom : SizeUnit -> Modifier Box

paddingLeft : SizeUnit -> Modifier Box

shadowCenteredBlurry : SizeUnit -> Color -> Modifier Box

marginAuto : Modifier Box

fontFamilySansSerif : Modifier Box

systemFont : String -> Modifier Box

textColor : Color -> Modifier Box

willChange : List WillChange -> Modifier Box

WillChange helps the browser to know which property will change. It's very useful for the optimization of animations

cursorPointer : Modifier Box

Because we always need to set the cursor to pointer !

Values

default : Box

Generates a default empty Box.

visible : Visibility

hidden : Visibility

Compilation

boxToCouples : Box -> List ( String, String )

Compiles a Box to the corresponding CSS list of tuples. Compiles only the defined styles, ignoring the Nothing fields.

elm-athlete/athlete/2.0.0