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
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 -> Int -> 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
Types
type Style = (MisoString, MisoString) Source #
type Styles = Map MisoString MisoString Source #
data StyleSheet Source #
Type for a CSS style on native
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" ] [ ]
styleInline_ :: MisoString -> Attribute action Source #
Set "style" property
view m = div_ [ styleInline_ "background-color:red;color:blue;" ] [ "foo" ]
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" ] ] []
Render
Combinators
alignContent :: MisoString -> Style Source #
alignItems :: MisoString -> Style Source #
alignSelf :: MisoString -> Style Source #
animationDelay :: MisoString -> Style Source #
animationDirection :: MisoString -> Style Source #
animationDuration :: MisoString -> Style Source #
animationFillMode :: MisoString -> Style Source #
animation :: MisoString -> Style Source #
animationName :: MisoString -> Style Source #
animationPlayState :: MisoString -> Style Source #
aspectRatio :: MisoString -> Style Source #
backgroundClip :: MisoString -> Style Source #
backgroundColor :: Color -> Style Source #
backgroundImage :: MisoString -> Style Source #
background :: MisoString -> Style Source #
backgroundOrigin :: MisoString -> Style Source #
backgroundPosition :: MisoString -> Style Source #
backgroundRepeat :: MisoString -> Style Source #
backgroundSize :: MisoString -> Style Source #
borderBottomColor :: Color -> Style Source #
borderBottom :: MisoString -> Style Source #
borderBottomStyle :: MisoString -> Style Source #
borderBottomWidth :: MisoString -> Style Source #
borderColor :: Color -> Style Source #
borderEndEndRadius :: MisoString -> Style Source #
borderInlineEndColor :: Color -> Style Source #
borderInlineStartColor :: Color -> Style Source #
borderLeftColor :: Color -> Style Source #
borderLeft :: MisoString -> Style Source #
borderLeftStyle :: MisoString -> Style Source #
borderLeftWidth :: MisoString -> Style Source #
border :: MisoString -> Style Source #
borderRadius :: MisoString -> Style Source #
borderRightColor :: Color -> Style Source #
borderRight :: MisoString -> Style Source #
borderRightStyle :: MisoString -> Style Source #
borderRightWidth :: MisoString -> Style Source #
borderStyle :: MisoString -> Style Source #
borderTopColor :: Color -> Style Source #
borderTop :: MisoString -> Style Source #
borderTopStyle :: MisoString -> Style Source #
borderTopWidth :: MisoString -> Style Source #
borderWidth :: MisoString -> Style Source #
bottom :: MisoString -> Style Source #
boxShadow :: MisoString -> Style Source #
boxSizing :: MisoString -> Style Source #
clipPath :: MisoString -> Style Source #
columnGap :: MisoString -> Style Source #
cssVariable :: MisoString -> Style Source #
direction :: MisoString -> Style Source #
display :: MisoString -> Style Source #
filter :: MisoString -> Style Source #
flexBasis :: MisoString -> Style Source #
flexDirection :: MisoString -> Style Source #
flexFlow :: MisoString -> Style Source #
flexGrow :: MisoString -> Style Source #
flex :: MisoString -> Style Source #
flexShrink :: MisoString -> Style Source #
flexWrap :: MisoString -> Style Source #
fontFamily :: MisoString -> Style Source #
fontSize :: MisoString -> Style Source #
fontStyle :: MisoString -> Style Source #
fontWeight :: MisoString -> Style Source #
gap :: MisoString -> Style Source #
gridAutoColumns :: MisoString -> Style Source #
gridAutoFlow :: MisoString -> Style Source #
gridAutoRows :: MisoString -> Style Source #
gridColumnEnd :: MisoString -> Style Source #
gridColumnSpan :: MisoString -> Style Source #
gridColumnStart :: MisoString -> Style Source #
gridRowEnd :: MisoString -> Style Source #
gridRowSpan :: MisoString -> Style Source #
gridRowStart :: MisoString -> Style Source #
gridTemplateRows :: MisoString -> Style Source #
height :: MisoString -> Style Source #
imageRendering :: MisoString -> Style Source #
insetInlineEnd :: MisoString -> Style Source #
insetInlineStart :: MisoString -> Style Source #
justifyContent :: MisoString -> Style Source #
justifyItems :: MisoString -> Style Source #
justifySelf :: MisoString -> Style Source #
left :: MisoString -> Style Source #
letterSpacing :: MisoString -> Style Source #
linearCrossGravity :: MisoString -> Style Source #
linearDirection :: MisoString -> Style Source #
linearGravity :: MisoString -> Style Source #
linearWeight :: MisoString -> Style Source #
linearWeightSum :: MisoString -> Style Source #
lineHeight :: MisoString -> Style Source #
marginBottom :: MisoString -> Style Source #
marginInlineEnd :: MisoString -> Style Source #
marginInlineStart :: MisoString -> Style Source #
marginLeft :: MisoString -> Style Source #
margin :: MisoString -> Style Source #
marginRight :: MisoString -> Style Source #
marginTop :: MisoString -> Style Source #
maskImage :: MisoString -> Style Source #
mask :: MisoString -> Style Source #
maxHeight :: MisoString -> Style Source #
maxWidth :: MisoString -> Style Source #
minHeight :: MisoString -> Style Source #
minWidth :: MisoString -> Style Source #
opacity :: MisoString -> Style Source #
order :: MisoString -> Style Source #
overflow :: MisoString -> Style Source #
overflowX :: MisoString -> Style Source #
overflowY :: MisoString -> Style Source #
paddingBottom :: MisoString -> Style Source #
paddingInlineEnd :: MisoString -> Style Source #
paddingInlineStart :: MisoString -> Style Source #
paddingLeft :: MisoString -> Style Source #
padding :: MisoString -> Style Source #
paddingRight :: MisoString -> Style Source #
paddingTop :: MisoString -> Style Source #
perspective :: MisoString -> Style Source #
position :: MisoString -> Style Source #
relativeAlignLeft :: MisoString -> Style Source #
relativeAlignRight :: MisoString -> Style Source #
relativeAlignTop :: MisoString -> Style Source #
relativeBottomOf :: MisoString -> Style Source #
relativeCenter :: MisoString -> Style Source #
relativeId :: MisoString -> Style Source #
relativeLayoutOnce :: MisoString -> Style Source #
relativeLeftOf :: MisoString -> Style Source #
relativeRightOf :: MisoString -> Style Source #
relativeTopOf :: MisoString -> Style Source #
right :: MisoString -> Style Source #
rowGap :: MisoString -> Style Source #
textAlign :: MisoString -> Style Source #
textDecoration :: MisoString -> Style Source #
textIndent :: MisoString -> Style Source #
textOverflow :: MisoString -> Style Source #
textShadow :: MisoString -> Style Source #
textStrokeColor :: Color -> Style Source #
textStroke :: MisoString -> Style Source #
textStrokeWidth :: MisoString -> Style Source #
top :: MisoString -> Style Source #
transform :: MisoString -> Style Source #
transformOrigin :: MisoString -> Style Source #
transitionDelay :: MisoString -> Style Source #
transitionDuration :: MisoString -> Style Source #
transition :: MisoString -> Style Source #
transitionProperty :: MisoString -> Style Source #
verticalAlign :: MisoString -> Style Source #
visibility :: MisoString -> Style Source #
whiteSpace :: MisoString -> Style Source #
width :: MisoString -> Style Source #
wordBreak :: MisoString -> Style Source #
xAutoFontSize :: MisoString -> Style Source #
xHandleColor :: Color -> Style Source #
xHandleSize :: MisoString -> Style Source #
zIndex :: MisoString -> Style Source #
Colors
renderColor :: Color -> MisoString Source #