Merge remote-tracking branch 'origin/master' into FAB/accordion-v2

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)
                 ]
             ]

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)
         ]
 
 

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"
         ]