mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-09-21 20:27:36 +03:00
Adds narrow spacing helper
This commit is contained in:
parent
76947a7c2d
commit
cf1d697051
@ -397,6 +397,10 @@ controlSettings =
|
|||||||
|> asChoice
|
|> asChoice
|
||||||
, ( "quizEngineCenteredContent", Spacing.quizEngineCenteredContent )
|
, ( "quizEngineCenteredContent", Spacing.quizEngineCenteredContent )
|
||||||
|> asChoice
|
|> asChoice
|
||||||
|
, ( "centeredNarrowContentWithSidePadding", Spacing.centeredNarrowContentWithSidePadding )
|
||||||
|
|> asChoice
|
||||||
|
, ( "narrowCenteredContent", Spacing.narrowCenteredContent )
|
||||||
|
|> asChoice
|
||||||
, ( "centeredContentWithSidePaddingAndCustomWidth"
|
, ( "centeredContentWithSidePaddingAndCustomWidth"
|
||||||
, Control.map
|
, Control.map
|
||||||
(\value ->
|
(\value ->
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
module Nri.Ui.Spacing.V1 exposing
|
module Nri.Ui.Spacing.V1 exposing
|
||||||
( centeredContentWithSidePadding, centeredContent
|
( centeredContentWithSidePadding, centeredContent
|
||||||
, centeredQuizEngineContentWithSidePadding, quizEngineCenteredContent
|
, centeredQuizEngineContentWithSidePadding, quizEngineCenteredContent
|
||||||
|
, centeredNarrowContentWithSidePadding, narrowCenteredContent
|
||||||
, centeredContentWithSidePaddingAndCustomWidth, centeredContentWithCustomWidth
|
, centeredContentWithSidePaddingAndCustomWidth, centeredContentWithCustomWidth
|
||||||
, pageTopWhitespace, pageTopWhitespacePx
|
, pageTopWhitespace, pageTopWhitespacePx
|
||||||
, pageSideWhitespace, pageSideWhitespacePx
|
, pageSideWhitespace, pageSideWhitespacePx
|
||||||
@ -8,13 +9,16 @@ module Nri.Ui.Spacing.V1 exposing
|
|||||||
, verticalSpacerPx, horizontalSpacerPx
|
, verticalSpacerPx, horizontalSpacerPx
|
||||||
)
|
)
|
||||||
|
|
||||||
{-|
|
{-| Patch changes:
|
||||||
|
|
||||||
|
- added centeredNarrowContentWithSidePadding, narrowCenteredContent
|
||||||
|
|
||||||
|
|
||||||
## Center a container on the page:
|
## Center a container on the page:
|
||||||
|
|
||||||
@docs centeredContentWithSidePadding, centeredContent
|
@docs centeredContentWithSidePadding, centeredContent
|
||||||
@docs centeredQuizEngineContentWithSidePadding, quizEngineCenteredContent
|
@docs centeredQuizEngineContentWithSidePadding, quizEngineCenteredContent
|
||||||
|
@docs centeredNarrowContentWithSidePadding, narrowCenteredContent
|
||||||
@docs centeredContentWithSidePaddingAndCustomWidth, centeredContentWithCustomWidth
|
@docs centeredContentWithSidePaddingAndCustomWidth, centeredContentWithCustomWidth
|
||||||
|
|
||||||
|
|
||||||
@ -118,6 +122,30 @@ quizEngineCenteredContent =
|
|||||||
centeredContentWithCustomWidth MediaQuery.quizEngineBreakpoint
|
centeredContentWithCustomWidth MediaQuery.quizEngineBreakpoint
|
||||||
|
|
||||||
|
|
||||||
|
{-| Use this style on pages with a narrow (500px) breakpoint.
|
||||||
|
|
||||||
|
This is identical to `content`, except that it uses the narrow breakpoint instead of the mobile breakpoint.
|
||||||
|
|
||||||
|
If you have a container that should snap flush to the edges on mobile, this isn't the right style to use.
|
||||||
|
|
||||||
|
-}
|
||||||
|
centeredNarrowContentWithSidePadding : Style
|
||||||
|
centeredNarrowContentWithSidePadding =
|
||||||
|
centeredContentWithSidePaddingAndCustomWidth MediaQuery.narrowMobileBreakpoint
|
||||||
|
|
||||||
|
|
||||||
|
{-| Use this style on pages with a narrow (500px) breakpoint.
|
||||||
|
|
||||||
|
This is identical to `centeredContent`, except that it uses the narrow breakpoint instead of the mobile breakpoint.
|
||||||
|
|
||||||
|
This style does not add side padding on mobile, which means that this can be used for containers that should snap flush to the edges of the mobile viewport.
|
||||||
|
|
||||||
|
-}
|
||||||
|
narrowCenteredContent : Style
|
||||||
|
narrowCenteredContent =
|
||||||
|
centeredContentWithCustomWidth MediaQuery.narrowMobileBreakpoint
|
||||||
|
|
||||||
|
|
||||||
{-| Convenience for adding the appriopriate amount of whitespace on the sides of a full-width container on the page or on the page with side padding.
|
{-| Convenience for adding the appriopriate amount of whitespace on the sides of a full-width container on the page or on the page with side padding.
|
||||||
-}
|
-}
|
||||||
pageSideWhitespace : Style
|
pageSideWhitespace : Style
|
||||||
|
Loading…
Reference in New Issue
Block a user