From 0347a0b2cfdea59c84eadbea5718159bde69c907 Mon Sep 17 00:00:00 2001 From: Gregg8 Date: Sun, 19 Apr 2015 13:43:56 +1000 Subject: [PATCH 1/7] WIP - Progressed the h-box demo. - Changed close icons in popovers and alerts to material design icons. - Fixed bug in popover-anchor-wrapper where :flex wasn't being set. - Fixed bug in tabs where (id-fn %) has not been added. - Some spelling issues. --- src/re_com/alert.cljs | 3 +- src/re_com/box.cljs | 10 +- src/re_com/popover.cljs | 11 +- src/re_com/tabs.cljs | 4 +- src/re_demo/alert_list.cljs | 2 +- src/re_demo/h_box.cljs | 382 ++++++++++++++++++--------- src/re_demo/layout.cljs | 221 ++++++++-------- src/re_demo/popover_dialog_demo.cljs | 2 +- 8 files changed, 379 insertions(+), 256 deletions(-) diff --git a/src/re_com/alert.cljs b/src/re_com/alert.cljs index 5f02e480..5d0617ae 100644 --- a/src/re_com/alert.cljs +++ b/src/re_com/alert.cljs @@ -31,7 +31,8 @@ :as args}] {:pre [(validate-args-macro alert-box-args-desc args "alert-box")]} (let [close-button [button - :label "×" + :label [:i {:class "md-close" + :style {:font-size "20px"}}] ;"×" :on-click (handler-fn (on-close id)) :class "close"] alert-type (if (= alert-type :info) diff --git a/src/re_com/box.cljs b/src/re_com/box.cljs index dd92a6dd..dd138e04 100644 --- a/src/re_com/box.cljs +++ b/src/re_com/box.cljs @@ -215,7 +215,7 @@ (def h-box-args-desc [{:name :children :required true :type "vector" :validate-fn sequential? :description "a vector (or list) of components"} - {:name :size :required false :default "none" :type "string" :validate-fn string? :description [:span "equivalent to CSS style " [:span.bold "flex"] "." [:br] "Examples: " [:code "initial"] ", " [:code "auto"] ", " [:code "none"]", " [:code "100px"] ", " [:code "2"] " or a generic triple of " [:code "grow/shrink/basis"]]} + {:name :size :required false :default "none" :type "string" :validate-fn string? :description [:span "equivalent to CSS style " [:span.bold "flex"] "." [:br] "Examples: " [:code "initial"] ", " [:code "auto"] ", " [:code "none"]", " [:code "100px"] ", " [:code "2"] " or a generic triple of " [:code "grow shrink basis"]]} {:name :width :required false :type "string" :validate-fn string? :description "a CSS width style"} {:name :height :required false :type "string" :validate-fn string? :description "a CSS height style"} {:name :min-width :required false :type "string" :validate-fn string? :description "a CSS width style. The minimum width to which the box can shrink"} @@ -271,7 +271,7 @@ (def v-box-args-desc [{:name :children :required true :type "vector" :validate-fn sequential? :description "a vector (or list) of components"} - {:name :size :required false :default "none" :type "string" :validate-fn string? :description [:span "equivalent to CSS style " [:span.bold "flex"] "." [:br] "Examples: " [:code "initial"] ", " [:code "auto"] ", " [:code "none"]", " [:code "100px"] ", " [:code "2"] " or a generic triple of " [:code "grow/shrink/basis"]]} + {:name :size :required false :default "none" :type "string" :validate-fn string? :description [:span "equivalent to CSS style " [:span.bold "flex"] "." [:br] "Examples: " [:code "initial"] ", " [:code "auto"] ", " [:code "none"]", " [:code "100px"] ", " [:code "2"] " or a generic triple of " [:code "grow shrink basis"]]} {:name :width :required false :type "string" :validate-fn string? :description "a CSS width style"} {:name :height :required false :type "string" :validate-fn string? :description "a CSS height style"} {:name :min-width :required false :type "string" :validate-fn string? :description "a CSS width style. The minimum width to which the box can shrink"} @@ -327,7 +327,7 @@ (def box-args-desc [{:name :child :required true :type "string | hiccup" :validate-fn string-or-hiccup? :description "a component (or string)"} - {:name :size :required false :default "none" :type "string" :validate-fn string? :description [:span "equivalent to CSS style " [:span.bold "flex"] "." [:br] "Examples: " [:code "initial"] ", " [:code "auto"] ", " [:code "none"]", " [:code "100px"] ", " [:code "2"] " or a generic triple of " [:code "grow/shrink/basis"]]} + {:name :size :required false :default "none" :type "string" :validate-fn string? :description [:span "equivalent to CSS style " [:span.bold "flex"] "." [:br] "Examples: " [:code "initial"] ", " [:code "auto"] ", " [:code "none"]", " [:code "100px"] ", " [:code "2"] " or a generic triple of " [:code "grow shrink basis"]]} {:name :width :required false :type "string" :validate-fn string? :description "a CSS width style"} {:name :height :required false :type "string" :validate-fn string? :description "a CSS height style"} {:name :min-width :required false :type "string" :validate-fn string? :description "a CSS width style. The minimum width to which the box can shrink"} @@ -373,7 +373,7 @@ (def scroller-args-desc [{:name :child :required true :type "string | hiccup" :validate-fn string-or-hiccup? :description "a component (or string)"} - {:name :size :required false :default "auto" :type "string" :validate-fn string? :description [:span "equivalent to CSS style " [:span.bold "flex"] "." [:br] "Examples: " [:code "initial"] ", " [:code "auto"] ", " [:code "none"]", " [:code "100px"] ", " [:code "2"] " or a generic triple of " [:code "grow/shrink/basis"]]} + {:name :size :required false :default "auto" :type "string" :validate-fn string? :description [:span "equivalent to CSS style " [:span.bold "flex"] "." [:br] "Examples: " [:code "initial"] ", " [:code "auto"] ", " [:code "none"]", " [:code "100px"] ", " [:code "2"] " or a generic triple of " [:code "grow shrink basis"]]} {:name :scroll :required false :default "auto" :type "keyword" :validate-fn scroll-style? :description [:span "Sets both h-scroll and v-scroll at once: " [:br] [:code ":auto"] ": only show scroll bar(s) if the content is larger than the scroller" [:br] [:code ":on"] ": always show scroll bars" [:br] @@ -447,7 +447,7 @@ {:name :t-border :required false :type "string" :validate-fn string? :description [:span "a CSS border style for the top border. Overrides " [:code ":border"]]} {:name :b-border :required false :type "string" :validate-fn string? :description [:span "a CSS border style for the bottom. Overrides " [:code ":border"]]} {:name :radius :required false :type "string" :validate-fn string? :description "a CSS radius style eg.\"2px\""} - {:name :size :required false :default "none" :type "string" :validate-fn string? :description [:span "equivalent to CSS style " [:span.bold "flex"] "." [:br] "Examples: " [:code "initial"] ", " [:code "auto"] ", " [:code "none"]", " [:code "100px"] ", " [:code "2"] " or a generic triple of " [:code "grow/shrink/basis"]]} + {:name :size :required false :default "none" :type "string" :validate-fn string? :description [:span "equivalent to CSS style " [:span.bold "flex"] "." [:br] "Examples: " [:code "initial"] ", " [:code "auto"] ", " [:code "none"]", " [:code "100px"] ", " [:code "2"] " or a generic triple of " [:code "grow shrink basis"]]} {:name :width :required false :type "string" :validate-fn string? :description "a CSS style describing the initial width"} {:name :height :required false :type "string" :validate-fn string? :description "a CSS style describing the initial height"} {:name :min-width :required false :type "string" :validate-fn string? :description "a CSS width style. The minimum width to which the box can shrink"} diff --git a/src/re_com/popover.cljs b/src/re_com/popover.cljs index e6fd4d6f..75f2a8c7 100644 --- a/src/re_com/popover.cljs +++ b/src/re_com/popover.cljs @@ -33,8 +33,12 @@ (close-callback) (reset! showing? false))) :class "close" - :style {:font-size "36px" :height "26px" :margin-top "-8px"}} - "×"]) + :style {:font-size "34px" + :position "absolute" + :top "0px" + :right "0px"}} + [:i {:class "md-close"}] + ]) (defn- calc-popover-pos @@ -357,7 +361,8 @@ style)} [:div ;; Wrapper around the anchor and the "point" {:class "rc-point-wrapper display-inline-flex" - :style (merge (flex-flow-style flex-flow) + :style (merge (flex-child-style "auto") + (flex-flow-style flex-flow) (align-style :align-items :center))} (when place-anchor-before? anchor) (when @showing? diff --git a/src/re_com/tabs.cljs b/src/re_com/tabs.cljs index 55df4716..3adeee0f 100644 --- a/src/re_com/tabs.cljs +++ b/src/re_com/tabs.cljs @@ -58,7 +58,7 @@ (let [id (id-fn t) label (label-fn t) selected? (= id current)] ;; must use current instead of @model to avoid reagent warnings - [:button.btn.btn-default + [:button {:type "button" :key (str id) :class (str "btn btn-default " (if selected? "active")) @@ -101,7 +101,7 @@ [& {:keys [model tabs on-change id-fn label-fn vertical?]}] (let [current (deref-or-value model) tabs (deref-or-value tabs) - _ (assert (not-empty (filter #(= current (:id %)) tabs)) "model not found in tabs vector")] + _ (assert (not-empty (filter #(= current (id-fn %)) tabs)) "model not found in tabs vector")] [:ul {:class (str "rc-tabs noselect nav nav-pills" (when vertical? " nav-stacked")) :style (flex-child-style "none") diff --git a/src/re_demo/alert_list.cljs b/src/re_demo/alert_list.cljs index a3efdbfa..5cb9f1e5 100644 --- a/src/re_demo/alert_list.cljs +++ b/src/re_demo/alert_list.cljs @@ -44,7 +44,7 @@ [button :label "Add alert" :style {:width "100px"} - :on-click #(add-alert alerts (gensym) :info {:heading "New alert" :body "This alert was added by the \"Add alert\" button ."})]] + :on-click #(add-alert alerts (gensym) :info {:heading "New alert" :body "This alert was added by the \"Add alert\" button."})]] [p "Also, try clicking the \"x\" on alerts."] [p [:code ":max-height"] " is set to 300px. A scroll bar will appear as necessary."] [p "For demonstration purposes, a 'dotted' " [:code ":border-style"] " is set."] diff --git a/src/re_demo/h_box.cljs b/src/re_demo/h_box.cljs index 26dee258..38d1043a 100644 --- a/src/re_demo/h_box.cljs +++ b/src/re_demo/h_box.cljs @@ -1,10 +1,12 @@ (ns re-demo.h-box - (:require [re-com.core :refer [p h-box v-box box gap line scroller border label title button checkbox hyperlink-href slider horizontal-bar-tabs]] + (:require [re-com.core :refer [p h-box v-box box gap line scroller border label title button checkbox hyperlink-href slider horizontal-bar-tabs + input-text input-textarea popover-anchor-wrapper popover-content-wrapper px] :refer-macros [handler-fn]] [re-com.box :refer [h-box-args-desc v-box-args-desc box-args-desc gap-args-desc line-args-desc scroller-args-desc border-args-desc flex-child-style]] [re-com.util :refer [px]] [re-demo.utils :refer [panel-title title2 args-table github-hyperlink status-text]] [re-com.validate :refer [extract-arg-data string-or-hiccup? alert-type? vector-of-maps?]] - [reagent.core :as reagent])) + [reagent.core :as reagent] + [reagent.ratom :refer-macros [reaction]])) (def rounded-panel (merge (flex-child-style "1") @@ -15,39 +17,38 @@ (def h-box-style {}) ;{ :overflow "hidden"}) -(def size-options [{:id :inital :label "initial"} - {:id :auto :label "auto"} - {:id :none :label "none"} - {:id :px :label "px"} - {:id :% :label "num"}]) - (def box-state (reagent/atom - {:hbox {:width "500px" - :height "100px" - :justify :start - :gap "4px"} - :box1 {:size "none" - ; :min-width "200px" - ; :height "200px" - :text "Box1"} - :box2 {:size "0 1 50px" - :text "Box2" - :align-self :center} - :box3 {:size "0 1 100px" - :text "Box3"}})) + {:hbox {:height {:value "100px" :omit? false :range [0 500]} + :width {:value "500px" :omit? false :range [0 1000]} + :justify {:value :start :omit? false} + :align {:value :stretch :omit? false} + :gap {:value "4px" :omit? false :range [0 100]}} + :box1 {:omit? false + :text {:value "Box1" :omit? false} + :size {:value "none" :omit? false :type :none :px "50px" :ratio "3" :gsb "1 1 0"} + :align-self {:value :stretch :omit? true} + :height {:value "50px" :omit? true :range [0 200]}} + :box2 {:omit? false + :text {:value "Box2" :omit? false} + :size {:value "100px" :omit? false :type :px :px "100px" :ratio "2" :gsb "1 1 0"} + :align-self {:value :center :omit? false} + :height {:value "50px" :omit? true :range [0 300]}} + :box3 {:omit? false + :text {:value "Box3" :omit? false} + :size {:value "1" :omit? false :type :ratio :px "150px" :ratio "1" :gsb "1 1 0"} + :align-self {:value :stretch :omit? true} + :height {:value "50px" :omit? true :range [0 400]}}})) (defn merge-named-params - "given a hiccup vector v, and a map m containing named parameters, add the named parameters to v - (merge-named-params [box :a 1] {:b 2 :c 3}) - ;; => [box :a 1 :b 2 :c 3] + "given a hiccup vector v, and a map m containing named parameters, add the named parameters to v...TODO + (merge-named-params [box :a 1] {:b 2 :c 3}) + ;; => [box :a 1 :b 2 :c 3] " [v m] - (->> m - (filter second) ;; remove nil valued members - (reduce concat []) - (into v) - vec)) - + (let [m (remove (comp :omit? second) m) + names (keys m) + values (map :value (vals m))] + (into v (interleave names values)))) (defn make-box "produces something like: @@ -59,41 +60,129 @@ " [box-parameters] (-> [box :style h-box-style] - (merge-named-params (dissoc box-parameters :text)) + (merge-named-params (dissoc box-parameters :omit? :text)) (conj :child) - (conj [:div {:style rounded-panel} (:text box-parameters)]))) - - + (conj [:div {:style rounded-panel} (get-in box-parameters [:text :value])])) + ) (defn demo "creates the hiccup for the real demo, with its child boxes and all" [] (-> [h-box :padding "4px" - :style {:border "dashed 1px red"}] + :style {:border "dashed 1px red"}] (merge-named-params (:hbox @box-state)) (conj :children) (conj [(make-box (:box1 @box-state)) (make-box (:box2 @box-state)) - (make-box (:box3 @box-state)) ]))) - - -(defn gap-editor - [overrow? path] - (let [open (reagent/atom false)] - - )) - -(defn editor-button - [mouse-over-row? open?] - - [box - :size "100px" - :align-self :center - :justify :center - :child [:div {:class "md-play-arrow rc-icon-smaller" - :style {:color "lightgrey" - :XXXX 1}}]]) + (make-box (:box3 @box-state))]))) + +(defn px-editor + [path] + (let [model (reaction (js/parseInt (get-in @box-state (conj path :value)))) + [min max] (get-in @box-state (conj path :range))] + (fn [path] + [slider + :model model + :min min + :max max + :width "200px" + :on-change #(swap! box-state assoc-in (conj path :value) (px %))]))) + +(defn justify-editor + [path] + (let [opts [{:id :start :label ":start"} + {:id :end :label ":end"} + {:id :center :label ":center"} + {:id :between :label ":between"} + {:id :around :label ":around"}] + model (reaction (get-in @box-state (conj path :value)))] + (fn + [path] + [horizontal-bar-tabs + :model model + :tabs opts + :on-change #(swap! box-state assoc-in (conj path :value) %)]))) + +(defn align-editor + [path] + (let [opts [{:id :start :label ":start"} + {:id :end :label ":end"} + {:id :center :label ":center"} + {:id :baseline :label ":baseline"} + {:id :stretch :label ":stretch"}] + model (reaction (get-in @box-state (conj path :value)))] + (fn + [path] + [horizontal-bar-tabs + :model model + :tabs opts + :on-change #(swap! box-state assoc-in (conj path :value) %)]))) + +(defn text-editor + [path] + (let [model (reaction (get-in @box-state (conj path :value)))] + (fn + [path] + [input-text + :model model + :change-on-blur? false + :on-change #(swap! box-state assoc-in (conj path :value) %)]))) + +(defn box-size + "Works out what to pass to :size from a map like {:value \"none\" :omit? false :type :none :px \"\100px\" :ratio \"1\" :gsb \"\"}" + [size-spec] + (cond (= (:type size-spec) :px) (:px size-spec) + (= (:type size-spec) :ratio) (:ratio size-spec) + (= (:type size-spec) :gsb) (:gsb size-spec) + :else (name (:type size-spec)))) + +(defn size-editor + [path] + (let [opts [{:id :inital :label "initial"} + {:id :auto :label "auto"} + {:id :none :label "none"} + {:id :px :label "px"} + {:id :ratio :label "ratio"} + {:id :gsb :label "g s b"}] + model (reaction (get-in @box-state (conj path :type))) + px-model (reaction (js/parseInt (get-in @box-state (conj path :px)))) + ratio-model (reaction (js/parseInt (get-in @box-state (conj path :ratio)))) + gsb-model (reaction (get-in @box-state (conj path :gsb))) + update-model (fn [path new-model] + (swap! box-state assoc-in (conj path :type) new-model) + (swap! box-state assoc-in (conj path :value) (box-size (get-in @box-state path))))] + (fn + [path] + [h-box + :align :center + :width "580px" + :gap "8px" + :padding "4px" + :children [[horizontal-bar-tabs + :model model + :tabs opts + :on-change #(update-model path %)] + (when (= @model :px) + [slider + :model px-model + :min 0 + :max 800 + :width "200px" + :on-change #(update-model path (px %))]) + (when (= @model :ratio) + [slider + :model ratio-model + :min 0 + :max 10 + :width "200px" + :on-change #(update-model path (str %))]) + (when (= @model :gsb) + [input-text + :model gsb-model + :change-on-blur? false + :width "210px" + :on-change #(update-model path %)])]]))) (defn indent-px [ident] @@ -108,8 +197,8 @@ 1. parameter name 2. parameter value 3. rarely, a closing ']' - - an editor openn" - [indent text1 text2 text3 on-over editor] + - an editor to open" + [active? indent text1 path text3 on-over editor] (let [mouse-over-row? (reagent/atom false) mouse-over-fn (fn [val] @@ -117,92 +206,127 @@ (if on-over (on-over val)) nil) editor-open? (reagent/atom false) - ] - (fn [indent text1 text2 text3 on-over editor] - [h-box - :attr {:on-mouse-over #(mouse-over-fn true) - :on-mouse-out #(mouse-over-fn false)} - :style {:background-color (if @mouse-over-row? "#f0f0f0")} - :children [[gap :size (indent-px indent)] ;; leading indent - [box :size "100px" :child text1] ;; often the parameter - [box :size "100px" :child text2] ;; often the parameter value - [box :size "5px" :child text3] ;; often the parameter value - #_(if editor editor) - ]]))) + omit? (reaction (and (vector? path) + (map? (get-in @box-state path)) + (get-in @box-state (conj path :omit?))))] + (fn [active? indent text1 path text2 on-over editor] + (let [arg-val (if (vector? path) + (let [val (get-in @box-state (conj path :value))] + (cond + (nil? val) "-" + (keyword? val) (str val) + :else (str "\"" val "\""))) + (str path)) + row-active? (and @mouse-over-row? active?) + arg-hiccup [h-box + ;:size "auto" + :width "282px" + :style (merge {:overflow "hidden"} + (when row-active? {:background-color "#f0f0f0" + :cursor "pointer"}) + (when @omit? {:color "#d0d0d0"})) + :attr {:on-mouse-over #(mouse-over-fn true) + :on-mouse-out #(mouse-over-fn false)} + :children [[box + :size "20px" + :child (if row-active? + [checkbox + :model omit? + :on-change #(swap! box-state assoc-in (conj path :omit?) %)] + [:span])] + [gap :size (indent-px indent)] + [box :size "100px" :child text1] + [box + :attr {:on-click (handler-fn (swap! editor-open? not))} + :child [:span + [:span {:style (when row-active? {:color "blue" + :font-weight "bold"})} arg-val] + text2]]]]] + (if editor + [popover-anchor-wrapper + :showing? editor-open? + :position :right-center + :anchor arg-hiccup + :popover [popover-content-wrapper + :showing? editor-open? + :position :right-center + :body [editor path]]] + arg-hiccup))))) (defn editable-code "Shows the code in a way that values can be edited, allowing for an interactive demo." [] - (let [over-hbox (fn [over?] ) - over-box1 (fn [over?] ) - over-box2 (fn [over?] )] + (let [over-hbox (fn [over?] #_(println "h" over?)) + over-box1 (fn [over?] #_(println "1" over?)) + over-box2 (fn [over?] #_(println "2" over?)) + over-box3 (fn [over?] #_(println "3" over?))] (fn [] [v-box :children [[gap :size "20px"] [v-box + :width "300px" :style {:font-family "Consolas, \"Courier New\", monospace" :background-color "#f5f5f5" :border "1px solid lightgray" :border-radius "4px" :padding "8px"} - :children [[code-row :0 "[h-box" "" "" over-hbox :indent :0 :indent2 "80px" ] - [code-row :1 " :size" "\"500px\"" "" over-hbox :indent :1 :indent2 "100px" ] - [code-row :1 " :gap" "\"1px\"" "" over-hbox :indent :1 :indent2 "100px" :editor [gap-editor]] - [code-row :1 " :children" " [" "" over-hbox :indent :1 :indent2 "100px" ] - - [code-row :2 "[box " "" "" over-box1] - [code-row :3 " :child" "\"Box1\"" "" over-box1] - [code-row :3 " :size" "\"auto\"" "" over-box1] - [code-row :3 " :align-self" ":center" "" over-box1] - [code-row :3 " :height" "\"50px\"" "" over-box1] - [code-row :3 " :min-width" "100px" "]" over-box1] - - [code-row :2 "[box " "" "" over-box2] - [code-row :3 " :child" "\"Box2\"" "" over-box2] - [code-row :3 " :size" "\"auto\"" "" over-box2] - [code-row :3 " :align-self" ":center" "" over-box2] - [code-row :3 " :height" "\"50px\"" "" over-box2] - [code-row :3 " :min-width" "100px" "]" over-box2] - - [code-row :0 "]" "" "" over-hbox ] - ]]]]))) - - - - (defn panel + :children [[code-row false :0 "[h-box" "" "" over-hbox] + [code-row true :1 " :height" [:hbox :height] "" over-hbox px-editor] + [code-row true :1 " :width" [:hbox :width] "" over-hbox px-editor] + [code-row true :1 " :justify" [:hbox :justify] "" over-hbox justify-editor] + [code-row true :1 " :align" [:hbox :align] "" over-hbox align-editor] + [code-row true :1 " :gap" [:hbox :gap] "" over-hbox px-editor] + [code-row false :1 " :children" " [" "" over-hbox] + + [code-row false :2 "[box " "" "" over-box1] + [code-row true :3 " :child" [:box1 :text] "" over-box1 text-editor] + [code-row true :3 " :size" [:box1 :size] "" over-box1 size-editor] + [code-row true :3 " :align-self" [:box1 :align-self] "" over-box1 align-editor] + [code-row true :3 " :height" [:box1 :height] "]" over-box1 px-editor] + + [code-row false :2 "[box " "" "" over-box2] + [code-row true :3 " :child" [:box2 :text] "" over-box2 text-editor] + [code-row true :3 " :size" [:box2 :size] "" over-box2 size-editor] + [code-row true :3 " :align-self" [:box2 :align-self] "" over-box2 align-editor] + [code-row true :3 " :height" [:box2 :height] "]" over-box2 px-editor] + + [code-row false :2 "[box " "" "" over-box3] + [code-row true :3 " :child" [:box3 :text] "" over-box3 text-editor] + [code-row true :3 " :size" [:box3 :size] "" over-box3 size-editor] + [code-row true :3 " :align-self" [:box3 :align-self] "" over-box3 align-editor] + [code-row true :3 " :height" [:box3 :height] "]]" over-box3 px-editor]]]]]))) + + +(defn panel + [] + (fn [] - - (fn - [] - [v-box - :size "auto" - :gap "10px" - :children [[panel-title "[h-box ... ]" - "src/re_com/box.cljs" - "src/re_demo/h_box.cljs"] - - [h-box - :gap "100px" - :children [[v-box - :gap "10px" - :width "450px" - :children [[title2 "Notes"] - [status-text "Stable"] - [p "h-box is a container which lays out its " [:code ":children"] " in a single horizontal row."] - - [p "The " [:span.bold "Layout"] " page (look LHS) describes the importance of " [:span.bold ":size"] "The actual layout is a function of the " [:code ":size"] " of the container and the " [:code ":size"] " provided for each of the children."] - [p "Todo: Nestability with v-box"] - - [args-table h-box-args-desc]]] - [v-box - :gap "10px" - :width "500px" - :children [[title2 "Demo"] - [p "An interactive demo is coming ..."] - #_[p "This is an intereactive demo. Edit the \"code\" (in grey) and watch the boxes change. The red-dashed box is an h-box whch contains up to four children."] - #_[demo] - #_[editable-code]]] - ]] - [gap :size "30px"]]])) + [v-box + :size "auto" + :gap "10px" + :children [[panel-title "[h-box ... ]" + "src/re_com/box.cljs" + "src/re_demo/h_box.cljs"] + + [h-box + :gap "100px" + :children [[v-box + :gap "10px" + :width "450px" + :children [[title2 "Notes"] + [status-text "Stable"] + [p "h-box is a container which lays out its " [:code ":children"] " in a single horizontal row."] + [p "The " [:span.bold "Layout"] " page (look LHS) describes the importance of " [:span.bold ":size"] ". The actual layout is a function of the " [:code ":size"] " of the container and the " [:code ":size"] " provided for each of the children."] + [p "Todo: Nestability with v-box"] + [args-table h-box-args-desc]]] + [v-box + :gap "10px" + :width "500px" + :children [[title2 "Demo"] + [p "This is an " [:span.bold "interactive"] " demo. Edit the \"code\" (in grey) and watch the boxes change. + The red-dashed box is an h-box whch contains up to three children."] + [demo] + [editable-code]]]]] + [gap :size "30px"]]])) diff --git a/src/re_demo/layout.cljs b/src/re_demo/layout.cljs index fcc702a3..12bd8d1d 100644 --- a/src/re_demo/layout.cljs +++ b/src/re_demo/layout.cljs @@ -9,10 +9,10 @@ [v-box :children [[title :level :level2 :label "The Components"] [p "Re-com has layout components which are not themselves visible - - they just arrange other components."] + they just arrange other components."] [p "The key components are " [:span.bold "h-box"] " and " [:span.bold "v-box"] " which arange - their children horizontally and vertically respectively. Because they are - mutually nestable, you can combine them to create arbitrarily complex layouts."]]]) + their children horizontally and vertically respectively. Because they are + mutually nestable, you can combine them to create arbitrarily complex layouts."]]]) (defn example-layout @@ -26,7 +26,7 @@ [p "And this example code, showing an " [:span.bold "h-box"] " as a child of a " [:span.bold "v-box"] " ..."] [:pre {:style {:width "460px"}} - "[v-box +"[v-box :children [[box :child \"Header\"] [h-box :height \"100px\" @@ -65,17 +65,17 @@ [p "To fully understand Re-com's layout components and use them powerfully, you " [:span.bold "will"] " need to have a strong understanding of Flexbox. You should do these tutorials very soon:" - [:ul - [:li - [hyperlink-href - :label "CSS-Tricks guide to flexbox" - :href "https://css-tricks.com/snippets/css/a-guide-to-flexbox" - :target "_blank"]] - [:li - [hyperlink-href - :label "The Ultimate Flexbox Cheat Sheet" - :href "http://www.sketchingwithcss.com/samplechapter/cheatsheet.html" - :target "_blank"]]]]]] + [:ul + [:li + [hyperlink-href + :label "CSS-Tricks guide to flexbox" + :href "https://css-tricks.com/snippets/css/a-guide-to-flexbox" + :target "_blank"]] + [:li + [hyperlink-href + :label "The Ultimate Flexbox Cheat Sheet" + :href "http://www.sketchingwithcss.com/samplechapter/cheatsheet.html" + :target "_blank"]]]]]] [v-box :style {:font-size "13px" :color "#aaa"} @@ -90,20 +90,18 @@ :label "25 years ago" :href "http://i.stanford.edu/pub/cstr/reports/csl/tr/88/358/CSL-TR-88-358.pdf" :target "_blank"] - ", and yet HTML5 only has a weak, half-arsed version?"] - ]]]] + ", and yet HTML5 only has a weak, half-arsed version?"]]]]] [v-box :children [[title :level :level2 :label "Warning: Be All In"] - [p "Flexbox works via the interplay of styles present on a " [:span.bold "container"] " (parent) and its " [:span.bold "items"] " (children). - Invariably, DOM nodes act as both a container for the level below, and an item for the level above."] + [p "Flexbox works via the interplay of styles present on a " [:span.bold "container"] " (parent) and its " [:span.bold "items"] + " (children). Invariably, DOM nodes act as both a container for the level below, and an item for the level above."] [p "If block-level elements (divs?) are present in this tree, they - can break the flex style interplay up and down the DOM hierarchy, and cause problems."] + can break the flex style interplay up and down the DOM hierarchy, and cause problems."] [p [:span.bold "As a result, we have found Flexbox use to be viral."] " Once you start using it, you - end up using it everywhere - right up and down the DOM tree."] + end up using it everywhere - right up and down the DOM tree."] [p "So, we recommend you go 100% all-in on using h-box and v-box. If you do, everything should \"just work\"."] [p "Never mint your own container " [:span.bold "[:div]"] " or " [:span.bold "[:span]"] " unless - you also give them the correct flex styles, which is arduous and error prone."] - ]]]]) + you also give them the correct flex styles, which is arduous and error prone."]]]]]) (defn key-style-section @@ -112,30 +110,27 @@ :children [[title :level :level2 :label "The Key Style"] [p "Flexbox is about styles on " [:span.bold "containers"] " and their child " [:span.bold "items"] "."] [p "While tutorials will walk you through the menagerie of flexbox related styles, - we've found that one, more than any other, is - critical to getting what you want: the " [:span.bold "flex"] " style of the items."] + we've found that one, more than any other, is critical to getting what you want: the " [:span.bold "flex"] " style of the items."] [p "Worth repeating: if you are having trouble with a layout, pay particular attention to the " [:span.bold "flex"] " styles on the items within that layout."] [title :level :level2 :label "flex=GSB"] - [p "Tutorials will tell you that the " [:span.bold "flex"] " style can be single value like " [:span.bold "none"] " or " [:span.bold "auto"] ". - But those are shortcuts. Every flex style resolves to a triple of sub-values:" + [p "Tutorials will tell you that the " [:span.bold "flex"] " style can be single value like " [:span.bold "none"] " or " [:span.bold "auto"] + ". But those are shortcuts. Every flex style resolves to a triple of sub-values:" [:ul - [:li [:span [:span.bold "grow"] " - Integer which determines how an item grows in size (proportionally to its siblngs) if there is - extra container space to distribute. 0 for no growing."]] - [:li [:span [:span.bold "shrink"] " - Integer which determines how an item shrinks in size (proportionally to its siblngs) if container - space is reduced. 0 for no shrinking."]] - [:li [:span [:span.bold "basis"] " - The default size of an item before any necessary growing or - shrinking. Can be:" + [:li [:span [:span.bold "grow"] " - Integer which determines how an item grows in size (in proportion to its siblings) if there is + extra container space to distribute. 0 for no growing."]] + [:li [:span [:span.bold "shrink"] " - Integer which determines how an item shrinks in size (in proportion to its siblings) if container + space is reduced. 0 for no shrinking."]] + [:li [:span [:span.bold "basis"] " - The default size of an item before any necessary growing or shrinking. Can be:" [:ul - [:li "absolute length values like \"100px\" or \"40em\"" ] - [:li [:span.bold "auto"] " which means use the natural size of the item" ] + [:li "absolute length values like \"100px\" or \"40em\""] + [:li [:span.bold "auto"] " which means use the natural size of the item"] [:li "proporational values like \"60\""]]]]]] [p "Shortcut values are always transformed into a triple. For example:" [:ul - [:li [:span.bold "flex=\"none\""] " is eqivalent to " [:span.bold "flex=\"0 0 auto\""] ] - [:li [:span.bold "flex=\"auto\""] " is eqivalent to " [:span.bold "flex=\"1 1 auto\""] ] - ]] + [:li [:span.bold "flex=\"none\""] " is eqivalent to " [:span.bold "flex=\"0 0 auto\""]] + [:li [:span.bold "flex=\"auto\""] " is eqivalent to " [:span.bold "flex=\"1 1 auto\""]]]] [p "Sure, use the shortcuts. But it is only by understanding triples that you become a power user of flexbox (or re-com layouts)."] [gap :size "10px"]]]) @@ -146,84 +141,83 @@ col2 "130px" col3 "500px" col3-style {:style {:width col3}}] - [h-box - :class (if header? "rc-div-table-header" "rc-div-table-row") - :children [[label :width col1 :label size] - [label :width col2 :label gsb] - (if header? - [label :width col3 :label description] - [:span col3-style description])]])) + [h-box + :class (if header? "rc-div-table-header" "rc-div-table-row") + :children [[label :width col1 :label size] + [label :width col2 :label gsb] + (if header? + [label :width col3 :label description] + [:span col3-style description])]])) (defn size-table [] - [v-box - :children [[title :level :level2 :label ":size is flex"] - [p "Various layout components, such as " [:span.bold "v-box"] " and " [:span.bold "h-box"] " and " [:span.bold "gap"] " take a " [:span.bold ":size"] " parameter which " - "exactly matches the " [:span.bold "flex"] " style talked about to the left."] - [gap :size "10px"] - [:pre - {:style {:width "460px"}} - "[v-box - :size \"auto\" ;; <-- equivalent of \"flex\" style - :children [...]]"] - [p "Look again at the Simple Example up the top of this page, and you'll see " - [:span.bold ":size"] " being used. Values like \"70px\" and \"1\" are provided."] - [gap :size "10px"] - [p "This table of useful shortcuts might help."] - [v-box - :class "rc-div-table" - :align-self :start - :children [[table-row - ":size" - "G S B" - "Description" - true] - [table-row - "initial" - "0 1 auto" - "Use the item's length. Never grow. Shrink if necessary. - Good for creating items with a natural maximum size, which can - shrink to some smaller size, typically given by min-width/height, if space becomes tight. "] - [table-row - "auto" - "1 1 auto" - "Use the item's length. Grow if necessary. Shrink (to min-size) if necessary. - Good for creating items that happily take as much - space as they are allowed, or can shrink as much as they are forced to. - If necessary, use min-width/height to provide limits."] - [table-row - "none" - "0 0 auto" - "Use the item's length. Never grow. Never shrink. - Good for creating rigid items that stick to their width/height if specified, otherwise their content size."] - [table-row - "100px" - "0 0 100px" - "Item is given a fixed length of 100px (in the flex direction). - Good for headers/footers of fixed size, or LHS nav columns."] - - [table-row - "60" - "60 1 0px" - [:span "Set the item's default length to be 60 sibling-proportional units. - Allow it to streach. And it can shrink to nothing." - [:br] - "Look back at the \"Sample Example\" up the - top. Notice that the \"content\" part has a :size of \"1\". Because the other child had a fixed - size of 70px, the Content streaches to fill all available space. No other sibling is making claims for space, so \"1\" might as well be \"100%\"."]] - [table-row - "g s b" - "grow shrink basis" - "If none of the shortcut values above meet your needs, - you can always provide the triple yourself, to gain precise control. For example, the following item ..."] - [table-row - "1 0 auto" - "1 0 auto" - [:span "In this very app, the light grey part of the LHS nav has this " [:span.bold ":size"] ". The light - grey background colour must always strech to the bottom of the page, hence - the streach. The basis comes from its child nav items, hence the auto. - But it can't go smaller than its children, hence shrink of 0."]] - ]]]]) + [v-box + :children [[title :level :level2 :label ":size is flex"] + [p "Various layout components, such as " [:span.bold "v-box"] " and " [:span.bold "h-box"] " and " [:span.bold "gap"] " take a " [:span.bold ":size"] " parameter which " + "exactly matches the " [:span.bold "flex"] " style talked about to the left."] + [gap :size "10px"] + [:pre + {:style {:width "460px"}} +"[v-box +:size \"auto\" ;; <-- equivalent of \"flex\" style +:children [...]]"] + [p "Look again at the Simple Example up the top of this page, and you'll see " + [:span.bold ":size"] " being used. Values like \"70px\" and \"1\" are provided."] + [gap :size "10px"] + [p "This table of useful shortcuts might help."] + [v-box + :class "rc-div-table" + :align-self :start + :children [[table-row + ":size" + "G S B" + "Description" + true] + [table-row + "initial" + "0 1 auto" + "Use the item's length. Never grow. Shrink if necessary. + Good for creating items with a natural maximum size, which can + shrink to some smaller size, typically given by min-width/height, if space becomes tight. "] + [table-row + "auto" + "1 1 auto" + "Use the item's length. Grow if necessary. Shrink (to min-size) if necessary. + Good for creating items that happily take as much + space as they are allowed, or can shrink as much as they are forced to. + If necessary, use min-width/height to provide limits."] + [table-row + "none" + "0 0 auto" + "Use the item's length. Never grow. Never shrink. + Good for creating rigid items that stick to their width/height if specified, otherwise their content size."] + [table-row + "100px" + "0 0 100px" + "Item is given a fixed length of 100px (in the flex direction). + Good for headers/footers of fixed size, or LHS nav columns."] + + [table-row + "60" + "60 1 0px" + [:span "Set the item's default length to be 60 sibling-proportional units. + Allow it to stretch. And it can shrink to nothing." + [:br] + "Look back at the \"Sample Example\" up the + top. Notice that the \"content\" part has a :size of \"1\". Because the other child had a fixed + size of 70px, the Content stretches to fill all available space. No other sibling is making claims for space, so \"1\" might as well be \"100%\"."]] + [table-row + "g s b" + "grow shrink basis" + "If none of the shortcut values above meet your needs, + you can always provide the triple yourself, to gain precise control. For example, the following item ..."] + [table-row + "1 0 auto" + "1 0 auto" + [:span "In this very app, the light grey part of the LHS nav has this " [:span.bold ":size"] ". The light + grey background colour must always strech to the bottom of the page, hence + the stretch. The basis comes from its child nav items, hence the auto. + But it can't go smaller than its children, hence shrink of 0."]]]]]]) @@ -242,7 +236,6 @@ :gap "100px" :children [[key-style-section] [size-table]]] - [gap :size "20px"]]]) diff --git a/src/re_demo/popover_dialog_demo.cljs b/src/re_demo/popover_dialog_demo.cljs index 08f96e1e..1ed2d734 100644 --- a/src/re_demo/popover_dialog_demo.cljs +++ b/src/re_demo/popover_dialog_demo.cljs @@ -24,7 +24,7 @@ :body [(fn [] ;; NOTE: THIS IS NASTY BUT REQUIRED (OTHERWISE DIALOG WILL NOT BE UPDATED WHEN ATOMS CHANGES) [v-box :children [[label - :label "The body of a popover can act like a dialog box containg standard input controls."] + :label "The body of a popover can act like a dialog box containing standard input controls."] [gap :size "15px"] [h-box :children [[v-box From 3b03d3053837f838b3d8b75bb84b27fa34180023 Mon Sep 17 00:00:00 2001 From: Gregg8 Date: Mon, 20 Apr 2015 19:00:45 +1000 Subject: [PATCH 2/7] WIP - Progressed the h-box demo. - Added max-width and max-height to all box components. - Added :style parameter to all tab components. - Add :flex parameter to [p] component. --- src/re_com/box.cljs | 96 +++++++++------ src/re_com/misc.cljs | 3 +- src/re_com/tabs.cljs | 38 +++--- src/re_com/text.cljs | 5 +- src/re_demo/h_box.cljs | 261 ++++++++++++++++++++++++++--------------- src/re_demo/tabs.cljs | 12 +- 6 files changed, 255 insertions(+), 160 deletions(-) diff --git a/src/re_com/box.cljs b/src/re_com/box.cljs index dd138e04..08ce79b4 100644 --- a/src/re_com/box.cljs +++ b/src/re_com/box.cljs @@ -114,31 +114,31 @@ (defn- box-base "This should generally NOT be used as it is the basis for the box, scroller and border components" - [& {:keys [size scroll h-scroll v-scroll width height min-width min-height justify align align-self + [& {:keys [size scroll h-scroll v-scroll width height min-width min-height max-width max-height justify align align-self margin padding border l-border r-border t-border b-border radius bk-color child class-name class style attr]}] (let [s (merge (flex-flow-style "inherit") (flex-child-style size) - (when scroll (scroll-style :overflow scroll)) - (when h-scroll (scroll-style :overflow-x h-scroll)) - (when v-scroll (scroll-style :overflow-y v-scroll)) - (when width {:width width}) - (when height {:height height}) - (when min-width {:min-width min-width}) - (when min-height {:min-height min-height}) - ;(when (and f-container justify) (justify-style justify)) - ;(when (and f-container align) (align-style :align-items align)) - (when justify (justify-style justify)) - (when align (align-style :align-items align)) - (when align-self (align-style :align-self align-self)) - (when margin {:margin margin}) ;; margin and padding: "all" OR "top&bottom right&left" OR "top right bottom left" - (when padding {:padding padding}) + (when scroll (scroll-style :overflow scroll)) + (when h-scroll (scroll-style :overflow-x h-scroll)) + (when v-scroll (scroll-style :overflow-y v-scroll)) + (when width {:width width}) + (when height {:height height}) + (when min-width {:min-width min-width}) + (when min-height {:min-height min-height}) + (when max-width {:max-width max-width}) + (when max-height {:max-height max-height}) + (when justify (justify-style justify)) + (when align (align-style :align-items align)) + (when align-self (align-style :align-self align-self)) + (when margin {:margin margin}) ;; margin and padding: "all" OR "top&bottom right&left" OR "top right bottom left" + (when padding {:padding padding}) (when border {:border border}) (when l-border {:border-left l-border}) (when r-border {:border-right r-border}) (when t-border {:border-top t-border}) (when b-border {:border-bottom b-border}) - (when radius {:border-radius radius}) + (when radius {:border-radius radius}) (if bk-color {:background-color bk-color} (if debug {:background-color "lightblue"} {})) @@ -220,6 +220,8 @@ {:name :height :required false :type "string" :validate-fn string? :description "a CSS height style"} {:name :min-width :required false :type "string" :validate-fn string? :description "a CSS width style. The minimum width to which the box can shrink"} {:name :min-height :required false :type "string" :validate-fn string? :description "a CSS height style. The minimum height to which the box can shrink"} + {:name :max-width :required false :type "string" :validate-fn string? :description "a CSS width style. The maximum width to which the box can grow"} + {:name :max-height :required false :type "string" :validate-fn string? :description "a CSS height style. The maximum height to which the box can grow"} {:name :justify :required false :default :start :type "keyword" :validate-fn justify-style? :description [:span "equivalent to CSS style " [:span.bold "justify-content"] "." [:br] "One of " justify-options-list]} {:name :align :required false :default :stretch :type "keyword" :validate-fn align-style? :description [:span "equivalent to CSS style " [:span.bold "align-items"] "." [:br] " One of " align-options-list]} {:name :align-self :required false :type "keyword" :validate-fn align-style? :description [:span "equivalent to CSS style " [:span.bold "align-self"] "." [:br] "Used when a child must override the parent's align-items setting."]} @@ -236,23 +238,25 @@ "Returns hiccup which produces a horizontal box. It's primary role is to act as a container for components and lays it's children from left to right. By default, it also acts as a child under it's parent" - [& {:keys [size width height min-width min-height justify align align-self margin padding gap children class style attr] + [& {:keys [size width height min-width min-height max-width max-height justify align align-self margin padding gap children class style attr] :or {size "none" justify :start align :stretch} :as args}] {:pre [(validate-args-macro h-box-args-desc args "h-box")]} (let [s (merge (flex-flow-style "row nowrap") (flex-child-style size) - (if width {:width width}) - (when height {:height height}) - (when min-width {:min-width min-width}) + (when width {:width width}) + (when height {:height height}) + (when min-width {:min-width min-width}) (when min-height {:min-height min-height}) + (when max-width {:max-width max-width}) + (when max-height {:max-height max-height}) (justify-style justify) (align-style :align-items align) - (when align-self (align-style :align-self align-self)) - (when margin {:margin margin}) ;; margin and padding: "all" OR "top&bottom right&left" OR "top right bottom left" - (when padding {:padding padding}) - (when debug {:background-color "gold"}) + (when align-self (align-style :align-self align-self)) + (when margin {:margin margin}) ;; margin and padding: "all" OR "top&bottom right&left" OR "top right bottom left" + (when padding {:padding padding}) + (when debug {:background-color "gold"}) style) gap-form (when gap [re-com.box/gap :size gap]) children (if gap @@ -276,6 +280,8 @@ {:name :height :required false :type "string" :validate-fn string? :description "a CSS height style"} {:name :min-width :required false :type "string" :validate-fn string? :description "a CSS width style. The minimum width to which the box can shrink"} {:name :min-height :required false :type "string" :validate-fn string? :description "a CSS height style. The minimum height to which the box can shrink"} + {:name :max-width :required false :type "string" :validate-fn string? :description "a CSS width style. The maximum width to which the box can grow"} + {:name :max-height :required false :type "string" :validate-fn string? :description "a CSS height style. The maximum height to which the box can grow"} {:name :justify :required false :default :start :type "keyword" :validate-fn justify-style? :description [:span "equivalent to CSS style " [:span.bold "justify-content"] "." [:br] "One of " justify-options-list]} {:name :align :required false :default :stretch :type "keyword" :validate-fn align-style? :description [:span "equivalent to CSS style " [:span.bold "align-items"] "." [:br] " One of " align-options-list]} {:name :align-self :required false :type "keyword" :validate-fn align-style? :description [:span "equivalent to CSS style " [:span.bold "align-self"] "." [:br] "Used when a child must override the parent's align-items setting."]} @@ -292,23 +298,25 @@ "Returns hiccup which produces a vertical box. It's primary role is to act as a container for components and lays it's children from top to bottom. By default, it also acts as a child under it's parent" - [& {:keys [size width height min-width min-height justify align align-self margin padding gap children class style attr] + [& {:keys [size width height min-width min-height max-width max-height justify align align-self margin padding gap children class style attr] :or {size "none" justify :start align :stretch} :as args}] {:pre [(validate-args-macro v-box-args-desc args "v-box")]} (let [s (merge - (flex-flow-style "column nowrap") + (flex-flow-style "column nowrap") (flex-child-style size) - (when width {:width width}) - (when height {:height height}) - (when min-width {:min-width min-width}) - (when min-height {:min-height min-height}) - (justify-style justify) - (align-style :align-items align) + (when width {:width width}) + (when height {:height height}) + (when min-width {:min-width min-width}) + (when min-height {:min-height min-height}) + (when max-width {:max-width max-width}) + (when max-height {:max-height max-height}) + (justify-style justify) + (align-style :align-items align) (when align-self (align-style :align-self align-self)) - (when margin {:margin margin}) ;; margin and padding: "all" OR "top&bottom right&left" OR "top right bottom left" - (when padding {:padding padding}) - (when debug {:background-color "antiquewhite"}) + (when margin {:margin margin}) ;; margin and padding: "all" OR "top&bottom right&left" OR "top right bottom left" + (when padding {:padding padding}) + (when debug {:background-color "antiquewhite"}) style) gap-form (when gap [re-com.box/gap :size gap]) children (if gap @@ -332,6 +340,8 @@ {:name :height :required false :type "string" :validate-fn string? :description "a CSS height style"} {:name :min-width :required false :type "string" :validate-fn string? :description "a CSS width style. The minimum width to which the box can shrink"} {:name :min-height :required false :type "string" :validate-fn string? :description "a CSS height style. The minimum height to which the box can shrink"} + {:name :max-width :required false :type "string" :validate-fn string? :description "a CSS width style. The maximum width to which the box can grow"} + {:name :max-height :required false :type "string" :validate-fn string? :description "a CSS height style. The maximum height to which the box can grow"} {:name :justify :required false :default :start :type "keyword" :validate-fn justify-style? :description [:span "equivalent to CSS style " [:span.bold "justify-content"] "." [:br] "One of " justify-options-list]} {:name :align :required false :default :stretch :type "keyword" :validate-fn align-style? :description [:span "equivalent to CSS style " [:span.bold "align-items"] "." [:br] " One of " align-options-list]} {:name :align-self :required false :type "keyword" :validate-fn align-style? :description [:span "equivalent to CSS style " [:span.bold "align-self"] "." [:br] "Used when a child must override the parent's align-items setting."]} @@ -346,7 +356,7 @@ (defn box "Returns hiccup which produces a box, which is generally used as a child of a v-box or an h-box. By default, it also acts as a container for further child compenents, or another h-box or v-box" - [& {:keys [size width height min-width min-height justify align align-self margin padding child class style attr] + [& {:keys [size width height min-width min-height max-width max-height justify align align-self margin padding child class style attr] :or {size "none"} :as args}] {:pre [(validate-args-macro box-args-desc args "box")]} @@ -355,6 +365,8 @@ :height height :min-width min-width :min-height min-height + :max-width max-width + :max-height max-height :justify justify :align align :align-self align-self @@ -385,6 +397,8 @@ {:name :height :required false :type "string" :validate-fn string? :description "initial height"} {:name :min-width :required false :type "string" :validate-fn string? :description "a CSS width style. The minimum width to which the box can shrink"} {:name :min-height :required false :type "string" :validate-fn string? :description "a CSS height style. The minimum height to which the box can shrink"} + {:name :max-width :required false :type "string" :validate-fn string? :description "a CSS width style. The maximum width to which the box can grow"} + {:name :max-height :required false :type "string" :validate-fn string? :description "a CSS height style. The maximum height to which the box can grow"} {:name :justify :required false :default :start :type "keyword" :validate-fn justify-style? :description [:span "equivalent to CSS style " [:span.bold "justify-content"] "." [:br] "One of " justify-options-list]} {:name :align :required false :default :stretch :type "keyword" :validate-fn align-style? :description [:span "equivalent to CSS style " [:span.bold "align-items"] "." [:br] " One of " align-options-list]} {:name :align-self :required false :type "keyword" :validate-fn align-style? :description [:span "equivalent to CSS style " [:span.bold "align-self"] "." [:br] "Used when a child must override the parent's align-items setting."]} @@ -409,7 +423,7 @@ :off Never show scroll bar(s). Content which is not in the bounds of the scroller can not be seen. :spill Never show scroll bar(s). Content which is not in the bounds of the scroller spills all over the place. Note: If scroll is set, then setting h-scroll or v-scroll overrides the scroll value" - [& {:keys [size scroll h-scroll v-scroll width height min-width min-height justify align align-self margin padding child class style attr] + [& {:keys [size scroll h-scroll v-scroll width height min-width min-height max-width max-height justify align align-self margin padding child class style attr] :or {size "auto"} :as args}] {:pre [(validate-args-macro scroller-args-desc args "scroller")]} @@ -423,6 +437,8 @@ :height height :min-width min-width :min-height min-height + :max-width max-width + :max-height max-height :justify justify :align align :align-self align-self @@ -452,6 +468,8 @@ {:name :height :required false :type "string" :validate-fn string? :description "a CSS style describing the initial height"} {:name :min-width :required false :type "string" :validate-fn string? :description "a CSS width style. The minimum width to which the box can shrink"} {:name :min-height :required false :type "string" :validate-fn string? :description "a CSS height style. The minimum height to which the box can shrink"} + {:name :max-width :required false :type "string" :validate-fn string? :description "a CSS width style. The maximum width to which the box can grow"} + {:name :max-height :required false :type "string" :validate-fn string? :description "a CSS height style. The maximum height to which the box can grow"} {:name :margin :required false :type "string" :validate-fn string? :description "a CSS margin style"} {:name :padding :required false :type "string" :validate-fn string? :description "a CSS padding style"} {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated"} @@ -467,7 +485,7 @@ - border-width: thin, medium, thick or standard CSS size (e.g. 2px, 0.5em) - border-style: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset - color: standard CSS color (e.g. grey #88ffee)" - [& {:keys [size width height min-width min-height margin padding border l-border r-border t-border b-border radius child class style attr] + [& {:keys [size width height min-width min-height max-width max-height margin padding border l-border r-border t-border b-border radius child class style attr] :or {size "none"} :as args}] {:pre [(validate-args-macro border-args-desc args "border")]} @@ -478,6 +496,8 @@ :height height :min-width min-width :min-height min-height + :max-width max-width + :max-height max-height :margin margin :padding padding :border (if no-border default-border border) diff --git a/src/re_com/misc.cljs b/src/re_com/misc.cljs index 79467c75..cede43dc 100644 --- a/src/re_com/misc.cljs +++ b/src/re_com/misc.cljs @@ -68,8 +68,7 @@ :warning "has-warning " :error "has-error " "") - (when (and status status-icon?) "has-feedback") - ) + (when (and status status-icon?) "has-feedback")) :style (flex-child-style "auto")} [input-type (merge diff --git a/src/re_com/tabs.cljs b/src/re_com/tabs.cljs index 3adeee0f..a02eedbe 100644 --- a/src/re_com/tabs.cljs +++ b/src/re_com/tabs.cljs @@ -2,7 +2,7 @@ (:require-macros [re-com.core :refer [handler-fn]]) (:require [re-com.util :refer [deref-or-value]] [re-com.box :refer [flex-child-style]] - [re-com.validate :refer [extract-arg-data vector-of-maps?] :refer-macros [validate-args-macro]])) + [re-com.validate :refer [extract-arg-data css-style? vector-of-maps?] :refer-macros [validate-args-macro]])) ;;-------------------------------------------------------------------------------------------------- @@ -14,12 +14,13 @@ {:name :model :required true :type "unique-id | atom" :description "the unique identifier of the currently selected tab"} {:name :on-change :required true :type "(unique-id) -> nil" :validate-fn fn? :description "called when user alters the selection. Passed the unique identifier of the selection"} {:name :id-fn :required false :default :id :type "(map) -> anything" :validate-fn fn? :description [:span "given an element of " [:code ":tabs"] ", returns the unique identifier for this tab"]} - {:name :label-fn :required false :default :label :type "(map) -> string | hiccup" :validate-fn fn? :description [:span "given an element of " [:code ":tabs"] ", returns what should be displayed in the tab"]}]) + {:name :label-fn :required false :default :label :type "(map) -> string | hiccup" :validate-fn fn? :description [:span "given an element of " [:code ":tabs"] ", returns what should be displayed in the tab"]} + {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override (for each individual tab rather than the container)"}]) ;(def tabs-args (extract-arg-data tabs-args-desc)) (defn horizontal-tabs - [& {:keys [model tabs on-change id-fn label-fn] + [& {:keys [model tabs on-change id-fn label-fn style] :or {id-fn :id label-fn :label} :as args}] {:pre [(validate-args-macro tabs-args-desc args "tabs")]} @@ -37,8 +38,9 @@ {:class (if selected? "active") :key (str id)} [:a - {:style {:cursor "pointer"} - :on-click (when on-change (handler-fn (on-change id)))} + {:style (merge {:cursor "pointer"} + style) + :on-click (when on-change (handler-fn (on-change id)))} label]]))])) @@ -47,7 +49,7 @@ ;;-------------------------------------------------------------------------------------------------- (defn- bar-tabs - [& {:keys [model tabs on-change id-fn label-fn vertical?]}] + [& {:keys [model tabs on-change id-fn label-fn style vertical?]}] (let [current (deref-or-value model) tabs (deref-or-value tabs) _ (assert (not-empty (filter #(= current (id-fn %)) tabs)) "model not found in tabs vector")] @@ -62,12 +64,13 @@ {:type "button" :key (str id) :class (str "btn btn-default " (if selected? "active")) - :on-click (when on-change (handler-fn (on-change id)))} + :style style + :on-click (when on-change (handler-fn (on-change id)))} label]))])) (defn horizontal-bar-tabs - [& {:keys [model tabs on-change id-fn label-fn] + [& {:keys [model tabs on-change id-fn label-fn style] :or {id-fn :id label-fn :label} :as args}] {:pre [(validate-args-macro tabs-args-desc args "tabs")]} @@ -75,12 +78,13 @@ :model model :tabs tabs :on-change on-change + :style style :id-fn id-fn :label-fn label-fn :vertical? false)) (defn vertical-bar-tabs - [& {:keys [model tabs on-change id-fn label-fn] + [& {:keys [model tabs on-change id-fn label-fn style] :or {id-fn :id label-fn :label} :as args}] {:pre [(validate-args-macro tabs-args-desc args "tabs")]} @@ -88,6 +92,7 @@ :model model :tabs tabs :on-change on-change + :style style :id-fn id-fn :label-fn label-fn :vertical? true)) @@ -98,7 +103,7 @@ ;;-------------------------------------------------------------------------------------------------- (defn- pill-tabs ;; tabs-like in action - [& {:keys [model tabs on-change id-fn label-fn vertical?]}] + [& {:keys [model tabs on-change id-fn label-fn style vertical?]}] (let [current (deref-or-value model) tabs (deref-or-value tabs) _ (assert (not-empty (filter #(= current (id-fn %)) tabs)) "model not found in tabs vector")] @@ -114,15 +119,14 @@ {:class (if selected? "active" "") :key (str id)} [:a - {:style {:cursor "pointer"} - ;:on-click #(on-change id) - :on-click (when on-change (handler-fn (on-change id))) - } + {:style (merge {:cursor "pointer"} + style) + :on-click (when on-change (handler-fn (on-change id)))} label]]))])) (defn horizontal-pill-tabs - [& {:keys [model tabs on-change id-fn label-fn] + [& {:keys [model tabs on-change id-fn style label-fn] :or {id-fn :id label-fn :label} :as args}] {:pre [(validate-args-macro tabs-args-desc args "tabs")]} @@ -130,13 +134,14 @@ :model model :tabs tabs :on-change on-change + :style style :id-fn id-fn :label-fn label-fn :vertical? false)) (defn vertical-pill-tabs - [& {:keys [model tabs on-change id-fn label-fn] + [& {:keys [model tabs on-change id-fn style label-fn] :or {id-fn :id label-fn :label} :as args}] {:pre [(validate-args-macro tabs-args-desc args "tabs")]} @@ -144,6 +149,7 @@ :model model :tabs tabs :on-change on-change + :style style :id-fn id-fn :label-fn label-fn :vertical? true)) diff --git a/src/re_com/text.cljs b/src/re_com/text.cljs index 0595c54e..c62e7260 100644 --- a/src/re_com/text.cljs +++ b/src/re_com/text.cljs @@ -87,6 +87,9 @@ [m children] (if (map? f) [f (rest children)] [nil children]) - m (merge {:style {:width "450px" :min-width "450px" :font-size "15px"}} + m (merge {:style {:flex "none" + :width "450px" + :min-width "450px" + :font-size "15px"}} m)] [:span m (into [:p] children)])) ;; having the wrapping span allow children to contain [:ul] etc \ No newline at end of file diff --git a/src/re_demo/h_box.cljs b/src/re_demo/h_box.cljs index 38d1043a..24e112cb 100644 --- a/src/re_demo/h_box.cljs +++ b/src/re_demo/h_box.cljs @@ -1,5 +1,6 @@ (ns re-demo.h-box - (:require [re-com.core :refer [p h-box v-box box gap line scroller border label title button checkbox hyperlink-href slider horizontal-bar-tabs + (:require [clojure.string :as string] + [re-com.core :refer [p h-box v-box box gap line scroller border label title button checkbox hyperlink-href slider horizontal-bar-tabs input-text input-textarea popover-anchor-wrapper popover-content-wrapper px] :refer-macros [handler-fn]] [re-com.box :refer [h-box-args-desc v-box-args-desc box-args-desc gap-args-desc line-args-desc scroller-args-desc border-args-desc flex-child-style]] [re-com.util :refer [px]] @@ -15,29 +16,43 @@ :border-radius "4px" :padding "4px"})) +(def editor-style {:font-size "12px" + :line-height "20px" + :padding "6px 8px"}) + +(def over-style {:background-color "#fcc"}) + (def h-box-style {}) ;{ :overflow "hidden"}) (def box-state (reagent/atom - {:hbox {:height {:value "100px" :omit? false :range [0 500]} - :width {:value "500px" :omit? false :range [0 1000]} - :justify {:value :start :omit? false} - :align {:value :stretch :omit? false} + {:hbox {:over? false + :height {:value "100px" :omit? false :range [0 500]} + :width {:value "450px" :omit? false :range [0 1000]} + ;:size {:value "none" :omit? true :type :none :px "50px" :ratio "3" :gsb "1 1 0"} + :justify {:value :start :omit? true} + :align {:value :stretch :omit? true} :gap {:value "4px" :omit? false :range [0 100]}} - :box1 {:omit? false + :box1 {:over? false :text {:value "Box1" :omit? false} :size {:value "none" :omit? false :type :none :px "50px" :ratio "3" :gsb "1 1 0"} :align-self {:value :stretch :omit? true} - :height {:value "50px" :omit? true :range [0 200]}} - :box2 {:omit? false + :height {:value "50px" :omit? true :range [0 200]} + :min-width {:value "50px" :omit? true :range [0 200]} + :max-width {:value "50px" :omit? true :range [0 200]}} + :box2 {:over? false :text {:value "Box2" :omit? false} :size {:value "100px" :omit? false :type :px :px "100px" :ratio "2" :gsb "1 1 0"} :align-self {:value :center :omit? false} - :height {:value "50px" :omit? true :range [0 300]}} - :box3 {:omit? false + :height {:value "50px" :omit? true :range [0 300]} + :min-width {:value "50px" :omit? true :range [0 200]} + :max-width {:value "50px" :omit? true :range [0 200]}} + :box3 {:over? false :text {:value "Box3" :omit? false} :size {:value "1" :omit? false :type :ratio :px "150px" :ratio "1" :gsb "1 1 0"} :align-self {:value :stretch :omit? true} - :height {:value "50px" :omit? true :range [0 400]}}})) + :height {:value "50px" :omit? true :range [0 400]} + :min-width {:value "50px" :omit? true :range [0 200]} + :max-width {:value "50px" :omit? true :range [0 200]}}})) (defn merge-named-params "given a hiccup vector v, and a map m containing named parameters, add the named parameters to v...TODO @@ -59,75 +74,103 @@ :child [:div {:style rounded-panel} \"Box 1\"]] " [box-parameters] - (-> [box :style h-box-style] - (merge-named-params (dissoc box-parameters :omit? :text)) - (conj :child) - (conj [:div {:style rounded-panel} (get-in box-parameters [:text :value])])) + (let [over? (:over? box-parameters)] + (-> [box :style h-box-style] + (merge-named-params (dissoc box-parameters :over? :text)) + (conj :child) + (conj [:div {:style (merge rounded-panel + (when over? over-style))} (get-in box-parameters [:text :value])]))) ) (defn demo "creates the hiccup for the real demo, with its child boxes and all" [] - (-> [h-box - :padding "4px" - :style {:border "dashed 1px red"}] - (merge-named-params (:hbox @box-state)) - (conj :children) - (conj [(make-box (:box1 @box-state)) - (make-box (:box2 @box-state)) - (make-box (:box3 @box-state))]))) + (let [over? (:over? (:hbox @box-state))] + (-> [h-box + :padding "4px" + :style (merge {:border "dashed 1px red"} + (when over? over-style))] + (merge-named-params (dissoc (:hbox @box-state) :over?)) + (conj :children) + (conj [(make-box (:box1 @box-state)) + (make-box (:box2 @box-state)) + (make-box (:box3 @box-state))])))) + +(defn close-button + [on-close] + [button + :label [:i {:class "md-close" + :style {:font-size "20px" + :margin-left "8px"}}] + :on-click (handler-fn (on-close)) + :class "close"]) (defn px-editor [path] (let [model (reaction (js/parseInt (get-in @box-state (conj path :value)))) [min max] (get-in @box-state (conj path :range))] - (fn [path] - [slider - :model model - :min min - :max max - :width "200px" - :on-change #(swap! box-state assoc-in (conj path :value) (px %))]))) + (fn [path on-close] + [h-box + :align :center + :children [[slider + :model model + :min min + :max max + :width "200px" + :on-change #(swap! box-state assoc-in (conj path :value) (px %))] + [close-button on-close]]]))) (defn justify-editor [path] - (let [opts [{:id :start :label ":start"} - {:id :end :label ":end"} - {:id :center :label ":center"} - {:id :between :label ":between"} - {:id :around :label ":around"}] + (let [opts [{:id :start :label ":start"} + {:id :end :label ":end"} + {:id :center :label ":center"} + {:id :between :label ":between"} + {:id :around :label ":around"}] model (reaction (get-in @box-state (conj path :value)))] (fn - [path] - [horizontal-bar-tabs - :model model - :tabs opts - :on-change #(swap! box-state assoc-in (conj path :value) %)]))) + [path on-close] + [h-box + :align :center + :children [[horizontal-bar-tabs + :model model + :tabs opts + :style editor-style + :on-change #(swap! box-state assoc-in (conj path :value) %)] + [close-button on-close]]]))) (defn align-editor [path] - (let [opts [{:id :start :label ":start"} - {:id :end :label ":end"} - {:id :center :label ":center"} - {:id :baseline :label ":baseline"} - {:id :stretch :label ":stretch"}] - model (reaction (get-in @box-state (conj path :value)))] + (let [opts [{:id :start :label ":start"} + {:id :end :label ":end"} + {:id :center :label ":center"} + {:id :baseline :label ":baseline"} + {:id :stretch :label ":stretch"}] + model (reaction (get-in @box-state (conj path :value)))] (fn - [path] - [horizontal-bar-tabs - :model model - :tabs opts - :on-change #(swap! box-state assoc-in (conj path :value) %)]))) + [path on-close] + [h-box + :align :center + :children [[horizontal-bar-tabs + :model model + :tabs opts + :style editor-style + :on-change #(swap! box-state assoc-in (conj path :value) %)] + [close-button on-close]]]))) (defn text-editor [path] (let [model (reaction (get-in @box-state (conj path :value)))] (fn - [path] - [input-text - :model model - :change-on-blur? false - :on-change #(swap! box-state assoc-in (conj path :value) %)]))) + [path on-close] + [h-box + :align :center + :children [[input-text + :model model + :change-on-blur? false + :style editor-style + :on-change #(swap! box-state assoc-in (conj path :value) %)] + [close-button on-close]]]))) (defn box-size "Works out what to pass to :size from a map like {:value \"none\" :omit? false :type :none :px \"\100px\" :ratio \"1\" :gsb \"\"}" @@ -149,40 +192,53 @@ px-model (reaction (js/parseInt (get-in @box-state (conj path :px)))) ratio-model (reaction (js/parseInt (get-in @box-state (conj path :ratio)))) gsb-model (reaction (get-in @box-state (conj path :gsb))) - update-model (fn [path new-model] - (swap! box-state assoc-in (conj path :type) new-model) - (swap! box-state assoc-in (conj path :value) (box-size (get-in @box-state path))))] + update-model (fn [path item new-model] + (swap! box-state assoc-in (conj path item) new-model) + (swap! box-state assoc-in (conj path :value) (box-size (get-in @box-state path)))) + size-status (reagent/atom nil)] (fn - [path] + [path on-close] [h-box :align :center - :width "580px" - :gap "8px" - :padding "4px" :children [[horizontal-bar-tabs :model model :tabs opts - :on-change #(update-model path %)] + :style editor-style + :on-change #(do (update-model path :type %) + (reset! size-status nil))] + (when (contains? #{:px :ratio :gsb} @model) + [gap :size "8px"]) (when (= @model :px) [slider :model px-model :min 0 :max 800 :width "200px" - :on-change #(update-model path (px %))]) + :style editor-style + :on-change #(update-model path :px (px %))]) (when (= @model :ratio) [slider :model ratio-model :min 0 :max 10 :width "200px" - :on-change #(update-model path (str %))]) + :style editor-style + :on-change #(update-model path :ratio (str %))]) (when (= @model :gsb) [input-text - :model gsb-model + :model gsb-model :change-on-blur? false - :width "210px" - :on-change #(update-model path %)])]]))) + :status @size-status + :status-icon? true + :status-tooltip "Ignored - please enter 1 or 3 values" + :width "200px" + :style editor-style + :on-change #(let [valid? (contains? #{1 3} (count (string/split (string/trim %) #"\s+")))] + (if valid? + (do (reset! size-status nil) + (update-model path :gsb %)) + (reset! size-status :warning)))]) + [close-button on-close]]]))) (defn indent-px [ident] @@ -219,7 +275,6 @@ (str path)) row-active? (and @mouse-over-row? active?) arg-hiccup [h-box - ;:size "auto" :width "282px" :style (merge {:overflow "hidden"} (when row-active? {:background-color "#f0f0f0" @@ -228,19 +283,18 @@ :attr {:on-mouse-over #(mouse-over-fn true) :on-mouse-out #(mouse-over-fn false)} :children [[box - :size "20px" - :child (if row-active? + :size "20px" + :child (if (and row-active? (not (contains? (set path) :text))) [checkbox - :model omit? - :on-change #(swap! box-state assoc-in (conj path :omit?) %)] + :model (not @omit?) + :on-change #(swap! box-state assoc-in (conj path :omit?) (not %))] [:span])] [gap :size (indent-px indent)] [box :size "100px" :child text1] [box :attr {:on-click (handler-fn (swap! editor-open? not))} :child [:span - [:span {:style (when row-active? {:color "blue" - :font-weight "bold"})} arg-val] + [:span {:style (when row-active? {:color "blue"})} arg-val] text2]]]]] (if editor [popover-anchor-wrapper @@ -250,17 +304,17 @@ :popover [popover-content-wrapper :showing? editor-open? :position :right-center - :body [editor path]]] + :body [editor path #(swap! editor-open? not)]]] arg-hiccup))))) (defn editable-code "Shows the code in a way that values can be edited, allowing for an interactive demo." [] - (let [over-hbox (fn [over?] #_(println "h" over?)) - over-box1 (fn [over?] #_(println "1" over?)) - over-box2 (fn [over?] #_(println "2" over?)) - over-box3 (fn [over?] #_(println "3" over?))] + (let [over-hbox (fn [over?] (swap! box-state assoc-in [:hbox :over?] over?)) + over-box1 (fn [over?] (swap! box-state assoc-in [:box1 :over?] over?)) + over-box2 (fn [over?] (swap! box-state assoc-in [:box2 :over?] over?)) + over-box3 (fn [over?] (swap! box-state assoc-in [:box3 :over?] over?))] (fn [] [v-box :children [[gap :size "20px"] @@ -268,6 +322,7 @@ [v-box :width "300px" :style {:font-family "Consolas, \"Courier New\", monospace" + :font-size "12px" :background-color "#f5f5f5" :border "1px solid lightgray" :border-radius "4px" @@ -275,28 +330,38 @@ :children [[code-row false :0 "[h-box" "" "" over-hbox] [code-row true :1 " :height" [:hbox :height] "" over-hbox px-editor] [code-row true :1 " :width" [:hbox :width] "" over-hbox px-editor] + ;[code-row true :1 " :size" [:hbox :size] "" over-hbox size-editor] [code-row true :1 " :justify" [:hbox :justify] "" over-hbox justify-editor] [code-row true :1 " :align" [:hbox :align] "" over-hbox align-editor] [code-row true :1 " :gap" [:hbox :gap] "" over-hbox px-editor] [code-row false :1 " :children" " [" "" over-hbox] - [code-row false :2 "[box " "" "" over-box1] - [code-row true :3 " :child" [:box1 :text] "" over-box1 text-editor] - [code-row true :3 " :size" [:box1 :size] "" over-box1 size-editor] - [code-row true :3 " :align-self" [:box1 :align-self] "" over-box1 align-editor] - [code-row true :3 " :height" [:box1 :height] "]" over-box1 px-editor] + [code-row false :2 "[box " "" "" over-box1] + [code-row true :3 " :child" [:box1 :text] "" over-box1 text-editor] + [code-row true :3 " :size" [:box1 :size] "" over-box1 size-editor] + [code-row true :3 " :align-self" [:box1 :align-self] "" over-box1 align-editor] + [code-row true :3 " :height" [:box1 :height] "" over-box1 px-editor] + ;[code-row true :3 " :min-height" [:box1 :min-height] "" over-box1 px-editor] + ;[code-row true :3 " :max-height" [:box1 :max-height] "" over-box1 px-editor] + ;[code-row true :3 " :width" [:box1 :width] "" over-box1 px-editor] + [code-row true :3 " :min-width" [:box1 :min-width] "" over-box1 px-editor] + [code-row true :3 " :max-width" [:box1 :max-width] "]" over-box1 px-editor] - [code-row false :2 "[box " "" "" over-box2] - [code-row true :3 " :child" [:box2 :text] "" over-box2 text-editor] - [code-row true :3 " :size" [:box2 :size] "" over-box2 size-editor] - [code-row true :3 " :align-self" [:box2 :align-self] "" over-box2 align-editor] - [code-row true :3 " :height" [:box2 :height] "]" over-box2 px-editor] + [code-row false :2 "[box " "" "" over-box2] + [code-row true :3 " :child" [:box2 :text] "" over-box2 text-editor] + [code-row true :3 " :size" [:box2 :size] "" over-box2 size-editor] + [code-row true :3 " :align-self" [:box2 :align-self] "" over-box2 align-editor] + [code-row true :3 " :height" [:box2 :height] "" over-box2 px-editor] + [code-row true :3 " :min-width" [:box2 :min-width] "" over-box2 px-editor] + [code-row true :3 " :max-width" [:box2 :max-width] "]" over-box2 px-editor] - [code-row false :2 "[box " "" "" over-box3] - [code-row true :3 " :child" [:box3 :text] "" over-box3 text-editor] - [code-row true :3 " :size" [:box3 :size] "" over-box3 size-editor] - [code-row true :3 " :align-self" [:box3 :align-self] "" over-box3 align-editor] - [code-row true :3 " :height" [:box3 :height] "]]" over-box3 px-editor]]]]]))) + [code-row false :2 "[box " "" "" over-box3] + [code-row true :3 " :child" [:box3 :text] "" over-box3 text-editor] + [code-row true :3 " :size" [:box3 :size] "" over-box3 size-editor] + [code-row true :3 " :align-self" [:box3 :align-self] "" over-box3 align-editor] + [code-row true :3 " :height" [:box3 :height] "" over-box3 px-editor] + [code-row true :3 " :min-width" [:box3 :min-width] "" over-box3 px-editor] + [code-row true :3 " :max-width" [:box3 :max-width] "]]" over-box3 px-editor]]]]]))) (defn panel @@ -324,9 +389,11 @@ [v-box :gap "10px" :width "500px" + :height "800px" + ;:style {:border "dashed 1px #ddd"} :children [[title2 "Demo"] [p "This is an " [:span.bold "interactive"] " demo. Edit the \"code\" (in grey) and watch the boxes change. - The red-dashed box is an h-box whch contains up to three children."] + The red-dashed box is an h-box which contains up to three children."] [demo] [editable-code]]]]] [gap :size "30px"]]])) diff --git a/src/re_demo/tabs.cljs b/src/re_demo/tabs.cljs index d2eb6f12..6b502180 100644 --- a/src/re_demo/tabs.cljs +++ b/src/re_demo/tabs.cljs @@ -43,8 +43,8 @@ "[horizontal-tabs ... ]" {:width fn-name-width :font-size "20px"}] [horizontal-tabs - :model selected-tab-id - :tabs tabs-definition + :model selected-tab-id + :tabs tabs-definition :on-change change-tab]]] [h-box :align :center @@ -52,8 +52,8 @@ "[horizontal-bar-tabs ... ]" {:width fn-name-width :font-size "20px"}] [horizontal-bar-tabs - :model selected-tab-id - :tabs tabs-definition + :model selected-tab-id + :tabs tabs-definition :on-change change-tab]]] [h-box :align :center @@ -61,8 +61,8 @@ "[vertical-bar-tabs ... ]" {:width fn-name-width :font-size "20px"}] [vertical-bar-tabs - :model selected-tab-id - :tabs tabs-definition + :model selected-tab-id + :tabs tabs-definition :on-change change-tab]]] [h-box :align :center From 9700d09d26e769a37599b905ff999ce2919bbe41 Mon Sep 17 00:00:00 2001 From: Gregg8 Date: Wed, 22 Apr 2015 15:28:28 +1000 Subject: [PATCH 3/7] WIP - Progressed the h-box demo. Added presets with description popovers. - Added :width and :height to back to gap. It was partially there (did we remove this?). - Added results boxes for demo1 in [gap] page. - Fixed bug - padding on close button in :size editor. - Fixed bug - wrapping ":status-icon?" text. - Added/corrected/updated doc strings. - Removed a pile of commented/unreferenced validation code. - Made bootstrap.css local for "dev" index.html and loaded it into the CSS folder to remove dependency on remote resources when not available. --- run/resources/public/index_dev.html | 3 +- src/re_com/alert.cljs | 6 +- src/re_com/box.cljs | 18 +- src/re_com/buttons.cljs | 20 +- src/re_com/datepicker.cljs | 6 +- src/re_com/dropdown.cljs | 4 +- src/re_com/input_time.cljs | 4 +- src/re_com/misc.cljs | 14 +- src/re_com/modal_panel.cljs | 4 +- src/re_com/popover.cljs | 14 +- src/re_com/selection_list.cljs | 4 +- src/re_com/splits.cljs | 18 +- src/re_com/tabs.cljs | 4 +- src/re_com/text.cljs | 6 +- src/re_demo/gap.cljs | 26 ++- src/re_demo/h_box.cljs | 335 +++++++++++++++++++--------- src/re_demo/input_text.cljs | 19 +- src/re_demo/line.cljs | 6 +- src/re_demo/row_button.cljs | 3 +- src/re_demo/splits.cljs | 27 +-- src/re_demo/v_box.cljs | 6 +- 21 files changed, 300 insertions(+), 247 deletions(-) diff --git a/run/resources/public/index_dev.html b/run/resources/public/index_dev.html index d2ae98b0..835cdbf6 100644 --- a/run/resources/public/index_dev.html +++ b/run/resources/public/index_dev.html @@ -4,7 +4,8 @@ re-com Demo (dev) - + + diff --git a/src/re_com/alert.cljs b/src/re_com/alert.cljs index 5d0617ae..2a299453 100644 --- a/src/re_com/alert.cljs +++ b/src/re_com/alert.cljs @@ -3,7 +3,7 @@ (:require [re-com.util :refer [deref-or-value]] [re-com.buttons :refer [button]] [re-com.box :refer [h-box v-box box scroller border flex-child-style]] - [re-com.validate :refer [extract-arg-data string-or-hiccup? alert-type? alert-types-list + [re-com.validate :refer [string-or-hiccup? alert-type? alert-types-list vector-of-maps? css-style? html-attr?] :refer-macros [validate-args-macro]])) ;;-------------------------------------------------------------------------------------------------- @@ -22,8 +22,6 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles. Applied to outer container"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed. Applied to outer container"]}]) -;(def alert-box-args (extract-arg-data alert-box-args-desc)) - (defn alert-box "Displays one alert box. A close button allows the message to be removed" [& {:keys [id alert-type heading body padding closeable? on-close class style attr] @@ -76,8 +74,6 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles. Applied to outer container"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed. Applied to outer container"]}]) -;(def alert-list-args (extract-arg-data alert-list-args-desc)) - (defn alert-list "Displays a list of alert-box components in a v-box. Sample alerts object: [{:id 2 diff --git a/src/re_com/box.cljs b/src/re_com/box.cljs index 08ce79b4..5b940365 100644 --- a/src/re_com/box.cljs +++ b/src/re_com/box.cljs @@ -1,6 +1,6 @@ (ns re-com.box (:require [clojure.string :as string] - [re-com.validate :refer [extract-arg-data justify-style? justify-options-list align-style? align-options-list + [re-com.validate :refer [justify-style? justify-options-list align-style? align-options-list scroll-style? scroll-options-list string-or-hiccup? css-style? html-attr?] :refer-macros [validate-args-macro]])) (def debug false) @@ -156,12 +156,12 @@ (def gap-args-desc [{:name :size :required true :type "string" :validate-fn string? :description "the length of the whitespace. Typically, an absolute CSS length like 10px or 10em, but can be a stretchy proportional amount like 2"} + {:name :width :required false :type "string" :validate-fn string? :description "a CSS width style"} + {:name :height :required false :type "string" :validate-fn string? :description "a CSS height style"} {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated"} {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def gap-args (extract-arg-data gap-args-desc)) - (defn gap "Returns a component which produces a gap between children in a v-box/h-box along the main axis" [& {:keys [size width height class style attr] @@ -190,8 +190,6 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def line-args (extract-arg-data line-args-desc)) - (defn line "Returns a component which produces a line between children in a v-box/h-box along the main axis. Specify size in pixels and a stancard CSS color. Defaults to a 1px lightgray line" @@ -232,8 +230,6 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def h-box-args (extract-arg-data h-box-args-desc)) - (defn h-box "Returns hiccup which produces a horizontal box. It's primary role is to act as a container for components and lays it's children from left to right. @@ -292,8 +288,6 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def v-box-args (extract-arg-data v-box-args-desc)) - (defn v-box "Returns hiccup which produces a vertical box. It's primary role is to act as a container for components and lays it's children from top to bottom. @@ -351,8 +345,6 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def box-args (extract-arg-data box-args-desc)) - (defn box "Returns hiccup which produces a box, which is generally used as a child of a v-box or an h-box. By default, it also acts as a container for further child compenents, or another h-box or v-box" @@ -408,8 +400,6 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def scroller-args (extract-arg-data scroller-args-desc)) - (defn scroller "Returns hiccup which produces a scoller component. This is the way scroll bars are added to boxes, in favour of adding the scroll attributes directly to the boxes themselves. @@ -476,8 +466,6 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def border-args (extract-arg-data border-args-desc)) - (defn border "Returns hiccup which produces a border component. This is the way borders are added to boxes, in favour of adding the border attributes directly to the boxes themselves. diff --git a/src/re_com/buttons.cljs b/src/re_com/buttons.cljs index 5c7cee90..ae8beb67 100644 --- a/src/re_com/buttons.cljs +++ b/src/re_com/buttons.cljs @@ -1,7 +1,7 @@ (ns re-com.buttons (:require-macros [re-com.core :refer [handler-fn]]) (:require [re-com.util :refer [deref-or-value px]] - [re-com.validate :refer [extract-arg-data position? position-options-list button-size? button-sizes-list + [re-com.validate :refer [position? position-options-list button-size? button-sizes-list string-or-hiccup? css-style? html-attr? string-or-atom?] :refer-macros [validate-args-macro]] [re-com.popover :refer [popover-tooltip]] [re-com.box :refer [h-box v-box box gap line flex-child-style]] @@ -21,8 +21,6 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def button-args (extract-arg-data button-args-desc)) - (defn button "Returns the markup for a basic button" [] @@ -76,10 +74,6 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def md-circle-icon-button-args (extract-arg-data md-circle-icon-button-args-desc)) - -; XXX It should be possible for disabled? to be an atom? - (defn md-circle-icon-button "a circular button containing a material design icon" [] @@ -136,10 +130,6 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def md-icon-button-args (extract-arg-data md-icon-button-args-desc)) - -; XXX It should be possible for disabled? to be an atom? - (defn md-icon-button "a square button containing a material design icon" [] @@ -193,8 +183,6 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def info-button-args (extract-arg-data info-button-args-desc)) - (defn info-button "A tiny light grey button, with an 'i' in it. Meant to be unobrusive. When pressed, displays a popup assumidly containing helpful information. @@ -239,8 +227,6 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def row-button-args (extract-arg-data row-button-args-desc)) - (defn row-button "a circular button containing a material design icon" [] @@ -289,8 +275,6 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def hyperlink-args (extract-arg-data hyperlink-args-desc)) - (defn hyperlink "Renders an underlined text hyperlink component. This is very similar to the button component above but styled to looks like a hyperlink. @@ -343,8 +327,6 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def hyperlink-href-args (extract-arg-data hyperlink-href-args-desc)) - (defn hyperlink-href "Renders an underlined text hyperlink component. This is very similar to the button component above but styled to looks like a hyperlink. diff --git a/src/re_com/datepicker.cljs b/src/re_com/datepicker.cljs index f7b34e76..2f81d2a3 100644 --- a/src/re_com/datepicker.cljs +++ b/src/re_com/datepicker.cljs @@ -3,7 +3,7 @@ (:require [reagent.core :as reagent] [cljs-time.core :refer [now minus plus months days year month day day-of-week first-day-of-the-month before? after?]] - [re-com.validate :refer [extract-arg-data goog-date? css-style? html-attr?] :refer-macros [validate-args-macro]] + [re-com.validate :refer [goog-date? css-style? html-attr?] :refer-macros [validate-args-macro]] [cljs-time.predicates :refer [sunday?]] [cljs-time.format :refer [parse unparse formatters formatter]] [re-com.box :refer [border h-box flex-child-style]] @@ -214,8 +214,6 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def datepicker-args (extract-arg-data datepicker-args-desc)) - (defn datepicker [& {:keys [model] :as args}] {:pre [(validate-args-macro datepicker-args-desc args "datepicker")]} @@ -260,8 +258,6 @@ (conj datepicker-args-desc {:name :format :required false :default "yyyy MMM dd" :type "string" :description "a represenatation of a date format. See cljs_time.format"})) -;(def datepicker-dropdown-args (extract-arg-data datepicker-dropdown-args-desc)) - (defn datepicker-dropdown [& {:as args}] {:pre [(validate-args-macro datepicker-dropdown-args-desc args "datepicker-dropdown")]} diff --git a/src/re_com/dropdown.cljs b/src/re_com/dropdown.cljs index 198122f4..8a5abaae 100644 --- a/src/re_com/dropdown.cljs +++ b/src/re_com/dropdown.cljs @@ -2,7 +2,7 @@ (:require-macros [re-com.core :refer [handler-fn]]) (:require [re-com.util :refer [deref-or-value position-for-id item-for-id]] [re-com.box :refer [align-style flex-child-style]] - [re-com.validate :refer [extract-arg-data vector-of-maps? css-style? html-attr? number-or-string?] :refer-macros [validate-args-macro]] + [re-com.validate :refer [vector-of-maps? css-style? html-attr? number-or-string?] :refer-macros [validate-args-macro]] [clojure.string :as string] [reagent.core :as reagent])) @@ -203,8 +203,6 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def single-dropdown-args (extract-arg-data single-dropdown-args-desc)) - (defn single-dropdown "Render a single dropdown component which emulates the bootstrap-choosen style. Sample choices object: [{:id \"AU\" :label \"Australia\" :group \"Group 1\"} diff --git a/src/re_com/input_time.cljs b/src/re_com/input_time.cljs index ca711337..c720c870 100644 --- a/src/re_com/input_time.cljs +++ b/src/re_com/input_time.cljs @@ -1,7 +1,7 @@ (ns re-com.input-time (:require-macros [re-com.core :refer [handler-fn]]) (:require [reagent.core :as reagent] - [re-com.validate :refer [extract-arg-data css-style? html-attr? number-or-string?] :refer-macros [validate-args-macro]] + [re-com.validate :refer [css-style? html-attr? number-or-string?] :refer-macros [validate-args-macro]] [re-com.text :refer [label]] [re-com.box :refer [h-box gap]] [re-com.util :refer [pad-zero-number deref-or-value]])) @@ -138,8 +138,6 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS style. e.g. {:color \"red\" :width \"50px\"}" } {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def input-time-args (extract-arg-data input-time-args-desc)) - (defn input-time "I return the markup for an input box which will accept and validate times. Parameters - refer input-time-args above" diff --git a/src/re_com/misc.cljs b/src/re_com/misc.cljs index cede43dc..eb9ed283 100644 --- a/src/re_com/misc.cljs +++ b/src/re_com/misc.cljs @@ -3,7 +3,7 @@ (:require [re-com.util :refer [deref-or-value px]] [re-com.popover :refer [popover-tooltip]] [re-com.box :refer [h-box v-box box gap line flex-child-style align-style]] - [re-com.validate :refer [extract-arg-data input-status-type? input-status-types-list regex? + [re-com.validate :refer [input-status-type? input-status-types-list regex? string-or-hiccup? css-style? html-attr? number-or-string? string-or-atom? throbber-size? throbber-sizes-list] :refer-macros [validate-args-macro]] [reagent.core :as reagent])) @@ -31,8 +31,6 @@ {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]} {:name :input-type :required false :type "keyword" :validate-fn keyword? :description "ONLY applies to super function 'base-input-text': either :input or :textarea"}]) -;(def input-text-args (extract-arg-data input-text-args-desc)) - ;; Sample regex's: ;; - #"^(-{0,1})(\d*)$" ;; Signed integer ;; - #"^(\d{0,2})$|^(\d{0,2}\.\d{0,1})$" ;; Specific numeric value ##.# @@ -163,8 +161,6 @@ {:name :label-style :required false :type "CSS style map" :validate-fn css-style? :description "the CSS class applied overall to the component"} {:name :label-class :required false :type "string" :validate-fn string? :description "the CSS class applied to the label"}]) -;(def checkbox-args (extract-arg-data checkbox-args-desc)) - ;; TODO: when disabled?, should the text appear "disabled". (defn checkbox "I return the markup for a checkbox, with an optional RHS label" @@ -213,8 +209,6 @@ {:name :label-style :required false :type "CSS style map" :validate-fn css-style? :description "the CSS class applied overall to the component"} {:name :label-class :required false :type "string" :validate-fn string? :description "the CSS class applied to the label"}]) -;(def radio-button-args (extract-arg-data radio-button-args-desc)) - (defn radio-button "I return the markup for a radio button, with an optional RHS label" [& {:keys [model on-change value label disabled? style label-class label-style] @@ -265,8 +259,6 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def slider-args (extract-arg-data slider-args-desc)) - (defn slider "Returns markup for an HTML5 slider input" [] @@ -315,8 +307,6 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def progress-bar-args (extract-arg-data progress-bar-args-desc)) - (defn progress-bar "Render a bootstrap styled progress bar" [& {:keys [model width striped? class style attr] @@ -352,8 +342,6 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def throbber-args (extract-arg-data throbber-args-desc)) - (defn throbber "Render an animated throbber using CSS" [& {:keys [size color class style attr] :as args}] diff --git a/src/re_com/modal_panel.cljs b/src/re_com/modal_panel.cljs index 61fd83c3..9ae3ce5a 100644 --- a/src/re_com/modal_panel.cljs +++ b/src/re_com/modal_panel.cljs @@ -1,5 +1,5 @@ (ns re-com.modal-panel - (:require [re-com.validate :refer [extract-arg-data string-or-hiccup? number-or-string? css-style? html-attr?] :refer-macros [validate-args-macro]])) + (:require [re-com.validate :refer [string-or-hiccup? number-or-string? css-style? html-attr?] :refer-macros [validate-args-macro]])) ;; ------------------------------------------------------------------------------------ ;; modal-panel @@ -14,8 +14,6 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def modal-panel-args (extract-arg-data modal-panel-args-desc)) - (defn modal-panel "Renders a modal window centered on screen. A dark transparent backdrop sits between this and the underlying main window to prevent UI interactivity and place user focus on the modal window. diff --git a/src/re_com/popover.cljs b/src/re_com/popover.cljs index 75f2a8c7..24622985 100644 --- a/src/re_com/popover.cljs +++ b/src/re_com/popover.cljs @@ -2,7 +2,7 @@ (:require-macros [re-com.core :refer [handler-fn]]) (:require [re-com.util :refer [get-element-by-id px deref-or-value sum-scroll-offsets]] [re-com.box :refer [h-box flex-child-style flex-flow-style align-style]] - [re-com.validate :refer [extract-arg-data position? position-options-list popover-status-type? popover-status-types-list number-or-string? + [re-com.validate :refer [position? position-options-list popover-status-type? popover-status-types-list number-or-string? string-or-hiccup? string-or-atom? vector-of-maps? css-style? html-attr?] :refer-macros [validate-args-macro]] [clojure.string :as string] [reagent.core :as reagent])) @@ -109,8 +109,6 @@ [{:name :opacity :required false :default 0.0 :type "double | string" :validate-fn number-or-string? :description [:span "opacity of backdrop from:" [:br] "0.0 (transparent) to 1.0 (opaque)"]} {:name :on-click :required false :type "( ) -> nil" :validate-fn fn? :description "function to call when the backdrop is clicked"}]) -;(def backdrop-args (extract-arg-data backdrop-args-desc)) - (defn- backdrop "Renders a backdrop dive which fills the entire page and responds to clicks on it. Can also specify how tranparent it should be" [& {:keys [opacity on-click] :as args}] @@ -157,8 +155,6 @@ {:name :tooltip-style? :required false :default false :type "boolean" :description "setup popover styles for a tooltip"} {:name :title :required false :type "string | markup" :description "describes a title"}]) -;(def popover-border-args (extract-arg-data popover-border-args-desc)) - (defn popover-border "Renders an element or control along with a Bootstrap popover" [& {:keys [children position width height popover-color arrow-length arrow-width padding margin-left margin-top tooltip-style? title] @@ -239,8 +235,6 @@ {:name :close-button? :required false :default true :type "boolean" :description "when true, displays the close button"} {:name :close-callback :required false :type "function" :validate-fn fn? :description "callback taking no parameters, used when the close button is pressed. Not required if :showing? atom passed in OR :close-button? is set to false"}]) -;(def popover-title-args (extract-arg-data popover-title-args-desc)) - (defn- popover-title "Renders a title at the top of a popover with an optional close button on the far right" [& {:keys [title showing? close-button? close-callback] @@ -279,8 +273,6 @@ {:name :padding :required false :type "string" :validate-fn string? :description "a CSS style which overrides the inner padding of the popover"} {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "override component style(s) with a style map, only use in case of emergency"}]) -;(def popover-content-wrapper-args (extract-arg-data popover-content-wrapper-args-desc)) - (defn popover-content-wrapper "Abstracts several components to handle the 90% of cases for general popovers and dialog boxes" [& {:keys [showing? position no-clip? width height backdrop-opacity on-cancel title close-button? body tooltip-style? popover-color arrow-length arrow-width padding style] @@ -347,8 +339,6 @@ {:name :popover :required true :type "string | hiccup" :validate-fn string-or-hiccup? :description "the popover body component"} {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "override component style(s) with a style map, only use in case of emergency"}]) -;(def popover-anchor-wrapper-args (extract-arg-data popover-anchor-wrapper-args-desc)) - (defn popover-anchor-wrapper "Renders an element or control along with a Bootstrap popover" [& {:keys [showing? position anchor popover style] :as args}] @@ -389,8 +379,6 @@ {:name :width :required false :type "string" :validate-fn string? :description "specifies width of the tooltip"} {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "override component style(s) with a style map, only use in case of emergency"}]) -;(def popover-tooltip-args (extract-arg-data popover-tooltip-args-desc)) - (defn popover-tooltip "Renders text as a tooltip in Bootstrap popover style" [& {:keys [label showing? on-cancel status anchor position width style] :as args}] diff --git a/src/re_com/selection_list.cljs b/src/re_com/selection_list.cljs index 480ffa84..0411828d 100644 --- a/src/re_com/selection_list.cljs +++ b/src/re_com/selection_list.cljs @@ -3,7 +3,7 @@ (:require [re-com.text :refer [label]] [re-com.misc :refer [checkbox radio-button]] [re-com.box :refer [box border h-box v-box]] - [re-com.validate :refer [extract-arg-data vector-of-maps? string-or-atom? set-or-atom?] :refer-macros [validate-args-macro]] + [re-com.validate :refer [vector-of-maps? string-or-atom? set-or-atom?] :refer-macros [validate-args-macro]] [re-com.util :refer [fmap deref-or-value]])) ;; ---------------------------------------------------------------------------- @@ -96,8 +96,6 @@ {:name :item-renderer :required false :type "function | atom" :validate-fn fn? :description "called for each element during setup, the returned component renders the element, responds to clicks etc."} {:name :label-fn :required false :default 'str :type "function | atom" :validate-fn ifn? :description "called for each element to get label string"}]) -;(def selection-list-args (extract-arg-data selection-list-args-desc)) - ;;TODO hide hover highlights for links when disabled (defn- list-container [{:keys [choices model on-change multi-select? disabled? hide-border? label-fn required? as-exclusions? item-renderer] diff --git a/src/re_com/splits.cljs b/src/re_com/splits.cljs index a62608e9..ac7161bc 100644 --- a/src/re_com/splits.cljs +++ b/src/re_com/splits.cljs @@ -2,7 +2,7 @@ (:require-macros [re-com.core :refer [handler-fn]]) (:require [re-com.util :refer [get-element-by-id sum-scroll-offsets]] [re-com.box :refer [flex-child-style flex-flow-style]] - [re-com.validate :refer [extract-arg-data string-or-hiccup? number-or-string? html-attr? css-style?] :refer-macros [validate-args-macro]] + [re-com.validate :refer [string-or-hiccup? number-or-string? html-attr? css-style?] :refer-macros [validate-args-macro]] [reagent.core :as reagent])) @@ -36,9 +36,9 @@ ;; Component: h-split ;; ------------------------------------------------------------------------------------ -(def h-split-args-desc - [{:name :panel-1 :required true :type "hiccup" :validate-fn string-or-hiccup? :description "markup to go in the left panel"} - {:name :panel-2 :required true :type "hiccup" :validate-fn string-or-hiccup? :description "markup to go in the right panel"} +(def hv-split-args-desc + [{:name :panel-1 :required true :type "hiccup" :validate-fn string-or-hiccup? :description "markup to go in the left (or top) panel"} + {:name :panel-2 :required true :type "hiccup" :validate-fn string-or-hiccup? :description "markup to go in the right (or bottom) panel"} {:name :on-split-change :required false :type "(double) -> nil" :validate-fn fn? :description [:span "called when the user moves the splitter bar (on mouse up, not on each mouse move). Given the new " [:code ":panel-1"] " percentage split"]} {:name :initial-split :required false :default 50 :type "double | string" :validate-fn number-or-string? :description [:span "initial split percentage for " [:code ":panel-1"] ". Can be double value or string (with/without percentage sign)"]} {:name :splitter-size :required false :default "8px" :type "string" :validate-fn string? :description "thickness of the splitter"} @@ -47,14 +47,12 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override, applied to outer container"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed, applied to outer container"]}]) -;(def h-split-args (extract-arg-data h-split-args-desc)) - (defn h-split "Returns markup for a horizontal layout component" [& {:keys [panel-1 panel-2 initial-split splitter-size margin on-split-change class style attr] :or {initial-split 50 splitter-size "8px" margin "8px"} :as args}] - {:pre [(validate-args-macro h-split-args-desc args "h-split")]} + {:pre [(validate-args-macro hv-split-args-desc args "h-split")]} (let [container-id (gensym "h-split-") split-perc (reagent/atom (js/parseInt initial-split)) ;; splitter position as a percentage of width dragging? (reagent/atom false) ;; is the user dragging the splitter (mouse is down)? @@ -130,7 +128,7 @@ ;; Component: v-split ;; ------------------------------------------------------------------------------------ -(def v-split-args-desc +#_(def v-split-args-desc [{:name :panel-1 :required true :type "hiccup" :validate-fn string-or-hiccup? :description "markup to go in the top panel"} {:name :panel-2 :required true :type "hiccup" :validate-fn string-or-hiccup? :description "markup to go in the bottom panel"} {:name :on-split-change :required false :type "(double) -> nil" :validate-fn fn? :description [:span "called when the user moves the splitter bar (on mouse up, not on each mouse move). Given the new " [:code ":panel-1"] " percentage split"]} @@ -141,14 +139,12 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override, applied to outer container"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed, applied to outer container"]}]) -;(def v-split-args (extract-arg-data v-split-args-desc)) - (defn v-split "Returns markup for a vertical layout component" [& {:keys [panel-1 panel-2 initial-split splitter-size margin on-split-change class style attr] :or {initial-split 50 splitter-size "8px" margin "8px"} :as args}] - {:pre [(validate-args-macro v-split-args-desc args "v-split")]} + {:pre [(validate-args-macro hv-split-args-desc args "v-split")]} (let [container-id (gensym "v-split-") split-perc (reagent/atom (js/parseInt initial-split)) ;; splitter position as a percentage of height dragging? (reagent/atom false) ;; is the user dragging the splitter (mouse is down)? diff --git a/src/re_com/tabs.cljs b/src/re_com/tabs.cljs index a02eedbe..282b6446 100644 --- a/src/re_com/tabs.cljs +++ b/src/re_com/tabs.cljs @@ -2,7 +2,7 @@ (:require-macros [re-com.core :refer [handler-fn]]) (:require [re-com.util :refer [deref-or-value]] [re-com.box :refer [flex-child-style]] - [re-com.validate :refer [extract-arg-data css-style? vector-of-maps?] :refer-macros [validate-args-macro]])) + [re-com.validate :refer [css-style? vector-of-maps?] :refer-macros [validate-args-macro]])) ;;-------------------------------------------------------------------------------------------------- @@ -17,8 +17,6 @@ {:name :label-fn :required false :default :label :type "(map) -> string | hiccup" :validate-fn fn? :description [:span "given an element of " [:code ":tabs"] ", returns what should be displayed in the tab"]} {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override (for each individual tab rather than the container)"}]) -;(def tabs-args (extract-arg-data tabs-args-desc)) - (defn horizontal-tabs [& {:keys [model tabs on-change id-fn label-fn style] :or {id-fn :id label-fn :label} diff --git a/src/re_com/text.cljs b/src/re_com/text.cljs index c62e7260..fb6ad995 100644 --- a/src/re_com/text.cljs +++ b/src/re_com/text.cljs @@ -1,7 +1,7 @@ (ns re-com.text (:require-macros [re-com.core :refer [handler-fn]]) (:require [re-com.box :refer [v-box box line flex-child-style]] - [re-com.validate :refer [extract-arg-data title-levels-list title-level-type? css-style? + [re-com.validate :refer [title-levels-list title-level-type? css-style? html-attr? string-or-hiccup?] :refer-macros [validate-args-macro]])) @@ -17,8 +17,6 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "additional CSS styles"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def label-args (extract-arg-data label-args-desc)) - (defn label "Returns markup for a basic label" [& {:keys [label on-click width class style attr] @@ -53,8 +51,6 @@ {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}]) -;(def title-args (extract-arg-data title-args-desc)) - (defn title "A title with four preset levels" [& {:keys [label level underline? margin-top margin-bottom class style attr] diff --git a/src/re_demo/gap.cljs b/src/re_demo/gap.cljs index df7bcc14..f11d9f60 100644 --- a/src/re_demo/gap.cljs +++ b/src/re_demo/gap.cljs @@ -37,18 +37,36 @@ {:style {:width "40em"}} "[h-box :gap \"10px\" ; <-- in between each children - :children [[component-1] - [component-2] + :children [[grey-box] + [grey-box] [gap :size \"5px\"] ; <-- ad hoc - [component-3]]]"] + [grey-box]]]"] + [p "Result:"] + [h-box + :gap "10px" + :style {:border "dashed 1px red"} + :children [[box + :style {:background-color "lightgrey" + :padding "20px"} + :child "Box 1"] + [box + :style {:background-color "lightgrey" + :padding "20px"} + :child "Box 2"] + [gap :size "5px"] + [box + :style {:background-color "lightgrey" + :padding "20px"} + :child "Box 3"]]] + [gap :size "10px"] [p "Notes:" [:ul [:li "h-box and v-box have a " [:code ":gap"] " parameter which inserts a given amount of white space between each child."] [:li "For more ad hoc gaps, use the " [:span.bold "[gap ...]"] " component itself."] [:li "In this example, the gap between components 2 and 3 will be 25px - because the [gap ] is a child of the h-box and will have 10px above and below."]]] + because the [gap] is a child of the h-box and will have 10px left and right of it."]]] [gap :size "10px"] [line] diff --git a/src/re_demo/h_box.cljs b/src/re_demo/h_box.cljs index 24e112cb..1f350ed3 100644 --- a/src/re_demo/h_box.cljs +++ b/src/re_demo/h_box.cljs @@ -1,63 +1,151 @@ (ns re-demo.h-box (:require [clojure.string :as string] [re-com.core :refer [p h-box v-box box gap line scroller border label title button checkbox hyperlink-href slider horizontal-bar-tabs - input-text input-textarea popover-anchor-wrapper popover-content-wrapper px] :refer-macros [handler-fn]] + info-button input-text input-textarea popover-anchor-wrapper popover-content-wrapper px] :refer-macros [handler-fn]] [re-com.box :refer [h-box-args-desc v-box-args-desc box-args-desc gap-args-desc line-args-desc scroller-args-desc border-args-desc flex-child-style]] [re-com.util :refer [px]] [re-demo.utils :refer [panel-title title2 args-table github-hyperlink status-text]] - [re-com.validate :refer [extract-arg-data string-or-hiccup? alert-type? vector-of-maps?]] + [re-com.validate :refer [string-or-hiccup? alert-type? vector-of-maps?]] [reagent.core :as reagent] [reagent.ratom :refer-macros [reaction]])) -(def rounded-panel (merge (flex-child-style "1") - {:background-color "#fff4f4" - :border "1px solid lightgray" - :border-radius "4px" - :padding "4px"})) - -(def editor-style {:font-size "12px" - :line-height "20px" - :padding "6px 8px"}) - -(def over-style {:background-color "#fcc"}) - -(def h-box-style {}) ;{ :overflow "hidden"}) - -(def box-state (reagent/atom - {:hbox {:over? false - :height {:value "100px" :omit? false :range [0 500]} - :width {:value "450px" :omit? false :range [0 1000]} - ;:size {:value "none" :omit? true :type :none :px "50px" :ratio "3" :gsb "1 1 0"} - :justify {:value :start :omit? true} - :align {:value :stretch :omit? true} - :gap {:value "4px" :omit? false :range [0 100]}} - :box1 {:over? false - :text {:value "Box1" :omit? false} - :size {:value "none" :omit? false :type :none :px "50px" :ratio "3" :gsb "1 1 0"} - :align-self {:value :stretch :omit? true} - :height {:value "50px" :omit? true :range [0 200]} - :min-width {:value "50px" :omit? true :range [0 200]} - :max-width {:value "50px" :omit? true :range [0 200]}} - :box2 {:over? false - :text {:value "Box2" :omit? false} - :size {:value "100px" :omit? false :type :px :px "100px" :ratio "2" :gsb "1 1 0"} - :align-self {:value :center :omit? false} - :height {:value "50px" :omit? true :range [0 300]} - :min-width {:value "50px" :omit? true :range [0 200]} - :max-width {:value "50px" :omit? true :range [0 200]}} - :box3 {:over? false - :text {:value "Box3" :omit? false} - :size {:value "1" :omit? false :type :ratio :px "150px" :ratio "1" :gsb "1 1 0"} - :align-self {:value :stretch :omit? true} - :height {:value "50px" :omit? true :range [0 400]} - :min-width {:value "50px" :omit? true :range [0 200]} - :max-width {:value "50px" :omit? true :range [0 200]}}})) +(def h-box-style {;:background-color "yellow" + ;:padding "4px" + ;:overflow "hidden" + }) + +(def panel-style (merge (flex-child-style "1") + {:background-color "#fff4f4" + :border "1px solid lightgray" + :border-radius "4px" + :padding "4px"})) + +(def over-style {:background-color "#fcc"}) + +(def editor-style {:font-size "12px" + :line-height "20px" + :padding "6px 8px"}) + +(def current-preset (reagent/atom 0)) + +(def demo-presets [;; Preset 0 + {:hbox {:over? false + :height {:value "100px" :omit? false :range [0 500]} + :width {:value "450px" :omit? false :range [0 1000]} + :justify {:value :start :omit? true} + :align {:value :stretch :omit? true} + :gap {:value "4px" :omit? false :range [0 100]}} + :box1 {:over? false + :text {:value "Box1" :omit? false} + :size {:value "none" :omit? false :type :none :px "50px" :ratio "3" :gsb "1 1 0"} + :align-self {:value :stretch :omit? true} + :height {:value "50px" :omit? true :range [0 200]} + :min-width {:value "50px" :omit? true :range [0 200]} + :max-width {:value "50px" :omit? true :range [0 200]}} + :box2 {:over? false + :text {:value "Box2" :omit? false} + :size {:value "100px" :omit? false :type :px :px "100px" :ratio "2" :gsb "1 1 0"} + :align-self {:value :center :omit? false} + :height {:value "50px" :omit? true :range [0 300]} + :min-width {:value "50px" :omit? true :range [0 200]} + :max-width {:value "50px" :omit? true :range [0 200]}} + :box3 {:over? false + :text {:value "Box3" :omit? false} + :size {:value "1" :omit? false :type :ratio :px "150px" :ratio "1" :gsb "1 1 0"} + :align-self {:value :stretch :omit? true} + :height {:value "50px" :omit? true :range [0 400]} + :min-width {:value "50px" :omit? true :range [0 200]} + :max-width {:value "50px" :omit? true :range [0 200]}} + :desc [v-box + :children [[:p "This preset demonstrates some of the basics of h-box (and Flexbox)"] + [:p "The " [:strong "h-box"] " container has a specific width and height with a gap of 4px, meaning 4px space will be placed between each child. The " [:code ":justify"] " and " [:code ":align"] " parameters are left to their defaults, meaning the boxes will be stretch from top to bottom (unless individually overridden)."] + [:p [:strong "Box1"] " has a " [:code ":size"] " of \"none\" which means it will take up as much space as it's content, in this case, the text \"Box1\"."] + [:p [:strong "Box2"] " has a specific 100 pixel " [:code ":size"] " so that's exactly how much space (width in this case) it will take up. Notice how the default :align of :stretch is overridden so that this box is vertically centered."] + [:p [:strong "Box3"] " has a " [:code ":size"] " of \"1\" which defines how much empty space within the container to consume. It's greedy so it takes everything that's left. Because there are no other siblings with a 'ratio' :size, it will always take up all available space so you could put any ratio value here and you'll get the same result."] + [:p [:strong "Things to try"]] + [:ul + [:li "Set the Box2 :size to \"2\" and notice how it will always take up double the width of Box3 as you adjust the h-box :width parameter. " ] + [:li "Another fascinating thing to try." ] + [:li "More to come. Will need to add a scroller to get more stuff in here!" ] + ]]]} + + ;; Preset 1 + {:hbox {:over? false + :height {:value "200px" :omit? false :range [0 500]} + :width {:value "300px" :omit? false :range [0 1000]} + :justify {:value :center :omit? false} + :align {:value :stretch :omit? true} + :gap {:value "4px" :omit? false :range [0 100]}} + :box1 {:over? false + :text {:value "Box1" :omit? false} + :size {:value "none" :omit? false :type :none :px "50px" :ratio "3" :gsb "1 1 0"} + :align-self {:value :stretch :omit? true} + :height {:value "50px" :omit? true :range [0 200]} + :min-width {:value "50px" :omit? true :range [0 200]} + :max-width {:value "50px" :omit? true :range [0 200]}} + :box2 {:over? false + :text {:value "Box2" :omit? false} + :size {:value "500px" :omit? false :type :px :px "100px" :ratio "2" :gsb "1 1 0"} + :align-self {:value :center :omit? false} + :height {:value "50px" :omit? true :range [0 300]} + :min-width {:value "50px" :omit? true :range [0 200]} + :max-width {:value "50px" :omit? true :range [0 200]}} + :box3 {:over? false + :text {:value "Box3" :omit? false} + :size {:value "none" :omit? false :type :none :px "150px" :ratio "1" :gsb "1 1 0"} + :align-self {:value :stretch :omit? true} + :height {:value "50px" :omit? true :range [0 400]} + :min-width {:value "50px" :omit? true :range [0 200]} + :max-width {:value "50px" :omit? true :range [0 200]}} + :desc [v-box + :children [[:p "This is box-state 2"] + [:p "More " [:strong "incredible"] " descriptions coming soon to a screen near you. Well, this one actually."]]]} + + ;; Preset 2 + {:hbox {:over? false + :height {:value "150px" :omit? false :range [0 500]} + :width {:value "1000px" :omit? false :range [0 1000]} + :justify {:value :start :omit? true} + :align {:value :stretch :omit? true} + :gap {:value "4px" :omit? false :range [0 100]}} + :box1 {:over? false + :text {:value "Box1 Box1 Box1 Box1 Box1 Box1 Box1 Box1 Box1 " :omit? false} + :size {:value "none" :omit? false :type :none :px "50px" :ratio "3" :gsb "1 1 0"} + :align-self {:value :stretch :omit? true} + :height {:value "50px" :omit? true :range [0 200]} + :min-width {:value "50px" :omit? true :range [0 200]} + :max-width {:value "50px" :omit? true :range [0 200]}} + :box2 {:over? false + :text {:value "Box2 Box2 Box2 Box2 Box2 Box2 Box2 Box2 Box2 Box2 Box2 Box2 Box2 Box2 Box2 Box2 Box2 Box2 " :omit? false} + :size {:value "100px" :omit? false :type :px :px "100px" :ratio "2" :gsb "1 1 0"} + :align-self {:value :center :omit? false} + :height {:value "50px" :omit? true :range [0 300]} + :min-width {:value "50px" :omit? true :range [0 200]} + :max-width {:value "50px" :omit? true :range [0 200]}} + :box3 {:over? false + :text {:value "Box3 Box3 Box3 Box3 Box3 Box3 " :omit? false} + :size {:value "1" :omit? false :type :ratio :px "150px" :ratio "1" :gsb "1 1 0"} + :align-self {:value :stretch :omit? true} + :height {:value "50px" :omit? true :range [0 400]} + :min-width {:value "50px" :omit? true :range [0 200]} + :max-width {:value "50px" :omit? true :range [0 200]}} + :desc [v-box + :children [[:p "This is box-state 3"] + [:p "More " [:strong "incredible"] " descriptions coming soon to a screen near you. Well, this one actually."]]]}]) + +(def box-state (reaction (get demo-presets @current-preset))) + +(def show-desc? (reagent/atom true)) (defn merge-named-params - "given a hiccup vector v, and a map m containing named parameters, add the named parameters to v...TODO - (merge-named-params [box :a 1] {:b 2 :c 3}) - ;; => [box :a 1 :b 2 :c 3] + "given a hiccup vector v, and a map m containing named parameters, add the named parameters to v + the values in the map, are in turn maps + if, in the value map, :omit? is true, omit this parameter altogether + otherwise use :value for the value of the parameter + Example: + (merge-named-params [box :a 1] {:b {:value 2} :c {:value 3 :omit? true}}) + ;; => [box :a 1 :b 2] " [v m] (let [m (remove (comp :omit? second) m) @@ -78,34 +166,21 @@ (-> [box :style h-box-style] (merge-named-params (dissoc box-parameters :over? :text)) (conj :child) - (conj [:div {:style (merge rounded-panel - (when over? over-style))} (get-in box-parameters [:text :value])]))) - ) - -(defn demo - "creates the hiccup for the real demo, with its child boxes and all" - [] - (let [over? (:over? (:hbox @box-state))] - (-> [h-box - :padding "4px" - :style (merge {:border "dashed 1px red"} - (when over? over-style))] - (merge-named-params (dissoc (:hbox @box-state) :over?)) - (conj :children) - (conj [(make-box (:box1 @box-state)) - (make-box (:box2 @box-state)) - (make-box (:box3 @box-state))])))) + (conj [:div {:style (merge panel-style + (when over? over-style))} (get-in box-parameters [:text :value])])))) (defn close-button + "close button used for all the editors" [on-close] [button :label [:i {:class "md-close" :style {:font-size "20px" :margin-left "8px"}}] - :on-click (handler-fn (on-close)) + :on-click #(on-close) :class "close"]) (defn px-editor + "provides a single slider to edit pixel value in the state atom" [path] (let [model (reaction (js/parseInt (get-in @box-state (conj path :value)))) [min max] (get-in @box-state (conj path :range))] @@ -121,12 +196,13 @@ [close-button on-close]]]))) (defn justify-editor + "provides horizontal bar tabs to set the :justify value in the state atom" [path] - (let [opts [{:id :start :label ":start"} - {:id :end :label ":end"} - {:id :center :label ":center"} + (let [opts [{:id :start :label ":start"} + {:id :end :label ":end"} + {:id :center :label ":center"} {:id :between :label ":between"} - {:id :around :label ":around"}] + {:id :around :label ":around"}] model (reaction (get-in @box-state (conj path :value)))] (fn [path on-close] @@ -140,6 +216,7 @@ [close-button on-close]]]))) (defn align-editor + "provides horizontal bar tabs to set the :align OR :align-self values in the state atom" [path] (let [opts [{:id :start :label ":start"} {:id :end :label ":end"} @@ -159,6 +236,7 @@ [close-button on-close]]]))) (defn text-editor + "provides an input-text to edit strings in the state atom" [path] (let [model (reaction (get-in @box-state (conj path :value)))] (fn @@ -173,7 +251,7 @@ [close-button on-close]]]))) (defn box-size - "Works out what to pass to :size from a map like {:value \"none\" :omit? false :type :none :px \"\100px\" :ratio \"1\" :gsb \"\"}" + "works out what to pass to :size from a map like {:value \"none\" :omit? false :type :none :px \"\100px\" :ratio \"1\" :gsb \"\"}" [size-spec] (cond (= (:type size-spec) :px) (:px size-spec) (= (:type size-spec) :ratio) (:ratio size-spec) @@ -181,6 +259,7 @@ :else (name (:type size-spec)))) (defn size-editor + "a more complex component to edit :size values in the state atom" [path] (let [opts [{:id :inital :label "initial"} {:id :auto :label "auto"} @@ -207,7 +286,7 @@ :on-change #(do (update-model path :type %) (reset! size-status nil))] (when (contains? #{:px :ratio :gsb} @model) - [gap :size "8px"]) + [gap :size "8px" :width "8px"]) (when (= @model :px) [slider :model px-model @@ -248,11 +327,11 @@ :3 "35px"})) (defn code-row - "A code row consists of: - - up to three pieces of text (all optional), typically: + "Render a single code row consisting of: + - up to three pieces of text, typically: 1. parameter name - 2. parameter value - 3. rarely, a closing ']' + 2. parameter value, specified as a path into the state atom + 3. end text, usually, a closing ']' - an editor to open" [active? indent text1 path text3 on-over editor] @@ -308,16 +387,64 @@ arg-hiccup))))) +(defn choose-a-demo + "choose a preset demo" + [] + (let [opts [{:id 0 :label "Preset 1"} + {:id 1 :label "Preset 2"} + {:id 2 :label "Preset 3"}]] + (fn + [] + [h-box + :gap "8px" + :align :center + :children [[:span "Choose a preset demo"] + [horizontal-bar-tabs + :model current-preset + :tabs opts + :style editor-style + :on-change #(do (reset! current-preset %) + (reset! show-desc? true))]]]))) + +(defn demo + "creates the hiccup for the actual demo, with its child boxes and all" + [] + (let [over? (:over? (:hbox @box-state))] + (-> [h-box + :padding "4px" + :style (merge {:border "dashed 1px red"} + (when over? over-style))] + (merge-named-params (dissoc (:hbox @box-state) :over?)) + (conj :children) + (conj [(make-box (:box1 @box-state)) + (make-box (:box2 @box-state)) + (make-box (:box3 @box-state))])))) + (defn editable-code - "Shows the code in a way that values can be edited, allowing for an interactive demo." + "Shows the code in a way that values can be edited, allowing for an interactive demo" [] (let [over-hbox (fn [over?] (swap! box-state assoc-in [:hbox :over?] over?)) over-box1 (fn [over?] (swap! box-state assoc-in [:box1 :over?] over?)) over-box2 (fn [over?] (swap! box-state assoc-in [:box2 :over?] over?)) over-box3 (fn [over?] (swap! box-state assoc-in [:box3 :over?] over?))] (fn [] - [v-box - :children [[gap :size "20px"] + [h-box + :align :start + :children [[popover-anchor-wrapper + :showing? show-desc? + :position :left-below + :anchor [:div {:style {:height "60px"}}] ;; Position the popover down the page a little + :popover [popover-content-wrapper + :showing? show-desc? + :position :left-below + :width "536px" + :title "Preset Description" + :close-button? true + :body (:desc @box-state)]] + [info-button + :position :left-below + :width "450px" + :info (:desc @box-state)] [v-box :width "300px" @@ -327,41 +454,37 @@ :border "1px solid lightgray" :border-radius "4px" :padding "8px"} - :children [[code-row false :0 "[h-box" "" "" over-hbox] - [code-row true :1 " :height" [:hbox :height] "" over-hbox px-editor] - [code-row true :1 " :width" [:hbox :width] "" over-hbox px-editor] - ;[code-row true :1 " :size" [:hbox :size] "" over-hbox size-editor] - [code-row true :1 " :justify" [:hbox :justify] "" over-hbox justify-editor] - [code-row true :1 " :align" [:hbox :align] "" over-hbox align-editor] - [code-row true :1 " :gap" [:hbox :gap] "" over-hbox px-editor] - [code-row false :1 " :children" " [" "" over-hbox] - - [code-row false :2 "[box " "" "" over-box1] + :children [[code-row false :0 "[h-box" "" "" over-hbox] + [code-row true :1 " :height" [:hbox :height] "" over-hbox px-editor] + [code-row true :1 " :width" [:hbox :width] "" over-hbox px-editor] + [code-row true :1 " :justify" [:hbox :justify] "" over-hbox justify-editor] + [code-row true :1 " :align" [:hbox :align] "" over-hbox align-editor] + [code-row true :1 " :gap" [:hbox :gap] "" over-hbox px-editor] + [code-row false :1 " :children" " [" "" over-hbox] + + [code-row false :2 "[box " "" "" over-box1] [code-row true :3 " :child" [:box1 :text] "" over-box1 text-editor] [code-row true :3 " :size" [:box1 :size] "" over-box1 size-editor] [code-row true :3 " :align-self" [:box1 :align-self] "" over-box1 align-editor] [code-row true :3 " :height" [:box1 :height] "" over-box1 px-editor] - ;[code-row true :3 " :min-height" [:box1 :min-height] "" over-box1 px-editor] - ;[code-row true :3 " :max-height" [:box1 :max-height] "" over-box1 px-editor] - ;[code-row true :3 " :width" [:box1 :width] "" over-box1 px-editor] - [code-row true :3 " :min-width" [:box1 :min-width] "" over-box1 px-editor] - [code-row true :3 " :max-width" [:box1 :max-width] "]" over-box1 px-editor] + [code-row true :3 " :min-width" [:box1 :min-width] "" over-box1 px-editor] + [code-row true :3 " :max-width" [:box1 :max-width] "]" over-box1 px-editor] - [code-row false :2 "[box " "" "" over-box2] + [code-row false :2 "[box " "" "" over-box2] [code-row true :3 " :child" [:box2 :text] "" over-box2 text-editor] [code-row true :3 " :size" [:box2 :size] "" over-box2 size-editor] [code-row true :3 " :align-self" [:box2 :align-self] "" over-box2 align-editor] [code-row true :3 " :height" [:box2 :height] "" over-box2 px-editor] - [code-row true :3 " :min-width" [:box2 :min-width] "" over-box2 px-editor] - [code-row true :3 " :max-width" [:box2 :max-width] "]" over-box2 px-editor] + [code-row true :3 " :min-width" [:box2 :min-width] "" over-box2 px-editor] + [code-row true :3 " :max-width" [:box2 :max-width] "]" over-box2 px-editor] - [code-row false :2 "[box " "" "" over-box3] + [code-row false :2 "[box " "" "" over-box3] [code-row true :3 " :child" [:box3 :text] "" over-box3 text-editor] [code-row true :3 " :size" [:box3 :size] "" over-box3 size-editor] [code-row true :3 " :align-self" [:box3 :align-self] "" over-box3 align-editor] [code-row true :3 " :height" [:box3 :height] "" over-box3 px-editor] - [code-row true :3 " :min-width" [:box3 :min-width] "" over-box3 px-editor] - [code-row true :3 " :max-width" [:box3 :max-width] "]]" over-box3 px-editor]]]]]))) + [code-row true :3 " :min-width" [:box3 :min-width] "" over-box3 px-editor] + [code-row true :3 " :max-width" [:box3 :max-width] "]]" over-box3 px-editor]]]]]))) (defn panel @@ -384,7 +507,7 @@ [status-text "Stable"] [p "h-box is a container which lays out its " [:code ":children"] " in a single horizontal row."] [p "The " [:span.bold "Layout"] " page (look LHS) describes the importance of " [:span.bold ":size"] ". The actual layout is a function of the " [:code ":size"] " of the container and the " [:code ":size"] " provided for each of the children."] - [p "Todo: Nestability with v-box"] + [p [:strong "Todo: Nestability with v-box"]] [args-table h-box-args-desc]]] [v-box :gap "10px" @@ -392,8 +515,10 @@ :height "800px" ;:style {:border "dashed 1px #ddd"} :children [[title2 "Demo"] - [p "This is an " [:span.bold "interactive"] " demo. Edit the \"code\" (in grey) and watch the boxes change. - The red-dashed box is an h-box which contains up to three children."] + [p "This is an " [:span.bold "interactive"] " demo. Select a preset then edit the \"code\" (in grey) and watch the boxes change. + The red-dashed box is an h-box which contains three [box] children."] + [choose-a-demo] + [gap :size "0px"] [demo] - [editable-code]]]]] - [gap :size "30px"]]])) + [gap :size "0px"] + [editable-code]]]]]]])) diff --git a/src/re_demo/input_text.cljs b/src/re_demo/input_text.cljs index 5168993f..9ab70a46 100644 --- a/src/re_demo/input_text.cljs +++ b/src/re_demo/input_text.cljs @@ -121,15 +121,16 @@ (reset! status :error) (reset! status-tooltip "Error tooltip - this (optionally) appears when there are errors on input-text components.")) :style {:margin-left "20px"}]]] - [checkbox - :label [h-box - :align :start - :gap "5px" - :children [[:code ":status-icon?"] - [:span " (notice the tooltips on the icons)"]]] - :model status-icon? - :on-change (fn [val] - (reset! status-icon? val))] + [h-box + :align :start + :gap "5px" + :children [[checkbox + :label [:code ":status-icon?"] + :model status-icon? + :on-change (fn [val] + (reset! status-icon? val))] + [:span " (notice the tooltips on the icons)"]]] + [v-box :children [[box :align :start :child [:code ":validation-regex"]] [radio-button diff --git a/src/re_demo/line.cljs b/src/re_demo/line.cljs index 106c7291..259efdc0 100644 --- a/src/re_demo/line.cljs +++ b/src/re_demo/line.cljs @@ -26,18 +26,18 @@ [v-box :gap "10px" :children [[title2 "Demo"] - [p "For an example, look at the top of this page, there's a title " [:span.bold "[Line ...]"] + [p "For an example, look at the top of this page. There's a title " [:span.bold "[line ...]"] ", and notice the line under it."] [p "Here is some sample code..."] [:pre {:style {:width "40em"}} "[h-box :gap \"10px\" - :children [[grey-box-1] + :children [[grey-box] [line :size \"3px\" :color \"red\"] - [grey-box-2]]]"] + [grey-box]]]"] [p "Here is the result..."] [h-box :gap "10px" diff --git a/src/re_demo/row_button.cljs b/src/re_demo/row_button.cljs index c5ef1d2c..7d29ef8e 100644 --- a/src/re_demo/row_button.cljs +++ b/src/re_demo/row_button.cljs @@ -73,8 +73,7 @@ [v-box :class "rc-div-table" :style {:font-size (when @large-font "24px")} - :children [^{:key "0"} - [h-box + :children [[h-box :class "rc-div-table-header" :children [[label :label "Sort" :width (:sort col-widths)] [label :label "Name" :width (:name col-widths)] diff --git a/src/re_demo/splits.cljs b/src/re_demo/splits.cljs index 3dc9024b..c1d3c33c 100644 --- a/src/re_demo/splits.cljs +++ b/src/re_demo/splits.cljs @@ -1,6 +1,6 @@ (ns re-demo.splits (:require [re-com.core :refer [h-box v-box box gap line scroller border h-split v-split title flex-child-style p]] - [re-com.splits :refer [h-split-args-desc v-split-args-desc]] + [re-com.splits :refer [hv-split-args-desc]] [re-demo.utils :refer [panel-title title2 args-table github-hyperlink status-text]])) @@ -63,34 +63,23 @@ :children [[v-box :gap "10px" :width "450px" - :children [[title2 "[h-split ...]"] + :children [[title2 "[h-split ... ] & [v-split ... ]"] [status-text "Stable"] [p "Arranges two components horizontally and provides a splitter bar between them."] [p "By dragging the splitter bar, a user can change the width allocated to each."] [p "Can contain further nested layout components."] - [args-table h-split-args-desc]]] + [args-table hv-split-args-desc]]] [v-box :size "auto" :gap "10px" + :height "800px" :children [[title2 "Demo"] + [title :level :level3 :label "[h-split]"] [h-split :panel-1 [left-panel] - :panel-2 [right-panel]]]]]] - [line :style {:margin-top "20px"}] - [h-box - :gap "100px" - :children [[v-box - :gap "10px" - :width "450px" - :children [[title2 "[v-split ...]"] - [p "Same as above, but vertical."] - [args-table v-split-args-desc]]] - [v-box - :size "auto" - :gap "10px" - :children [[title2 "Demo"] + :panel-2 [right-panel]] + [title :level :level3 :label "[v-split]"] [v-split :panel-1 [top-panel] :panel-2 [bottom-panel] - :initial-split "25%"]]]]] - [gap :size "30px"]]]) + :initial-split "25%"]]]]]]]) diff --git a/src/re_demo/v_box.cljs b/src/re_demo/v_box.cljs index f76200cd..b86d1155 100644 --- a/src/re_demo/v_box.cljs +++ b/src/re_demo/v_box.cljs @@ -20,10 +20,10 @@ :width "450px" :children [[title2 "Notes"] [status-text "Stable"] - [p "TBA..."] + [p "Same as [h-box] except in the vertical direction."] + [p "See [h-box] for further details."] [args-table v-box-args-desc]]] [v-box :gap "10px" :children [[title2 "Demo"] - [:span.all-small-caps "TBA..."]]]]] - [gap :size "30px"]]]) + [p "Refer to the full interactive demo in the [h-box] section, then tilt your head 90 degrees."]]]]]]]) From 02e1dc9cbce17b347b70b3758655262f919ff9f1 Mon Sep 17 00:00:00 2001 From: Gregg8 Date: Thu, 23 Apr 2015 14:12:32 +1000 Subject: [PATCH 4/7] WIP - h-box demo: - Editor showing state now moved to box-state so that a) they can be turned off between demos and b) we can set their state to make the demo useful. - When an option is grayed out, shouldn't be able to click to get an editor & anchor should not turn blue and add strikeout style. - Set h-box height range max 200px. - Changed dark pink highlight to grey. - Updated demo paragraph and buttons as per MT. - Updated popover descriptions to match the actual situation that :showing? MUST be an atom. - Addressed issue #7 (label only works with strings and not hiccup syntax). - Actually included bootstrap.css for dev compile. --- run/resources/public/assets/css/bootstrap.css | 6203 +++++++++++++++++ src/re_com/popover.cljs | 11 +- src/re_com/text.cljs | 2 +- src/re_demo/h_box.cljs | 331 +- 4 files changed, 6375 insertions(+), 172 deletions(-) create mode 100644 run/resources/public/assets/css/bootstrap.css diff --git a/run/resources/public/assets/css/bootstrap.css b/run/resources/public/assets/css/bootstrap.css new file mode 100644 index 00000000..037dd056 --- /dev/null +++ b/run/resources/public/assets/css/bootstrap.css @@ -0,0 +1,6203 @@ +/*! + * Bootstrap v3.2.0 (http://getbootstrap.com) + * Copyright 2011-2014 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + */ + +/*! normalize.css v3.0.1 | MIT License | git.io/normalize */ +html { + font-family: sans-serif; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} +body { + margin: 0; +} +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; +} +audio, +canvas, +progress, +video { + display: inline-block; + vertical-align: baseline; +} +audio:not([controls]) { + display: none; + height: 0; +} +[hidden], +template { + display: none; +} +a { + background: transparent; +} +a:active, +a:hover { + outline: 0; +} +abbr[title] { + border-bottom: 1px dotted; +} +b, +strong { + font-weight: bold; +} +dfn { + font-style: italic; +} +h1 { + margin: .67em 0; + font-size: 2em; +} +mark { + color: #000; + background: #ff0; +} +small { + font-size: 80%; +} +sub, +sup { + position: relative; + font-size: 75%; + line-height: 0; + vertical-align: baseline; +} +sup { + top: -.5em; +} +sub { + bottom: -.25em; +} +img { + border: 0; +} +svg:not(:root) { + overflow: hidden; +} +figure { + margin: 1em 40px; +} +hr { + height: 0; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; +} +pre { + overflow: auto; +} +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} +button, +input, +optgroup, +select, +textarea { + margin: 0; + font: inherit; + color: inherit; +} +button { + overflow: visible; +} +button, +select { + text-transform: none; +} +button, +html input[type="button"], +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; + cursor: pointer; +} +button[disabled], +html input[disabled] { + cursor: default; +} +button::-moz-focus-inner, +input::-moz-focus-inner { + padding: 0; + border: 0; +} +input { + line-height: normal; +} +input[type="checkbox"], +input[type="radio"] { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + padding: 0; +} +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} +input[type="search"] { + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; + -webkit-appearance: textfield; +} +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} +fieldset { + padding: .35em .625em .75em; + margin: 0 2px; + border: 1px solid #c0c0c0; +} +legend { + padding: 0; + border: 0; +} +textarea { + overflow: auto; +} +optgroup { + font-weight: bold; +} +table { + border-spacing: 0; + border-collapse: collapse; +} +td, +th { + padding: 0; +} +@media print { + * { + color: #000 !important; + text-shadow: none !important; + background: transparent !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; + } + a, + a:visited { + text-decoration: underline; + } + a[href]:after { + content: " (" attr(href) ")"; + } + abbr[title]:after { + content: " (" attr(title) ")"; + } + a[href^="javascript:"]:after, + a[href^="#"]:after { + content: ""; + } + pre, + blockquote { + border: 1px solid #999; + + page-break-inside: avoid; + } + thead { + display: table-header-group; + } + tr, + img { + page-break-inside: avoid; + } + img { + max-width: 100% !important; + } + p, + h2, + h3 { + orphans: 3; + widows: 3; + } + h2, + h3 { + page-break-after: avoid; + } + select { + background: #fff !important; + } + .navbar { + display: none; + } + .table td, + .table th { + background-color: #fff !important; + } + .btn > .caret, + .dropup > .btn > .caret { + border-top-color: #000 !important; + } + .label { + border: 1px solid #000; + } + .table { + border-collapse: collapse !important; + } + .table-bordered th, + .table-bordered td { + border: 1px solid #ddd !important; + } +} +@font-face { + font-family: 'Glyphicons Halflings'; + + src: url('../fonts/glyphicons-halflings-regular.eot'); + src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); +} +.glyphicon { + position: relative; + top: 1px; + display: inline-block; + font-family: 'Glyphicons Halflings'; + font-style: normal; + font-weight: normal; + line-height: 1; + + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +.glyphicon-asterisk:before { + content: "\2a"; +} +.glyphicon-plus:before { + content: "\2b"; +} +.glyphicon-euro:before { + content: "\20ac"; +} +.glyphicon-minus:before { + content: "\2212"; +} +.glyphicon-cloud:before { + content: "\2601"; +} +.glyphicon-envelope:before { + content: "\2709"; +} +.glyphicon-pencil:before { + content: "\270f"; +} +.glyphicon-glass:before { + content: "\e001"; +} +.glyphicon-music:before { + content: "\e002"; +} +.glyphicon-search:before { + content: "\e003"; +} +.glyphicon-heart:before { + content: "\e005"; +} +.glyphicon-star:before { + content: "\e006"; +} +.glyphicon-star-empty:before { + content: "\e007"; +} +.glyphicon-user:before { + content: "\e008"; +} +.glyphicon-film:before { + content: "\e009"; +} +.glyphicon-th-large:before { + content: "\e010"; +} +.glyphicon-th:before { + content: "\e011"; +} +.glyphicon-th-list:before { + content: "\e012"; +} +.glyphicon-ok:before { + content: "\e013"; +} +.glyphicon-remove:before { + content: "\e014"; +} +.glyphicon-zoom-in:before { + content: "\e015"; +} +.glyphicon-zoom-out:before { + content: "\e016"; +} +.glyphicon-off:before { + content: "\e017"; +} +.glyphicon-signal:before { + content: "\e018"; +} +.glyphicon-cog:before { + content: "\e019"; +} +.glyphicon-trash:before { + content: "\e020"; +} +.glyphicon-home:before { + content: "\e021"; +} +.glyphicon-file:before { + content: "\e022"; +} +.glyphicon-time:before { + content: "\e023"; +} +.glyphicon-road:before { + content: "\e024"; +} +.glyphicon-download-alt:before { + content: "\e025"; +} +.glyphicon-download:before { + content: "\e026"; +} +.glyphicon-upload:before { + content: "\e027"; +} +.glyphicon-inbox:before { + content: "\e028"; +} +.glyphicon-play-circle:before { + content: "\e029"; +} +.glyphicon-repeat:before { + content: "\e030"; +} +.glyphicon-refresh:before { + content: "\e031"; +} +.glyphicon-list-alt:before { + content: "\e032"; +} +.glyphicon-lock:before { + content: "\e033"; +} +.glyphicon-flag:before { + content: "\e034"; +} +.glyphicon-headphones:before { + content: "\e035"; +} +.glyphicon-volume-off:before { + content: "\e036"; +} +.glyphicon-volume-down:before { + content: "\e037"; +} +.glyphicon-volume-up:before { + content: "\e038"; +} +.glyphicon-qrcode:before { + content: "\e039"; +} +.glyphicon-barcode:before { + content: "\e040"; +} +.glyphicon-tag:before { + content: "\e041"; +} +.glyphicon-tags:before { + content: "\e042"; +} +.glyphicon-book:before { + content: "\e043"; +} +.glyphicon-bookmark:before { + content: "\e044"; +} +.glyphicon-print:before { + content: "\e045"; +} +.glyphicon-camera:before { + content: "\e046"; +} +.glyphicon-font:before { + content: "\e047"; +} +.glyphicon-bold:before { + content: "\e048"; +} +.glyphicon-italic:before { + content: "\e049"; +} +.glyphicon-text-height:before { + content: "\e050"; +} +.glyphicon-text-width:before { + content: "\e051"; +} +.glyphicon-align-left:before { + content: "\e052"; +} +.glyphicon-align-center:before { + content: "\e053"; +} +.glyphicon-align-right:before { + content: "\e054"; +} +.glyphicon-align-justify:before { + content: "\e055"; +} +.glyphicon-list:before { + content: "\e056"; +} +.glyphicon-indent-left:before { + content: "\e057"; +} +.glyphicon-indent-right:before { + content: "\e058"; +} +.glyphicon-facetime-video:before { + content: "\e059"; +} +.glyphicon-picture:before { + content: "\e060"; +} +.glyphicon-map-marker:before { + content: "\e062"; +} +.glyphicon-adjust:before { + content: "\e063"; +} +.glyphicon-tint:before { + content: "\e064"; +} +.glyphicon-edit:before { + content: "\e065"; +} +.glyphicon-share:before { + content: "\e066"; +} +.glyphicon-check:before { + content: "\e067"; +} +.glyphicon-move:before { + content: "\e068"; +} +.glyphicon-step-backward:before { + content: "\e069"; +} +.glyphicon-fast-backward:before { + content: "\e070"; +} +.glyphicon-backward:before { + content: "\e071"; +} +.glyphicon-play:before { + content: "\e072"; +} +.glyphicon-pause:before { + content: "\e073"; +} +.glyphicon-stop:before { + content: "\e074"; +} +.glyphicon-forward:before { + content: "\e075"; +} +.glyphicon-fast-forward:before { + content: "\e076"; +} +.glyphicon-step-forward:before { + content: "\e077"; +} +.glyphicon-eject:before { + content: "\e078"; +} +.glyphicon-chevron-left:before { + content: "\e079"; +} +.glyphicon-chevron-right:before { + content: "\e080"; +} +.glyphicon-plus-sign:before { + content: "\e081"; +} +.glyphicon-minus-sign:before { + content: "\e082"; +} +.glyphicon-remove-sign:before { + content: "\e083"; +} +.glyphicon-ok-sign:before { + content: "\e084"; +} +.glyphicon-question-sign:before { + content: "\e085"; +} +.glyphicon-info-sign:before { + content: "\e086"; +} +.glyphicon-screenshot:before { + content: "\e087"; +} +.glyphicon-remove-circle:before { + content: "\e088"; +} +.glyphicon-ok-circle:before { + content: "\e089"; +} +.glyphicon-ban-circle:before { + content: "\e090"; +} +.glyphicon-arrow-left:before { + content: "\e091"; +} +.glyphicon-arrow-right:before { + content: "\e092"; +} +.glyphicon-arrow-up:before { + content: "\e093"; +} +.glyphicon-arrow-down:before { + content: "\e094"; +} +.glyphicon-share-alt:before { + content: "\e095"; +} +.glyphicon-resize-full:before { + content: "\e096"; +} +.glyphicon-resize-small:before { + content: "\e097"; +} +.glyphicon-exclamation-sign:before { + content: "\e101"; +} +.glyphicon-gift:before { + content: "\e102"; +} +.glyphicon-leaf:before { + content: "\e103"; +} +.glyphicon-fire:before { + content: "\e104"; +} +.glyphicon-eye-open:before { + content: "\e105"; +} +.glyphicon-eye-close:before { + content: "\e106"; +} +.glyphicon-warning-sign:before { + content: "\e107"; +} +.glyphicon-plane:before { + content: "\e108"; +} +.glyphicon-calendar:before { + content: "\e109"; +} +.glyphicon-random:before { + content: "\e110"; +} +.glyphicon-comment:before { + content: "\e111"; +} +.glyphicon-magnet:before { + content: "\e112"; +} +.glyphicon-chevron-up:before { + content: "\e113"; +} +.glyphicon-chevron-down:before { + content: "\e114"; +} +.glyphicon-retweet:before { + content: "\e115"; +} +.glyphicon-shopping-cart:before { + content: "\e116"; +} +.glyphicon-folder-close:before { + content: "\e117"; +} +.glyphicon-folder-open:before { + content: "\e118"; +} +.glyphicon-resize-vertical:before { + content: "\e119"; +} +.glyphicon-resize-horizontal:before { + content: "\e120"; +} +.glyphicon-hdd:before { + content: "\e121"; +} +.glyphicon-bullhorn:before { + content: "\e122"; +} +.glyphicon-bell:before { + content: "\e123"; +} +.glyphicon-certificate:before { + content: "\e124"; +} +.glyphicon-thumbs-up:before { + content: "\e125"; +} +.glyphicon-thumbs-down:before { + content: "\e126"; +} +.glyphicon-hand-right:before { + content: "\e127"; +} +.glyphicon-hand-left:before { + content: "\e128"; +} +.glyphicon-hand-up:before { + content: "\e129"; +} +.glyphicon-hand-down:before { + content: "\e130"; +} +.glyphicon-circle-arrow-right:before { + content: "\e131"; +} +.glyphicon-circle-arrow-left:before { + content: "\e132"; +} +.glyphicon-circle-arrow-up:before { + content: "\e133"; +} +.glyphicon-circle-arrow-down:before { + content: "\e134"; +} +.glyphicon-globe:before { + content: "\e135"; +} +.glyphicon-wrench:before { + content: "\e136"; +} +.glyphicon-tasks:before { + content: "\e137"; +} +.glyphicon-filter:before { + content: "\e138"; +} +.glyphicon-briefcase:before { + content: "\e139"; +} +.glyphicon-fullscreen:before { + content: "\e140"; +} +.glyphicon-dashboard:before { + content: "\e141"; +} +.glyphicon-paperclip:before { + content: "\e142"; +} +.glyphicon-heart-empty:before { + content: "\e143"; +} +.glyphicon-link:before { + content: "\e144"; +} +.glyphicon-phone:before { + content: "\e145"; +} +.glyphicon-pushpin:before { + content: "\e146"; +} +.glyphicon-usd:before { + content: "\e148"; +} +.glyphicon-gbp:before { + content: "\e149"; +} +.glyphicon-sort:before { + content: "\e150"; +} +.glyphicon-sort-by-alphabet:before { + content: "\e151"; +} +.glyphicon-sort-by-alphabet-alt:before { + content: "\e152"; +} +.glyphicon-sort-by-order:before { + content: "\e153"; +} +.glyphicon-sort-by-order-alt:before { + content: "\e154"; +} +.glyphicon-sort-by-attributes:before { + content: "\e155"; +} +.glyphicon-sort-by-attributes-alt:before { + content: "\e156"; +} +.glyphicon-unchecked:before { + content: "\e157"; +} +.glyphicon-expand:before { + content: "\e158"; +} +.glyphicon-collapse-down:before { + content: "\e159"; +} +.glyphicon-collapse-up:before { + content: "\e160"; +} +.glyphicon-log-in:before { + content: "\e161"; +} +.glyphicon-flash:before { + content: "\e162"; +} +.glyphicon-log-out:before { + content: "\e163"; +} +.glyphicon-new-window:before { + content: "\e164"; +} +.glyphicon-record:before { + content: "\e165"; +} +.glyphicon-save:before { + content: "\e166"; +} +.glyphicon-open:before { + content: "\e167"; +} +.glyphicon-saved:before { + content: "\e168"; +} +.glyphicon-import:before { + content: "\e169"; +} +.glyphicon-export:before { + content: "\e170"; +} +.glyphicon-send:before { + content: "\e171"; +} +.glyphicon-floppy-disk:before { + content: "\e172"; +} +.glyphicon-floppy-saved:before { + content: "\e173"; +} +.glyphicon-floppy-remove:before { + content: "\e174"; +} +.glyphicon-floppy-save:before { + content: "\e175"; +} +.glyphicon-floppy-open:before { + content: "\e176"; +} +.glyphicon-credit-card:before { + content: "\e177"; +} +.glyphicon-transfer:before { + content: "\e178"; +} +.glyphicon-cutlery:before { + content: "\e179"; +} +.glyphicon-header:before { + content: "\e180"; +} +.glyphicon-compressed:before { + content: "\e181"; +} +.glyphicon-earphone:before { + content: "\e182"; +} +.glyphicon-phone-alt:before { + content: "\e183"; +} +.glyphicon-tower:before { + content: "\e184"; +} +.glyphicon-stats:before { + content: "\e185"; +} +.glyphicon-sd-video:before { + content: "\e186"; +} +.glyphicon-hd-video:before { + content: "\e187"; +} +.glyphicon-subtitles:before { + content: "\e188"; +} +.glyphicon-sound-stereo:before { + content: "\e189"; +} +.glyphicon-sound-dolby:before { + content: "\e190"; +} +.glyphicon-sound-5-1:before { + content: "\e191"; +} +.glyphicon-sound-6-1:before { + content: "\e192"; +} +.glyphicon-sound-7-1:before { + content: "\e193"; +} +.glyphicon-copyright-mark:before { + content: "\e194"; +} +.glyphicon-registration-mark:before { + content: "\e195"; +} +.glyphicon-cloud-download:before { + content: "\e197"; +} +.glyphicon-cloud-upload:before { + content: "\e198"; +} +.glyphicon-tree-conifer:before { + content: "\e199"; +} +.glyphicon-tree-deciduous:before { + content: "\e200"; +} +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +*:before, +*:after { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +html { + font-size: 10px; + + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} +body { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 14px; + line-height: 1.42857143; + color: #333; + background-color: #fff; +} +input, +button, +select, +textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; +} +a { + color: #428bca; + text-decoration: none; +} +a:hover, +a:focus { + color: #2a6496; + text-decoration: underline; +} +a:focus { + outline: thin dotted; + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} +figure { + margin: 0; +} +img { + vertical-align: middle; +} +.img-responsive, +.thumbnail > img, +.thumbnail a > img, +.carousel-inner > .item > img, +.carousel-inner > .item > a > img { + display: block; + width: 100% \9; + max-width: 100%; + height: auto; +} +.img-rounded { + border-radius: 6px; +} +.img-thumbnail { + display: inline-block; + width: 100% \9; + max-width: 100%; + height: auto; + padding: 4px; + line-height: 1.42857143; + background-color: #fff; + border: 1px solid #ddd; + border-radius: 4px; + -webkit-transition: all .2s ease-in-out; + -o-transition: all .2s ease-in-out; + transition: all .2s ease-in-out; +} +.img-circle { + border-radius: 50%; +} +hr { + margin-top: 20px; + margin-bottom: 20px; + border: 0; + border-top: 1px solid #eee; +} +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; +} +.sr-only-focusable:active, +.sr-only-focusable:focus { + position: static; + width: auto; + height: auto; + margin: 0; + overflow: visible; + clip: auto; +} +h1, +h2, +h3, +h4, +h5, +h6, +.h1, +.h2, +.h3, +.h4, +.h5, +.h6 { + font-family: inherit; + font-weight: 500; + line-height: 1.1; + color: inherit; +} +h1 small, +h2 small, +h3 small, +h4 small, +h5 small, +h6 small, +.h1 small, +.h2 small, +.h3 small, +.h4 small, +.h5 small, +.h6 small, +h1 .small, +h2 .small, +h3 .small, +h4 .small, +h5 .small, +h6 .small, +.h1 .small, +.h2 .small, +.h3 .small, +.h4 .small, +.h5 .small, +.h6 .small { + font-weight: normal; + line-height: 1; + color: #777; +} +h1, +.h1, +h2, +.h2, +h3, +.h3 { + margin-top: 20px; + margin-bottom: 10px; +} +h1 small, +.h1 small, +h2 small, +.h2 small, +h3 small, +.h3 small, +h1 .small, +.h1 .small, +h2 .small, +.h2 .small, +h3 .small, +.h3 .small { + font-size: 65%; +} +h4, +.h4, +h5, +.h5, +h6, +.h6 { + margin-top: 10px; + margin-bottom: 10px; +} +h4 small, +.h4 small, +h5 small, +.h5 small, +h6 small, +.h6 small, +h4 .small, +.h4 .small, +h5 .small, +.h5 .small, +h6 .small, +.h6 .small { + font-size: 75%; +} +h1, +.h1 { + font-size: 36px; +} +h2, +.h2 { + font-size: 30px; +} +h3, +.h3 { + font-size: 24px; +} +h4, +.h4 { + font-size: 18px; +} +h5, +.h5 { + font-size: 14px; +} +h6, +.h6 { + font-size: 12px; +} +p { + margin: 0 0 10px; +} +.lead { + margin-bottom: 20px; + font-size: 16px; + font-weight: 300; + line-height: 1.4; +} +@media (min-width: 768px) { + .lead { + font-size: 21px; + } +} +small, +.small { + font-size: 85%; +} +cite { + font-style: normal; +} +mark, +.mark { + padding: .2em; + background-color: #fcf8e3; +} +.text-left { + text-align: left; +} +.text-right { + text-align: right; +} +.text-center { + text-align: center; +} +.text-justify { + text-align: justify; +} +.text-nowrap { + white-space: nowrap; +} +.text-lowercase { + text-transform: lowercase; +} +.text-uppercase { + text-transform: uppercase; +} +.text-capitalize { + text-transform: capitalize; +} +.text-muted { + color: #777; +} +.text-primary { + color: #428bca; +} +a.text-primary:hover { + color: #3071a9; +} +.text-success { + color: #3c763d; +} +a.text-success:hover { + color: #2b542c; +} +.text-info { + color: #31708f; +} +a.text-info:hover { + color: #245269; +} +.text-warning { + color: #8a6d3b; +} +a.text-warning:hover { + color: #66512c; +} +.text-danger { + color: #a94442; +} +a.text-danger:hover { + color: #843534; +} +.bg-primary { + color: #fff; + background-color: #428bca; +} +a.bg-primary:hover { + background-color: #3071a9; +} +.bg-success { + background-color: #dff0d8; +} +a.bg-success:hover { + background-color: #c1e2b3; +} +.bg-info { + background-color: #d9edf7; +} +a.bg-info:hover { + background-color: #afd9ee; +} +.bg-warning { + background-color: #fcf8e3; +} +a.bg-warning:hover { + background-color: #f7ecb5; +} +.bg-danger { + background-color: #f2dede; +} +a.bg-danger:hover { + background-color: #e4b9b9; +} +.page-header { + padding-bottom: 9px; + margin: 40px 0 20px; + border-bottom: 1px solid #eee; +} +ul, +ol { + margin-top: 0; + margin-bottom: 10px; +} +ul ul, +ol ul, +ul ol, +ol ol { + margin-bottom: 0; +} +.list-unstyled { + padding-left: 0; + list-style: none; +} +.list-inline { + padding-left: 0; + margin-left: -5px; + list-style: none; +} +.list-inline > li { + display: inline-block; + padding-right: 5px; + padding-left: 5px; +} +dl { + margin-top: 0; + margin-bottom: 20px; +} +dt, +dd { + line-height: 1.42857143; +} +dt { + font-weight: bold; +} +dd { + margin-left: 0; +} +@media (min-width: 768px) { + .dl-horizontal dt { + float: left; + width: 160px; + overflow: hidden; + clear: left; + text-align: right; + text-overflow: ellipsis; + white-space: nowrap; + } + .dl-horizontal dd { + margin-left: 180px; + } +} +abbr[title], +abbr[data-original-title] { + cursor: help; + border-bottom: 1px dotted #777; +} +.initialism { + font-size: 90%; + text-transform: uppercase; +} +blockquote { + padding: 10px 20px; + margin: 0 0 20px; + font-size: 17.5px; + border-left: 5px solid #eee; +} +blockquote p:last-child, +blockquote ul:last-child, +blockquote ol:last-child { + margin-bottom: 0; +} +blockquote footer, +blockquote small, +blockquote .small { + display: block; + font-size: 80%; + line-height: 1.42857143; + color: #777; +} +blockquote footer:before, +blockquote small:before, +blockquote .small:before { + content: '\2014 \00A0'; +} +.blockquote-reverse, +blockquote.pull-right { + padding-right: 15px; + padding-left: 0; + text-align: right; + border-right: 5px solid #eee; + border-left: 0; +} +.blockquote-reverse footer:before, +blockquote.pull-right footer:before, +.blockquote-reverse small:before, +blockquote.pull-right small:before, +.blockquote-reverse .small:before, +blockquote.pull-right .small:before { + content: ''; +} +.blockquote-reverse footer:after, +blockquote.pull-right footer:after, +.blockquote-reverse small:after, +blockquote.pull-right small:after, +.blockquote-reverse .small:after, +blockquote.pull-right .small:after { + content: '\00A0 \2014'; +} +blockquote:before, +blockquote:after { + content: ""; +} +address { + margin-bottom: 20px; + font-style: normal; + line-height: 1.42857143; +} +code, +kbd, +pre, +samp { + font-family: Menlo, Monaco, Consolas, "Courier New", monospace; +} +code { + padding: 2px 4px; + font-size: 90%; + color: #c7254e; + background-color: #f9f2f4; + border-radius: 4px; +} +kbd { + padding: 2px 4px; + font-size: 90%; + color: #fff; + background-color: #333; + border-radius: 3px; + -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25); + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25); +} +kbd kbd { + padding: 0; + font-size: 100%; + -webkit-box-shadow: none; + box-shadow: none; +} +pre { + display: block; + padding: 9.5px; + margin: 0 0 10px; + font-size: 13px; + line-height: 1.42857143; + color: #333; + word-break: break-all; + word-wrap: break-word; + background-color: #f5f5f5; + border: 1px solid #ccc; + border-radius: 4px; +} +pre code { + padding: 0; + font-size: inherit; + color: inherit; + white-space: pre-wrap; + background-color: transparent; + border-radius: 0; +} +.pre-scrollable { + max-height: 340px; + overflow-y: scroll; +} +.container { + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + margin-left: auto; +} +@media (min-width: 768px) { + .container { + width: 750px; + } +} +@media (min-width: 992px) { + .container { + width: 970px; + } +} +@media (min-width: 1200px) { + .container { + width: 1170px; + } +} +.container-fluid { + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + margin-left: auto; +} +.row { + margin-right: -15px; + margin-left: -15px; +} +.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { + position: relative; + min-height: 1px; + padding-right: 15px; + padding-left: 15px; +} +.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { + float: left; +} +.col-xs-12 { + width: 100%; +} +.col-xs-11 { + width: 91.66666667%; +} +.col-xs-10 { + width: 83.33333333%; +} +.col-xs-9 { + width: 75%; +} +.col-xs-8 { + width: 66.66666667%; +} +.col-xs-7 { + width: 58.33333333%; +} +.col-xs-6 { + width: 50%; +} +.col-xs-5 { + width: 41.66666667%; +} +.col-xs-4 { + width: 33.33333333%; +} +.col-xs-3 { + width: 25%; +} +.col-xs-2 { + width: 16.66666667%; +} +.col-xs-1 { + width: 8.33333333%; +} +.col-xs-pull-12 { + right: 100%; +} +.col-xs-pull-11 { + right: 91.66666667%; +} +.col-xs-pull-10 { + right: 83.33333333%; +} +.col-xs-pull-9 { + right: 75%; +} +.col-xs-pull-8 { + right: 66.66666667%; +} +.col-xs-pull-7 { + right: 58.33333333%; +} +.col-xs-pull-6 { + right: 50%; +} +.col-xs-pull-5 { + right: 41.66666667%; +} +.col-xs-pull-4 { + right: 33.33333333%; +} +.col-xs-pull-3 { + right: 25%; +} +.col-xs-pull-2 { + right: 16.66666667%; +} +.col-xs-pull-1 { + right: 8.33333333%; +} +.col-xs-pull-0 { + right: auto; +} +.col-xs-push-12 { + left: 100%; +} +.col-xs-push-11 { + left: 91.66666667%; +} +.col-xs-push-10 { + left: 83.33333333%; +} +.col-xs-push-9 { + left: 75%; +} +.col-xs-push-8 { + left: 66.66666667%; +} +.col-xs-push-7 { + left: 58.33333333%; +} +.col-xs-push-6 { + left: 50%; +} +.col-xs-push-5 { + left: 41.66666667%; +} +.col-xs-push-4 { + left: 33.33333333%; +} +.col-xs-push-3 { + left: 25%; +} +.col-xs-push-2 { + left: 16.66666667%; +} +.col-xs-push-1 { + left: 8.33333333%; +} +.col-xs-push-0 { + left: auto; +} +.col-xs-offset-12 { + margin-left: 100%; +} +.col-xs-offset-11 { + margin-left: 91.66666667%; +} +.col-xs-offset-10 { + margin-left: 83.33333333%; +} +.col-xs-offset-9 { + margin-left: 75%; +} +.col-xs-offset-8 { + margin-left: 66.66666667%; +} +.col-xs-offset-7 { + margin-left: 58.33333333%; +} +.col-xs-offset-6 { + margin-left: 50%; +} +.col-xs-offset-5 { + margin-left: 41.66666667%; +} +.col-xs-offset-4 { + margin-left: 33.33333333%; +} +.col-xs-offset-3 { + margin-left: 25%; +} +.col-xs-offset-2 { + margin-left: 16.66666667%; +} +.col-xs-offset-1 { + margin-left: 8.33333333%; +} +.col-xs-offset-0 { + margin-left: 0; +} +@media (min-width: 768px) { + .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { + float: left; + } + .col-sm-12 { + width: 100%; + } + .col-sm-11 { + width: 91.66666667%; + } + .col-sm-10 { + width: 83.33333333%; + } + .col-sm-9 { + width: 75%; + } + .col-sm-8 { + width: 66.66666667%; + } + .col-sm-7 { + width: 58.33333333%; + } + .col-sm-6 { + width: 50%; + } + .col-sm-5 { + width: 41.66666667%; + } + .col-sm-4 { + width: 33.33333333%; + } + .col-sm-3 { + width: 25%; + } + .col-sm-2 { + width: 16.66666667%; + } + .col-sm-1 { + width: 8.33333333%; + } + .col-sm-pull-12 { + right: 100%; + } + .col-sm-pull-11 { + right: 91.66666667%; + } + .col-sm-pull-10 { + right: 83.33333333%; + } + .col-sm-pull-9 { + right: 75%; + } + .col-sm-pull-8 { + right: 66.66666667%; + } + .col-sm-pull-7 { + right: 58.33333333%; + } + .col-sm-pull-6 { + right: 50%; + } + .col-sm-pull-5 { + right: 41.66666667%; + } + .col-sm-pull-4 { + right: 33.33333333%; + } + .col-sm-pull-3 { + right: 25%; + } + .col-sm-pull-2 { + right: 16.66666667%; + } + .col-sm-pull-1 { + right: 8.33333333%; + } + .col-sm-pull-0 { + right: auto; + } + .col-sm-push-12 { + left: 100%; + } + .col-sm-push-11 { + left: 91.66666667%; + } + .col-sm-push-10 { + left: 83.33333333%; + } + .col-sm-push-9 { + left: 75%; + } + .col-sm-push-8 { + left: 66.66666667%; + } + .col-sm-push-7 { + left: 58.33333333%; + } + .col-sm-push-6 { + left: 50%; + } + .col-sm-push-5 { + left: 41.66666667%; + } + .col-sm-push-4 { + left: 33.33333333%; + } + .col-sm-push-3 { + left: 25%; + } + .col-sm-push-2 { + left: 16.66666667%; + } + .col-sm-push-1 { + left: 8.33333333%; + } + .col-sm-push-0 { + left: auto; + } + .col-sm-offset-12 { + margin-left: 100%; + } + .col-sm-offset-11 { + margin-left: 91.66666667%; + } + .col-sm-offset-10 { + margin-left: 83.33333333%; + } + .col-sm-offset-9 { + margin-left: 75%; + } + .col-sm-offset-8 { + margin-left: 66.66666667%; + } + .col-sm-offset-7 { + margin-left: 58.33333333%; + } + .col-sm-offset-6 { + margin-left: 50%; + } + .col-sm-offset-5 { + margin-left: 41.66666667%; + } + .col-sm-offset-4 { + margin-left: 33.33333333%; + } + .col-sm-offset-3 { + margin-left: 25%; + } + .col-sm-offset-2 { + margin-left: 16.66666667%; + } + .col-sm-offset-1 { + margin-left: 8.33333333%; + } + .col-sm-offset-0 { + margin-left: 0; + } +} +@media (min-width: 992px) { + .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { + float: left; + } + .col-md-12 { + width: 100%; + } + .col-md-11 { + width: 91.66666667%; + } + .col-md-10 { + width: 83.33333333%; + } + .col-md-9 { + width: 75%; + } + .col-md-8 { + width: 66.66666667%; + } + .col-md-7 { + width: 58.33333333%; + } + .col-md-6 { + width: 50%; + } + .col-md-5 { + width: 41.66666667%; + } + .col-md-4 { + width: 33.33333333%; + } + .col-md-3 { + width: 25%; + } + .col-md-2 { + width: 16.66666667%; + } + .col-md-1 { + width: 8.33333333%; + } + .col-md-pull-12 { + right: 100%; + } + .col-md-pull-11 { + right: 91.66666667%; + } + .col-md-pull-10 { + right: 83.33333333%; + } + .col-md-pull-9 { + right: 75%; + } + .col-md-pull-8 { + right: 66.66666667%; + } + .col-md-pull-7 { + right: 58.33333333%; + } + .col-md-pull-6 { + right: 50%; + } + .col-md-pull-5 { + right: 41.66666667%; + } + .col-md-pull-4 { + right: 33.33333333%; + } + .col-md-pull-3 { + right: 25%; + } + .col-md-pull-2 { + right: 16.66666667%; + } + .col-md-pull-1 { + right: 8.33333333%; + } + .col-md-pull-0 { + right: auto; + } + .col-md-push-12 { + left: 100%; + } + .col-md-push-11 { + left: 91.66666667%; + } + .col-md-push-10 { + left: 83.33333333%; + } + .col-md-push-9 { + left: 75%; + } + .col-md-push-8 { + left: 66.66666667%; + } + .col-md-push-7 { + left: 58.33333333%; + } + .col-md-push-6 { + left: 50%; + } + .col-md-push-5 { + left: 41.66666667%; + } + .col-md-push-4 { + left: 33.33333333%; + } + .col-md-push-3 { + left: 25%; + } + .col-md-push-2 { + left: 16.66666667%; + } + .col-md-push-1 { + left: 8.33333333%; + } + .col-md-push-0 { + left: auto; + } + .col-md-offset-12 { + margin-left: 100%; + } + .col-md-offset-11 { + margin-left: 91.66666667%; + } + .col-md-offset-10 { + margin-left: 83.33333333%; + } + .col-md-offset-9 { + margin-left: 75%; + } + .col-md-offset-8 { + margin-left: 66.66666667%; + } + .col-md-offset-7 { + margin-left: 58.33333333%; + } + .col-md-offset-6 { + margin-left: 50%; + } + .col-md-offset-5 { + margin-left: 41.66666667%; + } + .col-md-offset-4 { + margin-left: 33.33333333%; + } + .col-md-offset-3 { + margin-left: 25%; + } + .col-md-offset-2 { + margin-left: 16.66666667%; + } + .col-md-offset-1 { + margin-left: 8.33333333%; + } + .col-md-offset-0 { + margin-left: 0; + } +} +@media (min-width: 1200px) { + .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { + float: left; + } + .col-lg-12 { + width: 100%; + } + .col-lg-11 { + width: 91.66666667%; + } + .col-lg-10 { + width: 83.33333333%; + } + .col-lg-9 { + width: 75%; + } + .col-lg-8 { + width: 66.66666667%; + } + .col-lg-7 { + width: 58.33333333%; + } + .col-lg-6 { + width: 50%; + } + .col-lg-5 { + width: 41.66666667%; + } + .col-lg-4 { + width: 33.33333333%; + } + .col-lg-3 { + width: 25%; + } + .col-lg-2 { + width: 16.66666667%; + } + .col-lg-1 { + width: 8.33333333%; + } + .col-lg-pull-12 { + right: 100%; + } + .col-lg-pull-11 { + right: 91.66666667%; + } + .col-lg-pull-10 { + right: 83.33333333%; + } + .col-lg-pull-9 { + right: 75%; + } + .col-lg-pull-8 { + right: 66.66666667%; + } + .col-lg-pull-7 { + right: 58.33333333%; + } + .col-lg-pull-6 { + right: 50%; + } + .col-lg-pull-5 { + right: 41.66666667%; + } + .col-lg-pull-4 { + right: 33.33333333%; + } + .col-lg-pull-3 { + right: 25%; + } + .col-lg-pull-2 { + right: 16.66666667%; + } + .col-lg-pull-1 { + right: 8.33333333%; + } + .col-lg-pull-0 { + right: auto; + } + .col-lg-push-12 { + left: 100%; + } + .col-lg-push-11 { + left: 91.66666667%; + } + .col-lg-push-10 { + left: 83.33333333%; + } + .col-lg-push-9 { + left: 75%; + } + .col-lg-push-8 { + left: 66.66666667%; + } + .col-lg-push-7 { + left: 58.33333333%; + } + .col-lg-push-6 { + left: 50%; + } + .col-lg-push-5 { + left: 41.66666667%; + } + .col-lg-push-4 { + left: 33.33333333%; + } + .col-lg-push-3 { + left: 25%; + } + .col-lg-push-2 { + left: 16.66666667%; + } + .col-lg-push-1 { + left: 8.33333333%; + } + .col-lg-push-0 { + left: auto; + } + .col-lg-offset-12 { + margin-left: 100%; + } + .col-lg-offset-11 { + margin-left: 91.66666667%; + } + .col-lg-offset-10 { + margin-left: 83.33333333%; + } + .col-lg-offset-9 { + margin-left: 75%; + } + .col-lg-offset-8 { + margin-left: 66.66666667%; + } + .col-lg-offset-7 { + margin-left: 58.33333333%; + } + .col-lg-offset-6 { + margin-left: 50%; + } + .col-lg-offset-5 { + margin-left: 41.66666667%; + } + .col-lg-offset-4 { + margin-left: 33.33333333%; + } + .col-lg-offset-3 { + margin-left: 25%; + } + .col-lg-offset-2 { + margin-left: 16.66666667%; + } + .col-lg-offset-1 { + margin-left: 8.33333333%; + } + .col-lg-offset-0 { + margin-left: 0; + } +} +table { + background-color: transparent; +} +th { + text-align: left; +} +.table { + width: 100%; + max-width: 100%; + margin-bottom: 20px; +} +.table > thead > tr > th, +.table > tbody > tr > th, +.table > tfoot > tr > th, +.table > thead > tr > td, +.table > tbody > tr > td, +.table > tfoot > tr > td { + padding: 8px; + line-height: 1.42857143; + vertical-align: top; + border-top: 1px solid #ddd; +} +.table > thead > tr > th { + vertical-align: bottom; + border-bottom: 2px solid #ddd; +} +.table > caption + thead > tr:first-child > th, +.table > colgroup + thead > tr:first-child > th, +.table > thead:first-child > tr:first-child > th, +.table > caption + thead > tr:first-child > td, +.table > colgroup + thead > tr:first-child > td, +.table > thead:first-child > tr:first-child > td { + border-top: 0; +} +.table > tbody + tbody { + border-top: 2px solid #ddd; +} +.table .table { + background-color: #fff; +} +.table-condensed > thead > tr > th, +.table-condensed > tbody > tr > th, +.table-condensed > tfoot > tr > th, +.table-condensed > thead > tr > td, +.table-condensed > tbody > tr > td, +.table-condensed > tfoot > tr > td { + padding: 5px; +} +.table-bordered { + border: 1px solid #ddd; +} +.table-bordered > thead > tr > th, +.table-bordered > tbody > tr > th, +.table-bordered > tfoot > tr > th, +.table-bordered > thead > tr > td, +.table-bordered > tbody > tr > td, +.table-bordered > tfoot > tr > td { + border: 1px solid #ddd; +} +.table-bordered > thead > tr > th, +.table-bordered > thead > tr > td { + border-bottom-width: 2px; +} +.table-striped > tbody > tr:nth-child(odd) > td, +.table-striped > tbody > tr:nth-child(odd) > th { + background-color: #f9f9f9; +} +.table-hover > tbody > tr:hover > td, +.table-hover > tbody > tr:hover > th { + background-color: #f5f5f5; +} +table col[class*="col-"] { + position: static; + display: table-column; + float: none; +} +table td[class*="col-"], +table th[class*="col-"] { + position: static; + display: table-cell; + float: none; +} +.table > thead > tr > td.active, +.table > tbody > tr > td.active, +.table > tfoot > tr > td.active, +.table > thead > tr > th.active, +.table > tbody > tr > th.active, +.table > tfoot > tr > th.active, +.table > thead > tr.active > td, +.table > tbody > tr.active > td, +.table > tfoot > tr.active > td, +.table > thead > tr.active > th, +.table > tbody > tr.active > th, +.table > tfoot > tr.active > th { + background-color: #f5f5f5; +} +.table-hover > tbody > tr > td.active:hover, +.table-hover > tbody > tr > th.active:hover, +.table-hover > tbody > tr.active:hover > td, +.table-hover > tbody > tr:hover > .active, +.table-hover > tbody > tr.active:hover > th { + background-color: #e8e8e8; +} +.table > thead > tr > td.success, +.table > tbody > tr > td.success, +.table > tfoot > tr > td.success, +.table > thead > tr > th.success, +.table > tbody > tr > th.success, +.table > tfoot > tr > th.success, +.table > thead > tr.success > td, +.table > tbody > tr.success > td, +.table > tfoot > tr.success > td, +.table > thead > tr.success > th, +.table > tbody > tr.success > th, +.table > tfoot > tr.success > th { + background-color: #dff0d8; +} +.table-hover > tbody > tr > td.success:hover, +.table-hover > tbody > tr > th.success:hover, +.table-hover > tbody > tr.success:hover > td, +.table-hover > tbody > tr:hover > .success, +.table-hover > tbody > tr.success:hover > th { + background-color: #d0e9c6; +} +.table > thead > tr > td.info, +.table > tbody > tr > td.info, +.table > tfoot > tr > td.info, +.table > thead > tr > th.info, +.table > tbody > tr > th.info, +.table > tfoot > tr > th.info, +.table > thead > tr.info > td, +.table > tbody > tr.info > td, +.table > tfoot > tr.info > td, +.table > thead > tr.info > th, +.table > tbody > tr.info > th, +.table > tfoot > tr.info > th { + background-color: #d9edf7; +} +.table-hover > tbody > tr > td.info:hover, +.table-hover > tbody > tr > th.info:hover, +.table-hover > tbody > tr.info:hover > td, +.table-hover > tbody > tr:hover > .info, +.table-hover > tbody > tr.info:hover > th { + background-color: #c4e3f3; +} +.table > thead > tr > td.warning, +.table > tbody > tr > td.warning, +.table > tfoot > tr > td.warning, +.table > thead > tr > th.warning, +.table > tbody > tr > th.warning, +.table > tfoot > tr > th.warning, +.table > thead > tr.warning > td, +.table > tbody > tr.warning > td, +.table > tfoot > tr.warning > td, +.table > thead > tr.warning > th, +.table > tbody > tr.warning > th, +.table > tfoot > tr.warning > th { + background-color: #fcf8e3; +} +.table-hover > tbody > tr > td.warning:hover, +.table-hover > tbody > tr > th.warning:hover, +.table-hover > tbody > tr.warning:hover > td, +.table-hover > tbody > tr:hover > .warning, +.table-hover > tbody > tr.warning:hover > th { + background-color: #faf2cc; +} +.table > thead > tr > td.danger, +.table > tbody > tr > td.danger, +.table > tfoot > tr > td.danger, +.table > thead > tr > th.danger, +.table > tbody > tr > th.danger, +.table > tfoot > tr > th.danger, +.table > thead > tr.danger > td, +.table > tbody > tr.danger > td, +.table > tfoot > tr.danger > td, +.table > thead > tr.danger > th, +.table > tbody > tr.danger > th, +.table > tfoot > tr.danger > th { + background-color: #f2dede; +} +.table-hover > tbody > tr > td.danger:hover, +.table-hover > tbody > tr > th.danger:hover, +.table-hover > tbody > tr.danger:hover > td, +.table-hover > tbody > tr:hover > .danger, +.table-hover > tbody > tr.danger:hover > th { + background-color: #ebcccc; +} +@media screen and (max-width: 767px) { + .table-responsive { + width: 100%; + margin-bottom: 15px; + overflow-x: auto; + overflow-y: hidden; + -webkit-overflow-scrolling: touch; + -ms-overflow-style: -ms-autohiding-scrollbar; + border: 1px solid #ddd; + } + .table-responsive > .table { + margin-bottom: 0; + } + .table-responsive > .table > thead > tr > th, + .table-responsive > .table > tbody > tr > th, + .table-responsive > .table > tfoot > tr > th, + .table-responsive > .table > thead > tr > td, + .table-responsive > .table > tbody > tr > td, + .table-responsive > .table > tfoot > tr > td { + white-space: nowrap; + } + .table-responsive > .table-bordered { + border: 0; + } + .table-responsive > .table-bordered > thead > tr > th:first-child, + .table-responsive > .table-bordered > tbody > tr > th:first-child, + .table-responsive > .table-bordered > tfoot > tr > th:first-child, + .table-responsive > .table-bordered > thead > tr > td:first-child, + .table-responsive > .table-bordered > tbody > tr > td:first-child, + .table-responsive > .table-bordered > tfoot > tr > td:first-child { + border-left: 0; + } + .table-responsive > .table-bordered > thead > tr > th:last-child, + .table-responsive > .table-bordered > tbody > tr > th:last-child, + .table-responsive > .table-bordered > tfoot > tr > th:last-child, + .table-responsive > .table-bordered > thead > tr > td:last-child, + .table-responsive > .table-bordered > tbody > tr > td:last-child, + .table-responsive > .table-bordered > tfoot > tr > td:last-child { + border-right: 0; + } + .table-responsive > .table-bordered > tbody > tr:last-child > th, + .table-responsive > .table-bordered > tfoot > tr:last-child > th, + .table-responsive > .table-bordered > tbody > tr:last-child > td, + .table-responsive > .table-bordered > tfoot > tr:last-child > td { + border-bottom: 0; + } +} +fieldset { + min-width: 0; + padding: 0; + margin: 0; + border: 0; +} +legend { + display: block; + width: 100%; + padding: 0; + margin-bottom: 20px; + font-size: 21px; + line-height: inherit; + color: #333; + border: 0; + border-bottom: 1px solid #e5e5e5; +} +label { + display: inline-block; + max-width: 100%; + margin-bottom: 5px; + font-weight: bold; +} +input[type="search"] { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +input[type="radio"], +input[type="checkbox"] { + margin: 4px 0 0; + margin-top: 1px \9; + line-height: normal; +} +input[type="file"] { + display: block; +} +input[type="range"] { + display: block; + width: 100%; +} +select[multiple], +select[size] { + height: auto; +} +input[type="file"]:focus, +input[type="radio"]:focus, +input[type="checkbox"]:focus { + outline: thin dotted; + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} +output { + display: block; + padding-top: 7px; + font-size: 14px; + line-height: 1.42857143; + color: #555; +} +.form-control { + display: block; + width: 100%; + height: 34px; + padding: 6px 12px; + font-size: 14px; + line-height: 1.42857143; + color: #555; + background-color: #fff; + background-image: none; + border: 1px solid #ccc; + border-radius: 4px; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); + -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; + -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; + transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; +} +.form-control:focus { + border-color: #66afe9; + outline: 0; + -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6); + box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6); +} +.form-control::-moz-placeholder { + color: #777; + opacity: 1; +} +.form-control:-ms-input-placeholder { + color: #777; +} +.form-control::-webkit-input-placeholder { + color: #777; +} +.form-control[disabled], +.form-control[readonly], +fieldset[disabled] .form-control { + cursor: not-allowed; + background-color: #eee; + opacity: 1; +} +textarea.form-control { + height: auto; +} +input[type="search"] { + -webkit-appearance: none; +} +input[type="date"], +input[type="time"], +input[type="datetime-local"], +input[type="month"] { + line-height: 34px; + line-height: 1.42857143 \0; +} +input[type="date"].input-sm, +input[type="time"].input-sm, +input[type="datetime-local"].input-sm, +input[type="month"].input-sm { + line-height: 30px; +} +input[type="date"].input-lg, +input[type="time"].input-lg, +input[type="datetime-local"].input-lg, +input[type="month"].input-lg { + line-height: 46px; +} +.form-group { + margin-bottom: 15px; +} +.radio, +.checkbox { + position: relative; + display: block; + min-height: 20px; + margin-top: 10px; + margin-bottom: 10px; +} +.radio label, +.checkbox label { + padding-left: 20px; + margin-bottom: 0; + font-weight: normal; + cursor: pointer; +} +.radio input[type="radio"], +.radio-inline input[type="radio"], +.checkbox input[type="checkbox"], +.checkbox-inline input[type="checkbox"] { + position: absolute; + margin-top: 4px \9; + margin-left: -20px; +} +.radio + .radio, +.checkbox + .checkbox { + margin-top: -5px; +} +.radio-inline, +.checkbox-inline { + display: inline-block; + padding-left: 20px; + margin-bottom: 0; + font-weight: normal; + vertical-align: middle; + cursor: pointer; +} +.radio-inline + .radio-inline, +.checkbox-inline + .checkbox-inline { + margin-top: 0; + margin-left: 10px; +} +input[type="radio"][disabled], +input[type="checkbox"][disabled], +input[type="radio"].disabled, +input[type="checkbox"].disabled, +fieldset[disabled] input[type="radio"], +fieldset[disabled] input[type="checkbox"] { + cursor: not-allowed; +} +.radio-inline.disabled, +.checkbox-inline.disabled, +fieldset[disabled] .radio-inline, +fieldset[disabled] .checkbox-inline { + cursor: not-allowed; +} +.radio.disabled label, +.checkbox.disabled label, +fieldset[disabled] .radio label, +fieldset[disabled] .checkbox label { + cursor: not-allowed; +} +.form-control-static { + padding-top: 7px; + padding-bottom: 7px; + margin-bottom: 0; +} +.form-control-static.input-lg, +.form-control-static.input-sm { + padding-right: 0; + padding-left: 0; +} +.input-sm, +.form-horizontal .form-group-sm .form-control { + height: 30px; + padding: 5px 10px; + font-size: 12px; + line-height: 1.5; + border-radius: 3px; +} +select.input-sm { + height: 30px; + line-height: 30px; +} +textarea.input-sm, +select[multiple].input-sm { + height: auto; +} +.input-lg, +.form-horizontal .form-group-lg .form-control { + height: 46px; + padding: 10px 16px; + font-size: 18px; + line-height: 1.33; + border-radius: 6px; +} +select.input-lg { + height: 46px; + line-height: 46px; +} +textarea.input-lg, +select[multiple].input-lg { + height: auto; +} +.has-feedback { + position: relative; +} +.has-feedback .form-control { + padding-right: 42.5px; +} +.form-control-feedback { + position: absolute; + top: 25px; + right: 0; + z-index: 2; + display: block; + width: 34px; + height: 34px; + line-height: 34px; + text-align: center; +} +.input-lg + .form-control-feedback { + width: 46px; + height: 46px; + line-height: 46px; +} +.input-sm + .form-control-feedback { + width: 30px; + height: 30px; + line-height: 30px; +} +.has-success .help-block, +.has-success .control-label, +.has-success .radio, +.has-success .checkbox, +.has-success .radio-inline, +.has-success .checkbox-inline { + color: #3c763d; +} +.has-success .form-control { + border-color: #3c763d; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); +} +.has-success .form-control:focus { + border-color: #2b542c; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168; +} +.has-success .input-group-addon { + color: #3c763d; + background-color: #dff0d8; + border-color: #3c763d; +} +.has-success .form-control-feedback { + color: #3c763d; +} +.has-warning .help-block, +.has-warning .control-label, +.has-warning .radio, +.has-warning .checkbox, +.has-warning .radio-inline, +.has-warning .checkbox-inline { + color: #8a6d3b; +} +.has-warning .form-control { + border-color: #8a6d3b; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); +} +.has-warning .form-control:focus { + border-color: #66512c; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #c0a16b; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #c0a16b; +} +.has-warning .input-group-addon { + color: #8a6d3b; + background-color: #fcf8e3; + border-color: #8a6d3b; +} +.has-warning .form-control-feedback { + color: #8a6d3b; +} +.has-error .help-block, +.has-error .control-label, +.has-error .radio, +.has-error .checkbox, +.has-error .radio-inline, +.has-error .checkbox-inline { + color: #a94442; +} +.has-error .form-control { + border-color: #a94442; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); +} +.has-error .form-control:focus { + border-color: #843534; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483; +} +.has-error .input-group-addon { + color: #a94442; + background-color: #f2dede; + border-color: #a94442; +} +.has-error .form-control-feedback { + color: #a94442; +} +.has-feedback label.sr-only ~ .form-control-feedback { + top: 0; +} +.help-block { + display: block; + margin-top: 5px; + margin-bottom: 10px; + color: #737373; +} +@media (min-width: 768px) { + .form-inline .form-group { + display: inline-block; + margin-bottom: 0; + vertical-align: middle; + } + .form-inline .form-control { + display: inline-block; + width: auto; + vertical-align: middle; + } + .form-inline .input-group { + display: inline-table; + vertical-align: middle; + } + .form-inline .input-group .input-group-addon, + .form-inline .input-group .input-group-btn, + .form-inline .input-group .form-control { + width: auto; + } + .form-inline .input-group > .form-control { + width: 100%; + } + .form-inline .control-label { + margin-bottom: 0; + vertical-align: middle; + } + .form-inline .radio, + .form-inline .checkbox { + display: inline-block; + margin-top: 0; + margin-bottom: 0; + vertical-align: middle; + } + .form-inline .radio label, + .form-inline .checkbox label { + padding-left: 0; + } + .form-inline .radio input[type="radio"], + .form-inline .checkbox input[type="checkbox"] { + position: relative; + margin-left: 0; + } + .form-inline .has-feedback .form-control-feedback { + top: 0; + } +} +.form-horizontal .radio, +.form-horizontal .checkbox, +.form-horizontal .radio-inline, +.form-horizontal .checkbox-inline { + padding-top: 7px; + margin-top: 0; + margin-bottom: 0; +} +.form-horizontal .radio, +.form-horizontal .checkbox { + min-height: 27px; +} +.form-horizontal .form-group { + margin-right: -15px; + margin-left: -15px; +} +@media (min-width: 768px) { + .form-horizontal .control-label { + padding-top: 7px; + margin-bottom: 0; + text-align: right; + } +} +.form-horizontal .has-feedback .form-control-feedback { + top: 0; + right: 15px; +} +@media (min-width: 768px) { + .form-horizontal .form-group-lg .control-label { + padding-top: 14.3px; + } +} +@media (min-width: 768px) { + .form-horizontal .form-group-sm .control-label { + padding-top: 6px; + } +} +.btn { + display: inline-block; + padding: 6px 12px; + margin-bottom: 0; + font-size: 14px; + font-weight: normal; + line-height: 1.42857143; + text-align: center; + white-space: nowrap; + vertical-align: middle; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background-image: none; + border: 1px solid transparent; + border-radius: 4px; +} +.btn:focus, +.btn:active:focus, +.btn.active:focus { + outline: thin dotted; + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} +.btn:hover, +.btn:focus { + color: #333; + text-decoration: none; +} +.btn:active, +.btn.active { + background-image: none; + outline: 0; + -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); + box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); +} +.btn.disabled, +.btn[disabled], +fieldset[disabled] .btn { + pointer-events: none; + cursor: not-allowed; + filter: alpha(opacity=65); + -webkit-box-shadow: none; + box-shadow: none; + opacity: .65; +} +.btn-default { + color: #333; + background-color: #fff; + border-color: #ccc; +} +.btn-default:hover, +.btn-default:focus, +.btn-default:active, +.btn-default.active, +.open > .dropdown-toggle.btn-default { + color: #333; + background-color: #e6e6e6; + border-color: #adadad; +} +.btn-default:active, +.btn-default.active, +.open > .dropdown-toggle.btn-default { + background-image: none; +} +.btn-default.disabled, +.btn-default[disabled], +fieldset[disabled] .btn-default, +.btn-default.disabled:hover, +.btn-default[disabled]:hover, +fieldset[disabled] .btn-default:hover, +.btn-default.disabled:focus, +.btn-default[disabled]:focus, +fieldset[disabled] .btn-default:focus, +.btn-default.disabled:active, +.btn-default[disabled]:active, +fieldset[disabled] .btn-default:active, +.btn-default.disabled.active, +.btn-default[disabled].active, +fieldset[disabled] .btn-default.active { + background-color: #fff; + border-color: #ccc; +} +.btn-default .badge { + color: #fff; + background-color: #333; +} +.btn-primary { + color: #fff; + background-color: #428bca; + border-color: #357ebd; +} +.btn-primary:hover, +.btn-primary:focus, +.btn-primary:active, +.btn-primary.active, +.open > .dropdown-toggle.btn-primary { + color: #fff; + background-color: #3071a9; + border-color: #285e8e; +} +.btn-primary:active, +.btn-primary.active, +.open > .dropdown-toggle.btn-primary { + background-image: none; +} +.btn-primary.disabled, +.btn-primary[disabled], +fieldset[disabled] .btn-primary, +.btn-primary.disabled:hover, +.btn-primary[disabled]:hover, +fieldset[disabled] .btn-primary:hover, +.btn-primary.disabled:focus, +.btn-primary[disabled]:focus, +fieldset[disabled] .btn-primary:focus, +.btn-primary.disabled:active, +.btn-primary[disabled]:active, +fieldset[disabled] .btn-primary:active, +.btn-primary.disabled.active, +.btn-primary[disabled].active, +fieldset[disabled] .btn-primary.active { + background-color: #428bca; + border-color: #357ebd; +} +.btn-primary .badge { + color: #428bca; + background-color: #fff; +} +.btn-success { + color: #fff; + background-color: #5cb85c; + border-color: #4cae4c; +} +.btn-success:hover, +.btn-success:focus, +.btn-success:active, +.btn-success.active, +.open > .dropdown-toggle.btn-success { + color: #fff; + background-color: #449d44; + border-color: #398439; +} +.btn-success:active, +.btn-success.active, +.open > .dropdown-toggle.btn-success { + background-image: none; +} +.btn-success.disabled, +.btn-success[disabled], +fieldset[disabled] .btn-success, +.btn-success.disabled:hover, +.btn-success[disabled]:hover, +fieldset[disabled] .btn-success:hover, +.btn-success.disabled:focus, +.btn-success[disabled]:focus, +fieldset[disabled] .btn-success:focus, +.btn-success.disabled:active, +.btn-success[disabled]:active, +fieldset[disabled] .btn-success:active, +.btn-success.disabled.active, +.btn-success[disabled].active, +fieldset[disabled] .btn-success.active { + background-color: #5cb85c; + border-color: #4cae4c; +} +.btn-success .badge { + color: #5cb85c; + background-color: #fff; +} +.btn-info { + color: #fff; + background-color: #5bc0de; + border-color: #46b8da; +} +.btn-info:hover, +.btn-info:focus, +.btn-info:active, +.btn-info.active, +.open > .dropdown-toggle.btn-info { + color: #fff; + background-color: #31b0d5; + border-color: #269abc; +} +.btn-info:active, +.btn-info.active, +.open > .dropdown-toggle.btn-info { + background-image: none; +} +.btn-info.disabled, +.btn-info[disabled], +fieldset[disabled] .btn-info, +.btn-info.disabled:hover, +.btn-info[disabled]:hover, +fieldset[disabled] .btn-info:hover, +.btn-info.disabled:focus, +.btn-info[disabled]:focus, +fieldset[disabled] .btn-info:focus, +.btn-info.disabled:active, +.btn-info[disabled]:active, +fieldset[disabled] .btn-info:active, +.btn-info.disabled.active, +.btn-info[disabled].active, +fieldset[disabled] .btn-info.active { + background-color: #5bc0de; + border-color: #46b8da; +} +.btn-info .badge { + color: #5bc0de; + background-color: #fff; +} +.btn-warning { + color: #fff; + background-color: #f0ad4e; + border-color: #eea236; +} +.btn-warning:hover, +.btn-warning:focus, +.btn-warning:active, +.btn-warning.active, +.open > .dropdown-toggle.btn-warning { + color: #fff; + background-color: #ec971f; + border-color: #d58512; +} +.btn-warning:active, +.btn-warning.active, +.open > .dropdown-toggle.btn-warning { + background-image: none; +} +.btn-warning.disabled, +.btn-warning[disabled], +fieldset[disabled] .btn-warning, +.btn-warning.disabled:hover, +.btn-warning[disabled]:hover, +fieldset[disabled] .btn-warning:hover, +.btn-warning.disabled:focus, +.btn-warning[disabled]:focus, +fieldset[disabled] .btn-warning:focus, +.btn-warning.disabled:active, +.btn-warning[disabled]:active, +fieldset[disabled] .btn-warning:active, +.btn-warning.disabled.active, +.btn-warning[disabled].active, +fieldset[disabled] .btn-warning.active { + background-color: #f0ad4e; + border-color: #eea236; +} +.btn-warning .badge { + color: #f0ad4e; + background-color: #fff; +} +.btn-danger { + color: #fff; + background-color: #d9534f; + border-color: #d43f3a; +} +.btn-danger:hover, +.btn-danger:focus, +.btn-danger:active, +.btn-danger.active, +.open > .dropdown-toggle.btn-danger { + color: #fff; + background-color: #c9302c; + border-color: #ac2925; +} +.btn-danger:active, +.btn-danger.active, +.open > .dropdown-toggle.btn-danger { + background-image: none; +} +.btn-danger.disabled, +.btn-danger[disabled], +fieldset[disabled] .btn-danger, +.btn-danger.disabled:hover, +.btn-danger[disabled]:hover, +fieldset[disabled] .btn-danger:hover, +.btn-danger.disabled:focus, +.btn-danger[disabled]:focus, +fieldset[disabled] .btn-danger:focus, +.btn-danger.disabled:active, +.btn-danger[disabled]:active, +fieldset[disabled] .btn-danger:active, +.btn-danger.disabled.active, +.btn-danger[disabled].active, +fieldset[disabled] .btn-danger.active { + background-color: #d9534f; + border-color: #d43f3a; +} +.btn-danger .badge { + color: #d9534f; + background-color: #fff; +} +.btn-link { + font-weight: normal; + color: #428bca; + cursor: pointer; + border-radius: 0; +} +.btn-link, +.btn-link:active, +.btn-link[disabled], +fieldset[disabled] .btn-link { + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; +} +.btn-link, +.btn-link:hover, +.btn-link:focus, +.btn-link:active { + border-color: transparent; +} +.btn-link:hover, +.btn-link:focus { + color: #2a6496; + text-decoration: underline; + background-color: transparent; +} +.btn-link[disabled]:hover, +fieldset[disabled] .btn-link:hover, +.btn-link[disabled]:focus, +fieldset[disabled] .btn-link:focus { + color: #777; + text-decoration: none; +} +.btn-lg, +.btn-group-lg > .btn { + padding: 10px 16px; + font-size: 18px; + line-height: 1.33; + border-radius: 6px; +} +.btn-sm, +.btn-group-sm > .btn { + padding: 5px 10px; + font-size: 12px; + line-height: 1.5; + border-radius: 3px; +} +.btn-xs, +.btn-group-xs > .btn { + padding: 1px 5px; + font-size: 12px; + line-height: 1.5; + border-radius: 3px; +} +.btn-block { + display: block; + width: 100%; +} +.btn-block + .btn-block { + margin-top: 5px; +} +input[type="submit"].btn-block, +input[type="reset"].btn-block, +input[type="button"].btn-block { + width: 100%; +} +.fade { + opacity: 0; + -webkit-transition: opacity .15s linear; + -o-transition: opacity .15s linear; + transition: opacity .15s linear; +} +.fade.in { + opacity: 1; +} +.collapse { + display: none; +} +.collapse.in { + display: block; +} +tr.collapse.in { + display: table-row; +} +tbody.collapse.in { + display: table-row-group; +} +.collapsing { + position: relative; + height: 0; + overflow: hidden; + -webkit-transition: height .35s ease; + -o-transition: height .35s ease; + transition: height .35s ease; +} +.caret { + display: inline-block; + width: 0; + height: 0; + margin-left: 2px; + vertical-align: middle; + border-top: 4px solid; + border-right: 4px solid transparent; + border-left: 4px solid transparent; +} +.dropdown { + position: relative; +} +.dropdown-toggle:focus { + outline: 0; +} +.dropdown-menu { + position: absolute; + top: 100%; + left: 0; + z-index: 1000; + display: none; + float: left; + min-width: 160px; + padding: 5px 0; + margin: 2px 0 0; + font-size: 14px; + text-align: left; + list-style: none; + background-color: #fff; + -webkit-background-clip: padding-box; + background-clip: padding-box; + border: 1px solid #ccc; + border: 1px solid rgba(0, 0, 0, .15); + border-radius: 4px; + -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); + box-shadow: 0 6px 12px rgba(0, 0, 0, .175); +} +.dropdown-menu.pull-right { + right: 0; + left: auto; +} +.dropdown-menu .divider { + height: 1px; + margin: 9px 0; + overflow: hidden; + background-color: #e5e5e5; +} +.dropdown-menu > li > a { + display: block; + padding: 3px 20px; + clear: both; + font-weight: normal; + line-height: 1.42857143; + color: #333; + white-space: nowrap; +} +.dropdown-menu > li > a:hover, +.dropdown-menu > li > a:focus { + color: #262626; + text-decoration: none; + background-color: #f5f5f5; +} +.dropdown-menu > .active > a, +.dropdown-menu > .active > a:hover, +.dropdown-menu > .active > a:focus { + color: #fff; + text-decoration: none; + background-color: #428bca; + outline: 0; +} +.dropdown-menu > .disabled > a, +.dropdown-menu > .disabled > a:hover, +.dropdown-menu > .disabled > a:focus { + color: #777; +} +.dropdown-menu > .disabled > a:hover, +.dropdown-menu > .disabled > a:focus { + text-decoration: none; + cursor: not-allowed; + background-color: transparent; + background-image: none; + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); +} +.open > .dropdown-menu { + display: block; +} +.open > a { + outline: 0; +} +.dropdown-menu-right { + right: 0; + left: auto; +} +.dropdown-menu-left { + right: auto; + left: 0; +} +.dropdown-header { + display: block; + padding: 3px 20px; + font-size: 12px; + line-height: 1.42857143; + color: #777; + white-space: nowrap; +} +.dropdown-backdrop { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 990; +} +.pull-right > .dropdown-menu { + right: 0; + left: auto; +} +.dropup .caret, +.navbar-fixed-bottom .dropdown .caret { + content: ""; + border-top: 0; + border-bottom: 4px solid; +} +.dropup .dropdown-menu, +.navbar-fixed-bottom .dropdown .dropdown-menu { + top: auto; + bottom: 100%; + margin-bottom: 1px; +} +@media (min-width: 768px) { + .navbar-right .dropdown-menu { + right: 0; + left: auto; + } + .navbar-right .dropdown-menu-left { + right: auto; + left: 0; + } +} +.btn-group, +.btn-group-vertical { + position: relative; + display: inline-block; + vertical-align: middle; +} +.btn-group > .btn, +.btn-group-vertical > .btn { + position: relative; + float: left; +} +.btn-group > .btn:hover, +.btn-group-vertical > .btn:hover, +.btn-group > .btn:focus, +.btn-group-vertical > .btn:focus, +.btn-group > .btn:active, +.btn-group-vertical > .btn:active, +.btn-group > .btn.active, +.btn-group-vertical > .btn.active { + z-index: 2; +} +.btn-group > .btn:focus, +.btn-group-vertical > .btn:focus { + outline: 0; +} +.btn-group .btn + .btn, +.btn-group .btn + .btn-group, +.btn-group .btn-group + .btn, +.btn-group .btn-group + .btn-group { + margin-left: -1px; +} +.btn-toolbar { + margin-left: -5px; +} +.btn-toolbar .btn-group, +.btn-toolbar .input-group { + float: left; +} +.btn-toolbar > .btn, +.btn-toolbar > .btn-group, +.btn-toolbar > .input-group { + margin-left: 5px; +} +.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { + border-radius: 0; +} +.btn-group > .btn:first-child { + margin-left: 0; +} +.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.btn-group > .btn:last-child:not(:first-child), +.btn-group > .dropdown-toggle:not(:first-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.btn-group > .btn-group { + float: left; +} +.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { + border-radius: 0; +} +.btn-group > .btn-group:first-child > .btn:last-child, +.btn-group > .btn-group:first-child > .dropdown-toggle { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.btn-group > .btn-group:last-child > .btn:first-child { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.btn-group .dropdown-toggle:active, +.btn-group.open .dropdown-toggle { + outline: 0; +} +.btn-group > .btn + .dropdown-toggle { + padding-right: 8px; + padding-left: 8px; +} +.btn-group > .btn-lg + .dropdown-toggle { + padding-right: 12px; + padding-left: 12px; +} +.btn-group.open .dropdown-toggle { + -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); + box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); +} +.btn-group.open .dropdown-toggle.btn-link { + -webkit-box-shadow: none; + box-shadow: none; +} +.btn .caret { + margin-left: 0; +} +.btn-lg .caret { + border-width: 5px 5px 0; + border-bottom-width: 0; +} +.dropup .btn-lg .caret { + border-width: 0 5px 5px; +} +.btn-group-vertical > .btn, +.btn-group-vertical > .btn-group, +.btn-group-vertical > .btn-group > .btn { + display: block; + float: none; + width: 100%; + max-width: 100%; +} +.btn-group-vertical > .btn-group > .btn { + float: none; +} +.btn-group-vertical > .btn + .btn, +.btn-group-vertical > .btn + .btn-group, +.btn-group-vertical > .btn-group + .btn, +.btn-group-vertical > .btn-group + .btn-group { + margin-top: -1px; + margin-left: 0; +} +.btn-group-vertical > .btn:not(:first-child):not(:last-child) { + border-radius: 0; +} +.btn-group-vertical > .btn:first-child:not(:last-child) { + border-top-right-radius: 4px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +.btn-group-vertical > .btn:last-child:not(:first-child) { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 4px; +} +.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn { + border-radius: 0; +} +.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child, +.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child { + border-top-left-radius: 0; + border-top-right-radius: 0; +} +.btn-group-justified { + display: table; + width: 100%; + table-layout: fixed; + border-collapse: separate; +} +.btn-group-justified > .btn, +.btn-group-justified > .btn-group { + display: table-cell; + float: none; + width: 1%; +} +.btn-group-justified > .btn-group .btn { + width: 100%; +} +.btn-group-justified > .btn-group .dropdown-menu { + left: auto; +} +[data-toggle="buttons"] > .btn > input[type="radio"], +[data-toggle="buttons"] > .btn > input[type="checkbox"] { + position: absolute; + z-index: -1; + filter: alpha(opacity=0); + opacity: 0; +} +.input-group { + position: relative; + display: table; + border-collapse: separate; +} +.input-group[class*="col-"] { + float: none; + padding-right: 0; + padding-left: 0; +} +.input-group .form-control { + position: relative; + z-index: 2; + float: left; + width: 100%; + margin-bottom: 0; +} +.input-group-lg > .form-control, +.input-group-lg > .input-group-addon, +.input-group-lg > .input-group-btn > .btn { + height: 46px; + padding: 10px 16px; + font-size: 18px; + line-height: 1.33; + border-radius: 6px; +} +select.input-group-lg > .form-control, +select.input-group-lg > .input-group-addon, +select.input-group-lg > .input-group-btn > .btn { + height: 46px; + line-height: 46px; +} +textarea.input-group-lg > .form-control, +textarea.input-group-lg > .input-group-addon, +textarea.input-group-lg > .input-group-btn > .btn, +select[multiple].input-group-lg > .form-control, +select[multiple].input-group-lg > .input-group-addon, +select[multiple].input-group-lg > .input-group-btn > .btn { + height: auto; +} +.input-group-sm > .form-control, +.input-group-sm > .input-group-addon, +.input-group-sm > .input-group-btn > .btn { + height: 30px; + padding: 5px 10px; + font-size: 12px; + line-height: 1.5; + border-radius: 3px; +} +select.input-group-sm > .form-control, +select.input-group-sm > .input-group-addon, +select.input-group-sm > .input-group-btn > .btn { + height: 30px; + line-height: 30px; +} +textarea.input-group-sm > .form-control, +textarea.input-group-sm > .input-group-addon, +textarea.input-group-sm > .input-group-btn > .btn, +select[multiple].input-group-sm > .form-control, +select[multiple].input-group-sm > .input-group-addon, +select[multiple].input-group-sm > .input-group-btn > .btn { + height: auto; +} +.input-group-addon, +.input-group-btn, +.input-group .form-control { + display: table-cell; +} +.input-group-addon:not(:first-child):not(:last-child), +.input-group-btn:not(:first-child):not(:last-child), +.input-group .form-control:not(:first-child):not(:last-child) { + border-radius: 0; +} +.input-group-addon, +.input-group-btn { + width: 1%; + white-space: nowrap; + vertical-align: middle; +} +.input-group-addon { + padding: 6px 12px; + font-size: 14px; + font-weight: normal; + line-height: 1; + color: #555; + text-align: center; + background-color: #eee; + border: 1px solid #ccc; + border-radius: 4px; +} +.input-group-addon.input-sm { + padding: 5px 10px; + font-size: 12px; + border-radius: 3px; +} +.input-group-addon.input-lg { + padding: 10px 16px; + font-size: 18px; + border-radius: 6px; +} +.input-group-addon input[type="radio"], +.input-group-addon input[type="checkbox"] { + margin-top: 0; +} +.input-group .form-control:first-child, +.input-group-addon:first-child, +.input-group-btn:first-child > .btn, +.input-group-btn:first-child > .btn-group > .btn, +.input-group-btn:first-child > .dropdown-toggle, +.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), +.input-group-btn:last-child > .btn-group:not(:last-child) > .btn { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.input-group-addon:first-child { + border-right: 0; +} +.input-group .form-control:last-child, +.input-group-addon:last-child, +.input-group-btn:last-child > .btn, +.input-group-btn:last-child > .btn-group > .btn, +.input-group-btn:last-child > .dropdown-toggle, +.input-group-btn:first-child > .btn:not(:first-child), +.input-group-btn:first-child > .btn-group:not(:first-child) > .btn { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.input-group-addon:last-child { + border-left: 0; +} +.input-group-btn { + position: relative; + font-size: 0; + white-space: nowrap; +} +.input-group-btn > .btn { + position: relative; +} +.input-group-btn > .btn + .btn { + margin-left: -1px; +} +.input-group-btn > .btn:hover, +.input-group-btn > .btn:focus, +.input-group-btn > .btn:active { + z-index: 2; +} +.input-group-btn:first-child > .btn, +.input-group-btn:first-child > .btn-group { + margin-right: -1px; +} +.input-group-btn:last-child > .btn, +.input-group-btn:last-child > .btn-group { + margin-left: -1px; +} +.nav { + padding-left: 0; + margin-bottom: 0; + list-style: none; +} +.nav > li { + position: relative; + display: block; +} +.nav > li > a { + position: relative; + display: block; + padding: 10px 15px; +} +.nav > li > a:hover, +.nav > li > a:focus { + text-decoration: none; + background-color: #eee; +} +.nav > li.disabled > a { + color: #777; +} +.nav > li.disabled > a:hover, +.nav > li.disabled > a:focus { + color: #777; + text-decoration: none; + cursor: not-allowed; + background-color: transparent; +} +.nav .open > a, +.nav .open > a:hover, +.nav .open > a:focus { + background-color: #eee; + border-color: #428bca; +} +.nav .nav-divider { + height: 1px; + margin: 9px 0; + overflow: hidden; + background-color: #e5e5e5; +} +.nav > li > a > img { + max-width: none; +} +.nav-tabs { + border-bottom: 1px solid #ddd; +} +.nav-tabs > li { + float: left; + margin-bottom: -1px; +} +.nav-tabs > li > a { + margin-right: 2px; + line-height: 1.42857143; + border: 1px solid transparent; + border-radius: 4px 4px 0 0; +} +.nav-tabs > li > a:hover { + border-color: #eee #eee #ddd; +} +.nav-tabs > li.active > a, +.nav-tabs > li.active > a:hover, +.nav-tabs > li.active > a:focus { + color: #555; + cursor: default; + background-color: #fff; + border: 1px solid #ddd; + border-bottom-color: transparent; +} +.nav-tabs.nav-justified { + width: 100%; + border-bottom: 0; +} +.nav-tabs.nav-justified > li { + float: none; +} +.nav-tabs.nav-justified > li > a { + margin-bottom: 5px; + text-align: center; +} +.nav-tabs.nav-justified > .dropdown .dropdown-menu { + top: auto; + left: auto; +} +@media (min-width: 768px) { + .nav-tabs.nav-justified > li { + display: table-cell; + width: 1%; + } + .nav-tabs.nav-justified > li > a { + margin-bottom: 0; + } +} +.nav-tabs.nav-justified > li > a { + margin-right: 0; + border-radius: 4px; +} +.nav-tabs.nav-justified > .active > a, +.nav-tabs.nav-justified > .active > a:hover, +.nav-tabs.nav-justified > .active > a:focus { + border: 1px solid #ddd; +} +@media (min-width: 768px) { + .nav-tabs.nav-justified > li > a { + border-bottom: 1px solid #ddd; + border-radius: 4px 4px 0 0; + } + .nav-tabs.nav-justified > .active > a, + .nav-tabs.nav-justified > .active > a:hover, + .nav-tabs.nav-justified > .active > a:focus { + border-bottom-color: #fff; + } +} +.nav-pills > li { + float: left; +} +.nav-pills > li > a { + border-radius: 4px; +} +.nav-pills > li + li { + margin-left: 2px; +} +.nav-pills > li.active > a, +.nav-pills > li.active > a:hover, +.nav-pills > li.active > a:focus { + color: #fff; + background-color: #428bca; +} +.nav-stacked > li { + float: none; +} +.nav-stacked > li + li { + margin-top: 2px; + margin-left: 0; +} +.nav-justified { + width: 100%; +} +.nav-justified > li { + float: none; +} +.nav-justified > li > a { + margin-bottom: 5px; + text-align: center; +} +.nav-justified > .dropdown .dropdown-menu { + top: auto; + left: auto; +} +@media (min-width: 768px) { + .nav-justified > li { + display: table-cell; + width: 1%; + } + .nav-justified > li > a { + margin-bottom: 0; + } +} +.nav-tabs-justified { + border-bottom: 0; +} +.nav-tabs-justified > li > a { + margin-right: 0; + border-radius: 4px; +} +.nav-tabs-justified > .active > a, +.nav-tabs-justified > .active > a:hover, +.nav-tabs-justified > .active > a:focus { + border: 1px solid #ddd; +} +@media (min-width: 768px) { + .nav-tabs-justified > li > a { + border-bottom: 1px solid #ddd; + border-radius: 4px 4px 0 0; + } + .nav-tabs-justified > .active > a, + .nav-tabs-justified > .active > a:hover, + .nav-tabs-justified > .active > a:focus { + border-bottom-color: #fff; + } +} +.tab-content > .tab-pane { + display: none; +} +.tab-content > .active { + display: block; +} +.nav-tabs .dropdown-menu { + margin-top: -1px; + border-top-left-radius: 0; + border-top-right-radius: 0; +} +.navbar { + position: relative; + min-height: 50px; + margin-bottom: 20px; + border: 1px solid transparent; +} +@media (min-width: 768px) { + .navbar { + border-radius: 4px; + } +} +@media (min-width: 768px) { + .navbar-header { + float: left; + } +} +.navbar-collapse { + padding-right: 15px; + padding-left: 15px; + overflow-x: visible; + -webkit-overflow-scrolling: touch; + border-top: 1px solid transparent; + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); +} +.navbar-collapse.in { + overflow-y: auto; +} +@media (min-width: 768px) { + .navbar-collapse { + width: auto; + border-top: 0; + -webkit-box-shadow: none; + box-shadow: none; + } + .navbar-collapse.collapse { + display: block !important; + height: auto !important; + padding-bottom: 0; + overflow: visible !important; + } + .navbar-collapse.in { + overflow-y: visible; + } + .navbar-fixed-top .navbar-collapse, + .navbar-static-top .navbar-collapse, + .navbar-fixed-bottom .navbar-collapse { + padding-right: 0; + padding-left: 0; + } +} +.navbar-fixed-top .navbar-collapse, +.navbar-fixed-bottom .navbar-collapse { + max-height: 340px; +} +@media (max-width: 480px) and (orientation: landscape) { + .navbar-fixed-top .navbar-collapse, + .navbar-fixed-bottom .navbar-collapse { + max-height: 200px; + } +} +.container > .navbar-header, +.container-fluid > .navbar-header, +.container > .navbar-collapse, +.container-fluid > .navbar-collapse { + margin-right: -15px; + margin-left: -15px; +} +@media (min-width: 768px) { + .container > .navbar-header, + .container-fluid > .navbar-header, + .container > .navbar-collapse, + .container-fluid > .navbar-collapse { + margin-right: 0; + margin-left: 0; + } +} +.navbar-static-top { + z-index: 1000; + border-width: 0 0 1px; +} +@media (min-width: 768px) { + .navbar-static-top { + border-radius: 0; + } +} +.navbar-fixed-top, +.navbar-fixed-bottom { + position: fixed; + right: 0; + left: 0; + z-index: 1030; + -webkit-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +@media (min-width: 768px) { + .navbar-fixed-top, + .navbar-fixed-bottom { + border-radius: 0; + } +} +.navbar-fixed-top { + top: 0; + border-width: 0 0 1px; +} +.navbar-fixed-bottom { + bottom: 0; + margin-bottom: 0; + border-width: 1px 0 0; +} +.navbar-brand { + float: left; + height: 50px; + padding: 15px 15px; + font-size: 18px; + line-height: 20px; +} +.navbar-brand:hover, +.navbar-brand:focus { + text-decoration: none; +} +@media (min-width: 768px) { + .navbar > .container .navbar-brand, + .navbar > .container-fluid .navbar-brand { + margin-left: -15px; + } +} +.navbar-toggle { + position: relative; + float: right; + padding: 9px 10px; + margin-top: 8px; + margin-right: 15px; + margin-bottom: 8px; + background-color: transparent; + background-image: none; + border: 1px solid transparent; + border-radius: 4px; +} +.navbar-toggle:focus { + outline: 0; +} +.navbar-toggle .icon-bar { + display: block; + width: 22px; + height: 2px; + border-radius: 1px; +} +.navbar-toggle .icon-bar + .icon-bar { + margin-top: 4px; +} +@media (min-width: 768px) { + .navbar-toggle { + display: none; + } +} +.navbar-nav { + margin: 7.5px -15px; +} +.navbar-nav > li > a { + padding-top: 10px; + padding-bottom: 10px; + line-height: 20px; +} +@media (max-width: 767px) { + .navbar-nav .open .dropdown-menu { + position: static; + float: none; + width: auto; + margin-top: 0; + background-color: transparent; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; + } + .navbar-nav .open .dropdown-menu > li > a, + .navbar-nav .open .dropdown-menu .dropdown-header { + padding: 5px 15px 5px 25px; + } + .navbar-nav .open .dropdown-menu > li > a { + line-height: 20px; + } + .navbar-nav .open .dropdown-menu > li > a:hover, + .navbar-nav .open .dropdown-menu > li > a:focus { + background-image: none; + } +} +@media (min-width: 768px) { + .navbar-nav { + float: left; + margin: 0; + } + .navbar-nav > li { + float: left; + } + .navbar-nav > li > a { + padding-top: 15px; + padding-bottom: 15px; + } + .navbar-nav.navbar-right:last-child { + margin-right: -15px; + } +} +@media (min-width: 768px) { + .navbar-left { + float: left !important; + } + .navbar-right { + float: right !important; + } +} +.navbar-form { + padding: 10px 15px; + margin-top: 8px; + margin-right: -15px; + margin-bottom: 8px; + margin-left: -15px; + border-top: 1px solid transparent; + border-bottom: 1px solid transparent; + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1); +} +@media (min-width: 768px) { + .navbar-form .form-group { + display: inline-block; + margin-bottom: 0; + vertical-align: middle; + } + .navbar-form .form-control { + display: inline-block; + width: auto; + vertical-align: middle; + } + .navbar-form .input-group { + display: inline-table; + vertical-align: middle; + } + .navbar-form .input-group .input-group-addon, + .navbar-form .input-group .input-group-btn, + .navbar-form .input-group .form-control { + width: auto; + } + .navbar-form .input-group > .form-control { + width: 100%; + } + .navbar-form .control-label { + margin-bottom: 0; + vertical-align: middle; + } + .navbar-form .radio, + .navbar-form .checkbox { + display: inline-block; + margin-top: 0; + margin-bottom: 0; + vertical-align: middle; + } + .navbar-form .radio label, + .navbar-form .checkbox label { + padding-left: 0; + } + .navbar-form .radio input[type="radio"], + .navbar-form .checkbox input[type="checkbox"] { + position: relative; + margin-left: 0; + } + .navbar-form .has-feedback .form-control-feedback { + top: 0; + } +} +@media (max-width: 767px) { + .navbar-form .form-group { + margin-bottom: 5px; + } +} +@media (min-width: 768px) { + .navbar-form { + width: auto; + padding-top: 0; + padding-bottom: 0; + margin-right: 0; + margin-left: 0; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; + } + .navbar-form.navbar-right:last-child { + margin-right: -15px; + } +} +.navbar-nav > li > .dropdown-menu { + margin-top: 0; + border-top-left-radius: 0; + border-top-right-radius: 0; +} +.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +.navbar-btn { + margin-top: 8px; + margin-bottom: 8px; +} +.navbar-btn.btn-sm { + margin-top: 10px; + margin-bottom: 10px; +} +.navbar-btn.btn-xs { + margin-top: 14px; + margin-bottom: 14px; +} +.navbar-text { + margin-top: 15px; + margin-bottom: 15px; +} +@media (min-width: 768px) { + .navbar-text { + float: left; + margin-right: 15px; + margin-left: 15px; + } + .navbar-text.navbar-right:last-child { + margin-right: 0; + } +} +.navbar-default { + background-color: #f8f8f8; + border-color: #e7e7e7; +} +.navbar-default .navbar-brand { + color: #777; +} +.navbar-default .navbar-brand:hover, +.navbar-default .navbar-brand:focus { + color: #5e5e5e; + background-color: transparent; +} +.navbar-default .navbar-text { + color: #777; +} +.navbar-default .navbar-nav > li > a { + color: #777; +} +.navbar-default .navbar-nav > li > a:hover, +.navbar-default .navbar-nav > li > a:focus { + color: #333; + background-color: transparent; +} +.navbar-default .navbar-nav > .active > a, +.navbar-default .navbar-nav > .active > a:hover, +.navbar-default .navbar-nav > .active > a:focus { + color: #555; + background-color: #e7e7e7; +} +.navbar-default .navbar-nav > .disabled > a, +.navbar-default .navbar-nav > .disabled > a:hover, +.navbar-default .navbar-nav > .disabled > a:focus { + color: #ccc; + background-color: transparent; +} +.navbar-default .navbar-toggle { + border-color: #ddd; +} +.navbar-default .navbar-toggle:hover, +.navbar-default .navbar-toggle:focus { + background-color: #ddd; +} +.navbar-default .navbar-toggle .icon-bar { + background-color: #888; +} +.navbar-default .navbar-collapse, +.navbar-default .navbar-form { + border-color: #e7e7e7; +} +.navbar-default .navbar-nav > .open > a, +.navbar-default .navbar-nav > .open > a:hover, +.navbar-default .navbar-nav > .open > a:focus { + color: #555; + background-color: #e7e7e7; +} +@media (max-width: 767px) { + .navbar-default .navbar-nav .open .dropdown-menu > li > a { + color: #777; + } + .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, + .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { + color: #333; + background-color: transparent; + } + .navbar-default .navbar-nav .open .dropdown-menu > .active > a, + .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, + .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { + color: #555; + background-color: #e7e7e7; + } + .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a, + .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover, + .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus { + color: #ccc; + background-color: transparent; + } +} +.navbar-default .navbar-link { + color: #777; +} +.navbar-default .navbar-link:hover { + color: #333; +} +.navbar-default .btn-link { + color: #777; +} +.navbar-default .btn-link:hover, +.navbar-default .btn-link:focus { + color: #333; +} +.navbar-default .btn-link[disabled]:hover, +fieldset[disabled] .navbar-default .btn-link:hover, +.navbar-default .btn-link[disabled]:focus, +fieldset[disabled] .navbar-default .btn-link:focus { + color: #ccc; +} +.navbar-inverse { + background-color: #222; + border-color: #080808; +} +.navbar-inverse .navbar-brand { + color: #777; +} +.navbar-inverse .navbar-brand:hover, +.navbar-inverse .navbar-brand:focus { + color: #fff; + background-color: transparent; +} +.navbar-inverse .navbar-text { + color: #777; +} +.navbar-inverse .navbar-nav > li > a { + color: #777; +} +.navbar-inverse .navbar-nav > li > a:hover, +.navbar-inverse .navbar-nav > li > a:focus { + color: #fff; + background-color: transparent; +} +.navbar-inverse .navbar-nav > .active > a, +.navbar-inverse .navbar-nav > .active > a:hover, +.navbar-inverse .navbar-nav > .active > a:focus { + color: #fff; + background-color: #080808; +} +.navbar-inverse .navbar-nav > .disabled > a, +.navbar-inverse .navbar-nav > .disabled > a:hover, +.navbar-inverse .navbar-nav > .disabled > a:focus { + color: #444; + background-color: transparent; +} +.navbar-inverse .navbar-toggle { + border-color: #333; +} +.navbar-inverse .navbar-toggle:hover, +.navbar-inverse .navbar-toggle:focus { + background-color: #333; +} +.navbar-inverse .navbar-toggle .icon-bar { + background-color: #fff; +} +.navbar-inverse .navbar-collapse, +.navbar-inverse .navbar-form { + border-color: #101010; +} +.navbar-inverse .navbar-nav > .open > a, +.navbar-inverse .navbar-nav > .open > a:hover, +.navbar-inverse .navbar-nav > .open > a:focus { + color: #fff; + background-color: #080808; +} +@media (max-width: 767px) { + .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header { + border-color: #080808; + } + .navbar-inverse .navbar-nav .open .dropdown-menu .divider { + background-color: #080808; + } + .navbar-inverse .navbar-nav .open .dropdown-menu > li > a { + color: #777; + } + .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, + .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus { + color: #fff; + background-color: transparent; + } + .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a, + .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover, + .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus { + color: #fff; + background-color: #080808; + } + .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a, + .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover, + .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus { + color: #444; + background-color: transparent; + } +} +.navbar-inverse .navbar-link { + color: #777; +} +.navbar-inverse .navbar-link:hover { + color: #fff; +} +.navbar-inverse .btn-link { + color: #777; +} +.navbar-inverse .btn-link:hover, +.navbar-inverse .btn-link:focus { + color: #fff; +} +.navbar-inverse .btn-link[disabled]:hover, +fieldset[disabled] .navbar-inverse .btn-link:hover, +.navbar-inverse .btn-link[disabled]:focus, +fieldset[disabled] .navbar-inverse .btn-link:focus { + color: #444; +} +.breadcrumb { + padding: 8px 15px; + margin-bottom: 20px; + list-style: none; + background-color: #f5f5f5; + border-radius: 4px; +} +.breadcrumb > li { + display: inline-block; +} +.breadcrumb > li + li:before { + padding: 0 5px; + color: #ccc; + content: "/\00a0"; +} +.breadcrumb > .active { + color: #777; +} +.pagination { + display: inline-block; + padding-left: 0; + margin: 20px 0; + border-radius: 4px; +} +.pagination > li { + display: inline; +} +.pagination > li > a, +.pagination > li > span { + position: relative; + float: left; + padding: 6px 12px; + margin-left: -1px; + line-height: 1.42857143; + color: #428bca; + text-decoration: none; + background-color: #fff; + border: 1px solid #ddd; +} +.pagination > li:first-child > a, +.pagination > li:first-child > span { + margin-left: 0; + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; +} +.pagination > li:last-child > a, +.pagination > li:last-child > span { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; +} +.pagination > li > a:hover, +.pagination > li > span:hover, +.pagination > li > a:focus, +.pagination > li > span:focus { + color: #2a6496; + background-color: #eee; + border-color: #ddd; +} +.pagination > .active > a, +.pagination > .active > span, +.pagination > .active > a:hover, +.pagination > .active > span:hover, +.pagination > .active > a:focus, +.pagination > .active > span:focus { + z-index: 2; + color: #fff; + cursor: default; + background-color: #428bca; + border-color: #428bca; +} +.pagination > .disabled > span, +.pagination > .disabled > span:hover, +.pagination > .disabled > span:focus, +.pagination > .disabled > a, +.pagination > .disabled > a:hover, +.pagination > .disabled > a:focus { + color: #777; + cursor: not-allowed; + background-color: #fff; + border-color: #ddd; +} +.pagination-lg > li > a, +.pagination-lg > li > span { + padding: 10px 16px; + font-size: 18px; +} +.pagination-lg > li:first-child > a, +.pagination-lg > li:first-child > span { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; +} +.pagination-lg > li:last-child > a, +.pagination-lg > li:last-child > span { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} +.pagination-sm > li > a, +.pagination-sm > li > span { + padding: 5px 10px; + font-size: 12px; +} +.pagination-sm > li:first-child > a, +.pagination-sm > li:first-child > span { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; +} +.pagination-sm > li:last-child > a, +.pagination-sm > li:last-child > span { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; +} +.pager { + padding-left: 0; + margin: 20px 0; + text-align: center; + list-style: none; +} +.pager li { + display: inline; +} +.pager li > a, +.pager li > span { + display: inline-block; + padding: 5px 14px; + background-color: #fff; + border: 1px solid #ddd; + border-radius: 15px; +} +.pager li > a:hover, +.pager li > a:focus { + text-decoration: none; + background-color: #eee; +} +.pager .next > a, +.pager .next > span { + float: right; +} +.pager .previous > a, +.pager .previous > span { + float: left; +} +.pager .disabled > a, +.pager .disabled > a:hover, +.pager .disabled > a:focus, +.pager .disabled > span { + color: #777; + cursor: not-allowed; + background-color: #fff; +} +.label { + display: inline; + padding: .2em .6em .3em; + font-size: 75%; + font-weight: bold; + line-height: 1; + color: #fff; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + border-radius: .25em; +} +a.label:hover, +a.label:focus { + color: #fff; + text-decoration: none; + cursor: pointer; +} +.label:empty { + display: none; +} +.btn .label { + position: relative; + top: -1px; +} +.label-default { + background-color: #777; +} +.label-default[href]:hover, +.label-default[href]:focus { + background-color: #5e5e5e; +} +.label-primary { + background-color: #428bca; +} +.label-primary[href]:hover, +.label-primary[href]:focus { + background-color: #3071a9; +} +.label-success { + background-color: #5cb85c; +} +.label-success[href]:hover, +.label-success[href]:focus { + background-color: #449d44; +} +.label-info { + background-color: #5bc0de; +} +.label-info[href]:hover, +.label-info[href]:focus { + background-color: #31b0d5; +} +.label-warning { + background-color: #f0ad4e; +} +.label-warning[href]:hover, +.label-warning[href]:focus { + background-color: #ec971f; +} +.label-danger { + background-color: #d9534f; +} +.label-danger[href]:hover, +.label-danger[href]:focus { + background-color: #c9302c; +} +.badge { + display: inline-block; + min-width: 10px; + padding: 3px 7px; + font-size: 12px; + font-weight: bold; + line-height: 1; + color: #fff; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + background-color: #777; + border-radius: 10px; +} +.badge:empty { + display: none; +} +.btn .badge { + position: relative; + top: -1px; +} +.btn-xs .badge { + top: 0; + padding: 1px 5px; +} +a.badge:hover, +a.badge:focus { + color: #fff; + text-decoration: none; + cursor: pointer; +} +a.list-group-item.active > .badge, +.nav-pills > .active > a > .badge { + color: #428bca; + background-color: #fff; +} +.nav-pills > li > a > .badge { + margin-left: 3px; +} +.jumbotron { + padding: 30px; + margin-bottom: 30px; + color: inherit; + background-color: #eee; +} +.jumbotron h1, +.jumbotron .h1 { + color: inherit; +} +.jumbotron p { + margin-bottom: 15px; + font-size: 21px; + font-weight: 200; +} +.jumbotron > hr { + border-top-color: #d5d5d5; +} +.container .jumbotron { + border-radius: 6px; +} +.jumbotron .container { + max-width: 100%; +} +@media screen and (min-width: 768px) { + .jumbotron { + padding-top: 48px; + padding-bottom: 48px; + } + .container .jumbotron { + padding-right: 60px; + padding-left: 60px; + } + .jumbotron h1, + .jumbotron .h1 { + font-size: 63px; + } +} +.thumbnail { + display: block; + padding: 4px; + margin-bottom: 20px; + line-height: 1.42857143; + background-color: #fff; + border: 1px solid #ddd; + border-radius: 4px; + -webkit-transition: all .2s ease-in-out; + -o-transition: all .2s ease-in-out; + transition: all .2s ease-in-out; +} +.thumbnail > img, +.thumbnail a > img { + margin-right: auto; + margin-left: auto; +} +a.thumbnail:hover, +a.thumbnail:focus, +a.thumbnail.active { + border-color: #428bca; +} +.thumbnail .caption { + padding: 9px; + color: #333; +} +.alert { + padding: 15px; + margin-bottom: 20px; + border: 1px solid transparent; + border-radius: 4px; +} +.alert h4 { + margin-top: 0; + color: inherit; +} +.alert .alert-link { + font-weight: bold; +} +.alert > p, +.alert > ul { + margin-bottom: 0; +} +.alert > p + p { + margin-top: 5px; +} +.alert-dismissable, +.alert-dismissible { + padding-right: 35px; +} +.alert-dismissable .close, +.alert-dismissible .close { + position: relative; + top: -2px; + right: -21px; + color: inherit; +} +.alert-success { + color: #3c763d; + background-color: #dff0d8; + border-color: #d6e9c6; +} +.alert-success hr { + border-top-color: #c9e2b3; +} +.alert-success .alert-link { + color: #2b542c; +} +.alert-info { + color: #31708f; + background-color: #d9edf7; + border-color: #bce8f1; +} +.alert-info hr { + border-top-color: #a6e1ec; +} +.alert-info .alert-link { + color: #245269; +} +.alert-warning { + color: #8a6d3b; + background-color: #fcf8e3; + border-color: #faebcc; +} +.alert-warning hr { + border-top-color: #f7e1b5; +} +.alert-warning .alert-link { + color: #66512c; +} +.alert-danger { + color: #a94442; + background-color: #f2dede; + border-color: #ebccd1; +} +.alert-danger hr { + border-top-color: #e4b9c0; +} +.alert-danger .alert-link { + color: #843534; +} +@-webkit-keyframes progress-bar-stripes { + from { + background-position: 40px 0; + } + to { + background-position: 0 0; + } +} +@-o-keyframes progress-bar-stripes { + from { + background-position: 40px 0; + } + to { + background-position: 0 0; + } +} +@keyframes progress-bar-stripes { + from { + background-position: 40px 0; + } + to { + background-position: 0 0; + } +} +.progress { + height: 20px; + margin-bottom: 20px; + overflow: hidden; + background-color: #f5f5f5; + border-radius: 4px; + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); +} +.progress-bar { + float: left; + width: 0; + height: 100%; + font-size: 12px; + line-height: 20px; + color: #fff; + text-align: center; + background-color: #428bca; + -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); + -webkit-transition: width .6s ease; + -o-transition: width .6s ease; + transition: width .6s ease; +} +.progress-striped .progress-bar, +.progress-bar-striped { + background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); + background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); + -webkit-background-size: 40px 40px; + background-size: 40px 40px; +} +.progress.active .progress-bar, +.progress-bar.active { + -webkit-animation: progress-bar-stripes 2s linear infinite; + -o-animation: progress-bar-stripes 2s linear infinite; + animation: progress-bar-stripes 2s linear infinite; +} +.progress-bar[aria-valuenow="1"], +.progress-bar[aria-valuenow="2"] { + min-width: 30px; +} +.progress-bar[aria-valuenow="0"] { + min-width: 30px; + color: #777; + background-color: transparent; + background-image: none; + -webkit-box-shadow: none; + box-shadow: none; +} +.progress-bar-success { + background-color: #5cb85c; +} +.progress-striped .progress-bar-success { + background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); + background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); +} +.progress-bar-info { + background-color: #5bc0de; +} +.progress-striped .progress-bar-info { + background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); + background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); +} +.progress-bar-warning { + background-color: #f0ad4e; +} +.progress-striped .progress-bar-warning { + background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); + background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); +} +.progress-bar-danger { + background-color: #d9534f; +} +.progress-striped .progress-bar-danger { + background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); + background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); +} +.media, +.media-body { + overflow: hidden; + zoom: 1; +} +.media, +.media .media { + margin-top: 15px; +} +.media:first-child { + margin-top: 0; +} +.media-object { + display: block; +} +.media-heading { + margin: 0 0 5px; +} +.media > .pull-left { + margin-right: 10px; +} +.media > .pull-right { + margin-left: 10px; +} +.media-list { + padding-left: 0; + list-style: none; +} +.list-group { + padding-left: 0; + margin-bottom: 20px; +} +.list-group-item { + position: relative; + display: block; + padding: 10px 15px; + margin-bottom: -1px; + background-color: #fff; + border: 1px solid #ddd; +} +.list-group-item:first-child { + border-top-left-radius: 4px; + border-top-right-radius: 4px; +} +.list-group-item:last-child { + margin-bottom: 0; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +.list-group-item > .badge { + float: right; +} +.list-group-item > .badge + .badge { + margin-right: 5px; +} +a.list-group-item { + color: #555; +} +a.list-group-item .list-group-item-heading { + color: #333; +} +a.list-group-item:hover, +a.list-group-item:focus { + color: #555; + text-decoration: none; + background-color: #f5f5f5; +} +.list-group-item.disabled, +.list-group-item.disabled:hover, +.list-group-item.disabled:focus { + color: #777; + background-color: #eee; +} +.list-group-item.disabled .list-group-item-heading, +.list-group-item.disabled:hover .list-group-item-heading, +.list-group-item.disabled:focus .list-group-item-heading { + color: inherit; +} +.list-group-item.disabled .list-group-item-text, +.list-group-item.disabled:hover .list-group-item-text, +.list-group-item.disabled:focus .list-group-item-text { + color: #777; +} +.list-group-item.active, +.list-group-item.active:hover, +.list-group-item.active:focus { + z-index: 2; + color: #fff; + background-color: #428bca; + border-color: #428bca; +} +.list-group-item.active .list-group-item-heading, +.list-group-item.active:hover .list-group-item-heading, +.list-group-item.active:focus .list-group-item-heading, +.list-group-item.active .list-group-item-heading > small, +.list-group-item.active:hover .list-group-item-heading > small, +.list-group-item.active:focus .list-group-item-heading > small, +.list-group-item.active .list-group-item-heading > .small, +.list-group-item.active:hover .list-group-item-heading > .small, +.list-group-item.active:focus .list-group-item-heading > .small { + color: inherit; +} +.list-group-item.active .list-group-item-text, +.list-group-item.active:hover .list-group-item-text, +.list-group-item.active:focus .list-group-item-text { + color: #e1edf7; +} +.list-group-item-success { + color: #3c763d; + background-color: #dff0d8; +} +a.list-group-item-success { + color: #3c763d; +} +a.list-group-item-success .list-group-item-heading { + color: inherit; +} +a.list-group-item-success:hover, +a.list-group-item-success:focus { + color: #3c763d; + background-color: #d0e9c6; +} +a.list-group-item-success.active, +a.list-group-item-success.active:hover, +a.list-group-item-success.active:focus { + color: #fff; + background-color: #3c763d; + border-color: #3c763d; +} +.list-group-item-info { + color: #31708f; + background-color: #d9edf7; +} +a.list-group-item-info { + color: #31708f; +} +a.list-group-item-info .list-group-item-heading { + color: inherit; +} +a.list-group-item-info:hover, +a.list-group-item-info:focus { + color: #31708f; + background-color: #c4e3f3; +} +a.list-group-item-info.active, +a.list-group-item-info.active:hover, +a.list-group-item-info.active:focus { + color: #fff; + background-color: #31708f; + border-color: #31708f; +} +.list-group-item-warning { + color: #8a6d3b; + background-color: #fcf8e3; +} +a.list-group-item-warning { + color: #8a6d3b; +} +a.list-group-item-warning .list-group-item-heading { + color: inherit; +} +a.list-group-item-warning:hover, +a.list-group-item-warning:focus { + color: #8a6d3b; + background-color: #faf2cc; +} +a.list-group-item-warning.active, +a.list-group-item-warning.active:hover, +a.list-group-item-warning.active:focus { + color: #fff; + background-color: #8a6d3b; + border-color: #8a6d3b; +} +.list-group-item-danger { + color: #a94442; + background-color: #f2dede; +} +a.list-group-item-danger { + color: #a94442; +} +a.list-group-item-danger .list-group-item-heading { + color: inherit; +} +a.list-group-item-danger:hover, +a.list-group-item-danger:focus { + color: #a94442; + background-color: #ebcccc; +} +a.list-group-item-danger.active, +a.list-group-item-danger.active:hover, +a.list-group-item-danger.active:focus { + color: #fff; + background-color: #a94442; + border-color: #a94442; +} +.list-group-item-heading { + margin-top: 0; + margin-bottom: 5px; +} +.list-group-item-text { + margin-bottom: 0; + line-height: 1.3; +} +.panel { + margin-bottom: 20px; + background-color: #fff; + border: 1px solid transparent; + border-radius: 4px; + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05); + box-shadow: 0 1px 1px rgba(0, 0, 0, .05); +} +.panel-body { + padding: 15px; +} +.panel-heading { + padding: 10px 15px; + border-bottom: 1px solid transparent; + border-top-left-radius: 3px; + border-top-right-radius: 3px; +} +.panel-heading > .dropdown .dropdown-toggle { + color: inherit; +} +.panel-title { + margin-top: 0; + margin-bottom: 0; + font-size: 16px; + color: inherit; +} +.panel-title > a { + color: inherit; +} +.panel-footer { + padding: 10px 15px; + background-color: #f5f5f5; + border-top: 1px solid #ddd; + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.panel > .list-group { + margin-bottom: 0; +} +.panel > .list-group .list-group-item { + border-width: 1px 0; + border-radius: 0; +} +.panel > .list-group:first-child .list-group-item:first-child { + border-top: 0; + border-top-left-radius: 3px; + border-top-right-radius: 3px; +} +.panel > .list-group:last-child .list-group-item:last-child { + border-bottom: 0; + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.panel-heading + .list-group .list-group-item:first-child { + border-top-width: 0; +} +.list-group + .panel-footer { + border-top-width: 0; +} +.panel > .table, +.panel > .table-responsive > .table, +.panel > .panel-collapse > .table { + margin-bottom: 0; +} +.panel > .table:first-child, +.panel > .table-responsive:first-child > .table:first-child { + border-top-left-radius: 3px; + border-top-right-radius: 3px; +} +.panel > .table:first-child > thead:first-child > tr:first-child td:first-child, +.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child, +.panel > .table:first-child > tbody:first-child > tr:first-child td:first-child, +.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:first-child, +.panel > .table:first-child > thead:first-child > tr:first-child th:first-child, +.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child, +.panel > .table:first-child > tbody:first-child > tr:first-child th:first-child, +.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child { + border-top-left-radius: 3px; +} +.panel > .table:first-child > thead:first-child > tr:first-child td:last-child, +.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child, +.panel > .table:first-child > tbody:first-child > tr:first-child td:last-child, +.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:last-child, +.panel > .table:first-child > thead:first-child > tr:first-child th:last-child, +.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child, +.panel > .table:first-child > tbody:first-child > tr:first-child th:last-child, +.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child { + border-top-right-radius: 3px; +} +.panel > .table:last-child, +.panel > .table-responsive:last-child > .table:last-child { + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.panel > .table:last-child > tbody:last-child > tr:last-child td:first-child, +.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:first-child, +.panel > .table:last-child > tfoot:last-child > tr:last-child td:first-child, +.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:first-child, +.panel > .table:last-child > tbody:last-child > tr:last-child th:first-child, +.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:first-child, +.panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child, +.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:first-child { + border-bottom-left-radius: 3px; +} +.panel > .table:last-child > tbody:last-child > tr:last-child td:last-child, +.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:last-child, +.panel > .table:last-child > tfoot:last-child > tr:last-child td:last-child, +.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:last-child, +.panel > .table:last-child > tbody:last-child > tr:last-child th:last-child, +.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:last-child, +.panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child, +.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child { + border-bottom-right-radius: 3px; +} +.panel > .panel-body + .table, +.panel > .panel-body + .table-responsive { + border-top: 1px solid #ddd; +} +.panel > .table > tbody:first-child > tr:first-child th, +.panel > .table > tbody:first-child > tr:first-child td { + border-top: 0; +} +.panel > .table-bordered, +.panel > .table-responsive > .table-bordered { + border: 0; +} +.panel > .table-bordered > thead > tr > th:first-child, +.panel > .table-responsive > .table-bordered > thead > tr > th:first-child, +.panel > .table-bordered > tbody > tr > th:first-child, +.panel > .table-responsive > .table-bordered > tbody > tr > th:first-child, +.panel > .table-bordered > tfoot > tr > th:first-child, +.panel > .table-responsive > .table-bordered > tfoot > tr > th:first-child, +.panel > .table-bordered > thead > tr > td:first-child, +.panel > .table-responsive > .table-bordered > thead > tr > td:first-child, +.panel > .table-bordered > tbody > tr > td:first-child, +.panel > .table-responsive > .table-bordered > tbody > tr > td:first-child, +.panel > .table-bordered > tfoot > tr > td:first-child, +.panel > .table-responsive > .table-bordered > tfoot > tr > td:first-child { + border-left: 0; +} +.panel > .table-bordered > thead > tr > th:last-child, +.panel > .table-responsive > .table-bordered > thead > tr > th:last-child, +.panel > .table-bordered > tbody > tr > th:last-child, +.panel > .table-responsive > .table-bordered > tbody > tr > th:last-child, +.panel > .table-bordered > tfoot > tr > th:last-child, +.panel > .table-responsive > .table-bordered > tfoot > tr > th:last-child, +.panel > .table-bordered > thead > tr > td:last-child, +.panel > .table-responsive > .table-bordered > thead > tr > td:last-child, +.panel > .table-bordered > tbody > tr > td:last-child, +.panel > .table-responsive > .table-bordered > tbody > tr > td:last-child, +.panel > .table-bordered > tfoot > tr > td:last-child, +.panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child { + border-right: 0; +} +.panel > .table-bordered > thead > tr:first-child > td, +.panel > .table-responsive > .table-bordered > thead > tr:first-child > td, +.panel > .table-bordered > tbody > tr:first-child > td, +.panel > .table-responsive > .table-bordered > tbody > tr:first-child > td, +.panel > .table-bordered > thead > tr:first-child > th, +.panel > .table-responsive > .table-bordered > thead > tr:first-child > th, +.panel > .table-bordered > tbody > tr:first-child > th, +.panel > .table-responsive > .table-bordered > tbody > tr:first-child > th { + border-bottom: 0; +} +.panel > .table-bordered > tbody > tr:last-child > td, +.panel > .table-responsive > .table-bordered > tbody > tr:last-child > td, +.panel > .table-bordered > tfoot > tr:last-child > td, +.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > td, +.panel > .table-bordered > tbody > tr:last-child > th, +.panel > .table-responsive > .table-bordered > tbody > tr:last-child > th, +.panel > .table-bordered > tfoot > tr:last-child > th, +.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > th { + border-bottom: 0; +} +.panel > .table-responsive { + margin-bottom: 0; + border: 0; +} +.panel-group { + margin-bottom: 20px; +} +.panel-group .panel { + margin-bottom: 0; + border-radius: 4px; +} +.panel-group .panel + .panel { + margin-top: 5px; +} +.panel-group .panel-heading { + border-bottom: 0; +} +.panel-group .panel-heading + .panel-collapse > .panel-body { + border-top: 1px solid #ddd; +} +.panel-group .panel-footer { + border-top: 0; +} +.panel-group .panel-footer + .panel-collapse .panel-body { + border-bottom: 1px solid #ddd; +} +.panel-default { + border-color: #ddd; +} +.panel-default > .panel-heading { + color: #333; + background-color: #f5f5f5; + border-color: #ddd; +} +.panel-default > .panel-heading + .panel-collapse > .panel-body { + border-top-color: #ddd; +} +.panel-default > .panel-heading .badge { + color: #f5f5f5; + background-color: #333; +} +.panel-default > .panel-footer + .panel-collapse > .panel-body { + border-bottom-color: #ddd; +} +.panel-primary { + border-color: #428bca; +} +.panel-primary > .panel-heading { + color: #fff; + background-color: #428bca; + border-color: #428bca; +} +.panel-primary > .panel-heading + .panel-collapse > .panel-body { + border-top-color: #428bca; +} +.panel-primary > .panel-heading .badge { + color: #428bca; + background-color: #fff; +} +.panel-primary > .panel-footer + .panel-collapse > .panel-body { + border-bottom-color: #428bca; +} +.panel-success { + border-color: #d6e9c6; +} +.panel-success > .panel-heading { + color: #3c763d; + background-color: #dff0d8; + border-color: #d6e9c6; +} +.panel-success > .panel-heading + .panel-collapse > .panel-body { + border-top-color: #d6e9c6; +} +.panel-success > .panel-heading .badge { + color: #dff0d8; + background-color: #3c763d; +} +.panel-success > .panel-footer + .panel-collapse > .panel-body { + border-bottom-color: #d6e9c6; +} +.panel-info { + border-color: #bce8f1; +} +.panel-info > .panel-heading { + color: #31708f; + background-color: #d9edf7; + border-color: #bce8f1; +} +.panel-info > .panel-heading + .panel-collapse > .panel-body { + border-top-color: #bce8f1; +} +.panel-info > .panel-heading .badge { + color: #d9edf7; + background-color: #31708f; +} +.panel-info > .panel-footer + .panel-collapse > .panel-body { + border-bottom-color: #bce8f1; +} +.panel-warning { + border-color: #faebcc; +} +.panel-warning > .panel-heading { + color: #8a6d3b; + background-color: #fcf8e3; + border-color: #faebcc; +} +.panel-warning > .panel-heading + .panel-collapse > .panel-body { + border-top-color: #faebcc; +} +.panel-warning > .panel-heading .badge { + color: #fcf8e3; + background-color: #8a6d3b; +} +.panel-warning > .panel-footer + .panel-collapse > .panel-body { + border-bottom-color: #faebcc; +} +.panel-danger { + border-color: #ebccd1; +} +.panel-danger > .panel-heading { + color: #a94442; + background-color: #f2dede; + border-color: #ebccd1; +} +.panel-danger > .panel-heading + .panel-collapse > .panel-body { + border-top-color: #ebccd1; +} +.panel-danger > .panel-heading .badge { + color: #f2dede; + background-color: #a94442; +} +.panel-danger > .panel-footer + .panel-collapse > .panel-body { + border-bottom-color: #ebccd1; +} +.embed-responsive { + position: relative; + display: block; + height: 0; + padding: 0; + overflow: hidden; +} +.embed-responsive .embed-responsive-item, +.embed-responsive iframe, +.embed-responsive embed, +.embed-responsive object { + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + border: 0; +} +.embed-responsive.embed-responsive-16by9 { + padding-bottom: 56.25%; +} +.embed-responsive.embed-responsive-4by3 { + padding-bottom: 75%; +} +.well { + min-height: 20px; + padding: 19px; + margin-bottom: 20px; + background-color: #f5f5f5; + border: 1px solid #e3e3e3; + border-radius: 4px; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); +} +.well blockquote { + border-color: #ddd; + border-color: rgba(0, 0, 0, .15); +} +.well-lg { + padding: 24px; + border-radius: 6px; +} +.well-sm { + padding: 9px; + border-radius: 3px; +} +.close { + float: right; + font-size: 21px; + font-weight: bold; + line-height: 1; + color: #000; + text-shadow: 0 1px 0 #fff; + filter: alpha(opacity=20); + opacity: .2; +} +.close:hover, +.close:focus { + color: #000; + text-decoration: none; + cursor: pointer; + filter: alpha(opacity=50); + opacity: .5; +} +button.close { + -webkit-appearance: none; + padding: 0; + cursor: pointer; + background: transparent; + border: 0; +} +.modal-open { + overflow: hidden; +} +.modal { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1050; + display: none; + overflow: hidden; + -webkit-overflow-scrolling: touch; + outline: 0; +} +.modal.fade .modal-dialog { + -webkit-transition: -webkit-transform .3s ease-out; + -o-transition: -o-transform .3s ease-out; + transition: transform .3s ease-out; + -webkit-transform: translate3d(0, -25%, 0); + -o-transform: translate3d(0, -25%, 0); + transform: translate3d(0, -25%, 0); +} +.modal.in .modal-dialog { + -webkit-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.modal-open .modal { + overflow-x: hidden; + overflow-y: auto; +} +.modal-dialog { + position: relative; + width: auto; + margin: 10px; +} +.modal-content { + position: relative; + background-color: #fff; + -webkit-background-clip: padding-box; + background-clip: padding-box; + border: 1px solid #999; + border: 1px solid rgba(0, 0, 0, .2); + border-radius: 6px; + outline: 0; + -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5); + box-shadow: 0 3px 9px rgba(0, 0, 0, .5); +} +.modal-backdrop { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1040; + background-color: #000; +} +.modal-backdrop.fade { + filter: alpha(opacity=0); + opacity: 0; +} +.modal-backdrop.in { + filter: alpha(opacity=50); + opacity: .5; +} +.modal-header { + min-height: 16.42857143px; + padding: 15px; + border-bottom: 1px solid #e5e5e5; +} +.modal-header .close { + margin-top: -2px; +} +.modal-title { + margin: 0; + line-height: 1.42857143; +} +.modal-body { + position: relative; + padding: 15px; +} +.modal-footer { + padding: 15px; + text-align: right; + border-top: 1px solid #e5e5e5; +} +.modal-footer .btn + .btn { + margin-bottom: 0; + margin-left: 5px; +} +.modal-footer .btn-group .btn + .btn { + margin-left: -1px; +} +.modal-footer .btn-block + .btn-block { + margin-left: 0; +} +.modal-scrollbar-measure { + position: absolute; + top: -9999px; + width: 50px; + height: 50px; + overflow: scroll; +} +@media (min-width: 768px) { + .modal-dialog { + width: 600px; + margin: 30px auto; + } + .modal-content { + -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5); + box-shadow: 0 5px 15px rgba(0, 0, 0, .5); + } + .modal-sm { + width: 300px; + } +} +@media (min-width: 992px) { + .modal-lg { + width: 900px; + } +} +.tooltip { + position: absolute; + z-index: 1070; + display: block; + font-size: 12px; + line-height: 1.4; + visibility: visible; + filter: alpha(opacity=0); + opacity: 0; +} +.tooltip.in { + filter: alpha(opacity=90); + opacity: .9; +} +.tooltip.top { + padding: 5px 0; + margin-top: -3px; +} +.tooltip.right { + padding: 0 5px; + margin-left: 3px; +} +.tooltip.bottom { + padding: 5px 0; + margin-top: 3px; +} +.tooltip.left { + padding: 0 5px; + margin-left: -3px; +} +.tooltip-inner { + max-width: 200px; + padding: 3px 8px; + color: #fff; + text-align: center; + text-decoration: none; + background-color: #000; + border-radius: 4px; +} +.tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; +} +.tooltip.top .tooltip-arrow { + bottom: 0; + left: 50%; + margin-left: -5px; + border-width: 5px 5px 0; + border-top-color: #000; +} +.tooltip.top-left .tooltip-arrow { + bottom: 0; + left: 5px; + border-width: 5px 5px 0; + border-top-color: #000; +} +.tooltip.top-right .tooltip-arrow { + right: 5px; + bottom: 0; + border-width: 5px 5px 0; + border-top-color: #000; +} +.tooltip.right .tooltip-arrow { + top: 50%; + left: 0; + margin-top: -5px; + border-width: 5px 5px 5px 0; + border-right-color: #000; +} +.tooltip.left .tooltip-arrow { + top: 50%; + right: 0; + margin-top: -5px; + border-width: 5px 0 5px 5px; + border-left-color: #000; +} +.tooltip.bottom .tooltip-arrow { + top: 0; + left: 50%; + margin-left: -5px; + border-width: 0 5px 5px; + border-bottom-color: #000; +} +.tooltip.bottom-left .tooltip-arrow { + top: 0; + left: 5px; + border-width: 0 5px 5px; + border-bottom-color: #000; +} +.tooltip.bottom-right .tooltip-arrow { + top: 0; + right: 5px; + border-width: 0 5px 5px; + border-bottom-color: #000; +} +.popover { + position: absolute; + top: 0; + left: 0; + z-index: 1060; + display: none; + max-width: 276px; + padding: 1px; + text-align: left; + white-space: normal; + background-color: #fff; + -webkit-background-clip: padding-box; + background-clip: padding-box; + border: 1px solid #ccc; + border: 1px solid rgba(0, 0, 0, .2); + border-radius: 6px; + -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2); + box-shadow: 0 5px 10px rgba(0, 0, 0, .2); +} +.popover.top { + margin-top: -10px; +} +.popover.right { + margin-left: 10px; +} +.popover.bottom { + margin-top: 10px; +} +.popover.left { + margin-left: -10px; +} +.popover-title { + padding: 8px 14px; + margin: 0; + font-size: 14px; + font-weight: normal; + line-height: 18px; + background-color: #f7f7f7; + border-bottom: 1px solid #ebebeb; + border-radius: 5px 5px 0 0; +} +.popover-content { + padding: 9px 14px; +} +.popover > .arrow, +.popover > .arrow:after { + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; +} +.popover > .arrow { + border-width: 11px; +} +.popover > .arrow:after { + content: ""; + border-width: 10px; +} +.popover.top > .arrow { + bottom: -11px; + left: 50%; + margin-left: -11px; + border-top-color: #999; + border-top-color: rgba(0, 0, 0, .25); + border-bottom-width: 0; +} +.popover.top > .arrow:after { + bottom: 1px; + margin-left: -10px; + content: " "; + border-top-color: #fff; + border-bottom-width: 0; +} +.popover.right > .arrow { + top: 50%; + left: -11px; + margin-top: -11px; + border-right-color: #999; + border-right-color: rgba(0, 0, 0, .25); + border-left-width: 0; +} +.popover.right > .arrow:after { + bottom: -10px; + left: 1px; + content: " "; + border-right-color: #fff; + border-left-width: 0; +} +.popover.bottom > .arrow { + top: -11px; + left: 50%; + margin-left: -11px; + border-top-width: 0; + border-bottom-color: #999; + border-bottom-color: rgba(0, 0, 0, .25); +} +.popover.bottom > .arrow:after { + top: 1px; + margin-left: -10px; + content: " "; + border-top-width: 0; + border-bottom-color: #fff; +} +.popover.left > .arrow { + top: 50%; + right: -11px; + margin-top: -11px; + border-right-width: 0; + border-left-color: #999; + border-left-color: rgba(0, 0, 0, .25); +} +.popover.left > .arrow:after { + right: 1px; + bottom: -10px; + content: " "; + border-right-width: 0; + border-left-color: #fff; +} +.carousel { + position: relative; +} +.carousel-inner { + position: relative; + width: 100%; + overflow: hidden; +} +.carousel-inner > .item { + position: relative; + display: none; + -webkit-transition: .6s ease-in-out left; + -o-transition: .6s ease-in-out left; + transition: .6s ease-in-out left; +} +.carousel-inner > .item > img, +.carousel-inner > .item > a > img { + line-height: 1; +} +.carousel-inner > .active, +.carousel-inner > .next, +.carousel-inner > .prev { + display: block; +} +.carousel-inner > .active { + left: 0; +} +.carousel-inner > .next, +.carousel-inner > .prev { + position: absolute; + top: 0; + width: 100%; +} +.carousel-inner > .next { + left: 100%; +} +.carousel-inner > .prev { + left: -100%; +} +.carousel-inner > .next.left, +.carousel-inner > .prev.right { + left: 0; +} +.carousel-inner > .active.left { + left: -100%; +} +.carousel-inner > .active.right { + left: 100%; +} +.carousel-control { + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 15%; + font-size: 20px; + color: #fff; + text-align: center; + text-shadow: 0 1px 2px rgba(0, 0, 0, .6); + filter: alpha(opacity=50); + opacity: .5; +} +.carousel-control.left { + background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%); + background-image: -o-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%); + background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, .0001))); + background-image: linear-gradient(to right, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1); + background-repeat: repeat-x; +} +.carousel-control.right { + right: 0; + left: auto; + background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%); + background-image: -o-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%); + background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .0001)), to(rgba(0, 0, 0, .5))); + background-image: linear-gradient(to right, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1); + background-repeat: repeat-x; +} +.carousel-control:hover, +.carousel-control:focus { + color: #fff; + text-decoration: none; + filter: alpha(opacity=90); + outline: 0; + opacity: .9; +} +.carousel-control .icon-prev, +.carousel-control .icon-next, +.carousel-control .glyphicon-chevron-left, +.carousel-control .glyphicon-chevron-right { + position: absolute; + top: 50%; + z-index: 5; + display: inline-block; +} +.carousel-control .icon-prev, +.carousel-control .glyphicon-chevron-left { + left: 50%; + margin-left: -10px; +} +.carousel-control .icon-next, +.carousel-control .glyphicon-chevron-right { + right: 50%; + margin-right: -10px; +} +.carousel-control .icon-prev, +.carousel-control .icon-next { + width: 20px; + height: 20px; + margin-top: -10px; + font-family: serif; +} +.carousel-control .icon-prev:before { + content: '\2039'; +} +.carousel-control .icon-next:before { + content: '\203a'; +} +.carousel-indicators { + position: absolute; + bottom: 10px; + left: 50%; + z-index: 15; + width: 60%; + padding-left: 0; + margin-left: -30%; + text-align: center; + list-style: none; +} +.carousel-indicators li { + display: inline-block; + width: 10px; + height: 10px; + margin: 1px; + text-indent: -999px; + cursor: pointer; + background-color: #000 \9; + background-color: rgba(0, 0, 0, 0); + border: 1px solid #fff; + border-radius: 10px; +} +.carousel-indicators .active { + width: 12px; + height: 12px; + margin: 0; + background-color: #fff; +} +.carousel-caption { + position: absolute; + right: 15%; + bottom: 20px; + left: 15%; + z-index: 10; + padding-top: 20px; + padding-bottom: 20px; + color: #fff; + text-align: center; + text-shadow: 0 1px 2px rgba(0, 0, 0, .6); +} +.carousel-caption .btn { + text-shadow: none; +} +@media screen and (min-width: 768px) { + .carousel-control .glyphicon-chevron-left, + .carousel-control .glyphicon-chevron-right, + .carousel-control .icon-prev, + .carousel-control .icon-next { + width: 30px; + height: 30px; + margin-top: -15px; + font-size: 30px; + } + .carousel-control .glyphicon-chevron-left, + .carousel-control .icon-prev { + margin-left: -15px; + } + .carousel-control .glyphicon-chevron-right, + .carousel-control .icon-next { + margin-right: -15px; + } + .carousel-caption { + right: 20%; + left: 20%; + padding-bottom: 30px; + } + .carousel-indicators { + bottom: 20px; + } +} +.clearfix:before, +.clearfix:after, +.dl-horizontal dd:before, +.dl-horizontal dd:after, +.container:before, +.container:after, +.container-fluid:before, +.container-fluid:after, +.row:before, +.row:after, +.form-horizontal .form-group:before, +.form-horizontal .form-group:after, +.btn-toolbar:before, +.btn-toolbar:after, +.btn-group-vertical > .btn-group:before, +.btn-group-vertical > .btn-group:after, +.nav:before, +.nav:after, +.navbar:before, +.navbar:after, +.navbar-header:before, +.navbar-header:after, +.navbar-collapse:before, +.navbar-collapse:after, +.pager:before, +.pager:after, +.panel-body:before, +.panel-body:after, +.modal-footer:before, +.modal-footer:after { + display: table; + content: " "; +} +.clearfix:after, +.dl-horizontal dd:after, +.container:after, +.container-fluid:after, +.row:after, +.form-horizontal .form-group:after, +.btn-toolbar:after, +.btn-group-vertical > .btn-group:after, +.nav:after, +.navbar:after, +.navbar-header:after, +.navbar-collapse:after, +.pager:after, +.panel-body:after, +.modal-footer:after { + clear: both; +} +.center-block { + display: block; + margin-right: auto; + margin-left: auto; +} +.pull-right { + float: right !important; +} +.pull-left { + float: left !important; +} +.hide { + display: none !important; +} +.show { + display: block !important; +} +.invisible { + visibility: hidden; +} +.text-hide { + font: 0/0 a; + color: transparent; + text-shadow: none; + background-color: transparent; + border: 0; +} +.hidden { + display: none !important; + visibility: hidden !important; +} +.affix { + position: fixed; + -webkit-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +@-ms-viewport { + width: device-width; +} +.visible-xs, +.visible-sm, +.visible-md, +.visible-lg { + display: none !important; +} +.visible-xs-block, +.visible-xs-inline, +.visible-xs-inline-block, +.visible-sm-block, +.visible-sm-inline, +.visible-sm-inline-block, +.visible-md-block, +.visible-md-inline, +.visible-md-inline-block, +.visible-lg-block, +.visible-lg-inline, +.visible-lg-inline-block { + display: none !important; +} +@media (max-width: 767px) { + .visible-xs { + display: block !important; + } + table.visible-xs { + display: table; + } + tr.visible-xs { + display: table-row !important; + } + th.visible-xs, + td.visible-xs { + display: table-cell !important; + } +} +@media (max-width: 767px) { + .visible-xs-block { + display: block !important; + } +} +@media (max-width: 767px) { + .visible-xs-inline { + display: inline !important; + } +} +@media (max-width: 767px) { + .visible-xs-inline-block { + display: inline-block !important; + } +} +@media (min-width: 768px) and (max-width: 991px) { + .visible-sm { + display: block !important; + } + table.visible-sm { + display: table; + } + tr.visible-sm { + display: table-row !important; + } + th.visible-sm, + td.visible-sm { + display: table-cell !important; + } +} +@media (min-width: 768px) and (max-width: 991px) { + .visible-sm-block { + display: block !important; + } +} +@media (min-width: 768px) and (max-width: 991px) { + .visible-sm-inline { + display: inline !important; + } +} +@media (min-width: 768px) and (max-width: 991px) { + .visible-sm-inline-block { + display: inline-block !important; + } +} +@media (min-width: 992px) and (max-width: 1199px) { + .visible-md { + display: block !important; + } + table.visible-md { + display: table; + } + tr.visible-md { + display: table-row !important; + } + th.visible-md, + td.visible-md { + display: table-cell !important; + } +} +@media (min-width: 992px) and (max-width: 1199px) { + .visible-md-block { + display: block !important; + } +} +@media (min-width: 992px) and (max-width: 1199px) { + .visible-md-inline { + display: inline !important; + } +} +@media (min-width: 992px) and (max-width: 1199px) { + .visible-md-inline-block { + display: inline-block !important; + } +} +@media (min-width: 1200px) { + .visible-lg { + display: block !important; + } + table.visible-lg { + display: table; + } + tr.visible-lg { + display: table-row !important; + } + th.visible-lg, + td.visible-lg { + display: table-cell !important; + } +} +@media (min-width: 1200px) { + .visible-lg-block { + display: block !important; + } +} +@media (min-width: 1200px) { + .visible-lg-inline { + display: inline !important; + } +} +@media (min-width: 1200px) { + .visible-lg-inline-block { + display: inline-block !important; + } +} +@media (max-width: 767px) { + .hidden-xs { + display: none !important; + } +} +@media (min-width: 768px) and (max-width: 991px) { + .hidden-sm { + display: none !important; + } +} +@media (min-width: 992px) and (max-width: 1199px) { + .hidden-md { + display: none !important; + } +} +@media (min-width: 1200px) { + .hidden-lg { + display: none !important; + } +} +.visible-print { + display: none !important; +} +@media print { + .visible-print { + display: block !important; + } + table.visible-print { + display: table; + } + tr.visible-print { + display: table-row !important; + } + th.visible-print, + td.visible-print { + display: table-cell !important; + } +} +.visible-print-block { + display: none !important; +} +@media print { + .visible-print-block { + display: block !important; + } +} +.visible-print-inline { + display: none !important; +} +@media print { + .visible-print-inline { + display: inline !important; + } +} +.visible-print-inline-block { + display: none !important; +} +@media print { + .visible-print-inline-block { + display: inline-block !important; + } +} +@media print { + .hidden-print { + display: none !important; + } +} +/*# sourceMappingURL=bootstrap.css.map */ diff --git a/src/re_com/popover.cljs b/src/re_com/popover.cljs index 24622985..0b2c2cf9 100644 --- a/src/re_com/popover.cljs +++ b/src/re_com/popover.cljs @@ -37,8 +37,7 @@ :position "absolute" :top "0px" :right "0px"}} - [:i {:class "md-close"}] - ]) + [:i {:class "md-close"}]]) (defn- calc-popover-pos @@ -230,7 +229,7 @@ ;;-------------------------------------------------------------------------------------------------- (def popover-title-args-desc - [{:name :showing? :required true :type "boolean | atom" :description "when the value is true, the popover shows."} + [{:name :showing? :required true :type "boolean atom" :description "an atom. When the value is true, the popover shows."} {:name :title :required false :type "string | hiccup" :validate-fn string-or-hiccup? :description "describes the title of the popover. Default font size is 18px to make it stand out"} {:name :close-button? :required false :default true :type "boolean" :description "when true, displays the close button"} {:name :close-callback :required false :type "function" :validate-fn fn? :description "callback taking no parameters, used when the close button is pressed. Not required if :showing? atom passed in OR :close-button? is set to false"}]) @@ -256,7 +255,7 @@ ;;-------------------------------------------------------------------------------------------------- (def popover-content-wrapper-args-desc - [{:name :showing? :required true :default false :type "boolean | atom" :description "an atom. when the value is true, the popover shows."} + [{:name :showing? :required true :default false :type "boolean atom" :description "an atom. When the value is true, the popover shows."} {:name :position :required true :default :right-below :type "keyword" :validate-fn position? :description [:span "relative to this anchor. One of " position-options-list]} {:name :no-clip? :required false :default false :type "boolean" :description "when an anchor is in a scrolling region (e.g. scroller component), the popover can sometimes be clipped. By passing true for this parameter, re-com will use a different CSS method to show the popover. This method is slightly inferior because the popover can't track the anchor if it is repositioned"} {:name :width :required false :type "string" :validate-fn string? :description "a CSS style representing the popover width"} @@ -333,7 +332,7 @@ ;;-------------------------------------------------------------------------------------------------- (def popover-anchor-wrapper-args-desc - [{:name :showing? :required true :default false :type "boolean | atom" :description "when the value is true, the popover shows"} + [{:name :showing? :required true :default false :type "boolean atom" :description "an atom. When the value is true, the popover shows"} {:name :position :required true :default :right-below :type "keyword" :validate-fn position? :description [:span "relative to this anchor. One of " position-options-list]} {:name :anchor :required true :type "string | hiccup" :validate-fn string-or-hiccup? :description "the component the popover is attached to"} {:name :popover :required true :type "string | hiccup" :validate-fn string-or-hiccup? :description "the popover body component"} @@ -371,7 +370,7 @@ (def popover-tooltip-args-desc [{:name :label :required true :type "string | hiccup | atom" :validate-fn string-or-hiccup? :description "the text (or component) for the tooltip"} - {:name :showing? :required true :default false :type "boolean" :description "when the value is true, the tooltip shows"} + {:name :showing? :required true :default false :type "boolean atom" :description "an atom. When the value is true, the tooltip shows"} {:name :on-cancel :required false :type "function" :validate-fn fn? :description "a callback taking no parameters, invoked when the popover is cancelled (e.g. user clicks away)"} {:name :status :required false :type "keyword" :validate-fn popover-status-type? :description [:span "controls background color of the tooltip. " [:code "nil/omitted"] " for black or one of " popover-status-types-list]} {:name :anchor :required true :type "hiccup" :validate-fn string-or-hiccup? :description "the component the tooltip is attached to"} diff --git a/src/re_com/text.cljs b/src/re_com/text.cljs index fb6ad995..9e3985db 100644 --- a/src/re_com/text.cljs +++ b/src/re_com/text.cljs @@ -34,7 +34,7 @@ (when on-click {:on-click (handler-fn (on-click))}) attr) - (str label)]]) + label]]) ;; ------------------------------------------------------------------------------------ diff --git a/src/re_demo/h_box.cljs b/src/re_demo/h_box.cljs index 1f350ed3..0461e28f 100644 --- a/src/re_demo/h_box.cljs +++ b/src/re_demo/h_box.cljs @@ -21,120 +21,120 @@ :border-radius "4px" :padding "4px"})) -(def over-style {:background-color "#fcc"}) +(def over-style {:background-color "#eee"}) ;; "#fcc" (def editor-style {:font-size "12px" :line-height "20px" :padding "6px 8px"}) -(def current-preset (reagent/atom 0)) - -(def demo-presets [;; Preset 0 - {:hbox {:over? false - :height {:value "100px" :omit? false :range [0 500]} - :width {:value "450px" :omit? false :range [0 1000]} - :justify {:value :start :omit? true} - :align {:value :stretch :omit? true} - :gap {:value "4px" :omit? false :range [0 100]}} - :box1 {:over? false - :text {:value "Box1" :omit? false} - :size {:value "none" :omit? false :type :none :px "50px" :ratio "3" :gsb "1 1 0"} - :align-self {:value :stretch :omit? true} - :height {:value "50px" :omit? true :range [0 200]} - :min-width {:value "50px" :omit? true :range [0 200]} - :max-width {:value "50px" :omit? true :range [0 200]}} - :box2 {:over? false - :text {:value "Box2" :omit? false} - :size {:value "100px" :omit? false :type :px :px "100px" :ratio "2" :gsb "1 1 0"} - :align-self {:value :center :omit? false} - :height {:value "50px" :omit? true :range [0 300]} - :min-width {:value "50px" :omit? true :range [0 200]} - :max-width {:value "50px" :omit? true :range [0 200]}} - :box3 {:over? false - :text {:value "Box3" :omit? false} - :size {:value "1" :omit? false :type :ratio :px "150px" :ratio "1" :gsb "1 1 0"} - :align-self {:value :stretch :omit? true} - :height {:value "50px" :omit? true :range [0 400]} - :min-width {:value "50px" :omit? true :range [0 200]} - :max-width {:value "50px" :omit? true :range [0 200]}} - :desc [v-box - :children [[:p "This preset demonstrates some of the basics of h-box (and Flexbox)"] - [:p "The " [:strong "h-box"] " container has a specific width and height with a gap of 4px, meaning 4px space will be placed between each child. The " [:code ":justify"] " and " [:code ":align"] " parameters are left to their defaults, meaning the boxes will be stretch from top to bottom (unless individually overridden)."] - [:p [:strong "Box1"] " has a " [:code ":size"] " of \"none\" which means it will take up as much space as it's content, in this case, the text \"Box1\"."] - [:p [:strong "Box2"] " has a specific 100 pixel " [:code ":size"] " so that's exactly how much space (width in this case) it will take up. Notice how the default :align of :stretch is overridden so that this box is vertically centered."] - [:p [:strong "Box3"] " has a " [:code ":size"] " of \"1\" which defines how much empty space within the container to consume. It's greedy so it takes everything that's left. Because there are no other siblings with a 'ratio' :size, it will always take up all available space so you could put any ratio value here and you'll get the same result."] - [:p [:strong "Things to try"]] - [:ul - [:li "Set the Box2 :size to \"2\" and notice how it will always take up double the width of Box3 as you adjust the h-box :width parameter. " ] - [:li "Another fascinating thing to try." ] - [:li "More to come. Will need to add a scroller to get more stuff in here!" ] - ]]]} - - ;; Preset 1 - {:hbox {:over? false - :height {:value "200px" :omit? false :range [0 500]} - :width {:value "300px" :omit? false :range [0 1000]} - :justify {:value :center :omit? false} - :align {:value :stretch :omit? true} - :gap {:value "4px" :omit? false :range [0 100]}} - :box1 {:over? false - :text {:value "Box1" :omit? false} - :size {:value "none" :omit? false :type :none :px "50px" :ratio "3" :gsb "1 1 0"} - :align-self {:value :stretch :omit? true} - :height {:value "50px" :omit? true :range [0 200]} - :min-width {:value "50px" :omit? true :range [0 200]} - :max-width {:value "50px" :omit? true :range [0 200]}} - :box2 {:over? false - :text {:value "Box2" :omit? false} - :size {:value "500px" :omit? false :type :px :px "100px" :ratio "2" :gsb "1 1 0"} - :align-self {:value :center :omit? false} - :height {:value "50px" :omit? true :range [0 300]} - :min-width {:value "50px" :omit? true :range [0 200]} - :max-width {:value "50px" :omit? true :range [0 200]}} - :box3 {:over? false - :text {:value "Box3" :omit? false} - :size {:value "none" :omit? false :type :none :px "150px" :ratio "1" :gsb "1 1 0"} - :align-self {:value :stretch :omit? true} - :height {:value "50px" :omit? true :range [0 400]} - :min-width {:value "50px" :omit? true :range [0 200]} - :max-width {:value "50px" :omit? true :range [0 200]}} - :desc [v-box - :children [[:p "This is box-state 2"] - [:p "More " [:strong "incredible"] " descriptions coming soon to a screen near you. Well, this one actually."]]]} - - ;; Preset 2 - {:hbox {:over? false - :height {:value "150px" :omit? false :range [0 500]} - :width {:value "1000px" :omit? false :range [0 1000]} - :justify {:value :start :omit? true} - :align {:value :stretch :omit? true} - :gap {:value "4px" :omit? false :range [0 100]}} - :box1 {:over? false - :text {:value "Box1 Box1 Box1 Box1 Box1 Box1 Box1 Box1 Box1 " :omit? false} - :size {:value "none" :omit? false :type :none :px "50px" :ratio "3" :gsb "1 1 0"} - :align-self {:value :stretch :omit? true} - :height {:value "50px" :omit? true :range [0 200]} - :min-width {:value "50px" :omit? true :range [0 200]} - :max-width {:value "50px" :omit? true :range [0 200]}} - :box2 {:over? false - :text {:value "Box2 Box2 Box2 Box2 Box2 Box2 Box2 Box2 Box2 Box2 Box2 Box2 Box2 Box2 Box2 Box2 Box2 Box2 " :omit? false} - :size {:value "100px" :omit? false :type :px :px "100px" :ratio "2" :gsb "1 1 0"} - :align-self {:value :center :omit? false} - :height {:value "50px" :omit? true :range [0 300]} - :min-width {:value "50px" :omit? true :range [0 200]} - :max-width {:value "50px" :omit? true :range [0 200]}} - :box3 {:over? false - :text {:value "Box3 Box3 Box3 Box3 Box3 Box3 " :omit? false} - :size {:value "1" :omit? false :type :ratio :px "150px" :ratio "1" :gsb "1 1 0"} - :align-self {:value :stretch :omit? true} - :height {:value "50px" :omit? true :range [0 400]} - :min-width {:value "50px" :omit? true :range [0 200]} - :max-width {:value "50px" :omit? true :range [0 200]}} - :desc [v-box - :children [[:p "This is box-state 3"] - [:p "More " [:strong "incredible"] " descriptions coming soon to a screen near you. Well, this one actually."]]]}]) - -(def box-state (reaction (get demo-presets @current-preset))) +(def current-demo (reagent/atom 0)) + +(def demos [;; Demo 0 + {:hbox {:over? false + :height {:value "100px" :omit? false :editing? (atom false) :range [0 200]} + :width {:value "450px" :omit? false :editing? (atom true ) :range [0 1000]} + :justify {:value :start :omit? true :editing? (atom false) } + :align {:value :stretch :omit? true :editing? (atom false) } + :gap {:value "4px" :omit? false :editing? (atom false) :range [0 100]}} + :box1 {:over? false + :text {:value "Box1" :omit? false :editing? (atom false) } + :size {:value "none" :omit? false :editing? (atom false) :type :none :px "50px" :ratio "3" :gsb "1 1 0"} + :align-self {:value :stretch :omit? true :editing? (atom false) } + :height {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :box2 {:over? false + :text {:value "Box2" :omit? false :editing? (atom false) } + :size {:value "100px" :omit? false :editing? (atom true ) :type :px :px "100px" :ratio "2" :gsb "1 1 0"} + :align-self {:value :center :omit? false :editing? (atom false) } + :height {:value "50px" :omit? true :editing? (atom false) :range [0 300]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :box3 {:over? false + :text {:value "Box3" :omit? false :editing? (atom false) } + :size {:value "1" :omit? false :editing? (atom false) :type :ratio :px "150px" :ratio "1" :gsb "1 1 0"} + :align-self {:value :stretch :omit? true :editing? (atom false) } + :height {:value "50px" :omit? true :editing? (atom false) :range [0 400]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :desc [v-box + :children [[:p "Demonstrates some of the basics of h-box (and Flexbox)"] + [:p "The " [:strong "h-box"] " container has a specific width and height with a gap of 4px, meaning 4px space will be placed between each child. The " [:code ":justify"] " and " [:code ":align"] " parameters are left to their defaults, meaning the boxes will be stretch from top to bottom (unless individually overridden)."] + [:p [:strong "Box1"] " has a " [:code ":size"] " of \"none\" which means it will take up as much space as it's content, in this case, the text \"Box1\"."] + [:p [:strong "Box2"] " has a specific 100 pixel " [:code ":size"] " so that's exactly how much space (width in this case) it will take up. Notice how the default :align of :stretch is overridden so that this box is vertically centered."] + [:p [:strong "Box3"] " has a " [:code ":size"] " of \"1\" which defines how much empty space within the container to consume. It's greedy so it takes everything that's left. Because there are no other siblings with a 'ratio' :size, it will always take up all available space so you could put any ratio value here and you'll get the same result."] + [:p [:strong "Things to try"]] + [:ul + [:li "Set the Box2 :size to \"2\" and notice how it will always take up double the width of Box3 as you adjust the h-box :width parameter. " ] + [:li "Another fascinating thing to try." ] + [:li "More to come. Will need to add a scroller to get more stuff in here!" ] + ]]]} + + ;; Demo 1 + {:hbox {:over? false + :height {:value "200px" :omit? false :editing? (atom false) :range [0 200]} + :width {:value "300px" :omit? false :editing? (atom false) :range [0 1000]} + :justify {:value :center :omit? false :editing? (atom false) } + :align {:value :stretch :omit? true :editing? (atom false) } + :gap {:value "4px" :omit? false :editing? (atom false) :range [0 100]}} + :box1 {:over? false + :text {:value "Box1" :omit? false :editing? (atom false) } + :size {:value "none" :omit? false :editing? (atom false) :type :none :px "50px" :ratio "3" :gsb "1 1 0"} + :align-self {:value :stretch :omit? true :editing? (atom false) } + :height {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :box2 {:over? false + :text {:value "Box2" :omit? false :editing? (atom false) } + :size {:value "500px" :omit? false :editing? (atom false) :type :px :px "100px" :ratio "2" :gsb "1 1 0"} + :align-self {:value :center :omit? false :editing? (atom false) } + :height {:value "50px" :omit? true :editing? (atom false) :range [0 300]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :box3 {:over? false + :text {:value "Box3" :omit? false :editing? (atom false) } + :size {:value "none" :omit? false :editing? (atom false) :type :none :px "150px" :ratio "1" :gsb "1 1 0"} + :align-self {:value :stretch :omit? true :editing? (atom false) } + :height {:value "50px" :omit? true :editing? (atom false) :range [0 400]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :desc [v-box + :children [[:p "This is box-state 2"] + [:p "More " [:strong "incredible"] " descriptions coming soon to a screen near you. Well, this one actually."]]]} + + ;; Demo 2 + {:hbox {:over? false + :height {:value "150px" :omit? false :editing? (atom false) :range [0 200]} + :width {:value "1000px" :omit? false :editing? (atom false) :range [0 1000]} + :justify {:value :start :omit? true :editing? (atom false) } + :align {:value :stretch :omit? true :editing? (atom false) } + :gap {:value "4px" :omit? false :editing? (atom false) :range [0 100]}} + :box1 {:over? false + :text {:value "Box1 Box1 Box1 Box1 Box1 Box1 Box1 Box1 Box1 " :omit? false :editing? (atom false) } + :size {:value "none" :omit? false :editing? (atom false) :type :none :px "50px" :ratio "3" :gsb "1 1 0"} + :align-self {:value :stretch :omit? true :editing? (atom false) } + :height {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :box2 {:over? false + :text {:value "Box2 Box2 Box2 Box2 Box2 Box2 Box2 Box2 Box2 Box2 Box2 Box2 Box2 Box2 Box2 Box2 Box2 Box2 " :omit? false :editing? (atom false) } + :size {:value "100px" :omit? false :editing? (atom false) :type :px :px "100px" :ratio "2" :gsb "1 1 0"} + :align-self {:value :center :omit? false :editing? (atom false) } + :height {:value "50px" :omit? true :editing? (atom false) :range [0 300]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :box3 {:over? false + :text {:value "Box3 Box3 Box3 Box3 Box3 Box3 " :omit? false :editing? (atom false) } + :size {:value "1" :omit? false :editing? (atom false) :type :ratio :px "150px" :ratio "1" :gsb "1 1 0"} + :align-self {:value :stretch :omit? true :editing? (atom false) } + :height {:value "50px" :omit? true :editing? (atom false) :range [0 400]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :desc [v-box + :children [[:p "This is box-state 3"] + [:p "More " [:strong "incredible"] " descriptions coming soon to a screen near you. Well, this one actually."]]]}]) + +(def box-state (reaction (get demos @current-demo))) (def show-desc? (reagent/atom true)) @@ -340,70 +340,77 @@ (reset! mouse-over-row? val) (if on-over (on-over val)) nil) - editor-open? (reagent/atom false) omit? (reaction (and (vector? path) (map? (get-in @box-state path)) (get-in @box-state (conj path :omit?))))] (fn [active? indent text1 path text2 on-over editor] - (let [arg-val (if (vector? path) - (let [val (get-in @box-state (conj path :value))] - (cond - (nil? val) "-" - (keyword? val) (str val) - :else (str "\"" val "\""))) - (str path)) - row-active? (and @mouse-over-row? active?) - arg-hiccup [h-box - :width "282px" - :style (merge {:overflow "hidden"} - (when row-active? {:background-color "#f0f0f0" - :cursor "pointer"}) - (when @omit? {:color "#d0d0d0"})) - :attr {:on-mouse-over #(mouse-over-fn true) - :on-mouse-out #(mouse-over-fn false)} - :children [[box - :size "20px" - :child (if (and row-active? (not (contains? (set path) :text))) - [checkbox - :model (not @omit?) - :on-change #(swap! box-state assoc-in (conj path :omit?) (not %))] - [:span])] - [gap :size (indent-px indent)] - [box :size "100px" :child text1] - [box - :attr {:on-click (handler-fn (swap! editor-open? not))} - :child [:span - [:span {:style (when row-active? {:color "blue"})} arg-val] - text2]]]]] + (let [arg-val (if (vector? path) + (let [val (get-in @box-state (conj path :value))] + (cond + (nil? val) "-" + (keyword? val) (str val) + :else (str "\"" val "\""))) + (str path)) + row-active? (and @mouse-over-row? active?) + show-checkbox? (and row-active? (not (contains? (set path) :text))) + allow-edit? (and row-active? (not @omit?)) + arg-hiccup [h-box + :width "282px" + :style (merge {:overflow "hidden"} + (when row-active? {:background-color "#f0f0f0" + :cursor "pointer"}) + (when @omit? {:color "#d0d0d0"})) + :attr {:on-mouse-over #(mouse-over-fn true) + :on-mouse-out #(mouse-over-fn false)} + :children [[box + :size "20px" + :child (if show-checkbox? + [checkbox + :model (not @omit?) + :on-change #(do (swap! box-state assoc-in (conj path :omit?) (not %)) + (swap! box-state assoc-in (conj path :editing?) (atom %)))] + [:span])] + [gap :size (indent-px indent)] + [box + :size "100px" + :style (when @omit? {:text-decoration "line-through"}) + :child text1] + [box + :attr (when allow-edit? {:on-click (handler-fn (swap! box-state update-in (conj path :editing?) (fn [v] (atom (not @v)))))}) + :style (when @omit? {:text-decoration "line-through"}) + :child [:span + [:span {:style (when allow-edit? {:color "blue"})} arg-val] + text2]]]]] + (if editor - [popover-anchor-wrapper - :showing? editor-open? - :position :right-center - :anchor arg-hiccup - :popover [popover-content-wrapper - :showing? editor-open? - :position :right-center - :body [editor path #(swap! editor-open? not)]]] + (let [] + [popover-anchor-wrapper + :showing? (get-in @box-state (conj path :editing?)) + :position :right-center + :anchor arg-hiccup + :popover [popover-content-wrapper + :showing? (get-in @box-state (conj path :editing?)) + :position :right-center + :body [editor path #(swap! box-state assoc-in (conj path :editing?) (atom false))]]]) arg-hiccup))))) (defn choose-a-demo - "choose a preset demo" + "choose a demo to show" [] - (let [opts [{:id 0 :label "Preset 1"} - {:id 1 :label "Preset 2"} - {:id 2 :label "Preset 3"}]] + (let [opts [{:id 0 :label "1"} + {:id 1 :label "2"} + {:id 2 :label "3"}]] (fn [] [h-box :gap "8px" :align :center - :children [[:span "Choose a preset demo"] + :children [[:span "Demos:"] [horizontal-bar-tabs - :model current-preset + :model current-demo :tabs opts - :style editor-style - :on-change #(do (reset! current-preset %) + :on-change #(do (reset! current-demo %) (reset! show-desc? true))]]]))) (defn demo @@ -437,15 +444,10 @@ :popover [popover-content-wrapper :showing? show-desc? :position :left-below - :width "536px" - :title "Preset Description" + :width "460px" + :title "Demo Description" :close-button? true :body (:desc @box-state)]] - [info-button - :position :left-below - :width "450px" - :info (:desc @box-state)] - [v-box :width "300px" :style {:font-family "Consolas, \"Courier New\", monospace" @@ -515,8 +517,7 @@ :height "800px" ;:style {:border "dashed 1px #ddd"} :children [[title2 "Demo"] - [p "This is an " [:span.bold "interactive"] " demo. Select a preset then edit the \"code\" (in grey) and watch the boxes change. - The red-dashed box is an h-box which contains three [box] children."] + [p "In this interactive demo, you can edit the hiccup in the grey box to see the effects on the h-box and three children in the red border."] [choose-a-demo] [gap :size "0px"] [demo] From 2ff7fc9177b366bfd4a113c8855cbfa7ebb0f14e Mon Sep 17 00:00:00 2001 From: Gregg8 Date: Fri, 24 Apr 2015 16:27:06 +1000 Subject: [PATCH 5/7] WIP - h-box demo: - A few performance optimisations. - Switched to dark theme for popover notes. - First demo now has no popover description and is REALLY simple. - Decreaseed the right size of the code box by half so popover points closer to line. - Move [box stuff one char to the right. - Changed box highlight colour back to dark pink. - Highlight all code lines for current element in very light grey and current row a bit darker grey. - Strikethrough text now a bit darker. - Hit area for editor popover to include parameter name (text1) - splits: - Updated splits description. - Added :size, :width and :height params. - Popover - Added :style parameter to [close-button]. - Added :close-button? parameter to [popover-tooltip]. --- src/re_com/popover.cljs | 54 +++++---- src/re_com/splits.cljs | 52 ++++---- src/re_demo/h_box.cljs | 260 ++++++++++++++++++++++++---------------- src/re_demo/splits.cljs | 8 +- 4 files changed, 213 insertions(+), 161 deletions(-) diff --git a/src/re_com/popover.cljs b/src/re_com/popover.cljs index 0b2c2cf9..57b30e20 100644 --- a/src/re_com/popover.cljs +++ b/src/re_com/popover.cljs @@ -1,7 +1,7 @@ (ns re-com.popover (:require-macros [re-com.core :refer [handler-fn]]) (:require [re-com.util :refer [get-element-by-id px deref-or-value sum-scroll-offsets]] - [re-com.box :refer [h-box flex-child-style flex-flow-style align-style]] + [re-com.box :refer [h-box v-box flex-child-style flex-flow-style align-style]] [re-com.validate :refer [position? position-options-list popover-status-type? popover-status-types-list number-or-string? string-or-hiccup? string-or-atom? vector-of-maps? css-style? html-attr?] :refer-macros [validate-args-macro]] [clojure.string :as string] @@ -25,7 +25,7 @@ (defn- close-button "A button with a big X in it, placed to the right of the popup" - [showing? close-callback] + [showing? close-callback style] ;; Can't use [button] because [button] already uses [popover] which would be a circular dependency. [:button {:on-click (handler-fn @@ -33,10 +33,11 @@ (close-callback) (reset! showing? false))) :class "close" - :style {:font-size "34px" - :position "absolute" - :top "0px" - :right "0px"}} + :style (merge {:font-size "34px" + :position "absolute" + :top "0px" + :right "0px"} + style)} [:i {:class "md-close"}]]) @@ -369,18 +370,19 @@ ;;-------------------------------------------------------------------------------------------------- (def popover-tooltip-args-desc - [{:name :label :required true :type "string | hiccup | atom" :validate-fn string-or-hiccup? :description "the text (or component) for the tooltip"} - {:name :showing? :required true :default false :type "boolean atom" :description "an atom. When the value is true, the tooltip shows"} - {:name :on-cancel :required false :type "function" :validate-fn fn? :description "a callback taking no parameters, invoked when the popover is cancelled (e.g. user clicks away)"} - {:name :status :required false :type "keyword" :validate-fn popover-status-type? :description [:span "controls background color of the tooltip. " [:code "nil/omitted"] " for black or one of " popover-status-types-list]} - {:name :anchor :required true :type "hiccup" :validate-fn string-or-hiccup? :description "the component the tooltip is attached to"} - {:name :position :required false :default :below-center :type "keyword" :validate-fn position? :description [:span "relative to this anchor. One of " position-options-list]} - {:name :width :required false :type "string" :validate-fn string? :description "specifies width of the tooltip"} - {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "override component style(s) with a style map, only use in case of emergency"}]) + [{:name :label :required true :type "string | hiccup | atom" :validate-fn string-or-hiccup? :description "the text (or component) for the tooltip"} + {:name :showing? :required true :default false :type "boolean atom" :description "an atom. When the value is true, the tooltip shows"} + {:name :on-cancel :required false :type "function" :validate-fn fn? :description "a callback taking no parameters, invoked when the popover is cancelled (e.g. user clicks away)"} + {:name :close-button? :required false :default false :type "boolean" :description "when true, displays the close button"} + {:name :status :required false :type "keyword" :validate-fn popover-status-type? :description [:span "controls background color of the tooltip. " [:code "nil/omitted"] " for black or one of " popover-status-types-list]} + {:name :anchor :required true :type "hiccup" :validate-fn string-or-hiccup? :description "the component the tooltip is attached to"} + {:name :position :required false :default :below-center :type "keyword" :validate-fn position? :description [:span "relative to this anchor. One of " position-options-list]} + {:name :width :required false :type "string" :validate-fn string? :description "specifies width of the tooltip"} + {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "override component style(s) with a style map, only use in case of emergency"}]) (defn popover-tooltip "Renders text as a tooltip in Bootstrap popover style" - [& {:keys [label showing? on-cancel status anchor position width style] :as args}] + [& {:keys [label showing? on-cancel close-button? status anchor position width style] :as args}] {:pre [(validate-args-macro popover-tooltip-args-desc args "popover-tooltip")]} (let [label (deref-or-value label) popover-color (case status @@ -403,13 +405,15 @@ :padding "3px 8px" :arrow-length 6 :arrow-width 12 - :body [:div - {:style (if (= status :info) - {:color "white" - :font-size "14px" - :padding "4px"} - {:color "white" - :font-size "12px" - :font-weight "bold" - :text-align "center"})} - label]]])) + :body [v-box + :style (if (= status :info) + {:color "white" + :font-size "14px" + :padding "4px"} + {:color "white" + :font-size "12px" + :font-weight "bold" + :text-align "center"}) + :children [label (when close-button? + [close-button showing? on-cancel {:font-size "20px" + :right "1px"}])]]]])) diff --git a/src/re_com/splits.cljs b/src/re_com/splits.cljs index ac7161bc..4c31e425 100644 --- a/src/re_com/splits.cljs +++ b/src/re_com/splits.cljs @@ -37,20 +37,23 @@ ;; ------------------------------------------------------------------------------------ (def hv-split-args-desc - [{:name :panel-1 :required true :type "hiccup" :validate-fn string-or-hiccup? :description "markup to go in the left (or top) panel"} - {:name :panel-2 :required true :type "hiccup" :validate-fn string-or-hiccup? :description "markup to go in the right (or bottom) panel"} - {:name :on-split-change :required false :type "(double) -> nil" :validate-fn fn? :description [:span "called when the user moves the splitter bar (on mouse up, not on each mouse move). Given the new " [:code ":panel-1"] " percentage split"]} - {:name :initial-split :required false :default 50 :type "double | string" :validate-fn number-or-string? :description [:span "initial split percentage for " [:code ":panel-1"] ". Can be double value or string (with/without percentage sign)"]} - {:name :splitter-size :required false :default "8px" :type "string" :validate-fn string? :description "thickness of the splitter"} - {:name :margin :required false :default "8px" :type "string" :validate-fn string? :description "thickness of the margin around the panels"} - {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated, applied to outer container"} - {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override, applied to outer container"} - {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed, applied to outer container"]}]) + [{:name :panel-1 :required true :type "hiccup" :validate-fn string-or-hiccup? :description "markup to go in the left (or top) panel"} + {:name :panel-2 :required true :type "hiccup" :validate-fn string-or-hiccup? :description "markup to go in the right (or bottom) panel"} + {:name :size :required false :default "auto" :type "string" :validate-fn string? :description [:span "applied to the outer container of the two panels. Equivalent to CSS style " [:span.bold "flex"] "." [:br] "Examples: " [:code "initial"] ", " [:code "auto"] ", " [:code "none"]", " [:code "100px"] ", " [:code "2"] " or a generic triple of " [:code "grow shrink basis"]]} + {:name :width :required false :type "string" :validate-fn string? :description "width of the outer container of the two panels. A CSS width style"} + {:name :height :required false :type "string" :validate-fn string? :description "height of the outer container of the two panels. A CSS height style"} + {:name :on-split-change :required false :type "(double) -> nil" :validate-fn fn? :description [:span "called when the user moves the splitter bar (on mouse up, not on each mouse move). Given the new " [:code ":panel-1"] " percentage split"]} + {:name :initial-split :required false :default 50 :type "double | string" :validate-fn number-or-string? :description [:span "initial split percentage for " [:code ":panel-1"] ". Can be double value or string (with/without percentage sign)"]} + {:name :splitter-size :required false :default "8px" :type "string" :validate-fn string? :description "thickness of the splitter"} + {:name :margin :required false :default "8px" :type "string" :validate-fn string? :description "thickness of the margin around the panels"} + {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated, applied to outer container"} + {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override, applied to outer container"} + {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed, applied to outer container"]}]) (defn h-split "Returns markup for a horizontal layout component" - [& {:keys [panel-1 panel-2 initial-split splitter-size margin on-split-change class style attr] - :or {initial-split 50 splitter-size "8px" margin "8px"} + [& {:keys [panel-1 panel-2 size width height on-split-change initial-split splitter-size margin class style attr] + :or {size "auto" initial-split 50 splitter-size "8px" margin "8px"} :as args}] {:pre [(validate-args-macro hv-split-args-desc args "h-split")]} (let [container-id (gensym "h-split-") @@ -89,9 +92,11 @@ make-container-attrs (fn [class style attr in-drag?] (merge {:class (str "rc-h-split display-flex " class) :id container-id - :style (merge (flex-child-style "auto") + :style (merge (flex-child-style size) (flex-flow-style "row nowrap") - {:margin margin} + {:margin margin + :width width + :height height} style)} (when in-drag? ;; only listen when we are dragging {:on-mouse-up (handler-fn (stop-drag)) @@ -128,21 +133,10 @@ ;; Component: v-split ;; ------------------------------------------------------------------------------------ -#_(def v-split-args-desc - [{:name :panel-1 :required true :type "hiccup" :validate-fn string-or-hiccup? :description "markup to go in the top panel"} - {:name :panel-2 :required true :type "hiccup" :validate-fn string-or-hiccup? :description "markup to go in the bottom panel"} - {:name :on-split-change :required false :type "(double) -> nil" :validate-fn fn? :description [:span "called when the user moves the splitter bar (on mouse up, not on each mouse move). Given the new " [:code ":panel-1"] " percentage split"]} - {:name :initial-split :required false :default 50 :type "double | string" :validate-fn number-or-string? :description [:span "initial split percentage for " [:code ":panel-1"] ". Can be double value or string (with/without percentage sign)"]} - {:name :splitter-size :required false :default "8px" :type "string" :validate-fn string? :description "thickness of the splitter"} - {:name :margin :required false :default "8px" :type "string" :validate-fn string? :description "thickness of the margin around the panels"} - {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated, applied to outer container"} - {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override, applied to outer container"} - {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed, applied to outer container"]}]) - (defn v-split "Returns markup for a vertical layout component" - [& {:keys [panel-1 panel-2 initial-split splitter-size margin on-split-change class style attr] - :or {initial-split 50 splitter-size "8px" margin "8px"} + [& {:keys [panel-1 panel-2 size width height on-split-change initial-split splitter-size margin class style attr] + :or {size "auto" initial-split 50 splitter-size "8px" margin "8px"} :as args}] {:pre [(validate-args-macro hv-split-args-desc args "v-split")]} (let [container-id (gensym "v-split-") @@ -181,9 +175,11 @@ make-container-attrs (fn [class style attr in-drag?] (merge {:class (str "rc-v-split display-flex " class) :id container-id - :style (merge (flex-child-style "auto") + :style (merge (flex-child-style size) (flex-flow-style "column nowrap") - {:margin margin} + {:margin margin + :width width + :height height} style)} (when in-drag? ;; only listen when we are dragging {:on-mouse-up (handler-fn (stop-drag)) diff --git a/src/re_demo/h_box.cljs b/src/re_demo/h_box.cljs index 0461e28f..8dc0bfd4 100644 --- a/src/re_demo/h_box.cljs +++ b/src/re_demo/h_box.cljs @@ -1,7 +1,8 @@ (ns re-demo.h-box (:require [clojure.string :as string] - [re-com.core :refer [p h-box v-box box gap line scroller border label title button checkbox hyperlink-href slider horizontal-bar-tabs - info-button input-text input-textarea popover-anchor-wrapper popover-content-wrapper px] :refer-macros [handler-fn]] + [re-com.core :refer [p h-box v-box box gap line scroller border label title button checkbox hyperlink-href + slider horizontal-bar-tabs info-button input-text input-textarea + popover-anchor-wrapper popover-content-wrapper popover-tooltip px] :refer-macros [handler-fn]] [re-com.box :refer [h-box-args-desc v-box-args-desc box-args-desc gap-args-desc line-args-desc scroller-args-desc border-args-desc flex-child-style]] [re-com.util :refer [px]] [re-demo.utils :refer [panel-title title2 args-table github-hyperlink status-text]] @@ -21,7 +22,7 @@ :border-radius "4px" :padding "4px"})) -(def over-style {:background-color "#eee"}) ;; "#fcc" +(def over-style {:background-color "#fcc"}) (def editor-style {:font-size "12px" :line-height "20px" @@ -30,6 +31,35 @@ (def current-demo (reagent/atom 0)) (def demos [;; Demo 0 + {:hbox {:over? false + :height {:value "100px" :omit? true :editing? (atom false) :range [0 200]} + :width {:value "300px" :omit? false :editing? (atom false) :range [0 1000]} + :justify {:value :start :omit? true :editing? (atom false) } + :align {:value :stretch :omit? true :editing? (atom false) } + :gap {:value "4px" :omit? true :editing? (atom false) :range [0 100]}} + :box1 {:over? false + :text {:value "Box1" :omit? false :editing? (atom false) } + :size {:value "auto" :omit? false :editing? (atom false) :type :auto :px "50px" :ratio "3" :gsb "1 1 0"} + :align-self {:value :stretch :omit? true :editing? (atom false) } + :height {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :box2 {:over? false + :text {:value "Box2" :omit? false :editing? (atom false) } + :size {:value "auto" :omit? false :editing? (atom false) :type :auto :px "100px" :ratio "2" :gsb "1 1 0"} + :align-self {:value :stretch :omit? true :editing? (atom false) } + :height {:value "50px" :omit? true :editing? (atom false) :range [0 300]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :box3 {:over? false + :text {:value "Box3" :omit? false :editing? (atom false) } + :size {:value "auto" :omit? false :editing? (atom false) :type :auto :px "150px" :ratio "1" :gsb "1 1 0"} + :align-self {:value :stretch :omit? true :editing? (atom false) } + :height {:value "50px" :omit? true :editing? (atom false) :range [0 400]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}}} + + ;; Demo 1 {:hbox {:over? false :height {:value "100px" :omit? false :editing? (atom false) :range [0 200]} :width {:value "450px" :omit? false :editing? (atom true ) :range [0 1000]} @@ -58,19 +88,20 @@ :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} :desc [v-box - :children [[:p "Demonstrates some of the basics of h-box (and Flexbox)"] + :children [[:p.info-subheading "Simple Demo"] + [:p "Demonstrates some of the basics of h-box (and Flexbox)"] [:p "The " [:strong "h-box"] " container has a specific width and height with a gap of 4px, meaning 4px space will be placed between each child. The " [:code ":justify"] " and " [:code ":align"] " parameters are left to their defaults, meaning the boxes will be stretch from top to bottom (unless individually overridden)."] [:p [:strong "Box1"] " has a " [:code ":size"] " of \"none\" which means it will take up as much space as it's content, in this case, the text \"Box1\"."] [:p [:strong "Box2"] " has a specific 100 pixel " [:code ":size"] " so that's exactly how much space (width in this case) it will take up. Notice how the default :align of :stretch is overridden so that this box is vertically centered."] [:p [:strong "Box3"] " has a " [:code ":size"] " of \"1\" which defines how much empty space within the container to consume. It's greedy so it takes everything that's left. Because there are no other siblings with a 'ratio' :size, it will always take up all available space so you could put any ratio value here and you'll get the same result."] - [:p [:strong "Things to try"]] + [:p.info-subheading "Things to try"] [:ul [:li "Set the Box2 :size to \"2\" and notice how it will always take up double the width of Box3 as you adjust the h-box :width parameter. " ] [:li "Another fascinating thing to try." ] [:li "More to come. Will need to add a scroller to get more stuff in here!" ] ]]]} - ;; Demo 1 + ;; Demo 2 {:hbox {:over? false :height {:value "200px" :omit? false :editing? (atom false) :range [0 200]} :width {:value "300px" :omit? false :editing? (atom false) :range [0 1000]} @@ -102,7 +133,7 @@ :children [[:p "This is box-state 2"] [:p "More " [:strong "incredible"] " descriptions coming soon to a screen near you. Well, this one actually."]]]} - ;; Demo 2 + ;; Demo 3 {:hbox {:over? false :height {:value "150px" :omit? false :editing? (atom false) :range [0 200]} :width {:value "1000px" :omit? false :editing? (atom false) :range [0 1000]} @@ -322,9 +353,9 @@ (defn indent-px [ident] (ident {:0 "0px" - :1 "15px" - :2 "25px" - :3 "35px"})) + :1 "14px" + :2 "28px" + :3 "42px"})) (defn code-row "Render a single code row consisting of: @@ -334,8 +365,9 @@ 3. end text, usually, a closing ']' - an editor to open" [active? indent text1 path text3 on-over editor] - - (let [mouse-over-row? (reagent/atom false) + (let [editing?-path (when editor (conj path :editing?)) + toggle-editor (handler-fn (swap! box-state update-in editing?-path (fn [v] (atom (not @v))))) + mouse-over-row? (reagent/atom false) mouse-over-fn (fn [val] (reset! mouse-over-row? val) (if on-over (on-over val)) @@ -344,54 +376,55 @@ (map? (get-in @box-state path)) (get-in @box-state (conj path :omit?))))] (fn [active? indent text1 path text2 on-over editor] - (let [arg-val (if (vector? path) - (let [val (get-in @box-state (conj path :value))] - (cond - (nil? val) "-" - (keyword? val) (str val) - :else (str "\"" val "\""))) - (str path)) - row-active? (and @mouse-over-row? active?) - show-checkbox? (and row-active? (not (contains? (set path) :text))) - allow-edit? (and row-active? (not @omit?)) - arg-hiccup [h-box - :width "282px" - :style (merge {:overflow "hidden"} - (when row-active? {:background-color "#f0f0f0" - :cursor "pointer"}) - (when @omit? {:color "#d0d0d0"})) - :attr {:on-mouse-over #(mouse-over-fn true) - :on-mouse-out #(mouse-over-fn false)} - :children [[box - :size "20px" - :child (if show-checkbox? - [checkbox - :model (not @omit?) - :on-change #(do (swap! box-state assoc-in (conj path :omit?) (not %)) - (swap! box-state assoc-in (conj path :editing?) (atom %)))] - [:span])] - [gap :size (indent-px indent)] - [box - :size "100px" - :style (when @omit? {:text-decoration "line-through"}) - :child text1] - [box - :attr (when allow-edit? {:on-click (handler-fn (swap! box-state update-in (conj path :editing?) (fn [v] (atom (not @v)))))}) - :style (when @omit? {:text-decoration "line-through"}) - :child [:span - [:span {:style (when allow-edit? {:color "blue"})} arg-val] - text2]]]]] - + (let [arg-val (when editor + (let [val (get-in @box-state (conj path :value))] + (cond + (nil? val) "-" + (keyword? val) (str val) + :else (str "\"" val "\"")))) + row-active? (and @mouse-over-row? active?) + mouse-over-group? (= (nth path 0) (:over-group @box-state)) + show-checkbox? (and row-active? (not (contains? (set path) :text))) + allow-edit? (and row-active? (not @omit?)) + arg-hiccup [h-box + :width "242px" + :style (merge {:overflow "hidden"} + (when mouse-over-group? {:background-color "#e8e8e8"}) + (when row-active? {:background-color "#d8d8d8" + :cursor "pointer"}) + (when @omit? {:color "#c0c0c0"})) + :attr {:on-mouse-over #(do (println "|" path "|") (mouse-over-fn true)) + :on-mouse-out #(mouse-over-fn false)} + :children [[box + :size "20px" + :child (if show-checkbox? + [checkbox + :model (not @omit?) + :on-change #(do (swap! box-state assoc-in (conj path :omit?) (not %)) + (swap! box-state assoc-in editing?-path (atom %)))] + [:span])] ;; when no checkbox, use a filler + [gap :size (indent-px indent)] + [box + :size "100px" + :attr (when allow-edit? {:on-click toggle-editor}) + :style (when @omit? {:text-decoration "line-through"}) + :child text1] + [box + :attr (when allow-edit? {:on-click toggle-editor}) + :style (when @omit? {:text-decoration "line-through"}) + :child [:span + [:span {:style (when allow-edit? {:color "blue"})} arg-val] + text2]]]]] (if editor - (let [] + (let [editing? (get-in @box-state editing?-path)] [popover-anchor-wrapper - :showing? (get-in @box-state (conj path :editing?)) + :showing? editing? :position :right-center - :anchor arg-hiccup - :popover [popover-content-wrapper - :showing? (get-in @box-state (conj path :editing?)) - :position :right-center - :body [editor path #(swap! box-state assoc-in (conj path :editing?) (atom false))]]]) + :anchor arg-hiccup + :popover [popover-content-wrapper + :showing? editing? + :position :right-center + :body [editor path #(swap! box-state assoc-in editing?-path (atom false))]]]) arg-hiccup))))) @@ -400,7 +433,8 @@ [] (let [opts [{:id 0 :label "1"} {:id 1 :label "2"} - {:id 2 :label "3"}]] + {:id 2 :label "3"} + {:id 3 :label "4"}]] (fn [] [h-box @@ -430,63 +464,79 @@ (defn editable-code "Shows the code in a way that values can be edited, allowing for an interactive demo" [] - (let [over-hbox (fn [over?] (swap! box-state assoc-in [:hbox :over?] over?)) - over-box1 (fn [over?] (swap! box-state assoc-in [:box1 :over?] over?)) - over-box2 (fn [over?] (swap! box-state assoc-in [:box2 :over?] over?)) - over-box3 (fn [over?] (swap! box-state assoc-in [:box3 :over?] over?))] + (let [over-hbox (fn [over?] (println "hbox" over?) (swap! box-state assoc-in [:hbox :over?] over?) (swap! box-state assoc-in [:over-group] (when over? :hbox))) + over-box1 (fn [over?] (println "box1" over?) (swap! box-state assoc-in [:box1 :over?] over?) (swap! box-state assoc-in [:over-group] (when over? :box1))) + over-box2 (fn [over?] (println "box2" over?) (swap! box-state assoc-in [:box2 :over?] over?) (swap! box-state assoc-in [:over-group] (when over? :box2))) + over-box3 (fn [over?] (println "box3" over?) (swap! box-state assoc-in [:box3 :over?] over?) (swap! box-state assoc-in [:over-group] (when over? :box3)))] (fn [] [h-box :align :start - :children [[popover-anchor-wrapper - :showing? show-desc? - :position :left-below - :anchor [:div {:style {:height "60px"}}] ;; Position the popover down the page a little - :popover [popover-content-wrapper - :showing? show-desc? - :position :left-below - :width "460px" - :title "Demo Description" - :close-button? true - :body (:desc @box-state)]] + :children [(when (:desc @box-state) + #_[popover-anchor-wrapper ;; TODO: REMOVE + :showing? show-desc? + :position :right-below + :anchor [:div {:style {:height "60px"}}] ;; Position the popover down the page a little + :popover [popover-content-wrapper + :showing? show-desc? + :position :right-below + :width "460px" + + ;:tooltip-style? true + ;:popover-color "#333333" + ;:padding "3px 8px" + ;:arrow-length 6 + ;:arrow-width 12 + + :title "Demo Description" + :close-button? true + :body (:desc @box-state)]] + [popover-tooltip + :showing? show-desc? + :position :left-below + :width "460px" + :status :info + :close-button? true + :anchor [:div {:style {:height "42px"}}] ;; Position the popover down the page a little + :label (:desc @box-state)]) [v-box - :width "300px" + :width "260px" :style {:font-family "Consolas, \"Courier New\", monospace" :font-size "12px" :background-color "#f5f5f5" :border "1px solid lightgray" :border-radius "4px" :padding "8px"} - :children [[code-row false :0 "[h-box" "" "" over-hbox] - [code-row true :1 " :height" [:hbox :height] "" over-hbox px-editor] - [code-row true :1 " :width" [:hbox :width] "" over-hbox px-editor] - [code-row true :1 " :justify" [:hbox :justify] "" over-hbox justify-editor] - [code-row true :1 " :align" [:hbox :align] "" over-hbox align-editor] - [code-row true :1 " :gap" [:hbox :gap] "" over-hbox px-editor] - [code-row false :1 " :children" " [" "" over-hbox] - - [code-row false :2 "[box " "" "" over-box1] - [code-row true :3 " :child" [:box1 :text] "" over-box1 text-editor] - [code-row true :3 " :size" [:box1 :size] "" over-box1 size-editor] - [code-row true :3 " :align-self" [:box1 :align-self] "" over-box1 align-editor] - [code-row true :3 " :height" [:box1 :height] "" over-box1 px-editor] - [code-row true :3 " :min-width" [:box1 :min-width] "" over-box1 px-editor] - [code-row true :3 " :max-width" [:box1 :max-width] "]" over-box1 px-editor] - - [code-row false :2 "[box " "" "" over-box2] - [code-row true :3 " :child" [:box2 :text] "" over-box2 text-editor] - [code-row true :3 " :size" [:box2 :size] "" over-box2 size-editor] - [code-row true :3 " :align-self" [:box2 :align-self] "" over-box2 align-editor] - [code-row true :3 " :height" [:box2 :height] "" over-box2 px-editor] - [code-row true :3 " :min-width" [:box2 :min-width] "" over-box2 px-editor] - [code-row true :3 " :max-width" [:box2 :max-width] "]" over-box2 px-editor] - - [code-row false :2 "[box " "" "" over-box3] - [code-row true :3 " :child" [:box3 :text] "" over-box3 text-editor] - [code-row true :3 " :size" [:box3 :size] "" over-box3 size-editor] - [code-row true :3 " :align-self" [:box3 :align-self] "" over-box3 align-editor] - [code-row true :3 " :height" [:box3 :height] "" over-box3 px-editor] - [code-row true :3 " :min-width" [:box3 :min-width] "" over-box3 px-editor] - [code-row true :3 " :max-width" [:box3 :max-width] "]]" over-box3 px-editor]]]]]))) + :children [[code-row false :0 "[h-box" [:hbox] "" over-hbox] + [code-row true :1 ":height" [:hbox :height] "" over-hbox px-editor] + [code-row true :1 ":width" [:hbox :width] "" over-hbox px-editor] + [code-row true :1 ":justify" [:hbox :justify] "" over-hbox justify-editor] + [code-row true :1 ":align" [:hbox :align] "" over-hbox align-editor] + [code-row true :1 ":gap" [:hbox :gap] "" over-hbox px-editor] + [code-row false :1 ":children [" [:hbox] "" over-hbox] + + [code-row false :2 "[box " [:box1] "" over-box1] + [code-row true :3 ":child" [:box1 :text] "" over-box1 text-editor] + [code-row true :3 ":size" [:box1 :size] "" over-box1 size-editor] + [code-row true :3 ":align-self" [:box1 :align-self] "" over-box1 align-editor] + [code-row true :3 ":height" [:box1 :height] "" over-box1 px-editor] + [code-row true :3 ":min-width" [:box1 :min-width] "" over-box1 px-editor] + [code-row true :3 ":max-width" [:box1 :max-width] "]" over-box1 px-editor] + + [code-row false :2 "[box " [:box2] "" over-box2] + [code-row true :3 ":child" [:box2 :text] "" over-box2 text-editor] + [code-row true :3 ":size" [:box2 :size] "" over-box2 size-editor] + [code-row true :3 ":align-self" [:box2 :align-self] "" over-box2 align-editor] + [code-row true :3 ":height" [:box2 :height] "" over-box2 px-editor] + [code-row true :3 ":min-width" [:box2 :min-width] "" over-box2 px-editor] + [code-row true :3 ":max-width" [:box2 :max-width] "]" over-box2 px-editor] + + [code-row false :2 "[box " [:box3] "" over-box3] + [code-row true :3 ":child" [:box3 :text] "" over-box3 text-editor] + [code-row true :3 ":size" [:box3 :size] "" over-box3 size-editor] + [code-row true :3 ":align-self" [:box3 :align-self] "" over-box3 align-editor] + [code-row true :3 ":height" [:box3 :height] "" over-box3 px-editor] + [code-row true :3 ":min-width" [:box3 :min-width] "" over-box3 px-editor] + [code-row true :3 ":max-width" [:box3 :max-width] "]]" over-box3 px-editor]]]]]))) (defn panel diff --git a/src/re_demo/splits.cljs b/src/re_demo/splits.cljs index c1d3c33c..2397b856 100644 --- a/src/re_demo/splits.cljs +++ b/src/re_demo/splits.cljs @@ -65,8 +65,8 @@ :width "450px" :children [[title2 "[h-split ... ] & [v-split ... ]"] [status-text "Stable"] - [p "Arranges two components horizontally and provides a splitter bar between them."] - [p "By dragging the splitter bar, a user can change the width allocated to each."] + [p "Arranges two components horizontally (or vertically) and provides a splitter bar between them."] + [p "By dragging the splitter bar, a user can change the width (or height) allocated to each."] [p "Can contain further nested layout components."] [args-table hv-split-args-desc]]] [v-box @@ -77,9 +77,11 @@ [title :level :level3 :label "[h-split]"] [h-split :panel-1 [left-panel] - :panel-2 [right-panel]] + :panel-2 [right-panel] + :size "300px"] [title :level :level3 :label "[v-split]"] [v-split :panel-1 [top-panel] :panel-2 [bottom-panel] + :size "300px" :initial-split "25%"]]]]]]]) From a85f694ac3419874d71ce3f7e50aeb14bb54aa13 Mon Sep 17 00:00:00 2001 From: Gregg8 Date: Tue, 28 Apr 2015 17:57:15 +1000 Subject: [PATCH 6/7] WIP h-box demo - Made the scenarios and filled in the descriptions for each. - Included a possible :size2 scenario with "Advanced GSB". - Highlight all code lines with open editors. - The close button in the dark popovers is more visible. --- src/re_com/popover.cljs | 6 +- src/re_demo/h_box.cljs | 634 ++++++++++++++++++++++---------- src/re_demo/selection_list.cljs | 2 +- 3 files changed, 444 insertions(+), 198 deletions(-) diff --git a/src/re_com/popover.cljs b/src/re_com/popover.cljs index 57b30e20..b4301072 100644 --- a/src/re_com/popover.cljs +++ b/src/re_com/popover.cljs @@ -415,5 +415,7 @@ :font-weight "bold" :text-align "center"}) :children [label (when close-button? - [close-button showing? on-cancel {:font-size "20px" - :right "1px"}])]]]])) + [close-button showing? on-cancel {:font-size "20px" + :color "white" + :text-shadow "none" + :right "1px"}])]]]])) diff --git a/src/re_demo/h_box.cljs b/src/re_demo/h_box.cljs index 8dc0bfd4..380e8285 100644 --- a/src/re_demo/h_box.cljs +++ b/src/re_demo/h_box.cljs @@ -20,7 +20,8 @@ {:background-color "#fff4f4" :border "1px solid lightgray" :border-radius "4px" - :padding "4px"})) + :padding "4px" + :overflow "hidden"})) (def over-style {:background-color "#fcc"}) @@ -30,142 +31,338 @@ (def current-demo (reagent/atom 0)) -(def demos [;; Demo 0 - {:hbox {:over? false - :height {:value "100px" :omit? true :editing? (atom false) :range [0 200]} - :width {:value "300px" :omit? false :editing? (atom false) :range [0 1000]} - :justify {:value :start :omit? true :editing? (atom false) } - :align {:value :stretch :omit? true :editing? (atom false) } - :gap {:value "4px" :omit? true :editing? (atom false) :range [0 100]}} +;(def paragraph-filler "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.") +;(def paragraph-filler "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.") +(def paragraph-filler [v-box + :children [[:p.bold "Lorem Ipsum"] + [:p "dolor sit amet, consectetur adipiscing elit."] + [:p "Sed do " [:strong "eiusmod"] " tempor incididunt ut labore et dolore magna aliqua."] + [:p [:strong "Ut enim "] " ad minim veniam " [:code "quis nostrud"] " exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."] + [:p.bold "Duis aute irure:"] + [:ul + [:li "Dolor in reprehenderit in voluptate velit esse."] + [:li "Cillum dolore eu fugiat nulla pariatur."] + [:li "Excepteur sint occaecat cupidatat non proident."] + ;[:li "Sunt in culpa qui officia deserunt mollit anim id est laborum."] + ]]]) + +(def buttons-filler [h-box + :children [[button + :label "Blue" + :class "btn-primary" + :on-click #()] + [gap :size "12px" :width "12px"] + [button + :label "White" + :on-click #()]]]) + +(def demos [;; Basic + {:hbox {:over? false + :height {:value "100px" :omit? false :editing? (atom false) :range [0 200]} + :width {:value "300px" :omit? true :editing? (atom false) :range [0 1000]} + :justify {:value :start :omit? true :editing? (atom false)} + :align {:value :stretch :omit? true :editing? (atom false)} + :gap {:value "4px" :omit? true :editing? (atom false) :range [0 100]}} :box1 {:over? false - :text {:value "Box1" :omit? false :editing? (atom false) } - :size {:value "auto" :omit? false :editing? (atom false) :type :auto :px "50px" :ratio "3" :gsb "1 1 0"} - :align-self {:value :stretch :omit? true :editing? (atom false) } - :height {:value "50px" :omit? true :editing? (atom false) :range [0 200]} - :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} - :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :text {:value "Box1" :omit? false :editing? (atom false) :type :text :text "Box1"} + :size {:value "auto" :omit? false :editing? (atom false) :type :auto :px "50px" :ratio "3" :gsb "1 1 0px"} + :align-self {:value :stretch :omit? true :editing? (atom false)} + :height {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} :box2 {:over? false - :text {:value "Box2" :omit? false :editing? (atom false) } - :size {:value "auto" :omit? false :editing? (atom false) :type :auto :px "100px" :ratio "2" :gsb "1 1 0"} - :align-self {:value :stretch :omit? true :editing? (atom false) } - :height {:value "50px" :omit? true :editing? (atom false) :range [0 300]} - :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} - :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :text {:value "Box2" :omit? false :editing? (atom false) :type :text :text "Box2"} + :size {:value "auto" :omit? false :editing? (atom false) :type :auto :px "100px" :ratio "2" :gsb "1 1 0px"} + :align-self {:value :stretch :omit? true :editing? (atom false)} + :height {:value "50px" :omit? true :editing? (atom false) :range [0 300]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} :box3 {:over? false - :text {:value "Box3" :omit? false :editing? (atom false) } - :size {:value "auto" :omit? false :editing? (atom false) :type :auto :px "150px" :ratio "1" :gsb "1 1 0"} - :align-self {:value :stretch :omit? true :editing? (atom false) } - :height {:value "50px" :omit? true :editing? (atom false) :range [0 400]} - :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} - :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}}} - - ;; Demo 1 - {:hbox {:over? false - :height {:value "100px" :omit? false :editing? (atom false) :range [0 200]} - :width {:value "450px" :omit? false :editing? (atom true ) :range [0 1000]} - :justify {:value :start :omit? true :editing? (atom false) } - :align {:value :stretch :omit? true :editing? (atom false) } - :gap {:value "4px" :omit? false :editing? (atom false) :range [0 100]}} + :text {:value "Box3" :omit? false :editing? (atom false) :type :text :text "Box3"} + :size {:value "auto" :omit? false :editing? (atom false) :type :auto :px "150px" :ratio "1" :gsb "1 1 0px"} + :align-self {:value :stretch :omit? true :editing? (atom false)} + :height {:value "50px" :omit? true :editing? (atom false) :range [0 400]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}}} + + ;; Justify + {:hbox {:over? false + :height {:value "100px" :omit? false :editing? (atom false) :range [0 200]} + :width {:value "450px" :omit? false :editing? (atom false) :range [0 1000]} + :justify {:value :start :omit? false :editing? (atom true)} + :align {:value :stretch :omit? true :editing? (atom false)} + :gap {:value "4px" :omit? true :editing? (atom false) :range [0 100]}} :box1 {:over? false - :text {:value "Box1" :omit? false :editing? (atom false) } - :size {:value "none" :omit? false :editing? (atom false) :type :none :px "50px" :ratio "3" :gsb "1 1 0"} - :align-self {:value :stretch :omit? true :editing? (atom false) } - :height {:value "50px" :omit? true :editing? (atom false) :range [0 200]} - :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} - :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :text {:value "Box1" :omit? false :editing? (atom false) :type :text :text "Box1"} + :size {:value "100px" :omit? false :editing? (atom false) :type :px :px "100px" :ratio "3" :gsb "1 1 0px"} + :align-self {:value :stretch :omit? true :editing? (atom false)} + :height {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} :box2 {:over? false - :text {:value "Box2" :omit? false :editing? (atom false) } - :size {:value "100px" :omit? false :editing? (atom true ) :type :px :px "100px" :ratio "2" :gsb "1 1 0"} - :align-self {:value :center :omit? false :editing? (atom false) } - :height {:value "50px" :omit? true :editing? (atom false) :range [0 300]} - :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} - :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :text {:value "Box2" :omit? false :editing? (atom false) :type :text :text "Box2"} + :size {:value "100px" :omit? false :editing? (atom false) :type :px :px "100px" :ratio "2" :gsb "1 1 0px"} + :align-self {:value :stretch :omit? true :editing? (atom false)} + :height {:value "50px" :omit? true :editing? (atom false) :range [0 300]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} :box3 {:over? false - :text {:value "Box3" :omit? false :editing? (atom false) } - :size {:value "1" :omit? false :editing? (atom false) :type :ratio :px "150px" :ratio "1" :gsb "1 1 0"} - :align-self {:value :stretch :omit? true :editing? (atom false) } - :height {:value "50px" :omit? true :editing? (atom false) :range [0 400]} - :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} - :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :text {:value "Box3" :omit? false :editing? (atom false) :type :text :text "Box3"} + :size {:value "100px" :omit? false :editing? (atom false) :type :px :px "100px" :ratio "1" :gsb "1 1 0px"} + :align-self {:value :stretch :omit? true :editing? (atom false)} + :height {:value "50px" :omit? true :editing? (atom false) :range [0 400]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} :desc [v-box - :children [[:p.info-subheading "Simple Demo"] - [:p "Demonstrates some of the basics of h-box (and Flexbox)"] - [:p "The " [:strong "h-box"] " container has a specific width and height with a gap of 4px, meaning 4px space will be placed between each child. The " [:code ":justify"] " and " [:code ":align"] " parameters are left to their defaults, meaning the boxes will be stretch from top to bottom (unless individually overridden)."] + :children [[:p.info-subheading "The " [:code ":justify"] " parameter"] + [:p "Specifies how children are arranged horizontally (along the \"main axis\" in flexbox terms)."] + [:p [:strong "Note: "] "There is a bug in Chrome. When switching from :between to :around (or visa versa), the change is not shown. To get around this, select a different option beforehand."] + [:p.info-subheading "Things to try"] + [:ul + [:li "Select the different " [:code ":justify"] " options to see their effect on the layout."] + [:li "When in :around mode, turn the " [:code ":gap"] " parameter on using it's checkbox. Notice that although the gaps are invisible, being children themselves, space is also added around them."] + ]]]} + + ;; Align + {:hbox {:over? false + :height {:value "100px" :omit? false :editing? (atom true) :range [0 200]} + :width {:value "450px" :omit? false :editing? (atom false) :range [0 1000]} + :justify {:value :start :omit? true :editing? (atom false)} + :align {:value :stretch :omit? false :editing? (atom true)} + :gap {:value "4px" :omit? false :editing? (atom false) :range [0 100]}} + :box1 {:over? false + :text {:value "Box1" :omit? false :editing? (atom false) :type :text :text "Box1"} + :size {:value "auto" :omit? false :editing? (atom false) :type :auto :px "50px" :ratio "3" :gsb "1 1 0px"} + :align-self {:value :stretch :omit? true :editing? (atom false)} + :height {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :box2 {:over? false + :text {:value "Box2" :omit? false :editing? (atom false) :type :text :text "Box2"} + :size {:value "auto" :omit? false :editing? (atom false) :type :auto :px "100px" :ratio "2" :gsb "1 1 0px"} + :align-self {:value :center :omit? false :editing? (atom true)} + :height {:value "50px" :omit? true :editing? (atom false) :range [0 300]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :box3 {:over? false + :text {:value "Box3" :omit? false :editing? (atom false) :type :text :text "Box3"} + :size {:value "auto" :omit? false :editing? (atom false) :type :auto :px "150px" :ratio "1" :gsb "1 1 0px"} + :align-self {:value :end :omit? false :editing? (atom true)} + :height {:value "50px" :omit? true :editing? (atom false) :range [0 400]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :desc [v-box + :children [[:p.info-subheading "The " [:code ":align"] " & " [:code ":align-self"] " parameters"] + [:p [:code ":align"] " specifies how children are arranged vertically (along the \"cross axis\" in flexbox terms)."] + [:p [:code ":align-self"] " is used by individual children to override the :align value specified by their parent."] + [:p.info-subheading "Things to try"] + [:ul + [:li "Select different " [:code ":align"] " values for the h-box and notice how this only affects Box1, since the other boxes are both overriding this setting."] + [:li "Change the " [:code ":align-self"] " values for Box2 and Box3 to see them adjust their vertical layout."] + [:li "Adjust the h-box " [:code ":height"] " parameter to see the boxes sticking to the specified alignment."] + ]]]} + + ;; Size + {:hbox {:over? false + :height {:value "100px" :omit? false :editing? (atom false) :range [0 200]} + :width {:value "450px" :omit? false :editing? (atom true) :range [0 1000]} + :justify {:value :start :omit? true :editing? (atom false)} + :align {:value :stretch :omit? true :editing? (atom false)} + :gap {:value "4px" :omit? false :editing? (atom false) :range [0 100]}} + :box1 {:over? false + :text {:value "Box1" :omit? false :editing? (atom false) :type :text :text "Box1"} + :size {:value "none" :omit? false :editing? (atom true) :type :none :px "50px" :ratio "3" :gsb "1 1 0px"} + :align-self {:value :stretch :omit? true :editing? (atom false)} + :height {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :box2 {:over? false + :text {:value "Box2" :omit? false :editing? (atom false) :type :text :text "Box2"} + :size {:value "100px" :omit? false :editing? (atom true) :type :px :px "100px" :ratio "2" :gsb "1 1 0px"} + :align-self {:value :stretch :omit? true :editing? (atom false)} + :height {:value "50px" :omit? true :editing? (atom false) :range [0 300]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :box3 {:over? false + :text {:value "Box3" :omit? false :editing? (atom false) :type :text :text "Box3"} + :size {:value "1" :omit? false :editing? (atom true) :type :ratio :px "150px" :ratio "1" :gsb "1 1 0px"} + :align-self {:value :stretch :omit? true :editing? (atom false)} + :height {:value "50px" :omit? true :editing? (atom false) :range [0 400]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :desc [v-box + :children [[:p.info-subheading "The " [:code ":size"] " parameter"] + [:p "The " [:strong "h-box"] " container has a specific width and height with a gap of 4px, meaning 4px space will be placed between each child. The " [:code ":justify"] " and " [:code ":align"] " parameters are left to their defaults, meaning the boxes will be stretched from top to bottom (unless individually overridden)."] [:p [:strong "Box1"] " has a " [:code ":size"] " of \"none\" which means it will take up as much space as it's content, in this case, the text \"Box1\"."] - [:p [:strong "Box2"] " has a specific 100 pixel " [:code ":size"] " so that's exactly how much space (width in this case) it will take up. Notice how the default :align of :stretch is overridden so that this box is vertically centered."] + [:p [:strong "Box2"] " has a specific 100 pixel " [:code ":size"] " so that's exactly how much space (width in the case on an h-box) it will take up."] [:p [:strong "Box3"] " has a " [:code ":size"] " of \"1\" which defines how much empty space within the container to consume. It's greedy so it takes everything that's left. Because there are no other siblings with a 'ratio' :size, it will always take up all available space so you could put any ratio value here and you'll get the same result."] [:p.info-subheading "Things to try"] [:ul - [:li "Set the Box2 :size to \"2\" and notice how it will always take up double the width of Box3 as you adjust the h-box :width parameter. " ] - [:li "Another fascinating thing to try." ] - [:li "More to come. Will need to add a scroller to get more stuff in here!" ] + [:li "Adjust the h-box " [:code ":width"] " parameter and notice that only Box3 resizes as the other two boxes have specific sizes that will not change. Box3 takes up all extra available space and squeezes down to nothing as the h-box width is reduced further."] + [:li "Set the Box2 " [:code ":size"] " to a :ratio value of \"2\" and notice how it will always take up double the width of Box3 as you adjust the h-box " [:code ":width"] " parameter."] + [:li "Set the Box2 " [:code ":size"] " to a :gsb value of \"0 0 80%\". As you adjust the h-box " [:code ":width"] " parameter, you will see that Box2 maintains 80% of the width of the h-box. Because we are not allowing growing or shrinking, Box3 will eventually be squeezed down to nothing and Box2 will ultimately extend outsize the bounds of the h-box, but will always be sized to 80% of the h-box. Does that make any sense?"] ]]]} - ;; Demo 2 - {:hbox {:over? false - :height {:value "200px" :omit? false :editing? (atom false) :range [0 200]} - :width {:value "300px" :omit? false :editing? (atom false) :range [0 1000]} - :justify {:value :center :omit? false :editing? (atom false) } - :align {:value :stretch :omit? true :editing? (atom false) } - :gap {:value "4px" :omit? false :editing? (atom false) :range [0 100]}} + ;; Size2 + {:hbox {:over? false + :height {:value "100px" :omit? false :editing? (atom false) :range [0 200]} + :width {:value "500px" :omit? false :editing? (atom true) :range [0 1000]} + :justify {:value :start :omit? true :editing? (atom false)} + :align {:value :stretch :omit? true :editing? (atom false)} + :gap {:value "4px" :omit? false :editing? (atom false) :range [0 100]}} :box1 {:over? false - :text {:value "Box1" :omit? false :editing? (atom false) } - :size {:value "none" :omit? false :editing? (atom false) :type :none :px "50px" :ratio "3" :gsb "1 1 0"} - :align-self {:value :stretch :omit? true :editing? (atom false) } - :height {:value "50px" :omit? true :editing? (atom false) :range [0 200]} - :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} - :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :text {:value "Box1" :omit? false :editing? (atom false) :type :text :text "Box1"} + :size {:value "100px" :omit? false :editing? (atom false) :type :px :px "100px" :ratio "3" :gsb "1 1 0px"} + :align-self {:value :stretch :omit? true :editing? (atom false)} + :height {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} :box2 {:over? false - :text {:value "Box2" :omit? false :editing? (atom false) } - :size {:value "500px" :omit? false :editing? (atom false) :type :px :px "100px" :ratio "2" :gsb "1 1 0"} - :align-self {:value :center :omit? false :editing? (atom false) } - :height {:value "50px" :omit? true :editing? (atom false) :range [0 300]} - :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} - :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :text {:value "Box2" :omit? false :editing? (atom false) :type :text :text "Box2"} + :size {:value "5 1 200px" :omit? false :editing? (atom true) :type :gsb :px "100px" :ratio "2" :gsb "5 1 200px"} + :align-self {:value :stretch :omit? true :editing? (atom false)} + :height {:value "50px" :omit? true :editing? (atom false) :range [0 300]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} :box3 {:over? false - :text {:value "Box3" :omit? false :editing? (atom false) } - :size {:value "none" :omit? false :editing? (atom false) :type :none :px "150px" :ratio "1" :gsb "1 1 0"} - :align-self {:value :stretch :omit? true :editing? (atom false) } - :height {:value "50px" :omit? true :editing? (atom false) :range [0 400]} - :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} - :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :text {:value "Box3" :omit? false :editing? (atom false) :type :text :text "Box3"} + :size {:value "1 3 200px" :omit? false :editing? (atom true) :type :gsb :px "150px" :ratio "1" :gsb "1 3 200px"} + :align-self {:value :stretch :omit? true :editing? (atom false)} + :height {:value "50px" :omit? true :editing? (atom false) :range [0 400]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} :desc [v-box - :children [[:p "This is box-state 2"] - [:p "More " [:strong "incredible"] " descriptions coming soon to a screen near you. Well, this one actually."]]]} - - ;; Demo 3 - {:hbox {:over? false - :height {:value "150px" :omit? false :editing? (atom false) :range [0 200]} - :width {:value "1000px" :omit? false :editing? (atom false) :range [0 1000]} - :justify {:value :start :omit? true :editing? (atom false) } - :align {:value :stretch :omit? true :editing? (atom false) } - :gap {:value "4px" :omit? false :editing? (atom false) :range [0 100]}} + :children [[:p.info-subheading "The " [:code ":size"] " parameter - Advanced GSB"] + [:p "This demonstrates a complex example of gsb."] + [:p [:strong "Box1"] " has a " [:code ":size"] " fixed to \"100px\"."] + [:p [:strong "Box2"] " has a gsb of \"5 1 200px\" so it's natural width is 200px and when it grows, it will do so with a ratio of 5, compared with other growable siblings. When it shrinks, it will do so at a ratio of 1, compared with other shrinkable siblings."] + [:p [:strong "Box3"] " has a gsb of \"1 3 200px\" so it's natural width is also 200px and when it grows, it will do so with a ratio of 1. When it shrinks, it will do so at a ratio of 3."] + [:p "Notice that the width of the h-box is initially set to 500px. Box1 (100px) + Box2 (200px basis) + Box3 (200px basis) = 500px so this width is the point of equilibrium. There is no shrinking or growing required so we see that Box2 and Box3 have exactly the same width of 200px."] + [:p.info-subheading "Things to try"] + [:ul + [:li "Grow the " [:code ":width"] " from the initial 500px. The extra space (excluding the initial 200px for Box2 and Box3) will be distributed between Box2 and Box3 in a ratio of 5 to 1, so Box2 will grow faster than Box3."] + [:li "Shrink the " [:code ":width"] " from the initial 500px. The space to be removed from Box2 and Box3 will be removed in a ratio of 1 to 3, so Box3 will shrink faster than Box2 until it reaches 0px. Box2 will then continue to reduce until it too gets to 0px. Phew! TODO: Visibly, the ratio of Box3 to Box2 isn't maintained at 3 to 1, so some more pondering required."] + ]]]} + + ;; Width + {:hbox {:over? false + :height {:value "100px" :omit? false :editing? (atom false) :range [0 200]} + :width {:value "450px" :omit? false :editing? (atom true ) :range [0 1000]} + :justify {:value :start :omit? true :editing? (atom false)} + :align {:value :stretch :omit? true :editing? (atom false)} + :gap {:value "4px" :omit? false :editing? (atom false) :range [0 100]}} :box1 {:over? false - :text {:value "Box1 Box1 Box1 Box1 Box1 Box1 Box1 Box1 Box1 " :omit? false :editing? (atom false) } - :size {:value "none" :omit? false :editing? (atom false) :type :none :px "50px" :ratio "3" :gsb "1 1 0"} - :align-self {:value :stretch :omit? true :editing? (atom false) } - :height {:value "50px" :omit? true :editing? (atom false) :range [0 200]} - :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} - :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :text {:value "Box1" :omit? false :editing? (atom false) :type :text :text "Box1"} + :size {:value "auto" :omit? false :editing? (atom true) :type :auto :px "50px" :ratio "3" :gsb "1 1 0px"} + :align-self {:value :stretch :omit? true :editing? (atom false)} + :height {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :min-width {:value "100px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "200px" :omit? true :editing? (atom false) :range [0 200]}} :box2 {:over? false - :text {:value "Box2 Box2 Box2 Box2 Box2 Box2 Box2 Box2 Box2 Box2 Box2 Box2 Box2 Box2 Box2 Box2 Box2 Box2 " :omit? false :editing? (atom false) } - :size {:value "100px" :omit? false :editing? (atom false) :type :px :px "100px" :ratio "2" :gsb "1 1 0"} - :align-self {:value :center :omit? false :editing? (atom false) } - :height {:value "50px" :omit? true :editing? (atom false) :range [0 300]} - :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} - :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :text {:value "Box2" :omit? false :editing? (atom false) :type :text :text "Box2"} + :size {:value "auto" :omit? false :editing? (atom false) :type :auto :px "100px" :ratio "2" :gsb "1 1 0px"} + :align-self {:value :stretch :omit? true :editing? (atom false)} + :height {:value "50px" :omit? true :editing? (atom false) :range [0 300]} + :min-width {:value "100px" :omit? false :editing? (atom true) :range [0 200]} + :max-width {:value "200px" :omit? true :editing? (atom false) :range [0 200]}} :box3 {:over? false - :text {:value "Box3 Box3 Box3 Box3 Box3 Box3 " :omit? false :editing? (atom false) } - :size {:value "1" :omit? false :editing? (atom false) :type :ratio :px "150px" :ratio "1" :gsb "1 1 0"} - :align-self {:value :stretch :omit? true :editing? (atom false) } - :height {:value "50px" :omit? true :editing? (atom false) :range [0 400]} - :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} - :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :text {:value "Box3" :omit? false :editing? (atom false) :type :text :text "Box3"} + :size {:value "auto" :omit? false :editing? (atom false) :type :auto :px "150px" :ratio "1" :gsb "1 1 0px"} + :align-self {:value :stretch :omit? true :editing? (atom false)} + :height {:value "50px" :omit? true :editing? (atom false) :range [0 400]} + :min-width {:value "100px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "200px" :omit? false :editing? (atom true) :range [0 200]}} :desc [v-box - :children [[:p "This is box-state 3"] - [:p "More " [:strong "incredible"] " descriptions coming soon to a screen near you. Well, this one actually."]]]}]) + :children [[:p.info-subheading "The " [:code ":width"] " & " [:code ":min/max-width"] " parameters"] + [:p "Although not specifically a part of the Flexbox spec, it's useful to see how the various width parameters interact with it."] + [:p "All three boxes have size set to auto so they can grow and shrink as required."] + [:p "Box1 has no width restrictions, Box2 has a :min-width and Box3 has a :max-width."] + [:p.info-subheading "Things to try"] + [:ul + [:li "Decrease the h-box " [:code ":width"] " and notice how Box2 shrinks only until it reaches the minimum of 100px (or whatever you may have changed it to)."] + [:li "Increase the h-box " [:code ":width"] " and notice how Box3 grows only until it reaches the maximum of 200px (or whatever you may have changed it to)."] + [:li "Turn on " [:code ":min-width"] " for Box3 and while adjusting the h-box " [:code ":width"] ", notice how Box3 grows & shrinks only between the min and max values."] + ]]]} -(def box-state (reaction (get demos @current-demo))) + ;; Height + {:hbox {:over? false + :height {:value "100px" :omit? false :editing? (atom true) :range [0 200]} + :width {:value "450px" :omit? false :editing? (atom false) :range [0 1000]} + :justify {:value :start :omit? true :editing? (atom false)} + :align {:value :stretch :omit? false :editing? (atom false)} + :gap {:value "4px" :omit? false :editing? (atom false) :range [0 100]}} + :box1 {:over? false + :text {:value "Box1" :omit? false :editing? (atom false) :type :text :text "Box1"} + :size {:value "auto" :omit? false :editing? (atom false) :type :auto :px "50px" :ratio "3" :gsb "1 1 0px"} + :align-self {:value :stretch :omit? true :editing? (atom false)} + :height {:value "40px" :omit? false :editing? (atom true) :range [0 200]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :box2 {:over? false + :text {:value "Box2" :omit? false :editing? (atom false) :type :text :text "Box2"} + :size {:value "auto" :omit? false :editing? (atom false) :type :auto :px "100px" :ratio "2" :gsb "1 1 0px"} + :align-self {:value :stretch :omit? true :editing? (atom false)} + :height {:value "80px" :omit? false :editing? (atom true) :range [0 300]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :box3 {:over? false + :text {:value "Box3" :omit? false :editing? (atom false) :type :text :text "Box3"} + :size {:value "auto" :omit? false :editing? (atom false) :type :auto :px "150px" :ratio "1" :gsb "1 1 0px"} + :align-self {:value :stretch :omit? true :editing? (atom false)} + :height {:value "120px" :omit? true :editing? (atom false) :range [0 400]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :desc [v-box + :children [[:p.info-subheading "The " [:code ":height"] " parameter"] + [:p "Although not specifically a part of the Flexbox spec, it's useful to see how height interacts with it."] + [:p "A specific :height has been set for Box1 and Box2, while Box3 has none, so it's height is being set by the h-box :align :stretch setting."] + [:p.info-subheading "Things to try"] + [:ul + [:li "Turn the Box3 " [:code ":height"] " parameter on and see how it can spill outside the h-box when it has a :height set."] + [:li "Turn the h-box " [:code ":height"] " parameter off then adjust the :height of one or more boxes. Notice how h-box :height is now determined by the height on the maximum box heights."] + ]]]} + + ;; Children + {:hbox {:over? false + :height {:value "100px" :omit? false :editing? (atom false) :range [0 200]} + :width {:value "600px" :omit? false :editing? (atom true) :range [0 1000]} + :justify {:value :start :omit? true :editing? (atom false)} + :align {:value :stretch :omit? true :editing? (atom false)} + :gap {:value "4px" :omit? false :editing? (atom false) :range [0 100]}} + :box1 {:over? false + :text {:value "Box1" :omit? false :editing? (atom true) :type :text :text "Box1"} + :size {:value "100px" :omit? false :editing? (atom false) :type :px :px "100px" :ratio "3" :gsb "1 1 0px"} + :align-self {:value :stretch :omit? true :editing? (atom false)} + :height {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :box2 {:over? false + :text {:value paragraph-filler :omit? false :editing? (atom true) :type :paras :text "Box2"} + :size {:value "auto" :omit? false :editing? (atom false) :type :auto :px "100px" :ratio "2" :gsb "1 1 0px"} + :align-self {:value :stretch :omit? true :editing? (atom false)} + :height {:value "50px" :omit? true :editing? (atom false) :range [0 300]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :box3 {:over? false + :text {:value buttons-filler :omit? false :editing? (atom true) :type :buttons :text "Box3"} + :size {:value "none" :omit? false :editing? (atom false) :type :none :px "100px" :ratio "1" :gsb "1 1 0px"} + :align-self {:value :end :omit? false :editing? (atom false)} + :height {:value "50px" :omit? true :editing? (atom false) :range [0 400]} + :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} + :desc [v-box + :children [[:p.info-subheading "The " [:code ":children"] " & " [:code ":child"] " parameters"] + [:p "The content of an h-box is specified by the " [:code ":children"] " parameter. It's a vector of n components."] + [:p "The content of a box is specified by the " [:code ":child"] " parameter. It is a single component."] + [:p.info-subheading "Things to try"] + [:ul + [:li "Adjust the h-box " [:code ":width"] " parameter to see how Box2 is the only one that shrinks and grows."] + [:li "Turn the h-box " [:code ":height"] " parameter off to see how it automatically expands to show the rest of the content in Box2."] + [:li "Edit the box " [:code ":child"] " parameters to change the content to see how the current layout handles more or less content."] + ]]]} + ]) + +(def box-state (reaction (get demos @current-demo))) (def show-desc? (reagent/atom true)) @@ -266,19 +463,36 @@ :on-change #(swap! box-state assoc-in (conj path :value) %)] [close-button on-close]]]))) -(defn text-editor - "provides an input-text to edit strings in the state atom" +(defn child-editor + "provides several options for the :child parameters, including typing your own text" [path] - (let [model (reaction (get-in @box-state (conj path :value)))] + (let [opts [{:id :text :label "Text"} + {:id :paras :label "Paragraphs"} + {:id :buttons :label "Buttons"}] + model (reaction (get-in @box-state (conj path :type))) + text-model (reaction (get-in @box-state (conj path :text))) + update-model (fn [path item new-model] + (swap! box-state assoc-in (conj path item) new-model) + (swap! box-state assoc-in (conj path :value) (case (get-in @box-state (conj path :type)) + :text @text-model + :paras paragraph-filler + :buttons buttons-filler)))] (fn [path on-close] [h-box :align :center - :children [[input-text - :model model - :change-on-blur? false - :style editor-style - :on-change #(swap! box-state assoc-in (conj path :value) %)] + :children [[horizontal-bar-tabs + :model model + :tabs opts + :style editor-style + :on-change #(update-model path :type %)] + (when (= @model :text) [gap :size "8px" :width "8px"]) + (when (= @model :text) + [input-text + :model text-model + :change-on-blur? false + :style editor-style + :on-change #(update-model path :text %)]) [close-button on-close]]]))) (defn box-size @@ -308,47 +522,64 @@ size-status (reagent/atom nil)] (fn [path on-close] - [h-box - :align :center - :children [[horizontal-bar-tabs - :model model - :tabs opts - :style editor-style - :on-change #(do (update-model path :type %) - (reset! size-status nil))] - (when (contains? #{:px :ratio :gsb} @model) - [gap :size "8px" :width "8px"]) - (when (= @model :px) - [slider - :model px-model - :min 0 - :max 800 - :width "200px" - :style editor-style - :on-change #(update-model path :px (px %))]) - (when (= @model :ratio) - [slider - :model ratio-model - :min 0 - :max 10 - :width "200px" - :style editor-style - :on-change #(update-model path :ratio (str %))]) - (when (= @model :gsb) - [input-text - :model gsb-model - :change-on-blur? false - :status @size-status - :status-icon? true - :status-tooltip "Ignored - please enter 1 or 3 values" - :width "200px" - :style editor-style - :on-change #(let [valid? (contains? #{1 3} (count (string/split (string/trim %) #"\s+")))] - (if valid? - (do (reset! size-status nil) - (update-model path :gsb %)) - (reset! size-status :warning)))]) - [close-button on-close]]]))) + [v-box + :gap "4px" + :children [[h-box + :align :center + :children [[horizontal-bar-tabs + :model model + :tabs opts + :style editor-style + :on-change #(do (update-model path :type %) + (reset! size-status nil))] + (when (contains? #{:px :ratio :gsb} @model) + [gap :size "8px" :width "8px"]) + (when (= @model :px) + [slider + :model px-model + :min 0 + :max 800 + :width "200px" + :style editor-style + :on-change #(update-model path :px (px %))]) + (when (= @model :ratio) + [slider + :model ratio-model + :min 0 + :max 10 + :width "200px" + :style editor-style + :on-change #(update-model path :ratio (str %))]) + (when (= @model :gsb) + [input-text + :model gsb-model + :change-on-blur? false + :status @size-status + :status-icon? true + :status-tooltip "Ignored - please enter 1 or 3 values" + :width "200px" + :style editor-style + :on-change #(let [valid? (contains? #{1 3} (count (string/split (string/trim %) #"\s+")))] + (if valid? + (do (reset! size-status nil) + (update-model path :gsb %)) + (reset! size-status :warning)))]) + [close-button on-close]]] + [:span + {:style {:font-family "Segoe UI, Roboto, sans-serif" + :font-size "10px" + :color "#aaa"}} + "GSB: " (case @model + :inital "0 1 auto" + :auto "1 1 auto" + :none "0 0 auto" + :px (str "0 0 " @px-model "px") + :ratio (str @ratio-model " 1 0px") + :gsb @gsb-model)]]]))) + + + + (defn indent-px [ident] @@ -381,25 +612,29 @@ (cond (nil? val) "-" (keyword? val) (str val) + (vector? val) "[hiccup]" :else (str "\"" val "\"")))) row-active? (and @mouse-over-row? active?) mouse-over-group? (= (nth path 0) (:over-group @box-state)) show-checkbox? (and row-active? (not (contains? (set path) :text))) allow-edit? (and row-active? (not @omit?)) + editing? (if editor (get-in @box-state editing?-path) (reagent/atom false)) arg-hiccup [h-box :width "242px" :style (merge {:overflow "hidden"} + (when @editing? {:background-color "#e8e8e8"}) (when mouse-over-group? {:background-color "#e8e8e8"}) (when row-active? {:background-color "#d8d8d8" :cursor "pointer"}) (when @omit? {:color "#c0c0c0"})) - :attr {:on-mouse-over #(do (println "|" path "|") (mouse-over-fn true)) + :attr {:on-mouse-over #(mouse-over-fn true) :on-mouse-out #(mouse-over-fn false)} :children [[box :size "20px" - :child (if show-checkbox? + :child (if (and editor (not (contains? (set path) :text))) ;show-checkbox? ;; TODO: Cleanup here if we like always showing checkboxes [checkbox :model (not @omit?) + :style {:opacity "0.6"} :on-change #(do (swap! box-state assoc-in (conj path :omit?) (not %)) (swap! box-state assoc-in editing?-path (atom %)))] [:span])] ;; when no checkbox, use a filler @@ -416,31 +651,35 @@ [:span {:style (when allow-edit? {:color "blue"})} arg-val] text2]]]]] (if editor - (let [editing? (get-in @box-state editing?-path)] - [popover-anchor-wrapper - :showing? editing? - :position :right-center - :anchor arg-hiccup - :popover [popover-content-wrapper - :showing? editing? - :position :right-center - :body [editor path #(swap! box-state assoc-in editing?-path (atom false))]]]) + [popover-anchor-wrapper + :showing? editing? + :position :right-center + :anchor arg-hiccup + :popover [popover-content-wrapper + :showing? editing? + :position :right-center + :body [editor path #(swap! box-state assoc-in editing?-path (atom false))]]] arg-hiccup))))) (defn choose-a-demo "choose a demo to show" [] - (let [opts [{:id 0 :label "1"} - {:id 1 :label "2"} - {:id 2 :label "3"} - {:id 3 :label "4"}]] + (let [opts [{:id 0 :label "Basic"} + {:id 1 :label ":justify"} + {:id 2 :label ":align"} + {:id 3 :label ":size"} + {:id 4 :label ":size2"} + {:id 5 :label ":width"} + {:id 6 :label ":height"} + {:id 7 :label ":children"} + ]] (fn [] [h-box :gap "8px" :align :center - :children [[:span "Demos:"] + :children [[:span.bold "Try out a scenario:"] [horizontal-bar-tabs :model current-demo :tabs opts @@ -464,10 +703,10 @@ (defn editable-code "Shows the code in a way that values can be edited, allowing for an interactive demo" [] - (let [over-hbox (fn [over?] (println "hbox" over?) (swap! box-state assoc-in [:hbox :over?] over?) (swap! box-state assoc-in [:over-group] (when over? :hbox))) - over-box1 (fn [over?] (println "box1" over?) (swap! box-state assoc-in [:box1 :over?] over?) (swap! box-state assoc-in [:over-group] (when over? :box1))) - over-box2 (fn [over?] (println "box2" over?) (swap! box-state assoc-in [:box2 :over?] over?) (swap! box-state assoc-in [:over-group] (when over? :box2))) - over-box3 (fn [over?] (println "box3" over?) (swap! box-state assoc-in [:box3 :over?] over?) (swap! box-state assoc-in [:over-group] (when over? :box3)))] + (let [over-hbox (fn [over?] (swap! box-state assoc-in [:hbox :over?] over?) (swap! box-state assoc-in [:over-group] (when over? :hbox))) + over-box1 (fn [over?] (swap! box-state assoc-in [:box1 :over?] over?) (swap! box-state assoc-in [:over-group] (when over? :box1))) + over-box2 (fn [over?] (swap! box-state assoc-in [:box2 :over?] over?) (swap! box-state assoc-in [:over-group] (when over? :box2))) + over-box3 (fn [over?] (swap! box-state assoc-in [:box3 :over?] over?) (swap! box-state assoc-in [:over-group] (when over? :box3)))] (fn [] [h-box :align :start @@ -506,32 +745,32 @@ :border "1px solid lightgray" :border-radius "4px" :padding "8px"} - :children [[code-row false :0 "[h-box" [:hbox] "" over-hbox] + :children [[code-row false :0 "[h-box" [:hbox] "" over-hbox] [code-row true :1 ":height" [:hbox :height] "" over-hbox px-editor] [code-row true :1 ":width" [:hbox :width] "" over-hbox px-editor] [code-row true :1 ":justify" [:hbox :justify] "" over-hbox justify-editor] [code-row true :1 ":align" [:hbox :align] "" over-hbox align-editor] [code-row true :1 ":gap" [:hbox :gap] "" over-hbox px-editor] - [code-row false :1 ":children [" [:hbox] "" over-hbox] + [code-row false :1 ":children [" [:hbox] "" over-hbox] - [code-row false :2 "[box " [:box1] "" over-box1] - [code-row true :3 ":child" [:box1 :text] "" over-box1 text-editor] + [code-row false :2 "[box " [:box1] "" over-box1] + [code-row true :3 ":child" [:box1 :text] "" over-box1 child-editor] [code-row true :3 ":size" [:box1 :size] "" over-box1 size-editor] [code-row true :3 ":align-self" [:box1 :align-self] "" over-box1 align-editor] [code-row true :3 ":height" [:box1 :height] "" over-box1 px-editor] [code-row true :3 ":min-width" [:box1 :min-width] "" over-box1 px-editor] [code-row true :3 ":max-width" [:box1 :max-width] "]" over-box1 px-editor] - [code-row false :2 "[box " [:box2] "" over-box2] - [code-row true :3 ":child" [:box2 :text] "" over-box2 text-editor] + [code-row false :2 "[box " [:box2] "" over-box2] + [code-row true :3 ":child" [:box2 :text] "" over-box2 child-editor] [code-row true :3 ":size" [:box2 :size] "" over-box2 size-editor] [code-row true :3 ":align-self" [:box2 :align-self] "" over-box2 align-editor] [code-row true :3 ":height" [:box2 :height] "" over-box2 px-editor] [code-row true :3 ":min-width" [:box2 :min-width] "" over-box2 px-editor] [code-row true :3 ":max-width" [:box2 :max-width] "]" over-box2 px-editor] - [code-row false :2 "[box " [:box3] "" over-box3] - [code-row true :3 ":child" [:box3 :text] "" over-box3 text-editor] + [code-row false :2 "[box " [:box3] "" over-box3] + [code-row true :3 ":child" [:box3 :text] "" over-box3 child-editor] [code-row true :3 ":size" [:box3 :size] "" over-box3 size-editor] [code-row true :3 ":align-self" [:box3 :align-self] "" over-box3 align-editor] [code-row true :3 ":height" [:box3 :height] "" over-box3 px-editor] @@ -558,16 +797,21 @@ :children [[title2 "Notes"] [status-text "Stable"] [p "h-box is a container which lays out its " [:code ":children"] " in a single horizontal row."] - [p "The " [:span.bold "Layout"] " page (look LHS) describes the importance of " [:span.bold ":size"] ". The actual layout is a function of the " [:code ":size"] " of the container and the " [:code ":size"] " provided for each of the children."] + [p "The " + [hyperlink-href + :label [:span.bold "Layout"] + :href "#/layout"] + " page describes the importance of " [:span.bold ":size"] ". The actual layout is a function of the " [:code ":size"] " of the container and the " [:code ":size"] " provided for each of the children."] [p [:strong "Todo: Nestability with v-box"]] [args-table h-box-args-desc]]] [v-box :gap "10px" - :width "500px" + :width "650px" :height "800px" ;:style {:border "dashed 1px #ddd"} :children [[title2 "Demo"] - [p "In this interactive demo, you can edit the hiccup in the grey box to see the effects on the h-box and three children in the red border."] + [p "In this interactive demo, start by selecting a scenario. Then you can edit the hiccup in the grey box to see the + effects on the [h-box] (dashed red border) and it's three [box] children (pink filled)."] [choose-a-demo] [gap :size "0px"] [demo] diff --git a/src/re_demo/selection_list.cljs b/src/re_demo/selection_list.cljs index 310916ea..03a5b45d 100644 --- a/src/re_demo/selection_list.cljs +++ b/src/re_demo/selection_list.cljs @@ -65,7 +65,7 @@ :multi-select? multi-select? :disabled? disabled? :required? required? - :on-change #(reset! selections %)]]] + :on-change #(do (println "selections: '" % "'") (reset! selections %))]]] multi-select? disabled? required? From fd6ae87d7521d3a358d83053a3709c4663d476ab Mon Sep 17 00:00:00 2001 From: Gregg8 Date: Wed, 29 Apr 2015 20:40:58 +1000 Subject: [PATCH 7/7] Version 0.5.3 - In addition to all the other changes mentioned in commits since 0.5.2... - h-box demo: - Rearranged the elements in the demo section to add clarity - Refined the dark-themed description popovers in all the sub-demos. - Added an image with arrows and text for the h-box demo. - Fixed an h-box/v-box :gap issue where for example, an h-box with :gaps directly within another h-box will cause their parent container to incorrectly size itself. --- project.clj | 2 +- .../public/demo/h-box-demo-words.png | Bin 0 -> 6560 bytes src/re_com/box.cljs | 8 +- src/re_demo/h_box.cljs | 125 +++++++++--------- 4 files changed, 69 insertions(+), 66 deletions(-) create mode 100644 run/resources/public/demo/h-box-demo-words.png diff --git a/project.clj b/project.clj index 47c2c6df..1e00c29c 100644 --- a/project.clj +++ b/project.clj @@ -32,7 +32,7 @@ ;; --------------------------------------------------------------------------------------- -(defproject re-com "0.5.2" +(defproject re-com "0.5.3" :description "Reusable UI components for Reagent" :url "https://github.com/Day8/re-com.git" :license {:name "MIT"} diff --git a/run/resources/public/demo/h-box-demo-words.png b/run/resources/public/demo/h-box-demo-words.png new file mode 100644 index 0000000000000000000000000000000000000000..7272e67a28b5821c9d06b1319eae20e4137e6dcb GIT binary patch literal 6560 zcmeHMXH-*5yGA{Lii-M)fC>njb3mGfqEr=83zgRHS_HK z_lvIQwr<|DSwTTz>v^X$?g|R)eB_0-QAv*MJZds7zbVI_zu>6M{7q|<>Bcahij8t; z(+ww|7zKrG?|+qb6xa)>9Q-Z#)P++D3ia74l52_z3Yw{LUPDy3MR^!y)_9%5cgtH#{7+MG1&U->U+8uZ{tMt^(Yf$KJhn&1E2M!$T z<1`GKgU}+6IL|n#*rS+CT{r>GW_r-7l6i(Z{y#6D>ya?niA(oB_LcY(larE? zkZ|Erp?7n0Hp3n%UHV?O(vX3zv$v8&OXog!bv3{SxMa}}mVjbspU8IBDG3i=vhpTu zJl=zez@aJ7l6~Cv!OZKD#|}1_V5QA<2$-P*hA_G43eOcEguJ zef+6>lh<{1OrnjoI4YF7kSHSob{GAVyoB4^#lty=|8t03c4st^z0*&$3bpnG@`cN+ zWS3CvruRXs91hRgo5g}HY<$$MOUKs7=Nsd|_J$mfQ!`9|B zar(Ch1QiogQ*u|=D=v|DpD1mUsGb(lb1_9RC}E8A;2*}S9M*k=BpiT@LFQu9A~Qcaj+67=c|h!G(ReVb6++;Y^I043m+bi8Ibw3$7~i?l|<+D<~EgkizjX0Cp_CjvIvB67+$isqkD1`r0n9=^}vj z(n)41#WJ=v3oY>njC#*-D8?ac>}r7ZbN^95;T8i(_Fmo_GpRlK&6|WaH>!nU0P{5X z(0ARw`NYVa^4xIRZcu}oWyJ@01W^@oEuhnK<>tr`rOy-RpgLk4f^9bfSXcPxg|jDp zNyQ{{f^ads`Ci`jnNI>|LpmQh9(Utaa%xdBD!@&pFnSODYp{B3VC~q^n4mfgIKtRg z)2|lDzY0KBK~=gUIxsytG4`-?;q*gv$YrX9BOwvAb`jT=;E!x>-$zjCTo~OWisESS zsb}-TbHKstbCcu4soOLKx#$vy>Ct@v>$sNt-Qi*=CBFu9-;h4Mwl+a;2qrTtp_P$4 zw%ERnfpn6;VJ>JUK0Ta>3Q+C7kCwcrZye(`%wJ{v+yGGxwlSIweM1Mr!|7Ipt1aWb z%;Ez>L=}&Dg}z!)L@s+(5RVyj>i3)VADO#`vg6mZQ0 zkSc1*a41);iYxqF>6B-AoKJ{v-#5AUXm33?49SEsqoa7!)4U!XcwRWO{DbqTy7;i{ z8-{bp4?yrowAQ-mB;Kg<2omRphfHY`cmq7i>+DG_#bfXifi65a_I}gyX41oKt`*^W zcS;>68uG>DR?lqAQ%p~n7u5v&5fjaBj<-pm;!t|d>6ob>X+{RX{G0>0=lVXbSsyXa zpeIiJi};ATgwywV_*UO1x7z7yt`X4d;9=lyfZ6e@zB6leluX^^HSl1WlwnCzFTq#3fm)Nv!g*yOcjR&;u4bvU%Zo;n49WF4{(hMo45ZpW z%lB&KYb|oQ{mh1@V^b&MvkjAvKtjk9wL2qV9eJ`hW-W#<_+b&r8%~iNAG?*+8q*C1 z_m^bd#viim6wQ6+4f855P#5;Ruf>cNeCfeP1p)j-XVXxmslmh@_+=@; z8s3`M*(44dsqDKqfDBoSr_E!57IHnAy0l^)hsuYTDW`BOTS{rr(wUt$p)V-Lk7FXd zR=|MKU30P!w>5N`LwNx7cXX!nBDM8X{l^%+SS zFXg9kSS1R|!lu^Mea8t>Ek2ldQa~AFK&uCO}#%I!J&* za&yp?Ep%`{uXssl2HkTaHKVM*`Y>3Td?sH*{lE>g0;9z;tdn>C8@0k`(AlC12iIuz zmqh^6N?`uAWBzA;cceapI<7B+Uc%|6{4WdIk(&P7*}t0S8l4OT?%w|Zqqy-oblrLb zpPMKDs{W<3Ykt_ln9sYcjFV*z=V&# zz{|L*(`b9s%*HNF2$(Z@A5y@6Soy;gNy za?Wa_*P+hFVPE}8fl~fraFdD~HQgz1i*cqqHGkWkxZFjZWlDLp8=z?0i(wN7fT7+s zP0*hCV_S+VKt!Nl5suK{NQz0L$(IMdRIhm#L!?Q<62RFP8yVKvP+N`_2a`OY0Lubi1Ry4~np8k^rPD&B0} z*8_e9>f>;#&Y7C_kuiflg~FUF0aMmaLJ509uO)gQZ77(4BIYoNke2vK z5LJ40u)Ur+oqa(ZL9=W|_#?jp;lfL}!RYE`LSm@;B{!-aP~EATo7a!jgfUY4pKQaE zD&Oh3Dq5$uB_S3+|J#t_u|<>qv$^cXee;sqVuqvH2T}N)K5LWE1YaxAwM~|FC-`4U zq@;MB_rf`Vp#jB;TvZ9*!KrF_p=(Ij$-e=h*Po*Tt^bX;I8Q{)Zf+=lG8f0bgd6Cs z@8!xC30xV-b}ugzqBtMw?y5{$%~&L!*DZ40mRY%5xB+eLep4+B<@s z-}kBc>?Op2cQm@ghKC5aQdtFEOI#MH79`glnVy&=C&t9Y@UAg|N8v6Gl@0|o4kgQ= zt74pBa->Vrip*S2j{hD;7=;3zsCvTDh%kS81 zFoKE?{!<)WXvpHfJI+H8yE@ax6tP$=b4tZuOvG;9f4v(`KE^CCsPO=GHkxbs))m@w zr@AuMy0EGIN6yKymgAsn-JG2Uw#hRqbH24e0HIH^P-yCBUl^rnJ+$;XkD-`w)A;N6 zq|wItZ}Q_7Sj7u*#RhfIpvDL+{!n2DV1$I)g_ZvxB z5VI0XI>Iw{01qN&R`%dgt|d%^k}KrZ7@8M^c8>os&?pq4@A5|EsNs(zpBINT)QqfY ze}9)s$_wtk<>mX7Vc0Rm;`qPp%nhf^Thx7SQas9fq=OF?WmJR}yJ&%sRO#nGssZ&cm4LjfDA;5kht7ro!_K82&Wx|&rFpbo|sdg(5&6ga*f1Nv^Y>8EOJLc3hQo2l5P;K)RW3x)k)y+{SXlen%OpU~!&_{&SsJUgO z8jn+ez2?)U<@Htil&sn9audIi!YL@gSqG6Z##*J>Ms(jUhif-^U3GXKpiL0}n=?Uu z`pvzFVu`6>-!V^Wq#Fc4Xv2(|j8wZQvrR7I&avB2!y|(7!q03FPUzC(omQ{I^ql$Il}UFOma`;f44&PA3|pO1 z|9=FWQH%Fz^ z{kW6|T`TKZ&PLF7ussf`zoKG~bQcRtgVv(s9MRgvDf;BRUCr_Q3 ztEl@^m9GVB>YCs6-0z@#FZ_F&hv|!ee0*dd4f6dBiPqjJxcdux6_AI>MC3A6X7{ zgdS+>n!8-S;aZ3Dc0YmbcKHV7MF~YaJRVRt8;A9z%iC84|UJ zRUfYR<65k~TH!S7=?y#2jquROTWL-_j8&k#o-yN5E^V0If0-jR)XM`AGF_=6ZRKR3 z`tOadv!VzN!bndIM0n&%edSL!elo!G`44iQk>2C{>l5az5;HrjFL=kxTt-JM@C!jD zNq_7cfsfk#5cm@8QdxmcIo(QcM&tCzKZi`pK{@cP&#hz1k$qo^oAq!ve?hG%hIcF7cb$I^B2Nila}VIcs@$ZVeP+dKS$NR$cQ!`gISE-!}CXOY5@6f zf!;T3WXwQL)Vd?N?36%O_c$X^L2mE0M?_EP@OD`vsa;SPmc8{+38rR0N81TIY}KIP zTJqn`2YlTC0yn!}QT*q`ias6al`2}1NF-hCD-Cs_*(#5)m>Ou)l<3L?ik?ih(Qsm}mKR{)>6V>EH;u?D}mP}t!GjF17=ysrbeL>N%gKxf>8PGosls6%$cF8h{ z^w+4RP(x>dp}xP6hy8bz`QQPT{VBMKqWG(4eq_`L>hbrv638ET=tQjk|FBf_R3~pl zxgp8-YujGen;7uTtipKvm$oKXlY#JcUI1}KDRk^#3{O}ue{jvexLl(rCIEuMyjUGI zHtp(vW6yuWU;mr?ui3CuY>|AnAUHS}+p-d|k*)>-WQS$zXvp8xWvj5KH*yw=yc{Jt znAAzRGWzH`+D(iU#EIH4X+YoH8QD|2nXhb_nKJntYN**@9%i^ZOD^_7t&cc0l}b0N zmq)AE%LM)TIwxxVpaDJIOHnkQRWkw$%ib}Pjj5@Ig<0g?;4H2aU&7_ZMf5PzQwN_y z)t|2Lj^VFQnCa6Mohttf1c(DUN7gN0#Hl=R{S2%OZ6c|)ZzW8e(Wj^W`Hwz-dj?g1 rMlWcRKhlwEl6EU~5cFwn!|~v6gsF&*L-JoK3g;bN&(xm2dh5Rcav7n& literal 0 HcmV?d00001 diff --git a/src/re_com/box.cljs b/src/re_com/box.cljs index 5b940365..5561446a 100644 --- a/src/re_com/box.cljs +++ b/src/re_com/box.cljs @@ -254,7 +254,9 @@ (when padding {:padding padding}) (when debug {:background-color "gold"}) style) - gap-form (when gap [re-com.box/gap :size gap]) + gap-form (when gap [re-com.box/gap + :size gap + :width gap]) ;; required to get around a Chrome bug children (if gap (interpose gap-form (filter identity children)) ;; filter is to remove possible nils so we don't add unwanted gaps children)] @@ -312,7 +314,9 @@ (when padding {:padding padding}) (when debug {:background-color "antiquewhite"}) style) - gap-form (when gap [re-com.box/gap :size gap]) + gap-form (when gap [re-com.box/gap + :size gap + :height gap]) ;; required to get around a Chrome bug children (if gap (interpose gap-form (filter identity children)) ;; filter is to remove possible nils so we don't add unwanted gaps children)] diff --git a/src/re_demo/h_box.cljs b/src/re_demo/h_box.cljs index 380e8285..906c296e 100644 --- a/src/re_demo/h_box.cljs +++ b/src/re_demo/h_box.cljs @@ -20,7 +20,7 @@ {:background-color "#fff4f4" :border "1px solid lightgray" :border-radius "4px" - :padding "4px" + :padding "0px" :overflow "hidden"})) (def over-style {:background-color "#fcc"}) @@ -115,13 +115,16 @@ :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} :desc [v-box :children [[:p.info-subheading "The " [:code ":justify"] " parameter"] - [:p "Specifies how children are arranged horizontally (along the \"main axis\" in flexbox terms)."] - [:p [:strong "Note: "] "There is a bug in Chrome. When switching from :between to :around (or visa versa), the change is not shown. To get around this, select a different option beforehand."] + [:p "Specifies how children (the three boxes) are arranged horizontally."] [:p.info-subheading "Things to try"] [:ul - [:li "Select the different " [:code ":justify"] " options to see their effect on the layout."] - [:li "When in :around mode, turn the " [:code ":gap"] " parameter on using it's checkbox. Notice that although the gaps are invisible, being children themselves, space is also added around them."] - ]]]} + [:li "Select different " [:code ":justify"] " values and notice how the children are repositioned."] + [:li "Untick " [:code ":justify"] ". When not specified, the default value is :start."]] + [:p [:code ":justify"] " is the analog of " [hyperlink-href + :label "Flexbox justify-content style" + :href "https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content" + :target "_blank"] "."] + [:p [:strong "Note: "] "There is a bug in Chrome. When switching from :between to :around (or visa versa), the change is not shown. To get around this, select a different value beforehand."]]]} ;; Align {:hbox {:over? false @@ -153,14 +156,17 @@ :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} :desc [v-box :children [[:p.info-subheading "The " [:code ":align"] " & " [:code ":align-self"] " parameters"] - [:p [:code ":align"] " specifies how children are arranged vertically (along the \"cross axis\" in flexbox terms)."] - [:p [:code ":align-self"] " is used by individual children to override the :align value specified by their parent."] + [:p [:code ":align"] " specifies how children are arranged vertically."] + [:p [:code ":align-self"] " is used on individual children to override the :align value specified by their parent."] [:p.info-subheading "Things to try"] [:ul - [:li "Select different " [:code ":align"] " values for the h-box and notice how this only affects Box1, since the other boxes are both overriding this setting."] - [:li "Change the " [:code ":align-self"] " values for Box2 and Box3 to see them adjust their vertical layout."] - [:li "Adjust the h-box " [:code ":height"] " parameter to see the boxes sticking to the specified alignment."] - ]]]} + [:li "Select different " [:code ":align"] " values for the h-box and notice how this only affects Box1 because both other boxes have an overriding :align-self setting."] + [:li "Change the " [:code ":align-self"] " values for Box2 and Box3 to see them adjust their vertical position."] + [:li "Adjust the h-box " [:code ":height"] " and notice boxes 2 and 3 sticking to their specified alignment."]] + [:p [:code ":align"] " is the analog of " [hyperlink-href + :label "Flexbox align-items style" + :href "https://developer.mozilla.org/en-US/docs/Web/CSS/align-items" + :target "_blank"] "."]]]} ;; Size {:hbox {:over? false @@ -192,16 +198,25 @@ :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} :desc [v-box :children [[:p.info-subheading "The " [:code ":size"] " parameter"] - [:p "The " [:strong "h-box"] " container has a specific width and height with a gap of 4px, meaning 4px space will be placed between each child. The " [:code ":justify"] " and " [:code ":align"] " parameters are left to their defaults, meaning the boxes will be stretched from top to bottom (unless individually overridden)."] - [:p [:strong "Box1"] " has a " [:code ":size"] " of \"none\" which means it will take up as much space as it's content, in this case, the text \"Box1\"."] - [:p [:strong "Box2"] " has a specific 100 pixel " [:code ":size"] " so that's exactly how much space (width in the case on an h-box) it will take up."] - [:p [:strong "Box3"] " has a " [:code ":size"] " of \"1\" which defines how much empty space within the container to consume. It's greedy so it takes everything that's left. Because there are no other siblings with a 'ratio' :size, it will always take up all available space so you could put any ratio value here and you'll get the same result."] + [p "The " + [hyperlink-href + :label [:span "Layout page"] + :href "#/layout" + :target "_blank"] + " describes the importance of " [:code ":size"] "."] + [:p [:strong "Box1"] " has a " [:code ":size"] " of \"none\" which means it will take up as much width as its content, in this case, the text \"Box1\"."] + [:p [:strong "Box2"] " has a fixed 100 pixel " [:code ":size"] ". Width in the case on an h-box."] + [:p [:strong "Box3"] " has a " [:code ":size"] " of \"1\" which means it will greedily take as much width as it can."] [:p.info-subheading "Things to try"] [:ul - [:li "Adjust the h-box " [:code ":width"] " parameter and notice that only Box3 resizes as the other two boxes have specific sizes that will not change. Box3 takes up all extra available space and squeezes down to nothing as the h-box width is reduced further."] - [:li "Set the Box2 " [:code ":size"] " to a :ratio value of \"2\" and notice how it will always take up double the width of Box3 as you adjust the h-box " [:code ":width"] " parameter."] - [:li "Set the Box2 " [:code ":size"] " to a :gsb value of \"0 0 80%\". As you adjust the h-box " [:code ":width"] " parameter, you will see that Box2 maintains 80% of the width of the h-box. Because we are not allowing growing or shrinking, Box3 will eventually be squeezed down to nothing and Box2 will ultimately extend outsize the bounds of the h-box, but will always be sized to 80% of the h-box. Does that make any sense?"] - ]]]} + [:li "Adjust the h-box " [:code ":width"] " and notice how Box1 and Box2 don't change in width, and Box3 greedily takes any excess space and squeezes down to nothing as the h-box width is reduced further."] + [:li "Set the Box2 " [:code ":size"] " to a ratio value of \"2\" and notice how it will always take up double the width of Box3 (ratio \"1\") as you adjust the h-box " [:code ":width"] "."] + [:li "Set the Box2 " [:code ":size"] " to a gsb value of \"0 0 80%\". Its width is fixed to 80% of its parent h-box, with no growing or shrinking. Box1 and Box2 now have fixed widths. Box3 can grow and shrink. See this in action as you adjust the h-box " [:code ":width"] "."] + ] + [:p [:code ":size"] " is the analog of " [hyperlink-href + :label "Flexbox flex style" + :href "https://developer.mozilla.org/en-US/docs/Web/CSS/flex" + :target "_blank"] "."]]]} ;; Size2 {:hbox {:over? false @@ -235,13 +250,13 @@ :children [[:p.info-subheading "The " [:code ":size"] " parameter - Advanced GSB"] [:p "This demonstrates a complex example of gsb."] [:p [:strong "Box1"] " has a " [:code ":size"] " fixed to \"100px\"."] - [:p [:strong "Box2"] " has a gsb of \"5 1 200px\" so it's natural width is 200px and when it grows, it will do so with a ratio of 5, compared with other growable siblings. When it shrinks, it will do so at a ratio of 1, compared with other shrinkable siblings."] - [:p [:strong "Box3"] " has a gsb of \"1 3 200px\" so it's natural width is also 200px and when it grows, it will do so with a ratio of 1. When it shrinks, it will do so at a ratio of 3."] + [:p [:strong "Box2"] " has a gsb of \"5 1 200px\" so its natural width is 200px and when it grows, it will do so with a ratio of 5, compared with other growable siblings. When it shrinks, it will do so at a ratio of 1, compared with other shrinkable siblings."] + [:p [:strong "Box3"] " has a gsb of \"1 3 200px\" so its natural width is also 200px and when it grows, it will do so with a ratio of 1. When it shrinks, it will do so at a ratio of 3."] [:p "Notice that the width of the h-box is initially set to 500px. Box1 (100px) + Box2 (200px basis) + Box3 (200px basis) = 500px so this width is the point of equilibrium. There is no shrinking or growing required so we see that Box2 and Box3 have exactly the same width of 200px."] [:p.info-subheading "Things to try"] [:ul - [:li "Grow the " [:code ":width"] " from the initial 500px. The extra space (excluding the initial 200px for Box2 and Box3) will be distributed between Box2 and Box3 in a ratio of 5 to 1, so Box2 will grow faster than Box3."] - [:li "Shrink the " [:code ":width"] " from the initial 500px. The space to be removed from Box2 and Box3 will be removed in a ratio of 1 to 3, so Box3 will shrink faster than Box2 until it reaches 0px. Box2 will then continue to reduce until it too gets to 0px. Phew! TODO: Visibly, the ratio of Box3 to Box2 isn't maintained at 3 to 1, so some more pondering required."] + [:li "Increase the h-box " [:code ":width"] " from the initial 500px. The extra space (excluding the initial 200px for Box2 and Box3) will be distributed between Box2 and Box3 in a ratio of 5 to 1, so Box2 will grow faster than Box3."] + [:li "Decrease the h-box " [:code ":width"] " from the initial 500px. The space to be removed from Box2 and Box3 will be removed in a ratio of 1 to 3, so Box3 will shrink faster than Box2 until it reaches 0px. Box2 will then continue to reduce until it too gets to 0px."] ]]]} ;; Width @@ -270,17 +285,17 @@ :size {:value "auto" :omit? false :editing? (atom false) :type :auto :px "150px" :ratio "1" :gsb "1 1 0px"} :align-self {:value :stretch :omit? true :editing? (atom false)} :height {:value "50px" :omit? true :editing? (atom false) :range [0 400]} - :min-width {:value "100px" :omit? true :editing? (atom false) :range [0 200]} - :max-width {:value "200px" :omit? false :editing? (atom true) :range [0 200]}} + :min-width {:value "25px" :omit? true :editing? (atom false) :range [0 200]} + :max-width {:value "75px" :omit? false :editing? (atom true) :range [0 200]}} :desc [v-box :children [[:p.info-subheading "The " [:code ":width"] " & " [:code ":min/max-width"] " parameters"] - [:p "Although not specifically a part of the Flexbox spec, it's useful to see how the various width parameters interact with it."] - [:p "All three boxes have size set to auto so they can grow and shrink as required."] + [:p "It's interesting to see how child :min-width and :max-width parameters affect layout."] + [:p "All three boxes have " [:code ":size"] " set to :auto so they can grow and shrink as required."] [:p "Box1 has no width restrictions, Box2 has a :min-width and Box3 has a :max-width."] [:p.info-subheading "Things to try"] [:ul - [:li "Decrease the h-box " [:code ":width"] " and notice how Box2 shrinks only until it reaches the minimum of 100px (or whatever you may have changed it to)."] - [:li "Increase the h-box " [:code ":width"] " and notice how Box3 grows only until it reaches the maximum of 200px (or whatever you may have changed it to)."] + [:li "Decrease the h-box " [:code ":width"] " and notice how Box2 shrinks only until it reaches the minimum of 100px."] + [:li "Increase the h-box " [:code ":width"] " and notice how Box3 grows only until it reaches the maximum of 75px."] [:li "Turn on " [:code ":min-width"] " for Box3 and while adjusting the h-box " [:code ":width"] ", notice how Box3 grows & shrinks only between the min and max values."] ]]]} @@ -309,17 +324,17 @@ :text {:value "Box3" :omit? false :editing? (atom false) :type :text :text "Box3"} :size {:value "auto" :omit? false :editing? (atom false) :type :auto :px "150px" :ratio "1" :gsb "1 1 0px"} :align-self {:value :stretch :omit? true :editing? (atom false)} - :height {:value "120px" :omit? true :editing? (atom false) :range [0 400]} + :height {:value "110px" :omit? true :editing? (atom false) :range [0 400]} :min-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]} :max-width {:value "50px" :omit? true :editing? (atom false) :range [0 200]}} :desc [v-box :children [[:p.info-subheading "The " [:code ":height"] " parameter"] - [:p "Although not specifically a part of the Flexbox spec, it's useful to see how height interacts with it."] - [:p "A specific :height has been set for Box1 and Box2, while Box3 has none, so it's height is being set by the h-box :align :stretch setting."] + [:p "It's interesting to see how the child :height parameter affects layout."] + [:p "A specific :height has been set for Box1 and Box2, while Box3 has none, so its height is being set by the h-box :align :stretch setting."] [:p.info-subheading "Things to try"] [:ul - [:li "Turn the Box3 " [:code ":height"] " parameter on and see how it can spill outside the h-box when it has a :height set."] - [:li "Turn the h-box " [:code ":height"] " parameter off then adjust the :height of one or more boxes. Notice how h-box :height is now determined by the height on the maximum box heights."] + [:li "Turn on the Box3 " [:code ":height"] " parameter and see how it can spill outside the h-box when it has a :height set."] + [:li "Turn off the h-box " [:code ":height"] " parameter then adjust the :height of one or more boxes. Notice how h-box :height is now determined by the height on the maximum box heights."] ]]]} ;; Children @@ -357,7 +372,7 @@ [:p.info-subheading "Things to try"] [:ul [:li "Adjust the h-box " [:code ":width"] " parameter to see how Box2 is the only one that shrinks and grows."] - [:li "Turn the h-box " [:code ":height"] " parameter off to see how it automatically expands to show the rest of the content in Box2."] + [:li "Turn off the h-box " [:code ":height"] " parameter to see how it automatically expands to show the rest of the content in Box2."] [:li "Edit the box " [:code ":child"] " parameters to change the content to see how the current layout handles more or less content."] ]]]} ]) @@ -679,7 +694,7 @@ [h-box :gap "8px" :align :center - :children [[:span.bold "Try out a scenario:"] + :children [[:span.bold "Show me:"] [horizontal-bar-tabs :model current-demo :tabs opts @@ -711,24 +726,6 @@ [h-box :align :start :children [(when (:desc @box-state) - #_[popover-anchor-wrapper ;; TODO: REMOVE - :showing? show-desc? - :position :right-below - :anchor [:div {:style {:height "60px"}}] ;; Position the popover down the page a little - :popover [popover-content-wrapper - :showing? show-desc? - :position :right-below - :width "460px" - - ;:tooltip-style? true - ;:popover-color "#333333" - ;:padding "3px 8px" - ;:arrow-length 6 - ;:arrow-width 12 - - :title "Demo Description" - :close-button? true - :body (:desc @box-state)]] [popover-tooltip :showing? show-desc? :position :left-below @@ -775,7 +772,11 @@ [code-row true :3 ":align-self" [:box3 :align-self] "" over-box3 align-editor] [code-row true :3 ":height" [:box3 :height] "" over-box3 px-editor] [code-row true :3 ":min-width" [:box3 :min-width] "" over-box3 px-editor] - [code-row true :3 ":max-width" [:box3 :max-width] "]]" over-box3 px-editor]]]]]))) + [code-row true :3 ":max-width" [:box3 :max-width] "]]" over-box3 px-editor]]] + (when (= @current-demo 0) + [:img {:src "demo/h-box-demo-words.png" + :style {:flex "none" + :margin-left "20px"}}])]]))) (defn panel @@ -799,10 +800,9 @@ [p "h-box is a container which lays out its " [:code ":children"] " in a single horizontal row."] [p "The " [hyperlink-href - :label [:span.bold "Layout"] + :label [:span.bold "Layout page"] :href "#/layout"] - " page describes the importance of " [:span.bold ":size"] ". The actual layout is a function of the " [:code ":size"] " of the container and the " [:code ":size"] " provided for each of the children."] - [p [:strong "Todo: Nestability with v-box"]] + " describes the importance of " [:span.bold ":size"] "."] [args-table h-box-args-desc]]] [v-box :gap "10px" @@ -810,10 +810,9 @@ :height "800px" ;:style {:border "dashed 1px #ddd"} :children [[title2 "Demo"] - [p "In this interactive demo, start by selecting a scenario. Then you can edit the hiccup in the grey box to see the - effects on the [h-box] (dashed red border) and it's three [box] children (pink filled)."] - [choose-a-demo] + [editable-code] [gap :size "0px"] [demo] [gap :size "0px"] - [editable-code]]]]]]])) + [choose-a-demo] + ]]]]]]))