Apply global CSS to things like foreign DOM structures (e.g. generated from markdown) where you cannot add attributes.
This module relies on CSS selectors which are globally scoped and
bad for maintainability,
so definitely avoid using this module except when there is no reasonable way
do to it using Style
instead!
global : List Snippet -> Html.Styled.Html msg
Add global styles to the page. This compiles directly to a <style>
element.
Css.Preprocess.Snippet
class : String -> List Css.Preprocess.Style -> Snippet
global
[ class "login-form-button"
[ fontWeight normal
, color (rgb 128 64 32)
]
]
id : String -> List Css.Preprocess.Style -> Snippet
An id selector.
global
[ id "nav-bar"
[ width 960 px
, backgroundColor (rgb 123 42 208)
]
]
selector : String -> List Css.Preprocess.Style -> Snippet
A custom selector. Use this for things like attribute selectors and universal selectors.
global
[ selector "* [lang^=en]"
[ textDecoration underline
, color (rgb 7 7 7)
]
]
everything : List Css.Preprocess.Style -> Snippet
A *
selector.
class "Foo"
[ children
[ everything
[ color (rgb 14 15 16)
, borderRadius (px 5)
]
]
]
...compiles to:
.Foo > * {
color: rgb(14, 15, 16);
border-radius: 5px;
}
media : List Css.Media.MediaQuery -> List Snippet -> Snippet
Combines media queries into a @media
rule.
global
[ media [ only screen [ Media.minWidth (px 300) ] ]
[ footer [ Css.maxWidth (px 300) ] ]
]
The above code translates into the following CSS.
@media screen and (min-width: 300px) {
footer {
max-width: 300px;
}
}
mediaQuery : List String -> List Snippet -> Snippet
Manually specify a @media
rule using a List of strings.
mediaQuery [ "screen and (min-width: 320px)", "screen and (max-height: 400px)" ]
[ body [ fontSize (px 14) ] ]
The above code translates into the following CSS.
@media screen and (min-width: 320px), screen and (max-height: 400px) {
body {
font-size: 14px;
}
}
children : List Snippet -> Css.Preprocess.Style
Apply styles in a list of snippets to the direct children of a selector
typeSelector "div"
[ children
[ typeSelector "p"
[ fontSize (px 14)
]
]
]
The above code translates into the following CSS.
div > p {
font-size: 14px;
}
descendants : List Snippet -> Css.Preprocess.Style
Apply styles in a list of snippets to the descendants of a selector
typeSelector "div"
[ descendants
[ typeSelector "p"
[ fontSize (px 14)
]
]
]
The above code translates into the following CSS.
div p {
font-size: 14px;
}
adjacentSiblings : List Snippet -> Css.Preprocess.Style
Apply styles in a list of snippets to the adjacent siblings of a selector
typeSelector "div"
[ adjacentSiblings
[ typeSelector "p"
[ fontSize (px 14)
]
]
]
The above code translates into the following CSS.
div + p {
font-size: 14px;
}
generalSiblings : List Snippet -> Css.Preprocess.Style
Apply styles in a list of snippets to the general siblings of a selector
typeSelector "div"
[ generalSiblings
[ typeSelector "p"
[ fontSize (px 14)
]
]
]
The above code translates into the following CSS.
div ~ p {
font-size: 14px;
}
each : List (List Css.Preprocess.Style -> Snippet) -> List Css.Preprocess.Style -> Snippet
Apply a list of styles to multiple selectors
each [ typeSelector "div", typeSelector "p" ]
[ fontSize (px 14)
]
The above code translates into the following CSS.
div {
font-size: 14px;
}
p {
font-size: 14px;
}
withAttribute : String -> List Css.Preprocess.Style -> Css.Preprocess.Style
Apply styles to the current selector plus an attribute selector
typeSelector "div"
[ fontSize (px 14)
, withAttribute "data-some-attribute"
[ display none
]
, withAttribute "data-hello=world"
[ color red
]
]
The above code translates into the following CSS.
div {
font-size: 14px;
}
div[data-some-attribute] {
display: none;
}
div[data-hello=world] {
color: red;
}
withClass : String -> List Css.Preprocess.Style -> Css.Preprocess.Style
Apply styles to the current selector plus an additional class
typeSelector "div"
[ fontSize (px 14)
, withClass "is-bold"
[ fontWeight bold
]
]
The above code translates into the following CSS.
div {
font-size: 14px;
}
div.is-bold {
font-weight: bold;
}
typeSelector : String -> List Css.Preprocess.Style -> Snippet
Define a custom element.
global
[ typeSelector "aside" [ display block ]
]
...outputs
aside {
display: block;
}
html : List Css.Preprocess.Style -> Snippet
Selector for a html element.
body : List Css.Preprocess.Style -> Snippet
Selector for a body element.
article : List Css.Preprocess.Style -> Snippet
Selector for an article element.
header : List Css.Preprocess.Style -> Snippet
Selector for a header element.
footer : List Css.Preprocess.Style -> Snippet
Selector for a footer element.
h1 : List Css.Preprocess.Style -> Snippet
Selector for an h1 element.
h2 : List Css.Preprocess.Style -> Snippet
Selector for an h2 element.
h3 : List Css.Preprocess.Style -> Snippet
Selector for an h3 element.
h4 : List Css.Preprocess.Style -> Snippet
Selector for an h4 element.
h5 : List Css.Preprocess.Style -> Snippet
Selector for an h5 element.
h6 : List Css.Preprocess.Style -> Snippet
Selector for an h6 element.
nav : List Css.Preprocess.Style -> Snippet
Selector for a nav element.
menu : List Css.Preprocess.Style -> Snippet
Selector for a menu element.
section : List Css.Preprocess.Style -> Snippet
Selector for a section element.
aside : List Css.Preprocess.Style -> Snippet
Selector for a aside element.
time : List Css.Preprocess.Style -> Snippet
Selector for a time element.
details : List Css.Preprocess.Style -> Snippet
Selector for a details element.
summary : List Css.Preprocess.Style -> Snippet
Selector for a summary element.
div : List Css.Preprocess.Style -> Snippet
Selector for a div element.
hr : List Css.Preprocess.Style -> Snippet
Selector for an hr element.
li : List Css.Preprocess.Style -> Snippet
Selector for an li element.
main_ : List Css.Preprocess.Style -> Snippet
Selector for a main element.
ol : List Css.Preprocess.Style -> Snippet
Selector for an ol element.
p : List Css.Preprocess.Style -> Snippet
Selector for a p element.
ul : List Css.Preprocess.Style -> Snippet
Selector for a ul element.
pre : List Css.Preprocess.Style -> Snippet
Selector for a pre element.
dl : List Css.Preprocess.Style -> Snippet
Selector for a dl element.
<https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl>
dt : List Css.Preprocess.Style -> Snippet
Selector for a dt element.
<https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dt>
dd : List Css.Preprocess.Style -> Snippet
Selector for a dd element.
<https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dd>
blockquote : List Css.Preprocess.Style -> Snippet
Selector for a blockquote element.
a : List Css.Preprocess.Style -> Snippet
Selector for an <a>
element.
code : List Css.Preprocess.Style -> Snippet
Selector for a code element.
small : List Css.Preprocess.Style -> Snippet
Selector for a small element.
span : List Css.Preprocess.Style -> Snippet
Selector for a span element.
strong : List Css.Preprocess.Style -> Snippet
Selector for a strong element.
i : List Css.Preprocess.Style -> Snippet
Selector for a i element.
em : List Css.Preprocess.Style -> Snippet
Selector for a em element.
q : List Css.Preprocess.Style -> Snippet
Selector for a q element.
img : List Css.Preprocess.Style -> Snippet
Selector for a img element.
audio : List Css.Preprocess.Style -> Snippet
Selector for an audio element.
video : List Css.Preprocess.Style -> Snippet
Selector for a video element.
canvas : List Css.Preprocess.Style -> Snippet
Selector for a canvas element.
caption : List Css.Preprocess.Style -> Snippet
Selector for a caption element.
col : List Css.Preprocess.Style -> Snippet
Selector for a col element.
colgroup : List Css.Preprocess.Style -> Snippet
Selector for a colgroup element.
table : List Css.Preprocess.Style -> Snippet
Selector for a table element.
tbody : List Css.Preprocess.Style -> Snippet
Selector for a tbody element.
td : List Css.Preprocess.Style -> Snippet
Selector for a td element.
tfoot : List Css.Preprocess.Style -> Snippet
Selector for a tfoot element.
th : List Css.Preprocess.Style -> Snippet
Selector for a th element.
thead : List Css.Preprocess.Style -> Snippet
Selector for a thead element.
tr : List Css.Preprocess.Style -> Snippet
Selector for a tr element.
button : List Css.Preprocess.Style -> Snippet
Selector for a button element.
fieldset : List Css.Preprocess.Style -> Snippet
Selector for a fieldset element.
form : List Css.Preprocess.Style -> Snippet
Selector for a form element.
input : List Css.Preprocess.Style -> Snippet
Selector for an input element.
label : List Css.Preprocess.Style -> Snippet
Selector for a label element.
legend : List Css.Preprocess.Style -> Snippet
Selector for a legend element.
optgroup : List Css.Preprocess.Style -> Snippet
Selector for an optgroup element.
option : List Css.Preprocess.Style -> Snippet
Selector for an option element.
progress : List Css.Preprocess.Style -> Snippet
Selector for a progress element.
select : List Css.Preprocess.Style -> Snippet
Selector for a select element.
textarea : List Css.Preprocess.Style -> Snippet
Selector for a textarea element.
svg : List Css.Preprocess.Style -> Snippet
Selector for a svg element.
path : List Css.Preprocess.Style -> Snippet
Selector for a path element.
rect : List Css.Preprocess.Style -> Snippet
Selector for a rect element.
circle : List Css.Preprocess.Style -> Snippet
Selector for a circle element.
ellipse : List Css.Preprocess.Style -> Snippet
Selector for a ellipse element.
line : List Css.Preprocess.Style -> Snippet
Selector for a line element.
polyline : List Css.Preprocess.Style -> Snippet
Selector for a polyline element.
polygon : List Css.Preprocess.Style -> Snippet
Selector for a polygon element.