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.
{ appearance : Maybe String
, background : Maybe Elegant.Background.Background
, border : Maybe (Elegant.Surrounded.Surrounded Elegant.Border.Border)
, boxShadow : Maybe Elegant.Shadow.Shadow
, corner : Maybe Elegant.Corner.Corner
, cursor : Maybe Elegant.Cursor.Cursor
, margin : Maybe (Elegant.Surrounded.Surrounded Elegant.Margin.Margin)
, opacity : Maybe Basics.Float
, outline : Maybe Elegant.Outline.Outline
, padding : Maybe (Elegant.Surrounded.Surrounded Elegant.Padding.Padding)
, position : Maybe Elegant.Position.Position
, typography : Maybe Elegant.Typography.Typography
, visibility : Maybe Visibility
, transform : Maybe Elegant.Transform.Transform
, zIndex : Maybe Basics.Int
, willChange : Maybe (List 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...
]
Defines the visibility of an element. It can be either visible or hidden.
appearanceNone : Box -> Box
Accepts an Int for the zIndex
and modifies the Box accordingly.
background : Modifiers Elegant.Background.Background -> Modifiers.Modifier Box
Accepts a list of modifiers for the Background
and modifies the Box accordingly.
border : Modifiers (Elegant.Surrounded.Surrounded Elegant.Border.Border) -> Modifiers.Modifier Box
Accepts a list of modifiers for the Border
and modifies the Box accordingly.
boxShadow : Modifiers Elegant.Shadow.Shadow -> Modifiers.Modifier Box
Accepts a list of modifiers for the Shadow
and modifies the Box accordingly.
shadow : Modifiers Elegant.Shadow.Shadow -> Modifiers.Modifier Box
Alias of boxShadow
corner : Modifiers Elegant.Corner.Corner -> Modifiers.Modifier Box
Accepts a list of modifiers for the Corner
and modifies the Box accordingly.
cursor : Elegant.Cursor.Cursor -> Modifiers.Modifier Box
Accepts a Cursor
and modifies the Box accordingly.
margin : Modifiers (Elegant.Surrounded.Surrounded Elegant.Margin.Margin) -> Modifiers.Modifier Box
Accepts a list of modifiers for the Margin
and modifies the Box accordingly.
opacity : Basics.Float -> Modifiers.Modifier Box
Accepts a size for the opacity
and modifies the Box accordingly.
outline : Modifiers Elegant.Outline.Outline -> Modifiers.Modifier Box
Accepts a list of modifiers for the Outline
and modifies the Box accordingly.
padding : Modifiers (Elegant.Surrounded.Surrounded Elegant.Padding.Padding) -> Modifiers.Modifier Box
Accepts a list of modifiers for the Padding
and modifies the Box accordingly.
position : Elegant.Position.Position -> Modifiers.Modifier Box
Accepts a Position
and modifies the Box accordingly.
typography : Modifiers Elegant.Typography.Typography -> Modifiers.Modifier Box
Accepts a list of modifiers for the Typography
and modifies the Box accordingly.
visibility : Visibility -> Modifiers.Modifier Box
Accepts a Visibility
and modifies the Box accordingly.
transform : Modifiers Elegant.Transform.Transform -> Modifiers.Modifier Box
Accepts a list of modifiers for the transform
and modifies the Box accordingly.
zIndex : Basics.Int -> Modifiers.Modifier Box
Accepts an Int for the zIndex
and modifies the Box accordingly.
outlineNone : Modifiers.Modifier Box
backgroundColor : Color -> Modifiers.Modifier Box
cornerRound : Modifiers.Modifier Box
cornerRadius : Basics.Int -> Modifiers.Modifier Box
borderNone : Modifiers.Modifier Box
borderColor : Color -> Modifiers.Modifier Box
borderWidth : Basics.Int -> Modifiers.Modifier Box
borderSolid : Modifiers.Modifier Box
paddingAll : Elegant.Helpers.Shared.SizeUnit -> Modifiers.Modifier Box
paddingHorizontal : Elegant.Helpers.Shared.SizeUnit -> Modifiers.Modifier Box
paddingVertical : Elegant.Helpers.Shared.SizeUnit -> Modifiers.Modifier Box
paddingTop : Elegant.Helpers.Shared.SizeUnit -> Modifiers.Modifier Box
paddingRight : Elegant.Helpers.Shared.SizeUnit -> Modifiers.Modifier Box
paddingBottom : Elegant.Helpers.Shared.SizeUnit -> Modifiers.Modifier Box
paddingLeft : Elegant.Helpers.Shared.SizeUnit -> Modifiers.Modifier Box
shadowCenteredBlurry : Elegant.Helpers.Shared.SizeUnit -> Color -> Modifiers.Modifier Box
marginAuto : Modifiers.Modifier Box
fontFamilySansSerif : Modifiers.Modifier Box
systemFont : String -> Modifiers.Modifier Box
textColor : Color -> Modifiers.Modifier Box
willChange : List WillChange -> Modifiers.Modifier Box
WillChange helps the browser to know which property will change. It's very useful for the optimization of animations
cursorPointer : Modifiers.Modifier Box
Because we always need to set the cursor to pointer !
default : Box
Generates a default empty Box.
visible : Visibility
hidden : Visibility
boxToCouples : Box -> List ( String, String )
Compiles a Box
to the corresponding CSS list of tuples.
Compiles only the defined styles, ignoring the Nothing
fields.