Here is where you an create your style sheet.
One of the first concepts of style-elements
is that layout, position, and width/height all live in your view through the Element
module.
Your style sheet handles everything else!
Check out the other Style
modules for other properties.
Check out Basic.elm
in the examples folder to see an example of a full style sheet.
style-elements
does away with CSS selectors entirely. Every style gets one identifier, which is ultimately rendered as a class
.
Internal.Batchable.Batchable (Internal.Model.Style class variation)
variation : variation -> List (Property class Basics.Never) -> Property class variation
Internal.Model.Property class variation
prop : String -> String -> Property class variation
opacity : Basics.Float -> Property class variation
cursor : String -> Property class variation
Internal.Model.Font
Internal.Model.Color
rgb : Basics.Float -> Basics.Float -> Basics.Float -> Color
Takes values from 0 to 1 to make a nontransparent color in the rgb space.
rgba : Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Color
Takes values from 0 to 1 to make a transparent color in the rgb space.
Internal.Model.Transformation
origin : Basics.Float -> Basics.Float -> Basics.Float -> Property class variation
Set the transform origin.
translate : Basics.Float -> Basics.Float -> Basics.Float -> Property class variation
Units are always as pixels
rotate : Basics.Float -> Property class variation
Units always rendered as radians
.
Use degrees
or turns
from the standard library if you want to use a different set of units.
rotateAround : ( Basics.Float, Basics.Float, Basics.Float ) -> Basics.Float -> Property class variation
Rotate around a vector.
Angle units always rendered as radians
.
Use degrees
or turns
from the standard library if you want to use a different set of units.
scale : Basics.Float -> Basics.Float -> Basics.Float -> Property class variation
Psuedo classes can be nested.
hover : List (Property class variation) -> Property class variation
Example:
style Button
[ Color.background blue
, hover
[ Color.background red
]
]
checked : List (Property class variation) -> Property class variation
focus : List (Property class variation) -> Property class variation
pseudo : String -> List (Property class variation) -> Property class variation
Internal.Model.StyleSheet style variation
styleSheet : List (Style elem variation) -> StyleSheet elem variation
styleSheetWith : List Option -> List (Style elem variation) -> StyleSheet elem variation
Stylesheet options
importUrl : String -> Style class variation
importCss : String -> Style class variation