mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-12-19 11:41:32 +03:00
e2907d9ba2
* Use elm-css 16.0.0 * 💀 Ui.Checkbox V1 and V2 * s/Css.Foreign/Css.Global/g * 💀 Nri.Ui.Styles.V1 * 💀 BannerAlert.V1 * 💀 Modal.V1 * 💀 Dropdown.V1 * 💀 Select.V1 and V2 * 💀 Alert.V1 * 💀 Button.V1 and V2 * 💀 Divider.V1 * 💀 Icon.V1 and V2 * 💀 Outline.V1 * 💀 SegmentedControl.V1-V5 * 💀 TextArea.V1 and V2 * 💀 TextInput.V1 * delete the rest of the modules * actually more deletions * InputStyles v1 is unused * move to src-0.18 * do the 0.19 upgrade * select options are addressable by index * elm-css 16 * update scripts * elm-format * Update V2.elm * put the nbsp back * elm-format validation for both versions
270 lines
5.1 KiB
Elm
270 lines
5.1 KiB
Elm
module Nri.Ui.CssFlexBoxWithVendorPrefix exposing
|
|
( displayFlex, displayInlineFlex, flexDirection, justifyContent, alignItems, alignSelf, flexBasis
|
|
, flexGrow, flexShrink, row, rowReverse, column, columnReverse, flexStart, flexEnd, baseline, stretch, center, spaceBetween, spaceAround, flexWrap, nowrap, wrap, wrapReverse
|
|
)
|
|
|
|
{-|
|
|
|
|
@docs displayFlex, displayInlineFlex, flexDirection, justifyContent, alignItems, alignSelf, flexBasis
|
|
@docs flexGrow, flexShrink, row, rowReverse, column, columnReverse, flexStart, flexEnd, baseline, stretch, center, spaceBetween, spaceAround, flexWrap, nowrap, wrap, wrapReverse
|
|
|
|
-}
|
|
|
|
import Css exposing (Style, batch, property)
|
|
|
|
|
|
{-| -}
|
|
displayFlex : Style
|
|
displayFlex =
|
|
batch
|
|
[ property "display" "-webkit-box" -- OLD - iOS 6-, Safari 3.1-6
|
|
, property "display" "-moz-box" -- OLD - Firefox 19- (buggy but mostly works)
|
|
, property "display" "-ms-flexbox" -- TWEENER - IE 10
|
|
, property "display" "-webkit-flex" -- NEW - Chrome
|
|
, property "display" "flex" -- NEW, Spec - Opera 12.1, Firefox 20+
|
|
]
|
|
|
|
|
|
{-| -}
|
|
displayInlineFlex : Style
|
|
displayInlineFlex =
|
|
batch
|
|
[ property "display" "-webkit-inline-box" -- OLD - iOS 6-, Safari 3.1-6
|
|
, property "display" "-moz-inline-box" -- OLD - Firefox 19- (buggy but mostly works)
|
|
, property "display" "-ms-inline-flexbox" -- TWEENER - IE 10
|
|
, property "display" "-webkit-inline-flex" -- NEW - Chrome
|
|
, property "display" "inline-flex" -- NEW, Spec - Opera 12.1, Firefox 20+
|
|
]
|
|
|
|
|
|
{-| -}
|
|
flexDirection : Direction -> Style
|
|
flexDirection direction =
|
|
addPrefix "flex-direction" <|
|
|
case direction of
|
|
Row ->
|
|
"row"
|
|
|
|
RowReverse ->
|
|
"row-reverse"
|
|
|
|
Column ->
|
|
"column"
|
|
|
|
ColumnReverse ->
|
|
"column-reverse"
|
|
|
|
|
|
type Direction
|
|
= Row
|
|
| RowReverse
|
|
| Column
|
|
| ColumnReverse
|
|
|
|
|
|
{-| Direction row.
|
|
-}
|
|
row : Direction
|
|
row =
|
|
Row
|
|
|
|
|
|
{-| Direction rowReverse.
|
|
-}
|
|
rowReverse : Direction
|
|
rowReverse =
|
|
RowReverse
|
|
|
|
|
|
{-| Direction column.
|
|
-}
|
|
column : Direction
|
|
column =
|
|
Column
|
|
|
|
|
|
{-| Direction columnReverse.
|
|
-}
|
|
columnReverse : Direction
|
|
columnReverse =
|
|
ColumnReverse
|
|
|
|
|
|
{-| -}
|
|
justifyContent : Alignment JustifyContent a -> Style
|
|
justifyContent =
|
|
addPrefix "justify-content" << alignmentToString
|
|
|
|
|
|
{-| -}
|
|
alignItems : Alignment a AlignItems -> Style
|
|
alignItems =
|
|
addPrefix "align-items" << alignmentToString
|
|
|
|
|
|
{-| -}
|
|
alignSelf : Alignment a AlignItems -> Style
|
|
alignSelf =
|
|
addPrefix "align-self" << alignmentToString
|
|
|
|
|
|
{-| -}
|
|
flexBasis : Css.Length compatible units -> Style
|
|
flexBasis =
|
|
addPrefix "flex-basis" << .value
|
|
|
|
|
|
{-| -}
|
|
flexGrow : Float -> Style
|
|
flexGrow value =
|
|
addPrefix "flex-grow" (toString value)
|
|
|
|
|
|
{-| -}
|
|
flexShrink : Float -> Style
|
|
flexShrink value =
|
|
addPrefix "flex-shrink" (toString value)
|
|
|
|
|
|
{-| -}
|
|
flexWrap : Wrap -> Style
|
|
flexWrap value =
|
|
addPrefix "flex-wrap" <|
|
|
case value of
|
|
Nowrap ->
|
|
"nowrap"
|
|
|
|
Wrap ->
|
|
"wrap"
|
|
|
|
WrapReverse ->
|
|
"wrap-reverse"
|
|
|
|
|
|
type Wrap
|
|
= Nowrap
|
|
| Wrap
|
|
| WrapReverse
|
|
|
|
|
|
{-| flex-wrap nowrap
|
|
-}
|
|
nowrap : Wrap
|
|
nowrap =
|
|
Nowrap
|
|
|
|
|
|
{-| flex-wrap wrap
|
|
-}
|
|
wrap : Wrap
|
|
wrap =
|
|
Wrap
|
|
|
|
|
|
{-| flex-wrap wrapReverse
|
|
-}
|
|
wrapReverse : Wrap
|
|
wrapReverse =
|
|
WrapReverse
|
|
|
|
|
|
type Alignment justify align
|
|
= FlexStart justify align
|
|
| FlexEnd justify align
|
|
| Center justify align
|
|
| SpaceBetween justify
|
|
| SpaceAround justify
|
|
| Baseline align
|
|
| Stretch align
|
|
|
|
|
|
alignmentToString : Alignment a b -> String
|
|
alignmentToString value =
|
|
case value of
|
|
FlexStart _ _ ->
|
|
"flex-start"
|
|
|
|
FlexEnd _ _ ->
|
|
"flex-end"
|
|
|
|
Center _ _ ->
|
|
"center"
|
|
|
|
SpaceBetween _ ->
|
|
"space-between"
|
|
|
|
SpaceAround _ ->
|
|
"space-around"
|
|
|
|
Baseline _ ->
|
|
"baseline"
|
|
|
|
Stretch _ ->
|
|
"stretch"
|
|
|
|
|
|
type JustifyContent
|
|
= JustifyContent
|
|
|
|
|
|
type AlignItems
|
|
= AlignItems
|
|
|
|
|
|
{-| align-items/justify-content flexStart
|
|
-}
|
|
flexStart : Alignment JustifyContent AlignItems
|
|
flexStart =
|
|
FlexStart JustifyContent AlignItems
|
|
|
|
|
|
{-| align-items/justify-content flexEnd
|
|
-}
|
|
flexEnd : Alignment JustifyContent AlignItems
|
|
flexEnd =
|
|
FlexEnd JustifyContent AlignItems
|
|
|
|
|
|
{-| align-items/justify-content center
|
|
-}
|
|
center : Alignment JustifyContent AlignItems
|
|
center =
|
|
Center JustifyContent AlignItems
|
|
|
|
|
|
{-| justify-content spaceBetween
|
|
-}
|
|
spaceBetween : Alignment JustifyContent Never
|
|
spaceBetween =
|
|
SpaceBetween JustifyContent
|
|
|
|
|
|
{-| justify-content spaceAround
|
|
-}
|
|
spaceAround : Alignment JustifyContent Never
|
|
spaceAround =
|
|
SpaceAround JustifyContent
|
|
|
|
|
|
{-| align-items baseline
|
|
-}
|
|
baseline : Alignment Never AlignItems
|
|
baseline =
|
|
Baseline AlignItems
|
|
|
|
|
|
{-| align-items stretch
|
|
-}
|
|
stretch : Alignment Never AlignItems
|
|
stretch =
|
|
Stretch AlignItems
|
|
|
|
|
|
addPrefix : String -> String -> Style
|
|
addPrefix propertyName value =
|
|
batch
|
|
[ property ("-webkit-" ++ propertyName) value
|
|
, property propertyName value
|
|
, property ("-ms-" ++ propertyName) value
|
|
]
|