ClojureScript CSS Experiment — Replacing SASS/LESS

ganymede-preview.clj

;;; Common Styles

(def modal-header-common
  (css
    :flex* [:center :center :row]
    :overflow "hidden"
    :font* [vars/bold vars/bold-size vars/white]))

;;; Elements

(defdiv modal-header-wrapper
  :size* [nil nil 500 70]
  :background-color vars/blue
  :flex* [:center :center]
  :overflow "hidden")

(defdiv modal-header
  :include* [modal-header-common]
  :background-color vars/blue
  :size* [460 30])

(defdiv modal-header-empty
  :include* [modal-header-common]
  :padding* 3
  :background-color vars/blue)

;;; Renderer

(defn render-reagent-element [title]
  [let [header-div (if title
                     [modal-header title]
                     [modal-empty-header])]]
  [modal-header-wrapper
   [modal-header-div]])