Fold default styles into the attributes

This commit is contained in:
Tessa Kelly 2021-10-21 14:50:22 -07:00
parent c9b304b67b
commit a8470308d8

View File

@ -73,8 +73,8 @@ applyAttribute attribute styles =
{-| PRIVATE {-| PRIVATE
-} -}
renderContainer : String -> Settings -> List Style -> List Attribute -> List (Html msg) -> Html msg renderContainer : String -> Settings -> List Attribute -> List (Html msg) -> Html msg
renderContainer name defaultStyles baseStyles attributes content = renderContainer name defaultStyles attributes content =
let let
settings : Settings settings : Settings
settings = settings =
@ -82,8 +82,7 @@ renderContainer name defaultStyles baseStyles attributes content =
in in
Nri.Ui.styled div Nri.Ui.styled div
name name
(baseStyles ([ padding (px settings.padding)
++ [ padding (px settings.padding)
, if settings.fullHeight then , if settings.fullHeight then
height (pct 100) height (pct 100)
@ -103,13 +102,13 @@ default attributes content =
renderContainer "default-container" renderContainer "default-container"
{ padding = 20 { padding = 20
, fullHeight = False , fullHeight = False
, css = [] , css =
}
[ borderRadius (px 8) [ borderRadius (px 8)
, border3 (px 1) solid Colors.gray92 , border3 (px 1) solid Colors.gray92
, boxShadow5 zero (px 1) (px 1) zero (rgba 0 0 0 0.25) , boxShadow5 zero (px 1) (px 1) zero (rgba 0 0 0 0.25)
, backgroundColor Colors.white , backgroundColor Colors.white
] ]
}
attributes attributes
[ content ] [ content ]
@ -121,11 +120,11 @@ gray attributes content =
renderContainer "gray-container" renderContainer "gray-container"
{ padding = 20 { padding = 20
, fullHeight = False , fullHeight = False
, css = [] , css =
}
[ borderRadius (px 8) [ borderRadius (px 8)
, backgroundColor Colors.gray96 , backgroundColor Colors.gray96
] ]
}
attributes attributes
[ content ] [ content ]
@ -136,13 +135,13 @@ disabled attributes content =
renderContainer "disabled-container" renderContainer "disabled-container"
{ padding = 20 { padding = 20
, fullHeight = False , fullHeight = False
, css = [] , css =
}
[ borderRadius (px 8) [ borderRadius (px 8)
, border3 (px 1) solid Colors.gray92 , border3 (px 1) solid Colors.gray92
, backgroundColor Colors.white , backgroundColor Colors.white
, color Colors.gray45 , color Colors.gray45
] ]
}
attributes attributes
[ content ] [ content ]
@ -153,13 +152,13 @@ invalid attributes content =
renderContainer "invalid-container" renderContainer "invalid-container"
{ padding = 20 { padding = 20
, fullHeight = False , fullHeight = False
, css = [] , css =
}
[ borderRadius (px 8) [ borderRadius (px 8)
, border3 (px 1) solid Colors.purpleLight , border3 (px 1) solid Colors.purpleLight
, boxShadow5 zero (px 1) (px 1) zero Colors.purple , boxShadow5 zero (px 1) (px 1) zero Colors.purple
, backgroundColor Colors.purpleLight , backgroundColor Colors.purpleLight
] ]
}
attributes attributes
[ content ] [ content ]
@ -171,9 +170,8 @@ pillow attributes content =
renderContainer "pillow-container" renderContainer "pillow-container"
{ padding = 40 { padding = 40
, fullHeight = False , fullHeight = False
, css = [] , css = pillowStyles
} }
pillowStyles
attributes attributes
[ content ] [ content ]
@ -198,9 +196,8 @@ buttony attributes content =
renderContainer "buttony-container" renderContainer "buttony-container"
{ padding = 20 { padding = 20
, fullHeight = False , fullHeight = False
, css = [] , css = buttonyStyles
} }
buttonyStyles
attributes attributes
[ content ] [ content ]