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.Maybe String.String, background : Maybe.Maybe Elegant.Background.Background, border : Maybe.Maybe (Elegant.Surrounded.Surrounded Elegant.Border.Border), boxShadow : Maybe.Maybe Elegant.Shadow.Shadow, corner : Maybe.Maybe Elegant.Corner.Corner, cursor : Maybe.Maybe Elegant.Cursor.Cursor, margin : Maybe.Maybe (Elegant.Surrounded.Surrounded Elegant.Margin.Margin), opacity : Maybe.Maybe Basics.Float, outline : Maybe.Maybe Elegant.Outline.Outline, padding : Maybe.Maybe (Elegant.Surrounded.Surrounded Elegant.Padding.Padding), position : Maybe.Maybe Elegant.Position.Position, typography : Maybe.Maybe Elegant.Typography.Typography, visibility : Maybe.Maybe Elegant.Box.Visibility, transform : Maybe.Maybe Elegant.Transform.Transform, zIndex : Maybe.Maybe Basics.Int, willChange : Maybe.Maybe (List.List Elegant.Box.WillChange) }

Represents a box, handling the properties of boxes. 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 : Elegant.Box.Box -> Elegant.Box.Box

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



background : Modifiers.Modifiers Elegant.Background.Background -> Modifiers.Modifier Elegant.Box.Box

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



border : Modifiers.Modifiers (Elegant.Surrounded.Surrounded Elegant.Border.Border) -> Modifiers.Modifier Elegant.Box.Box

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



boxShadow : Modifiers.Modifiers Elegant.Shadow.Shadow -> Modifiers.Modifier Elegant.Box.Box

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



shadow : Modifiers.Modifiers Elegant.Shadow.Shadow -> Modifiers.Modifier Elegant.Box.Box

Alias of boxShadow



corner : Modifiers.Modifiers Elegant.Corner.Corner -> Modifiers.Modifier Elegant.Box.Box

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



cursor : Elegant.Cursor.Cursor -> Modifiers.Modifier Elegant.Box.Box

Accepts a Cursor and modifies the Box accordingly.



margin : Modifiers.Modifiers (Elegant.Surrounded.Surrounded Elegant.Margin.Margin) -> Modifiers.Modifier Elegant.Box.Box

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



opacity : Basics.Float -> Modifiers.Modifier Elegant.Box.Box

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



outline : Modifiers.Modifiers Elegant.Outline.Outline -> Modifiers.Modifier Elegant.Box.Box

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



padding : Modifiers.Modifiers (Elegant.Surrounded.Surrounded Elegant.Padding.Padding) -> Modifiers.Modifier Elegant.Box.Box

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



position : Elegant.Position.Position -> Modifiers.Modifier Elegant.Box.Box

Accepts a Position and modifies the Box accordingly.



typography : Modifiers.Modifiers Elegant.Typography.Typography -> Modifiers.Modifier Elegant.Box.Box

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



visibility : Elegant.Box.Visibility -> Modifiers.Modifier Elegant.Box.Box

Accepts a Visibility and modifies the Box accordingly.



transform : Modifiers.Modifiers Elegant.Transform.Transform -> Modifiers.Modifier Elegant.Box.Box

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



zIndex : Basics.Int -> Modifiers.Modifier Elegant.Box.Box

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


Shortcuts


outlineNone : Modifiers.Modifier Elegant.Box.Box



backgroundColor : Color.Color -> Modifiers.Modifier Elegant.Box.Box



cornerRound : Modifiers.Modifier Elegant.Box.Box



cornerRadius : Basics.Int -> Modifiers.Modifier Elegant.Box.Box



borderNone : Modifiers.Modifier Elegant.Box.Box



borderColor : Color.Color -> Modifiers.Modifier Elegant.Box.Box



borderWidth : Basics.Int -> Modifiers.Modifier Elegant.Box.Box



borderSolid : Modifiers.Modifier Elegant.Box.Box



paddingAll : Elegant.Helpers.Shared.SizeUnit -> Modifiers.Modifier Elegant.Box.Box



paddingHorizontal : Elegant.Helpers.Shared.SizeUnit -> Modifiers.Modifier Elegant.Box.Box



paddingVertical : Elegant.Helpers.Shared.SizeUnit -> Modifiers.Modifier Elegant.Box.Box



paddingTop : Elegant.Helpers.Shared.SizeUnit -> Modifiers.Modifier Elegant.Box.Box



paddingRight : Elegant.Helpers.Shared.SizeUnit -> Modifiers.Modifier Elegant.Box.Box



paddingBottom : Elegant.Helpers.Shared.SizeUnit -> Modifiers.Modifier Elegant.Box.Box



paddingLeft : Elegant.Helpers.Shared.SizeUnit -> Modifiers.Modifier Elegant.Box.Box



shadowCenteredBlurry : Elegant.Helpers.Shared.SizeUnit -> Color.Color -> Modifiers.Modifier Elegant.Box.Box



marginAuto : Modifiers.Modifier Elegant.Box.Box



fontFamilySansSerif : Modifiers.Modifier Elegant.Box.Box



systemFont : String.String -> Modifiers.Modifier Elegant.Box.Box



textColor : Color.Color -> Modifiers.Modifier Elegant.Box.Box



willChange : List.List Elegant.Box.WillChange -> Modifiers.Modifier Elegant.Box.Box

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



cursorPointer : Modifiers.Modifier Elegant.Box.Box

Because we always need to set the cursor to pointer !


Values


default : Elegant.Box.Box

Generates a default empty Box.



visible : Elegant.Box.Visibility



hidden : Elegant.Box.Visibility


Compilation


boxToCouples : Elegant.Box.Box -> List.List ( String.String, String.String )

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