tornado.at-rules — org.clojars.jansuran03/tornado 0.1.3

Current available at-rules: @media, @font-face, @keyframes

at-font-face clj

(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}

at-font-face? clj

(at-font-face? expr)

Returns true if the expression is a CSSAtRule instance with "font-face" identifier.

at-keyframes? clj

(at-keyframes? expr)

Returns true if the expression is a CSSAtRule instance with "keyframes" identifier.

at-media clj

(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) {...

at-media? clj

(at-media? expr)

Returns true if the expression is a CSSAtRule instance with "media" identifier.

defkeyframes clj macro

(defkeyframes animation-name & frames)

Defines a CSS @keyframes animation. The animation name should have a unique symbol for later reference to it and then animation frames in a format [progress params]:

(defkeyframes fade-in-opacity [(u/percent 0) {:opacity 0}] [(u/percent 25) {:opacity 0.1}] [(u/percent 50) {:opacity 0.25}] [(u/percent 75) {:opacity 0.5}] [(u/percent 100) {:opacity 1}])

Then, refer it the CSS hiccup list to make tornado compile it for later usage:

(def styles (list fade-in-opacity ...))

After that, you can assign this animation to whatever element you want:

(def styles (list fade-in-opacity [:.some-element {:animation-duration (u/ms 500) :animation-name fade-in-opacity)}] [:#another-element {:animation-name fade-in-opacity :animation-delay (u/s 1.5)}]))

With defkeyframes you can also define from & to progress animations:

(defkeyframes translate-animation [:from {:transform (f/translate (u/px 100) (u/px 200)}] [:to {:transform (f/translate (u/px 200) (u/px 400)}])