Major version changes:
Patch changes:
not
queries to not overlap with the regular breakpoint queriesStandard media queries for responsive pages.
import Css
import Css.Media as Media
import Nri.Ui.MediaQuery.V1 as MediaQuery
style : Css.Style
style =
Media.withMedia
[ MediaQuery.mobile ]
[ Css.padding (Css.px 2)
]
anyMotion : List Css.Style -> Css.Style
prefersReducedMotion : List Css.Style -> Css.Style
highContrastMode : List Css.Style -> Css.Style
notHighContrastMode : List Css.Style -> Css.Style
withViewport : Maybe Css.Px -> Maybe Css.Px -> List Css.Style -> Css.Style
MediaQuery.withViewport
MediaQuery.narrowMobileBreakpoint
MediaQuery.quizEngineBreakpoint
[ Css.flexDirection Css.column
]
mobile : Css.Media.MediaQuery
Styles using the mobileBreakpoint
value as the maxWidth.
notMobile : Css.Media.MediaQuery
Styles using the mobileBreakpoint
value as the minWidth.
mobileBreakpoint : Css.Px
1000px
quizEngineMobile : Css.Media.MediaQuery
Styles using the quizEngineBreakpoint
value as the maxWidth.
notQuizEngineMobile : Css.Media.MediaQuery
Styles using the quizEngineBreakpoint
value as the minWidth.
quizEngineBreakpoint : Css.Px
750px
narrowMobile : Css.Media.MediaQuery
Styles using the narrowMobileBreakpoint
value as the maxWidth
notNarrowMobile : Css.Media.MediaQuery
Styles using the quizEngineBreakpoint
value as the minWidth.
narrowMobileBreakpoint : Css.Px
500px