NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-11-24 08:53:33 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #288 from NoRedInk/i-hate-css-right-now

Browse Source 
style cleanup - BannerAlert; color, centering, line height
This commit is contained in:
Renee 2019-05-30 14:11:01 -07:00 committed by GitHub
commit f95e9ed237
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/Nri/Ui/BannerAlert/V4.elm
View File

@ -27,7 +27,7 @@ alert =
{ backgroundColor = Colors.sunshine
, color = Colors.navy
, icon =
{ backgroundColor = Colors.yellow
{ backgroundColor = Colors.ochre
, height = Css.px 25
, asset = exclamationMark
}
@ -101,6 +101,7 @@ banner config alertMessage dismissMsg =
[ css
[ Css.displayFlex
, Css.justifyContent Css.center
, Css.alignItems Css.center
, Css.backgroundColor config.backgroundColor
, Css.color config.color
]
@ -123,13 +124,7 @@ banner config alertMessage dismissMsg =
[ icon config.icon
, notification alertMessage
]
, Html.span
[ css
[ Css.display Css.inlineBlock
, Css.float Css.right
]
]
[ maybeDismissButton ]
, maybeDismissButton
]
@ -137,10 +132,7 @@ dismissButton : msg -> Html msg
dismissButton msg =
Nri.Ui.styled Html.div
"dismiss-button-container"
[ Css.position Css.relative
, Css.top (Css.px 5)
, Css.right Css.zero
, Css.padding (Css.px 25)
[ Css.padding (Css.px 25)
]
[]
[ Html.button
@ -195,13 +187,13 @@ icon config =
notification : String -> Html msg
notification message =
Html.div
[ css
[ Css.fontSize (Css.px 20)
, Css.fontWeight (Css.int 700)
, Css.lineHeight (Css.px 25)
, Css.maxWidth (Css.px 600)
, Nri.Ui.Fonts.V1.baseFont
]
Nri.Ui.styled Html.div
"banner-alert-notification"
[ Css.fontSize (Css.px 20)
, Css.fontWeight (Css.int 700)
, Css.lineHeight (Css.px 27)
, Css.maxWidth (Css.px 600)
, Nri.Ui.Fonts.V1.baseFont
]
[]
[ Html.text message ]

32
src/Nri/Ui/BannerAlert/V5.elm
View File

@ -34,7 +34,7 @@ alert =
{ backgroundColor = Colors.sunshine
, color = Colors.navy
, icon =
{ backgroundColor = Colors.yellow
{ backgroundColor = Colors.ochre
, height = Css.px 25
, asset = exclamationMark
}
@ -132,6 +132,7 @@ banner config bannerContent dismissMsg =
[ css
[ Css.displayFlex
, Css.justifyContent Css.center
, Css.alignItems Css.center
, Css.backgroundColor config.backgroundColor
, Css.color config.color
]
@ -154,13 +155,7 @@ banner config bannerContent dismissMsg =
[ icon config.icon
, notification alertMessage
]
, Html.span
[ css
[ Css.display Css.inlineBlock
, Css.float Css.right
]
]
[ maybeDismissButton ]
, maybeDismissButton
]
@ -168,10 +163,7 @@ dismissButton : msg -> Html msg
dismissButton msg =
Nri.Ui.styled Html.div
"dismiss-button-container"
[ Css.position Css.relative
, Css.top (Css.px 5)
, Css.right Css.zero
, Css.padding (Css.px 25)
[ Css.padding (Css.px 25)
]
[]
[ Html.button
@ -226,15 +218,15 @@ icon config =
notification : Html msg -> Html msg
notification message =
Html.div
[ css
[ Css.fontSize (Css.px 20)
, Css.fontWeight (Css.int 700)
, Css.lineHeight (Css.px 25)
, Css.maxWidth (Css.px 600)
, Nri.Ui.Fonts.V1.baseFont
]
Nri.Ui.styled Html.div
"banner-alert-notification"
[ Css.fontSize (Css.px 20)
, Css.fontWeight (Css.int 700)
, Css.lineHeight (Css.px 27)
, Css.maxWidth (Css.px 600)
, Nri.Ui.Fonts.V1.baseFont
]
[]
[ message ]

4
styleguide-app/Examples/BannerAlert.elm
View File

@ -13,7 +13,7 @@ import Nri.Ui.BannerAlert.V5 as BannerAlert
example : (Msg -> msg) -> State -> ModuleExample msg
example parentMsg state =
{ name = "Nri.Ui.BannerAlert.V4"
{ name = "Nri.Ui.BannerAlert.V5"
, category = Messaging
, content =
[ if state.show then
@ -37,7 +37,7 @@ example parentMsg state =
{ prefixText = "Click "
, linkText = "here"
, linkUrl = "http://www.noredink.com"
, postfixText = " to check out NoRedInk"
, postfixText = " to check out NoRedInk."
, target = BannerAlert.Blank
}
)