diff --git a/src/Nri/Ui/Modal/V11.elm b/src/Nri/Ui/Modal/V11.elm index bc6820fe..ca1aa592 100644 --- a/src/Nri/Ui/Modal/V11.elm +++ b/src/Nri/Ui/Modal/V11.elm @@ -408,7 +408,6 @@ modalStyles = , margin2 (px 50) auto -- Size - , minHeight (vh 40) , width (px 600) , backgroundColor Colors.white @@ -624,7 +623,7 @@ viewInnerContent ({ visibleTitle } as config) = [ Attrs.css [ Css.overflowY Css.auto , Css.overflowX Css.hidden - , Css.minHeight (Css.px 150) + , Css.minHeight (Css.px 50) , Css.maxHeight (Css.calc (Css.vh 100) Css.minus @@ -693,8 +692,8 @@ viewFooter children = , Css.flexDirection Css.column , Css.flexGrow (Css.int 2) , Css.flexWrap Css.noWrap - , Css.margin4 (Css.px 20) Css.zero Css.zero Css.zero - , Css.paddingBottom (Css.px 40) + , Css.margin4 (Css.px 30) Css.zero Css.zero Css.zero + , Css.paddingBottom (Css.px 30) , Css.width (Css.pct 100) ] ] diff --git a/styleguide-app/Example.elm b/styleguide-app/Example.elm index 24c15ccb..de63c02a 100644 --- a/styleguide-app/Example.elm +++ b/styleguide-app/Example.elm @@ -3,10 +3,12 @@ module Example exposing (Example, view, wrapMsg, wrapState) import AtomicDesignType exposing (AtomicDesignType) import Category exposing (Category) import Css exposing (..) +import Css.Global exposing (a, descendants) import Html.Styled as Html exposing (Html) import Html.Styled.Attributes as Attributes import KeyboardSupport exposing (KeyboardSupport) import Nri.Ui.Colors.V1 exposing (..) +import Nri.Ui.Fonts.V1 as Fonts import Nri.Ui.Html.Attributes.V2 as AttributeExtras exposing (targetBlank) @@ -99,16 +101,16 @@ view example = , alignItems center , justifyContent flexStart , flexWrap Css.wrap - , padding (px 4) - , backgroundColor glacier + , Fonts.baseFont + , descendants [ Css.Global.a [ textDecoration none ] ] ] ] [ Html.styled Html.h2 - [ color gray20 - , fontFamilies [ qt "Source Code Pro", "Consolas", "Courier", "monospace" ] + [ color navy , fontSize (px 20) , marginTop zero , marginBottom zero + , Fonts.baseFont ] [] [ Html.a @@ -129,7 +131,16 @@ view example = |> viewLink "Source" ] , KeyboardSupport.view example.keyboardSupport - , Html.div [ Attributes.css [ padding2 (px 20) zero ] ] (example.view example.state) + , Html.div + [ Attributes.css + [ padding (px 40) + , boxShadow5 zero (px 2) (px 4) zero (rgba 0 0 0 0.25) + , border3 (px 1) solid gray92 + , borderRadius (px 20) + , margin3 (px 10) zero (px 40) + ] + ] + (example.view example.state) ] diff --git a/styleguide-app/Main.elm b/styleguide-app/Main.elm index c6c7954a..9cc0f560 100644 --- a/styleguide-app/Main.elm +++ b/styleguide-app/Main.elm @@ -149,9 +149,10 @@ view_ model = (Dict.values model.moduleStates) mainContentHeader heading = - Heading.h2 + Heading.h1 [ Heading.customAttr (id "maincontent") , Heading.customAttr (tabindex -1) + , Heading.css [ marginBottom (px 30) ] ] [ Html.text heading ] in @@ -256,10 +257,11 @@ navigation route openAtomicDesignTypes = [ flexBasis (px 200) , backgroundColor Colors.gray96 , marginRight (px 40) - , padding (px 25) + , padding (px 20) , VendorPrefixed.value "position" "sticky" , top (px 55) , flexShrink zero + , borderRadius (px 8) ] , attribute "aria-label" "Main Navigation" ]