Companion library to elm-html. Helps with flexbox layout
The Direction
type specifies all the direction values possible for the
flexDirection
mixin.
Horizontal
, but in reverse order.Vertical
, but in reverse order.The Alignment
type specifies all the values possible for the alignItems
and justifyConteent
mixins.
The WrapValue
type specifies all the wrapping values possible for the
wrap
mixin.
Mixins can be used alone or as a combinator to specify flex-related styles.
Displays an element as an block-level flex container.
The flow
mixin specifies how much the item will grow relative to the rest
of the flexible items inside the same container.
The direction
mixin specifies the direction of the flexible items.
The wrap
mixin specifies whether the flexible items should wrap or not.
The alignItems
mixin specifies the default alignment for items inside
the flexible container.
The justifyContent
mixin aligns the flexible container's items when the
items do not use all available space on the main-axis.
The grow
mixin specifies how much the item will grow relative to the rest
of the flexible items inside the same container.
The shrink
mixin specifies how the item will shrink relative to the rest
of the flexible items inside the same container.
The basis
mixin specifies the initial length of a flexible item.
The flex
mixin specifies the length of the item, relative to the rest of
the flexible items inside the same container.
It's a style shorthand for flexGrow, flexShrink and flexBasis
The order
mixin specifies the order of a flexible item relative to the
rest of the flexible items inside the same container.
The alignSelf
mixin specifies the alignment for the selected item inside
the flexible container.
module Flex exposing (..)
{-| Companion library to elm-html. Helps with flexbox layout
# Flex Types
@docs Direction, Alignment, WrapValue
# Flex Mixins
Mixins can be used alone or as a combinator to specify flex-related styles.
@docs display, flow, direction, wrap, alignItems, justifyContent, grow, shrink, basis, flex, order, alignSelf
-}
import Vendor
import Material.Options as Options exposing (css, many)
{-| The `Direction` type specifies all the direction values possible for the
`flexDirection` mixin.
- Horizontal: Default value. The flexible items are displayed horizontally, as a row.
- Vertical: The flexible items are displayed vertically, as a column.
- HorizontalReverse: Same as `Horizontal`, but in reverse order.
- verticalReverse: Same as `Vertical`, but in reverse order.
-}
type Direction
= Horizontal
| Vertical
| HorizontalReverse
| VerticalReverse
{-| The `Alignment` type specifies all the values possible for the `alignItems`
and `justifyConteent` mixins.
- Start: Content is left-aligned.
- Center: Content is center-aligned.
- End: Content is right-aligned.
- Stretch: Content-width is stretched to fill up the space.
- Surround: Extra space is devided into equal spaces around the content.
-}
type Alignment
= Start
| Center
| End
| Stretch
| Surround
{-| The `WrapValue` type specifies all the wrapping values possible for the
`wrap` mixin.
- Wrap: Specifies that the flexible items will wrap if necessary.
- NoWrap: Default value. Specifies that the flexible items will not wrap.
- WrapReverse: Specifies that the flexible items will wrap, if necessary, in reverse order.
-}
type WrapValue
= Wrap
| NoWrap
| WrapReverse
{-| Displays an element as an block-level flex container. -}
display : Options.Property c m
display =
let displayValue =
if Vendor.prefix == Vendor.Webkit
then "-webkit-flex"
else "flex"
in
css "display" displayValue
{-| The `flow` mixin specifies how much the item will grow relative to the rest
of the flexible items inside the same container.
-}
flow: Direction -> WrapValue -> Options.Property c m
flow directionValue wrapValue =
many
[ direction directionValue
, wrap wrapValue
]
{-| The `direction` mixin specifies the direction of the flexible items.
-}
direction : Direction -> Options.Property c m
direction directionValue =
let (boxDirection, boxOrientation, value) =
case directionValue of
Horizontal ->
("normal", "horizontal", "row")
Vertical ->
("normal", "vertical", "column")
HorizontalReverse ->
("reverse", "horizontal", "row-reverse")
VerticalReverse ->
("reverse", "vertical", "column-reverse")
in
[ css "-webkit-box-direction" boxDirection
, css "-webkit-box-orient" boxOrientation
, css "-webkit-flex-direction" value
, css "-ms-flex-direction" value
, css "flex-direction" value
] |> many
{-| The `wrap` mixin specifies whether the flexible items should wrap or not.
-}
wrap : WrapValue -> Options.Property c m
wrap wrapValue =
let (vendorValue, value) =
case wrapValue of
Wrap ->
("wrap", "wrap")
NoWrap ->
("none", "nowrap")
WrapReverse ->
("wrap-reverse", "wrap-reverse")
in
[ css "-webkit-flex-wrap" value
, css "-ms-flex-wrap" vendorValue
, css "flex-wrap" value
] |> many
{-| The `alignItems` mixin specifies the default alignment for items inside
the flexible container.
-}
alignItems : Alignment -> Options.Property c m
alignItems alignment =
let (vendorValue, value) =
case alignment of
Start ->
("start", "flex-start")
Center ->
("center", "center")
End ->
("end", "flex-end")
Stretch ->
("stretch", "stretch")
Surround ->
("baseline", "baseline")
in
[ css "-webkit-box-align" vendorValue
, css "-webkit-align-items" value
, css "-ms-flex-align" vendorValue
, css "align-items" value
] |> many
{-| The `justifyContent` mixin aligns the flexible container's items when the
items do not use all available space on the main-axis.
-}
justifyContent : Alignment -> Options.Property c m
justifyContent alignment =
let (webkitValue, msValue, value) =
case alignment of
Start ->
("start", "start", "flex-start")
Center ->
("center", "center", "center")
End ->
("end", "end", "flex-end")
Stretch ->
("justify", "justify", "space-between")
Surround ->
("none", "distribute", "space-around")
in
[ css "-webkit-box-pack" webkitValue
, css "-webkit-justify-content" value
, css "-ms-flex-pack" msValue
, css "justify-content" value
] |> many
{-| The `grow` mixin specifies how much the item will grow relative to the rest
of the flexible items inside the same container.
-}
grow : Float -> Options.Property c m
grow growValue =
let
string =
toString growValue
in
[ css"-webkit-box-flex" string
, css "-webkit-flex-grow" string
, css "-ms-flex-positive" string
, css "flex-grow" string
] |> many
{-| The `shrink` mixin specifies how the item will shrink relative to the rest
of the flexible items inside the same container.
-}
shrink : Float -> Options.Property c m
shrink shrinkValue =
let
string =
toString shrinkValue
in
[ css"-webkit-flex-shrink" string
, css "-ms-flex-negative" string
, css "flex-shrink" string
] |> many
{-| The `basis` mixin specifies the initial length of a flexible item.
-}
basis : String -> Options.Property c m
basis basisValue =
[ css"-webkit-flex-basis" basisValue
, css "-ms-flex-preferred-size" basisValue
, css "flex-basis" basisValue
] |> many
{-| The `flex` mixin specifies the length of the item, relative to the rest of
the flexible items inside the same container.
It's a style shorthand for flexGrow, flexShrink and flexBasis
-}
flex : Float -> Float -> String -> Options.Property c m
flex grow shrink basis =
let
growString =
toString grow
shrinkString =
toString shrink
value =
growString ++ " " ++ shrinkString ++ " " ++ basis
in
[ css "-webkit-box-flex" growString
, css "-webkit-flex" value
, css "-ms-flex" value
, css "flex" value
] |> many
{-| The `order` mixin specifies the order of a flexible item relative to the
rest of the flexible items inside the same container.
-}
order : Int -> Options.Property c m
order value =
let string =
toString value
in
[ css"-webkit-box-ordinal-group" string
, css "-webkit-order" string
, css "-ms-flex-order" string
, css "-order" string
] |> many
{-| The `alignSelf` mixin specifies the alignment for the selected item inside
the flexible container.
-}
alignSelf : Alignment -> Options.Property c m
alignSelf alignment =
let value =
case alignment of
Start ->
"flex-start"
Center ->
"center"
End ->
"flex-end"
Stretch ->
"stretch"
Surround ->
"baseline"
in
[ css"-webkit-align-self" value
, css "-ms-flex-item-align" value
, css "align-self" value
] |> many