tornado.at-rules
Current available at-rules: @media, @font-face, @keyframes
Current available at-rules: @media, @font-face, @keyframes
at-font-faceclj/s
(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?clj/s
(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?clj/s
(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-mediaclj/s
(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 (px 600) :min-width (px 800)} [:& {:margin (join 15 0 15 20)}] [:.abc #:def {:margin (px 20) :padding (join 30 15)} [:span {:background-color (mix-colors :red :green)}]] [:footer {:font-size (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 (px 600) :min-width (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 (px 600)
:min-width (px 800)}
[:& {:margin (join 15 0 15 20)}]
[:.abc #:def {:margin (px 20)
:padding (join 30 15)}
[:span {:background-color (mix-colors :red :green)}]]
[:footer {:font-size (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 (px 600)
:min-width (px 800)}
=> @media screen and not speech and (min-width: 600px) and (max-width: 800px) {...}at-media?clj/s
(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 is a website building & hosting documentation for Clojure/Script libraries
× close