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
- 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
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" ] [ ]
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
module Miso.Style.Color
Units
px :: Double -> MisoString Source #
ppx :: Double -> MisoString Source #
pct :: Double -> MisoString Source #
pt :: Double -> MisoString Source #
vw :: Double -> MisoString Source #
vh :: Double -> MisoString Source #
deg :: Double -> MisoString Source #
turn :: Double -> MisoString Source #
rad :: Double -> MisoString Source #
rpx :: Double -> MisoString Source #
rem :: Double -> MisoString Source #
em :: Double -> MisoString Source #
s :: Double -> MisoString Source #
ms :: Double -> MisoString Source #