Current available at-rules: @media, @font-face, @keyframes
Current available at-rules: @media, @font-face, @keyframes
(at-font-face & props-maps)Can be used for more convenient describing of @font-face. This is how example props-maps look like:
{:src [[(f/url "../webfonts/woff2/roboto.woff2") (f/css-format :woff2)] [(f/url "../webfonts/woff/roboto.woff") (f/css-format :woff)]]) :font-family "Roboto" :font-weight :normal :font-style :italic}
This function can receive any number of props maps so that you can also write the example above this way:
{:src [[(f/url "../webfonts/woff2/roboto.woff2") (f/css-format :woff2)]]} {:src [[(f/url "../webfonts/woff/roboto.woff") (f/css-format :woff)]] :font-family "Roboto" :font-weight :normal :font-style :italic}
Can be used for more convenient describing of @font-face. This is how example
props-maps look like:
{:src [[(f/url "../webfonts/woff2/roboto.woff2") (f/css-format :woff2)]
[(f/url "../webfonts/woff/roboto.woff") (f/css-format :woff)]])
:font-family "Roboto"
:font-weight :normal
:font-style :italic}
This function can receive any number of props maps so that you can also write
the example above this way:
{:src [[(f/url "../webfonts/woff2/roboto.woff2") (f/css-format :woff2)]]}
{:src [[(f/url "../webfonts/woff/roboto.woff") (f/css-format :woff)]]
:font-family "Roboto"
:font-weight :normal
:font-style :italic}(at-font-face? expr)Returns true if the expression is a CSSAtRule instance with "font-face" identifier.
Returns true if the expression is a CSSAtRule instance with "font-face" identifier.
(at-keyframes? expr)Returns true if the expression is a CSSAtRule instance with "keyframes" identifier.
Returns true if the expression is a CSSAtRule instance with "keyframes" identifier.
(at-media rules & changes)Takes a rules map and any number of media changes and creates a CSSAtRule instance with "media" identifier:
(at-media {:screen :only :max-width (u/px 600) :min-width (u/px 800} [:& {:margin [[(u/px 15 0 (u/px 15) (u/px 20]] [:.abc #:def {:margin (u/px 20) :padding [[(u/px 30) (u/px 15)]] [:span {:background-color (colors/mix :red :green)]] [:footer {:font-size (u/em 1)])
The :& selector selects the current element. As you can see, you can nest the affected CSS hiccup how you only want. Special rules values: :screen :only => only screen :screen true => screen :screen false => not screen
{:screen true :speech false :max-width (u/px 600) :min-width (u/px 800} => @media screen and not speech and (min-width: 600px) and (max-width: 800px) {...
Takes a rules map and any number of media changes and creates a CSSAtRule instance
with "media" identifier:
(at-media {:screen :only
:max-width (u/px 600)
:min-width (u/px 800}
[:& {:margin [[(u/px 15 0 (u/px 15) (u/px 20]]
[:.abc #:def {:margin (u/px 20)
:padding [[(u/px 30) (u/px 15)]]
[:span {:background-color (colors/mix :red :green)]]
[:footer {:font-size (u/em 1)])
The :& selector selects the current element.
As you can see, you can nest the affected CSS hiccup how you only want.
Special rules values: :screen :only => only screen
:screen true => screen
:screen false => not screen
{:screen true
:speech false
:max-width (u/px 600)
:min-width (u/px 800}
=> @media screen and not speech and (min-width: 600px) and (max-width: 800px) {...(at-media? expr)Returns true if the expression is a CSSAtRule instance with "media" identifier.
Returns true if the expression is a CSSAtRule instance with "media" identifier.
cljdoc builds & hosts documentation for Clojure/Script libraries
| Ctrl+k | Jump to recent docs |
| ← | Move to previous article |
| → | Move to next article |
| Ctrl+/ | Jump to the search field |