Copyright	(C) 2016-2025 David M. Johnson
License	BSD3-style (see the file LICENSE)
Maintainer	David M. Johnson <code@dmj.io>
Stability	experimental
Portability	non-portable
Safe Haskell	None
Language	Haskell2010

Miso.Style

Contents

Types
Smart Constructor
Render
Combinators
Colors
Units
Animation
Media Queries

Description

Synopsis

module Miso.Style.Types
style_ :: [Style] -> Attribute action
styleInline_ :: MisoString -> Attribute action
sheet_ :: [Styles] -> StyleSheet
selector_ :: MisoString -> [Style] -> Styles
(=:) :: k -> v -> (k, v)
renderStyleSheet :: StyleSheet -> MisoString
alignContent :: MisoString -> Style
alignItems :: MisoString -> Style
alignSelf :: MisoString -> Style
animationDelay :: MisoString -> Style
animationDirection :: MisoString -> Style
animationDuration :: MisoString -> Style
animationFillMode :: MisoString -> Style
animationIterationCount :: MisoString -> Style
animation :: MisoString -> Style
animationName :: MisoString -> Style
animationPlayState :: MisoString -> Style
animationTimingFunction :: MisoString -> Style
aspectRatio :: MisoString -> Style
backgroundClip :: MisoString -> Style
backgroundColor :: Color -> Style
backgroundImage :: MisoString -> Style
background :: MisoString -> Style
backgroundOrigin :: MisoString -> Style
backgroundPosition :: MisoString -> Style
backgroundRepeat :: MisoString -> Style
backgroundSize :: MisoString -> Style
borderBottomColor :: Color -> Style
borderBottomLeftRadius :: MisoString -> Style
borderBottom :: MisoString -> Style
borderBottomRightRadius :: MisoString -> Style
borderBottomStyle :: MisoString -> Style
borderBottomWidth :: MisoString -> Style
borderColor :: Color -> Style
borderEndEndRadius :: MisoString -> Style
borderEndStartRadius :: MisoString -> Style
borderInlineEndColor :: Color -> Style
borderInlineEndStyle :: MisoString -> Style
borderInlineEndWidth :: MisoString -> Style
borderInlineStartColor :: Color -> Style
borderInlineStartStyle :: MisoString -> Style
borderInlineStartWidth :: MisoString -> Style
borderLeftColor :: Color -> Style
borderLeft :: MisoString -> Style
borderLeftStyle :: MisoString -> Style
borderLeftWidth :: MisoString -> Style
border :: MisoString -> Style
borderRadius :: MisoString -> Style
borderRightColor :: Color -> Style
borderRight :: MisoString -> Style
borderRightStyle :: MisoString -> Style
borderRightWidth :: MisoString -> Style
borderStartEndRadius :: MisoString -> Style
borderStartStartRadius :: MisoString -> Style
borderStyle :: MisoString -> Style
borderTopColor :: Color -> Style
borderTopLeftRadius :: MisoString -> Style
borderTop :: MisoString -> Style
borderTopRightRadius :: MisoString -> Style
borderTopStyle :: MisoString -> Style
borderTopWidth :: MisoString -> Style
borderWidth :: MisoString -> Style
bottom :: MisoString -> Style
boxShadow :: MisoString -> Style
boxSizing :: MisoString -> Style
clipPath :: MisoString -> Style
color :: Color -> Style
columnGap :: MisoString -> Style
cssVariable :: MisoString -> Style
cursor :: MisoString -> Style
direction :: MisoString -> Style
display :: MisoString -> Style
filter :: MisoString -> Style
flexBasis :: MisoString -> Style
flexDirection :: MisoString -> Style
flexFlow :: MisoString -> Style
flexGrow :: MisoString -> Style
flex :: MisoString -> Style
flexShrink :: MisoString -> Style
flexWrap :: MisoString -> Style
fontFamily :: MisoString -> Style
fontSize :: MisoString -> Style
fontStyle :: MisoString -> Style
fontWeight :: MisoString -> Style
gap :: MisoString -> Style
gridAutoColumns :: MisoString -> Style
gridAutoFlow :: MisoString -> Style
gridAutoRows :: MisoString -> Style
gridColumnEnd :: MisoString -> Style
gridColumnSpan :: MisoString -> Style
gridColumnStart :: MisoString -> Style
gridRowEnd :: MisoString -> Style
gridRowSpan :: MisoString -> Style
gridRowStart :: MisoString -> Style
gridTemplateColumns :: MisoString -> Style
gridTemplateRows :: MisoString -> Style
height :: MisoString -> Style
imageRendering :: MisoString -> Style
insetInlineEnd :: MisoString -> Style
insetInlineStart :: MisoString -> Style
justifyContent :: MisoString -> Style
justifyItems :: MisoString -> Style
justifySelf :: MisoString -> Style
left :: MisoString -> Style
letterSpacing :: MisoString -> Style
linearCrossGravity :: MisoString -> Style
linearDirection :: MisoString -> Style
linearGravity :: MisoString -> Style
linearLayoutGravity :: MisoString -> Style
linearWeight :: MisoString -> Style
linearWeightSum :: MisoString -> Style
lineHeight :: MisoString -> Style
marginBottom :: MisoString -> Style
marginInlineEnd :: MisoString -> Style
marginInlineStart :: MisoString -> Style
marginLeft :: MisoString -> Style
margin :: MisoString -> Style
marginRight :: MisoString -> Style
marginTop :: MisoString -> Style
maskImage :: MisoString -> Style
mask :: MisoString -> Style
maxHeight :: MisoString -> Style
maxWidth :: MisoString -> Style
minHeight :: MisoString -> Style
minWidth :: MisoString -> Style
opacity :: MisoString -> Style
order :: MisoString -> Style
overflow :: MisoString -> Style
overflowX :: MisoString -> Style
overflowY :: MisoString -> Style
paddingBottom :: MisoString -> Style
paddingInlineEnd :: MisoString -> Style
paddingInlineStart :: MisoString -> Style
paddingLeft :: MisoString -> Style
padding :: MisoString -> Style
paddingRight :: MisoString -> Style
paddingTop :: MisoString -> Style
perspective :: MisoString -> Style
position :: MisoString -> Style
relativeAlignBottom :: MisoString -> Style
relativeAlignInlineEnd :: MisoString -> Style
relativeAlignInlineStart :: MisoString -> Style
relativeAlignLeft :: MisoString -> Style
relativeAlignRight :: MisoString -> Style
relativeAlignTop :: MisoString -> Style
relativeBottomOf :: MisoString -> Style
relativeCenter :: MisoString -> Style
relativeId :: MisoString -> Style
relativeInlineEndOf :: MisoString -> Style
relativeInlineStartOf :: MisoString -> Style
relativeLayoutOnce :: MisoString -> Style
relativeLeftOf :: MisoString -> Style
relativeRightOf :: MisoString -> Style
relativeTopOf :: MisoString -> Style
right :: MisoString -> Style
rowGap :: MisoString -> Style
textAlign :: MisoString -> Style
textDecoration :: MisoString -> Style
textIndent :: MisoString -> Style
textOverflow :: MisoString -> Style
textShadow :: MisoString -> Style
textStrokeColor :: Color -> Style
textStroke :: MisoString -> Style
textStrokeWidth :: MisoString -> Style
top :: MisoString -> Style
transform :: MisoString -> Style
transformOrigin :: MisoString -> Style
transitionDelay :: MisoString -> Style
transitionDuration :: MisoString -> Style
transition :: MisoString -> Style
transitionProperty :: MisoString -> Style
transitionTimingFunction :: MisoString -> Style
verticalAlign :: MisoString -> Style
visibility :: MisoString -> Style
whiteSpace :: MisoString -> Style
width :: MisoString -> Style
wordBreak :: MisoString -> Style
xAutoFontSize :: MisoString -> Style
xAutoFontSizePresetSizes :: MisoString -> Style
xHandleColor :: Color -> Style
xHandleSize :: MisoString -> Style
zIndex :: MisoString -> Style
module Miso.Style.Color
px :: Double -> MisoString
ppx :: Double -> MisoString
pct :: Double -> MisoString
pt :: Double -> MisoString
vw :: Double -> MisoString
vh :: Double -> MisoString
deg :: Double -> MisoString
turn :: Double -> MisoString
rad :: Double -> MisoString
rpx :: Double -> MisoString
rem :: Double -> MisoString
em :: Double -> MisoString
s :: Double -> MisoString
ms :: Double -> MisoString
keyframes_ :: MisoString -> [(MisoString, [Style])] -> Styles
media_ :: MisoString -> [(MisoString, [Style])] -> Styles

