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

Description

Synopsis

type Style = (MisoString, MisoString)
type Styles = Map MisoString MisoString
data StyleSheet
style_ :: [Style] -> Attribute action
styleInline_ :: MisoString -> Attribute action
sheet_ :: [(MisoString, Styles)] -> StyleSheet
(=:) :: 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
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
aliceblue :: Color
antiquewhite :: Color
aqua :: Color
aquamarine :: Color
azure :: Color
beige :: Color
bisque :: Color
black :: Color
blanchedalmond :: Color
blue :: Color
blueviolet :: Color
brown :: Color
burlywood :: Color
cadetblue :: Color
chartreuse :: Color
chocolate :: Color
coral :: Color
cornflowerblue :: Color
cornsilk :: Color
crimson :: Color
cyan :: Color
darkblue :: Color
darkcyan :: Color
darkgoldenrod :: Color
darkgray :: Color
darkgreen :: Color
darkgrey :: Color
darkkhaki :: Color
darkmagenta :: Color
darkolivegreen :: Color
darkorange :: Color
darkorchid :: Color
darkred :: Color
darksalmon :: Color
darkseagreen :: Color
darkslateblue :: Color
darkslategray :: Color
darkslategrey :: Color
darkturquoise :: Color
darkviolet :: Color
deeppink :: Color
deepskyblue :: Color
dimgray :: Color
dimgrey :: Color
dodgerblue :: Color
firebrick :: Color
floralwhite :: Color
forestgreen :: Color
fuchsia :: Color
gainsboro :: Color
ghostwhite :: Color
gold :: Color
goldenrod :: Color
gray :: Color
green :: Color
greenyellow :: Color
grey :: Color
hex :: MisoString -> Color
honeydew :: Color
hotpink :: Color
hsl :: Int -> Int -> Int -> Color
indianred :: Color
indigo :: Color
ivory :: Color
khaki :: Color
lavender :: Color
lavenderblush :: Color
lawngreen :: Color
lemonchiffon :: Color
lightblue :: Color
lightcoral :: Color
lightcyan :: Color
lightgoldenrodyellow :: Color
lightgray :: Color
lightgreen :: Color
lightgrey :: Color
lightpink :: Color
lightsalmon :: Color
lightseagreen :: Color
lightskyblue :: Color
lightslategray :: Color
lightslategrey :: Color
lightsteelblue :: Color
lightyellow :: Color
lime :: Color
limegreen :: Color
linen :: Color
magenta :: Color
maroon :: Color
mediumaquamarine :: Color
mediumblue :: Color
mediumorchid :: Color
mediumpurple :: Color
mediumseagreen :: Color
mediumslateblue :: Color
mediumspringgreen :: Color
mediumturquoise :: Color
mediumvioletred :: Color
midnightblue :: Color
mintcream :: Color
mistyrose :: Color
moccasin :: Color
navajowhite :: Color
navy :: Color
oldlace :: Color
olive :: Color
olivedrab :: Color
orange :: Color
orangered :: Color
orchid :: Color
palegoldenrod :: Color
palegreen :: Color
paleturquoise :: Color
palevioletred :: Color
papayawhip :: Color
peachpuff :: Color
peru :: Color
pink :: Color
plum :: Color
powderblue :: Color
purple :: Color
red :: Color
renderColor :: Color -> MisoString
rgba :: Int -> Int -> Int -> Double -> Color
rosybrown :: Color
royalblue :: Color
saddlebrown :: Color
salmon :: Color
sandybrown :: Color
seagreen :: Color
seashell :: Color
sienna :: Color
silver :: Color
skyblue :: Color
slateblue :: Color
slategray :: Color
slategrey :: Color
snow :: Color
springgreen :: Color
steelblue :: Color
tan :: Color
teal :: Color
thistle :: Color
tomato :: Color
transparent :: Color
turquoise :: Color
violet :: Color
wheat :: Color
white :: Color
whitesmoke :: Color
yellow :: Color
yellowgreen :: Color
data Color
- = RGBA Int Int Int Double
- | HSL Int Int Int
- | Hex MisoString
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

Types

type Style = (MisoString, MisoString) Source #

Type for a CSS Style

type Styles = Map MisoString MisoString Source #

Type for a Map of CSS Style. Used with StyleSheet. It maps CSS properties to their values.

data StyleSheet Source #

Type for a CSS style on native. Internally it maps From CSS selectors to Styles.

testSheet :: StyleSheet
testSheet =
  sheet_
  [ ".name" =:
      style_
      [ backgroundColor "red"
      , alignContent "top"
      ]
  , "#container" =:
      style_
      [ backgroundColor "blue"
      , alignContent "center"
      ]
  ]

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_ :: [(MisoString, Styles)] -> StyleSheet Source #

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

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

Example shown below.

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

Constructors

RGBA Int Int Int Double
HSL Int Int Int
Hex MisoString

Instances

Instances details

Show Color Source #
Instance details Defined in Miso.Style.Color Methods showsPrec :: Int -> Color -> ShowS # show :: Color -> String # showList :: [Color] -> ShowS #
Eq Color Source #
Instance details Defined in Miso.Style.Color Methods (==) :: Color -> Color -> Bool # (/=) :: Color -> Color -> Bool #