elm-athlete / athlete / Elegant.Display

Display contains everything about an element rendering. It is the basis of every style, for every element. Each element can be block, inline, flow or flex.

Types


type DisplayBox
    = None
    | ContentsWrapper Contents

Represents a box and contains all the style inside. If the display is none, no style is included. Otherwise, the display type requires the corresponding styles. I.e. if using a flex container, then only styles applying to flex container can be used. If using a block container, only styles applying to block can be used, and so on.

You don't use it directly, but rather generating one with the corresponding functions, then giving it to a function which needs one. If you want to bypass it, you can use Display.displayBoxToCouples, which generates the equivalent CSS.


type alias Contents =
{ outsideDisplay : OutsideDisplay
, insideDisplay : InsideDisplay
, maybeBox : Maybe Elegant.Box.Box 
}


type OutsideDisplay
    = Inline
    | Block (Maybe BlockDetails)
    | FlexItem (Maybe Elegant.Flex.FlexItemDetails) (Maybe BlockDetails)
    | GridItem (Maybe Elegant.Grid.GridItemDetails) (Maybe BlockDetails)

Represents the style from outside the display. Can be inline, block, or flex-item.


type InsideDisplay
    = Flow
    | FlexContainer (Maybe Elegant.Flex.FlexContainerDetails)
    | GridContainer (Maybe Elegant.Grid.GridContainerDetails)

Represents the style from inside a display. Can be flow, or flex (and containing flex details).


type alias BlockDetails =
{ listStyleType : Maybe ListStyleType
, alignment : Maybe Alignment
, overflow : Maybe Elegant.Overflow.FullOverflow
, textOverflow : Maybe TextOverflow
, dimensions : Maybe Elegant.Dimensions.Dimensions 
}

Contains all styles which can be applied to a block. It is automatically instanciated by Display.block.


type ListStyleType

Represents the type of the list style. Can be none, disc, circle, square, decimal or georgian.


type Alignment

Represents the alignment inside a block. Can be center, right, left or justify.


type TextOverflow

Represents the text-overflow. Can be ellipsis.

defaultBlockDetails : BlockDetails

Modifiers

List

listStyleNone : Modifiers.Modifier BlockDetails

Set the list style to none.

listStyleDisc : Modifiers.Modifier BlockDetails

Set the list style to disc.

listStyleCircle : Modifiers.Modifier BlockDetails

Set the list style to circle.

listStyleSquare : Modifiers.Modifier BlockDetails

Set the list style to square.

listStyleDecimal : Modifiers.Modifier BlockDetails

Set the list style to decimal.

listStyleGeorgian : Modifiers.Modifier BlockDetails

Set the list style to georgian.

Alignment

alignment : Alignment -> Modifiers.Modifier BlockDetails

Accepts the alignment and modifies the block accordingly.

right : Alignment

Defines the alignment as right.

center : Alignment

Defines the alignment as center.

left : Alignment

Defines the alignment as left.

justify : Alignment

Defines the alignment as justify.

Overflow

overflow : Modifiers Elegant.Overflow.FullOverflow -> Modifiers.Modifier BlockDetails

Accepts a list of Overflow modifiers and modifies the block accordingly.

textOverflowEllipsis : Modifiers.Modifier BlockDetails

Modifies the block to give an text-overflow ellipsis.

dimensions : Modifiers Elegant.Dimensions.Dimensions -> Modifiers.Modifier BlockDetails

Accepts dimensions modifiers and modifies the block accordingly.

fullWidth : Modifiers.Modifier BlockDetails

Compilation

displayBoxToCouples : DisplayBox -> List ( String, String )

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