Types

module Miso.Style.Types

Smart Constructor

style_ :: [Style] -> Attribute action Source #

style_ is an attribute that will set the style attribute of the associated DOM node to attrs.

style attributes not contained in attrs will be deleted.

import qualified Data.Map as M
div_ [ style_ [ backgroundColor "red" ] [ ]

https://developer.mozilla.org/en-US/docs/Web/CSS

styleInline_ :: MisoString -> Attribute action Source #

Set "style" property

view m = div_ [ styleInline_ "background-color:red;color:blue;" ] [ "foo" ]

https://developer.mozilla.org/en-US/docs/Web/CSS

sheet_ :: [Styles] -> StyleSheet Source #

selector_ :: MisoString -> [Style] -> Styles Source #

Used when constructing a StyleSheet

sheet_
  [ selector_ ".name"
    [ backgroundColor red
    , alignContent "top"
    ]
  ]

(=:) :: k -> v -> (k, v) Source #

Smart constructor for Attributes. This function is helpful when constructing Style.

Example shown below.

div_ [ style_  [ "background" =: "red" ] ] []

testKeyFrame :: Styles
testKeyFrame = keyframes "slide-in"
  [ "from" =:
      [ transform "translateX(0%)"
      ]
  , "to" =:
      [ transform "translateX(100%)"
      , backgroundColor red
      , backgroundSize "10px"
      , backgroundRepeat "true"
      ]
  , pct 10 =:
    [ "foo" =: "bar"
    ]
 ]

Media Queries

media_ :: MisoString -> [(MisoString, [Style])] -> Styles Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/@media

media_ "screen and (min-width: 480px)"
  [ "header" =:
      [ height "auto"
      ]
  , "ul" =:
      [ display "block"
      ]
  ]

Types

Smart Constructor

Render

Combinators

Colors

Units

Animation

Media Queries