We've found the following gravatar image associated with your e-mail address.
+Is it okay to use this photo?
+
- )
-
-(defcard-rg
- [image])
-
-(defcard-doc
- (mkdn-pprint-source image)
- "
-As you can see, `:soda` is added to the normal attribute map. The
-resulting class is `ui small image`. This is because the base class
-for the `s/image` element is `ui small` and the `{:size :small}` soda
-adds the `small` class.
-
-# How does the attribute map work with `:soda`?
-
-Continuing with the image example above, `:src` or any other normal
-attribute is defined *alongside* `:soda` and not inside `:soda`'s
-hash-map. For example, the following **does not** work.
- ")
-
-(defn image-bad []
- [s/image {:soda {:size :small
- :src "images/wireframe/image.png" ;; <-- attention (don't do this)
- }}])
-
-(defcard-doc
- (mkdn-pprint-source image-bad)
- "
-This will not render. Instead, soda-ash will throw an error letting
-you know the key-value pair that isn't accepted. If you open up the
-browser's console, you will see the following error message.
-
-```
-Uncaught Error: Soda-ash :src images/wireframe/image.png doesn't exist for image element
-```
- ")
-
-
-(defcard-doc
- "
-# If `:soda` replaces `:class`, how do I add my own class?
-
-Soda-ash gives you an escape hatch to add your own class, with `:add-class`.
-")
-
-
-(defn image-add-class []
- [s/image {:soda {:size :small
- :add-class "gadfly"} ;; <-- attention
- :src "images/wireframe/image.png"}]
-
- ;;
- )
-
-(defcard-doc
- (mkdn-pprint-source image-add-class))
-
-
-(defcard-doc
- "
-# How do I make soda-ash reactive?
-
-By default, soda-ash is **not** reactive. The `:soda`
-hash-map replaces `:class` when the component *mounts*, and will
-**not** update on render.
-
-To make soda-ash reactive, you need to add `:ratom` and `:path` to your `:soda`.
-")
-
-(defonce app-state (reagent/atom {}))
-
-(defn image-reactive []
- [s/image {:soda {:ratom app-state ;; <-- attention
- :path :foo ;; <-- attention
- :size :small}
- :src "images/wireframe/image.png"}])
-
-(defn wrap-element [ratom element]
- [:div
- (if (vector? element) element [element])
- [:div [:strong "app-state"]]
- (edn/html-edn @ratom)])
-
-(defcard-doc
- (mkdn-pprint-source app-state)
- (mkdn-pprint-source image-reactive))
-
-(defcard-rg
- [wrap-element app-state
- [image-reactive]])
-
-(defn size->tiny []
- [s/button {:on-click #(swap! app-state assoc-in [:foo :soda :size] :tiny)}
- "tiny"])
-
-(defn size->small []
- [s/button {:on-click #(swap! app-state assoc-in [:foo :soda :size] :small)}
- "Small"])
-
-(defcard-doc
- "
-As you can see, your `:soda` is added to your `:ratom` (i.e.,
-`app-state`) at the specified `:path` (i.e., `:foo`). Now your element
-is reactive! If you `swap!` your `:soda` in the ratom, the element's
-class will update.
-"
- (mkdn-pprint-source size->tiny)
- (mkdn-pprint-source size->small))
-
-(defcard-rg
- [wrap-element app-state
- [:div
- [image-reactive]
- [:br]
- [size->tiny]
- [size->small]]])
-
-
-(defcard-doc
- "
-# How do I read the docs?
-
-Let's look at a subset of the docs for the `image` element:
-
----
-# image
-
-* **base class** ui image
-* **default tag** :img
-* **:state** :hidden | :disabled
-* **variations**
- :rounded? | :size |
-
-where
-
-* **:size** :mini | :tiny | :small | :medium | :large | :big | :huge | :massive
-
----
-
-* The **base class** let's you know what the class will be if you
-don't pass in any `:soda` to the attribute map.
-* Every element has a tag. You can set this by passing `:tag` to your
- `:soda` (i.e., `{:soda {:tag :div}}`). However, if`:tag` is not set,
- then it will revert to the **default tag**.
-* Many elements can have `:state`. For example `{:soda {:state :disabled}}`.
-* Most elements have variations. For example, an image can be rounded
- and vary in size `{:soda {:rounded? true :size :massive}}`
-
-# What is `h/fake-content` in the docs?
-
-A lot of elements need some content to look as intended ... so
-`h/fake-content` is just some lorem ipsum.
-
-```
-(defn fake-content []
- [:div
- \"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.\"])
-```
-
-# Do I always have to pass in an attribute map?
-
-For the time being ... yes. :(
-
-```
-[s/button {} ;; <-- note the empty attribute map
- \"This works\"]
-```
-
-```
-[s/button ;; <-- not the lack of attribute map
- \"This doesn't work\"]
-```
- ")
diff --git a/src/devcards/soda_ash/an_overview_card.cljs b/src/devcards/soda_ash/an_overview_card.cljs
deleted file mode 100644
index ed8e88e..0000000
--- a/src/devcards/soda_ash/an_overview_card.cljs
+++ /dev/null
@@ -1,189 +0,0 @@
-(ns soda-ash.an-overview-card
- (:require-macros [devcards.core :refer [defcard-doc
- defcard-rg
- mkdn-pprint-source]])
- (:require [devcards.core]
- [devcards.util.edn-renderer :as edn]
- [reagent.core :as reagent]
- [soda-ash.element :as s]))
-
-
-
-;; avatar example
-
-
-(defn avatar-no-soda []
- [:a.ui.basic.teal.label
- [:img.ui.right.spaced.avatar.image
- {:src "images/avatar/small/elliot.jpg"}
- "Elliot"]])
-
-(defn avatar-with-soda []
- [s/label {:soda {:tag :a
- :basic? true
- :color :teal}}
- [s/image {:soda {:spaced :right
- :avatar? true}
- :src "images/avatar/small/elliot.jpg"}]
- "Elliot"])
-
-
-
-;; dynamic example
-
-
-(defn wrap-element [ratom element]
- [:div
- (if (vector? element) element [element])
- [:div [:strong "Element State"]]
- (edn/html-edn @ratom)])
-
-(defonce app-state (reagent/atom {}))
-
-(defn option-btn [k v]
- (let [current-v (get-in @app-state [:foo :bar :soda k])]
- [:button {:on-click #(swap! app-state assoc-in [:foo :bar :soda k] v)
- :style {:background-color (when (= current-v v)
- "grey")}}
- (name v)]))
-
-(def colors
- [:red :orange :yellow :olive
- :green :teal :blue :violet
- :purple :pink :brown :grey
- :black])
-
-(def sizes
- [:mini :tiny :small :large
- :big :huge :massive])
-
-(def icons
- [:area-chart :bar-chart :camera-retro
- :newspaper :film :line-chart
- :photo :pie-chart :sound])
-
-(defn icon []
- [s/icon {:soda {:ratom app-state
- :path [:foo :bar]
- :icon :sound
- :color :violet
- :size :large}}])
-
-
-
-;; docs
-
-
-(defcard-doc
- "
-# Soda-ash (version 0.1.0-beta)
-
-Soda-ash is an interface between clojurescript's [reagent](https://github.com/reagent-project/reagent) and [Semantic UI](http://semantic-ui.com/).
-
---- **[github repo](https://github.com/gadfly361/soda-ash)** ---
-
-
-## [FAQs](#!/soda_ash.a_faq_card)
-
-## Elements
-
-* [button](#!/soda_ash.elements.button_card)
-* [container](#!/soda_ash.elements.container_card)
-* [divider](#!/soda_ash.elements.divider_card)
-* [flag](#!/soda_ash.elements.flag_card)
-* [header](#!/soda_ash.elements.header_card)
-* [icon](#!/soda_ash.elements.icon_card)
-* [image](#!/soda_ash.elements.image_card)
-* [input](#!/soda_ash.elements.input_card)
-* [label](#!/soda_ash.elements.label_card)
-* [list](#!/soda_ash.elements.list_card)
-* [loader](#!/soda_ash.elements.loader_card)
-* [rail](#!/soda_ash.elements.rail_card)
-* [reveal](#!/soda_ash.elements.reveal_card)
-* [segment](#!/soda_ash.elements.segment_card)
-* [step](#!/soda_ash.elements.step_card)
-
-## Why use soda-ash?
-
-Semantic UI is awesome ... however, at its core, you are concatenating
-ordered classes into a string. Soda-ash bubbles Semantic UI's classes
-out of this regex-hell and softens them into clojurescript's familiar,
-powerful, and unordered hash-map.
-
-What was once this:
-"
-
-(mkdn-pprint-source avatar-no-soda)
-
-"Becomes this:"
-
- (mkdn-pprint-source avatar-with-soda))
-
-(defcard-rg
- [s/label {:soda {:tag :a
- :basic? true
- :color :teal}}
- [s/image {:soda {:spaced :right
- :avatar? true}
- :src "images/avatar/small/elliot.jpg"}]
- "Elliot"])
-
-
-
-(defcard-doc
-"`:soda` is a new attribute that is *added* to the normal attibute
-map, and **replaces the `:class` attribute. `:soda` takes a hash-map
-of unordered key-value pairs. Now you are able to take full advantage
-of the hash-map data structure ... assoc, dissoc, merge etc.
-
-Finally, soda-ash allows you to place your `:soda` inside a reagent
-atom at your desired path. This means you can swap! Semantic UI
-classes and have your component reactively update.
-"
- (mkdn-pprint-source app-state)
-
- (mkdn-pprint-source icon))
-
-(defcard-rg
- [:div
- [wrap-element app-state
- [icon]]
- [:div "Color: "
- (for [color colors]
- ^{:key color}
- [option-btn :color color])]
-
- [:div "Size: "
- (for [size sizes]
- ^{:key size}
- [option-btn :size size])]
- [:div "Icon: "
- (for [icon icons]
- ^{:key icon}
- [option-btn :icon icon])]])
-
-
-
-(defcard-doc
- "
-## Usage
-
-Put the following in the `:dependencies` vector of your *project.clj*
-
-```
-[soda-ash \"0.1.0-beta\"]
-```
-
-Then require soda-ash in your namespace.
-
-```
-(ns foo.bar
- (:require [soda-ash.element :as s]))
-```
-
-Finally, add Semantic UI to your index.html file:
-
-```
-
-```
-")
diff --git a/src/devcards/soda_ash/core_card.cljs b/src/devcards/soda_ash/core_card.cljs
deleted file mode 100644
index b55e8de..0000000
--- a/src/devcards/soda_ash/core_card.cljs
+++ /dev/null
@@ -1,22 +0,0 @@
-(ns soda-ash.core-card
- (:require-macros [devcards.core :as dc])
- (:require [soda-ash.a-faq-card]
- [soda-ash.an-overview-card]
- [soda-ash.elements.button-card]
- [soda-ash.elements.container-card]
- [soda-ash.elements.divider-card]
- [soda-ash.elements.flag-card]
- [soda-ash.elements.header-card]
- [soda-ash.elements.icon-card]
- [soda-ash.elements.image-card]
- [soda-ash.elements.input-card]
- [soda-ash.elements.label-card]
- [soda-ash.elements.list-card]
- [soda-ash.elements.loader-card]
- [soda-ash.elements.rail-card]
- [soda-ash.elements.reveal-card]
- [soda-ash.elements.segment-card]
- [soda-ash.elements.step-card]))
-
-
-(dc/start-devcard-ui!)
diff --git a/src/devcards/soda_ash/elements/button_card.cljs b/src/devcards/soda_ash/elements/button_card.cljs
deleted file mode 100644
index 7896e88..0000000
--- a/src/devcards/soda_ash/elements/button_card.cljs
+++ /dev/null
@@ -1,803 +0,0 @@
-(ns soda-ash.elements.button-card
- (:require-macros [devcards.core
- :as dc
- :refer [defcard-rg defcard-doc mkdn-pprint-source]])
- (:require [reagent.core :as reagent]
- [devcards.core]
- [reagent.core :as reagent]
- [soda-ash.elements.card-helpers :as h]
- [soda-ash.element :as s]))
-
-
-
-(defcard-doc
- "
-[back](#!/soda_ash.an_overview_card)
-
-# button
-
-* **base class** ui button
-* **default tag** :button
-* **:type**
- *ANIMATED* :animated | :vertical-animated | :animated-fade |
- *BASIC* :basic | :inverted-basic |
- *EMPHASIS* :primary | :secondary |
- *ICON* :icon | :labeled-icon | :right-labeled-icon |
- *INVERTED* :inverted | :inverted-basc |
- *LABELED* :labeled | :left-labeled | :labeled-icon | :right-labeled-icon
-* **content** conditionals
-* **:state** :default | :active | :disabled | :loading
-* **variations**
- :attached | :circular? | :color | :compact? | :consequence |
- :floated | :fluid? | :size | :social | :toggle?
-
-where
-
-* **:attached** :top | :bottom | :left | :right
-* **:color**
- :red | :orange | :yellow | :olive |
- :green | :teal | :blue | :violet |
- :purple | :pink | :brown | :grey |
- :black
-* **consequence** :positive | :negative
-* **:floated** :left | :right
-* **size**
- :mini | :tiny | :small | :medium |
- :large | :big | :huge | :massive
-* **:social**
- :facebook | :twitter | :google-plus |
- :vk | :linkedin | :instagram | :youtube
-
-Notes:
-
-* Although any tag can be used for a button, it will only be keyboard focusable if you use a `:button` tag or you add the property `:tab-index \"0\"`. Keyboard accessible buttons will preserve focus styles after click, which may be visually jarring.
-
-# Buttons
-
-* **base class* ui buttons
-* **default tag** :div
-
----
-")
-
-
-
-;; ====================
-;; TYPES
-
-(defcard-doc
- "# TYPES")
-
-
-;; Button
-
-(defn button []
- [:div
- ;; :button
- [s/button {:soda {:type :default}}
- "button"]
-
- ;; :div
- [s/button {:soda {:tag :div
- :type :default}
- :tab-index "0"}
- "div"]])
-
-(defcard-doc
- "
-### Button
-
-A standard button
-"
- (mkdn-pprint-source button))
-
-(defcard-rg
- [button])
-
-
-;; Emphasis
-
-(defn emphasis []
- [:div
- [s/button {:soda {:type :primary}}
- "primary"]
-
- [s/button {:soda {:tag :div
- :type :secondary}
- :tab-index "0"}
- "secondary"]])
-
-(defcard-doc
- "
-### Emphasis
-
-A button can be formatted to show different levels of emphasis
-
-Notes:
-
-* Setting your brand colors to primary and secondary color variables in site.variables will allow you to use your color theming for UI elements
-"
- (mkdn-pprint-source emphasis))
-
-(defcard-rg
- [emphasis])
-
-
-;; Animated
-
-(defn animated []
- [:div
- [s/button {:soda {:type :animated}}
- [:div.visible.content
- "Next"]
- [:div.hidden.content
- [s/icon {:soda {:icon :right-arrow}}]]]
-
- [s/button {:soda {:type :vertical-animated}}
- [:div.visible.content
- [s/icon {:soda {:icon :shop}}]]
- [:div.hidden.content
- "Shop"]]
-
- [s/button {:soda {:type :animated-fade}}
- [:div.visible.content
- "Sign-up for a Pro account"]
- [:div.hidden.content
- "$12.99 a mont"]]])
-
-(defcard-doc
- "
-### Animated
-
-A button can animate to show hidden content
-
-Notes:
-
-* The button will be automatically sized according to the visible content size. Make sure there is enough room for the hidden content to show
-"
- (mkdn-pprint-source animated))
-
-(defcard-rg
- [animated])
-
-
-;; Labeled
-
-(defn labeled []
- [:div
- [s/button {:soda {:tag :div
- :type :labeled}
- :tab-index "0"}
- [s/button {}
- [s/icon {:soda {:icon :heart}}]
- "Like"]
- [s/label {:soda {:tag :a
- :basic? true}}
- "2,048"]]
-
- [s/button {:soda {:tag :div
- :type :left-labeled}
- :tab-index "0"}
- [s/label {:soda {:tag :a
- :type :right-pointing
- :basic? true}}
- "2,048"]
- [s/button {}
- [s/icon {:soda {:icon :heart}}]
- "Like"]]])
-
-(defcard-doc
- "
-### Labeled
-
-A button can appear alongside a label
-"
- (mkdn-pprint-source labeled))
-
-(defcard-rg
- [labeled])
-
-
-;; Icon
-
-(defn icon []
- [s/button {:soda {:type :icon}}
- [s/icon {:soda {:icon :cloud}}]])
-
-(defcard-doc
- "
-### Icon
-
-A button can have only an icon
-"
- (mkdn-pprint-source icon))
-
-(defcard-rg
- [icon])
-
-
-
-;; Labeled-Icon
-
-(defn labeled-icon []
- [:div
- [s/button {:soda {:type :labeled-icon}}
- [s/icon {:soda {:icon :pause}}]
- "Pause"]
-
- [s/button {:soda {:type :right-labeled-icon}}
- [s/icon {:soda {:icon :right-arrow}}]
- "Next"]])
-
-(defcard-doc
- "
-### Labeled Icon
-
-A button can use an icon as a label
-"
- (mkdn-pprint-source labeled-icon))
-
-(defcard-rg
- [labeled-icon])
-
-
-;; Basic
-
-(defn basic []
- [s/button {:soda {:type :basic}}
- [s/icon {:soda {:icon :user}}]
- "Add Friend"])
-
-(defcard-doc
- "
-### Basic
-
-A basic button is less pronounced
-"
- (mkdn-pprint-source basic))
-
-(defcard-rg
- [basic])
-
-
-;; Inverted
-
-(defn inverted []
- [s/segment {:soda {:inverted? true}}
- [s/button {:soda {:type :inverted
- :color :red}}
- "Red"]
-
- [s/button {:soda {:type :inverted
- :color :orange}}
- "Orange"]
-
- [s/button {:soda {:type :inverted
- :color :yellow}}
- "Yellow"]])
-
-(defcard-doc
- "
-### Inverted
-
-A button can be formatted to appear on dark backgrounds
-"
- (mkdn-pprint-source inverted))
-
-(defcard-rg
- [inverted])
-
-
-;; Inverted-Basic
-
-(defn inverted-basic []
- [s/segment {:soda {:inverted? true}}
- [s/button {:soda {:type :inverted-basic
- :color :red}}
- "Red"]
-
- [s/button {:soda {:type :inverted-basic
- :color :orange}}
- "Orange"]
-
- [s/button {:soda {:type :inverted-basic
- :color :yellow}}
- "Yellow"]])
-
-(defcard-doc
- "
-### Inverted Basic
-"
- (mkdn-pprint-source inverted-basic))
-
-(defcard-rg
- [inverted-basic])
-
-
-
-;; ====================
-;; GROUPS
-
-(defcard-doc
- "# GROUPS")
-
-
-;; Buttons
-
-(defn buttons []
- [:div
- [s/buttons {}
- [s/button {} "One"]
- [s/button {} "Two"]
- [s/button {} "Three"]]
-
- [s/buttons {:soda {:color :red}}
- [s/button {} "Four"]
- [s/button {} "Five"]
- [s/button {} "Six"]]
- ])
-
-(defcard-doc
- "
-### Buttons
-
-Buttons can exist together as a group
-"
- (mkdn-pprint-source buttons))
-
-(defcard-rg
- [buttons])
-
-
-;; Icon-Buttons
-
-(defn icon-buttons []
- [s/buttons {:soda {:type :icon}}
- [s/button {}
- [s/icon {:soda {:icon :align-left}}]]
- [s/button {}
- [s/icon {:soda {:icon :align-center}}]]
- [s/button {}
- [s/icon {:soda {:icon :align-right}}]]
- [s/button {}
- [s/icon {:soda {:icon :align-justify}}]]
- ])
-
-(defcard-doc
- "
-### Icon Buttons
-
-Button groups can show groups of icons
-"
- (mkdn-pprint-source icon-buttons))
-
-(defcard-rg
- [icon-buttons])
-
-
-
-;; ====================
-;; CONTENT
-
-(defcard-doc
- "# CONTENT")
-
-
-;; Conditionals
-
-(defn conditionals []
- [s/buttons {}
- [s/button {} "Cancel"]
- [:div.or] ;; <-- attention
- [s/button {:soda {:consequence :positive}} "Save"]])
-
-(defcard-doc
- "
-### Conditionals
-
-Conditionals can exist together as a group
-"
- (mkdn-pprint-source conditionals))
-
-(defcard-rg
- [conditionals])
-
-
-
-;; ====================
-;; STATES
-
-(defcard-doc
- "# STATES")
-
-
-;; Active
-
-(defn active []
- [s/button {:soda {:state :active}}
- [s/icon {:soda {:icon :user}}]
- "Follow"])
-
-(defcard-doc
- "
-### Active
-
-A button can show it is currently the active user selection
-"
- (mkdn-pprint-source active))
-
-(defcard-rg
- [active])
-
-
-;; Disabled
-
-(defn disabled []
- [s/button {:soda {:state :disabled}}
- [s/icon {:soda {:icon :user}}]
- "Followed"])
-
-(defcard-doc
- "
-### Disabled
-
-A button can show it is currently unable to be interacted with
-"
- (mkdn-pprint-source disabled))
-
-(defcard-rg
- [disabled])
-
-
-;; Loading
-
-(defn loading []
- [s/button {:soda {:state :loading}}
- [s/icon {:soda {:icon :user}}]
- "Follow"])
-
-(defcard-doc
- "
-### Loading
-
-A button can show a loading indicator
-"
- (mkdn-pprint-source loading))
-
-(defcard-rg
- [loading])
-
-
-
-;; ====================
-;; VARIATIONS
-
-(defcard-doc
- "# VARIATIONS")
-
-
-;; Social
-
-(defn social []
- [:div
- [s/button {:soda {:social :facebook}}
- [s/icon {:soda {:icon :facebook}}]
- "Facebook"]
-
- [s/button {:soda {:social :twitter}}
- [s/icon {:soda {:icon :twitter}}]
- "Twitter"]
-
- [s/button {:soda {:social :google-plus}}
- [s/icon {:soda {:icon :google-plus}}]
- "Google Plus"]
-
- [s/button {:soda {:social :vk}}
- [s/icon {:soda {:icon :vk}}]
- "VK"]
-
- [s/button {:soda {:social :linkedin}}
- [s/icon {:soda {:icon :linkedin}}]
- "LinkedIn"]
-
- [s/button {:soda {:social :youtube}}
- [s/icon {:soda {:icon :youtube}}]
- "YouTube"]])
-
-(defcard-doc
- "
-### Social
-
-A button can be formatted to link to a social website
-"
- (mkdn-pprint-source social))
-
-(defcard-rg
- [social])
-
-
-;; Size
-
-(defn size []
- [:div
- [s/button {:soda {:size :mini}}
- "Mini"]
- [s/button {:soda {:size :tiny}}
- "Tiny"]
- [s/button {:soda {:size :small}}
- "Small"]
- [s/button {:soda {:size :medium}}
- "Medium"]
- [s/button {:soda {:size :large}}
- "Large"]
- [s/button {:soda {:size :big}}
- "Big"]
- [s/button {:soda {:size :huge}}
- "Huge"]
- [s/button {:soda {:size :massive}}
- "Massive"]])
-
-(defcard-doc
- "
-### Size
-
-A button can have different sizes
-"
- (mkdn-pprint-source size))
-
-(defcard-rg
- [size])
-
-
-;; Floated
-
-(defn floated []
- [:div
- [s/button {:soda {:floated :left}}
- "Left Floated"]
-
- [s/button {:soda {:floated :right}}
- "Right Floated"]
-
- [h/fake-content]
- ])
-
-(defcard-doc
- "
-### Floated
-
-A button can be aligned to the left or right of its container
-"
- (mkdn-pprint-source floated))
-
-(defcard-rg
- [floated])
-
-
-;; Colored
-
-(defn colored []
- [:div
- [s/button {:soda {:color :red}}
- "Red"]
- [s/button {:soda {:color :orange}}
- "Orange"]
- [s/button {:soda {:color :yellow}}
- "Yellow"]
- [s/button {:soda {:color :olive}}
- "Olive"]
- [s/button {:soda {:color :green}}
- "Green"]
- [s/button {:soda {:color :teal}}
- "Teal"]
- [s/button {:soda {:color :blue}}
- "Blue"]
- [s/button {:soda {:color :violet}}
- "Violet"]
- [s/button {:soda {:color :purple}}
- "Purple"]
- [s/button {:soda {:color :pink}}
- "Pink"]
- [s/button {:soda {:color :brown}}
- "Brown"]
- [s/button {:soda {:color :grey}}
- "Grey"]
- [s/button {:soda {:color :black}}
- "Black"]])
-
-(defcard-doc
- "
-### Colored
-
-A button can have different colors
-"
- (mkdn-pprint-source colored))
-
-(defcard-rg
- [colored])
-
-
-;; Compact
-
-(defn compact []
- [:div
- [s/button {:soda {:compact? true}}
- "Hold"]
-
- [s/button {:soda {:type :labeled-icon
- :compact? true}}
- [s/icon {:soda {:icon :pause}}]
- "Pause"]])
-
-(defcard-doc
- "
-### Compact
-
-A button can reduce its padding to fit into tighter spaces
-"
- (mkdn-pprint-source compact))
-
-(defcard-rg
- [compact])
-
-
-;; Toggle
-
-(defn toggle-state [state]
- (if (= :active state)
- :default
- :active))
-
-(defn toggle-text [state]
- (if (= :active state)
- "Voted"
- "Vote"))
-
-(defn handle-on-click! [ratom state]
- (swap! ratom update-in [:foo :soda :state] toggle-state))
-
-(defn toggle-component []
- (let [ratom (reagent/atom {})]
- (fn []
- (let [state (get-in @ratom [:foo :soda :state])]
- [s/button {:soda {:ratom ratom
- :path :foo
- :toggle? true
- :state :default}
- :on-click #(handle-on-click! ratom state)}
- (toggle-text state)]))))
-
-(defcard-doc
- "
-### Toggle
-
-A button can be formatted to toggle on and off
-"
- (mkdn-pprint-source toggle-state)
- (mkdn-pprint-source toggle-text)
- (mkdn-pprint-source handle-on-click!)
- (mkdn-pprint-source toggle-component))
-
-(defcard-rg
- [toggle-component])
-
-
-;; Positive
-
-(defn positive []
- [s/button {:soda {:consequence :positive}}
- "Positive"])
-
-(defcard-doc
- "
-### Positive
-
-A button can hint towards a positive consequence
-"
- (mkdn-pprint-source positive))
-
-(defcard-rg
- [positive])
-
-
-;; Negative
-
-(defn negative []
- [s/button {:soda {:consequence :negative}}
- "Negative"])
-
-(defcard-doc
- "
-### Negative
-
-A button can hint towards a negative consequence
-"
- (mkdn-pprint-source negative))
-
-(defcard-rg
- [negative])
-
-
-;; Fluid
-
-(defn fluid []
- [s/button {:soda {:fluid? true}}
- "Fluid"])
-
-(defcard-doc
- "
-### Fluid
-
-A button can take the width of its container
-"
- (mkdn-pprint-source fluid))
-
-(defcard-rg
- [fluid])
-
-
-;; Circular
-
-(defn circular []
- [s/button {:soda {:type :icon
- :circular? true}}
- [s/icon {:soda {:icon :settings}}]])
-
-(defcard-doc
- "
-### Circular
-
-A button can be circular
-"
- (mkdn-pprint-source circular))
-
-(defcard-rg
- [circular])
-
-
-;; Vertically Attached
-
-(defn vertically-attached []
- [:div
- [s/button {:soda {:tag :div
- :attached :top}
- :tab-index "0"}
- "Top"]
- [s/segment {:soda {:attached :default}}
- [h/fake-content]]
- [s/button {:soda {:tag :div
- :attached :bottom}
- :tab-index "0"}
- "Bottom"]])
-
-(defcard-doc
- "
-### Vertically Attached
-
-A button can be attached to the top or bottom of other content
-"
- (mkdn-pprint-source vertically-attached))
-
-(defcard-rg
- [vertically-attached])
-
-
-;; Horizontally Attached
-
-(defn horizontally-attached []
- [:div
- [s/button {:soda {:attached :left}}
- "Left"]
- [s/button {:soda {:attached :right}}
- "Right"]])
-
-(defcard-doc
- "
-### Horizontally Attached
-
-A button can be attached to the left or right of other content
-"
- (mkdn-pprint-source horizontally-attached))
-
-(defcard-rg
- [horizontally-attached])
diff --git a/src/devcards/soda_ash/elements/card_helpers.cljs b/src/devcards/soda_ash/elements/card_helpers.cljs
deleted file mode 100644
index 57e0eb9..0000000
--- a/src/devcards/soda_ash/elements/card_helpers.cljs
+++ /dev/null
@@ -1,12 +0,0 @@
-(ns soda-ash.elements.card-helpers)
-
-
-(defn fake-content []
- [:div
- "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."])
diff --git a/src/devcards/soda_ash/elements/container_card.cljs b/src/devcards/soda_ash/elements/container_card.cljs
deleted file mode 100644
index 2a73f7f..0000000
--- a/src/devcards/soda_ash/elements/container_card.cljs
+++ /dev/null
@@ -1,133 +0,0 @@
-(ns soda-ash.elements.container-card
- (:require-macros [devcards.core
- :as dc
- :refer [defcard-rg defcard-doc mkdn-pprint-source]])
- (:require [reagent.core :as reagent]
- [devcards.core]
- [soda-ash.elements.card-helpers :as h]
- [soda-ash.element :as s]))
-
-
-
-(defcard-doc
-"
-[back](#!/soda_ash.an_overview_card)
-
-# container
-
-* **base class** ui container
-* **default tag** :div
-* **:type** :default | :text
-* **variations** :aligned | :fluid?
-
-where
-
-* **:aligned** :left | :right | :justified | :center
-
-Notes:
-
-The devcards have their own width, so some of the options like :fluid? aren't presented well.
-
----
-")
-
-
-
-;; ====================
-;; TYPES
-
-(defcard-doc
-"# TYPES")
-
-
-;; Container
-
-(defn container []
- [s/container {:soda {:type :default}}
- [h/fake-content]])
-
-(defcard-doc
- "
-### Container
-
-A standard container
-"
- (mkdn-pprint-source container))
-
-(defcard-rg
- [container])
-
-
-;; Text-Container
-
-(defn text-container []
- [s/container {:soda {:type :text}}
- [h/fake-content]])
-
-(defcard-doc
- "
-### Text Container
-
-A container can reduce its maximum width to more naturally accomodate a single column of text
-
-Notes:
-
-* A text container is a simpler markup alternative to using a grid with a single column, and is designed to have a reasonable maximum width for displaying flowing text
-"
- (mkdn-pprint-source text-container))
-
-(defcard-rg
- [text-container])
-
-
-;; ====================
-;; VARIATIONS
-
-(defcard-doc
-"# VARIATIONS")
-
-
-;; Aligned
-
-(defn aligned []
- [:div
- [s/container {:soda {:aligned :left}}
- "Left Aligned"]
-
- [s/container {:soda {:aligned :center}}
- "Center Aligned"]
-
- [s/container {:soda {:aligned :right}}
- "Right Aligned"]
-
- [s/container {:soda {:aligned :justified}}
- [h/fake-content]]])
-
-(defcard-doc
- "
-### Text Alignment
-
-A container can specify its text alignment
-"
- (mkdn-pprint-source aligned))
-
-(defcard-rg
- [aligned])
-
-
-;; Fluid
-
-(defn fluid []
- [s/container {:soda {:fluid? true}}
- [h/fake-content]])
-
-(defcard-doc
- "
-### Text Alignment
-
-A fluid container has no maximum width
-"
- (mkdn-pprint-source fluid))
-
-(defcard-rg
- [fluid])
diff --git a/src/devcards/soda_ash/elements/divider_card.cljs b/src/devcards/soda_ash/elements/divider_card.cljs
deleted file mode 100644
index f3e7840..0000000
--- a/src/devcards/soda_ash/elements/divider_card.cljs
+++ /dev/null
@@ -1,228 +0,0 @@
-(ns soda-ash.elements.divider-card
- (:require-macros [devcards.core
- :as dc
- :refer [defcard-rg defcard-doc mkdn-pprint-source]])
- (:require [reagent.core :as reagent]
- [devcards.core]
- [soda-ash.elements.card-helpers :as h]
- [soda-ash.element :as s]))
-
-
-
-(defcard-doc
-"
-[back](#!/soda_ash.an_overview_card)
-
-# divider
-
-* **base class** ui divider
-* **default tag** :div
-* **:type**
- :default | :vertical | :horizontal
-* **variations** clearing? | fitted? | hidden? | inverted? | section?
-
----
-")
-
-
-
-;; ====================
-;; TYPES
-
-(defcard-doc
-"# TYPES")
-
-
-;; Divider
-
-(defn divider []
- [:div
- [h/fake-content]
- [s/divider {:soda {:type :default}}]
- [h/fake-content]])
-
-(defcard-doc
- "
-### Divider
-
-A standard divider
-
-Notes:
-
-* To add a divider between parts of a grid use a divided grid variation.
-"
- (mkdn-pprint-source divider))
-
-(defcard-rg
- [divider])
-
-
-;; Vertical
-
-(defn vertical []
- [:div.ui.two.column.very.relaxed.grid
- [:div.column
- [h/fake-content]]
-
- [s/divider {:soda {:type :vertical}}
- "and"]
-
- [:div.column
- [h/fake-content]]])
-
-(defcard-doc
- "
-### Vertical Divider
-
-A divider can segment content vertically
-
-Notes:
-
-* Vertical dividers requires position: relative on the element that you would like to contain the divider
-* A vertical divider will automatically swap to a horizontal divider at mobile resolutions when used inside a stackable grid
-"
- (mkdn-pprint-source vertical))
-
-(defcard-rg
- [vertical])
-
-
-;; Horizontal
-
-(defn horizontal []
- [:div
- [h/fake-content]
- [s/divider {:soda {:type :horizontal}}
- [s/icon {:soda {:icon :bar-chart}}]
- "Specifications"]
- [h/fake-content]])
-
-(defcard-doc
- "
-### Horizontal
-
-A divider can segment content horizontally
-
-Notes:
-
-* Horizontal dividers can also be used in combination with headers and icons to create different styles of dividers.
-* Dividers will automatically vary the size of their dividing rules to match the length of your text
-"
- (mkdn-pprint-source horizontal))
-
-(defcard-rg
- [horizontal])
-
-
-
-;; ====================
-;; VARIATIONS
-
-(defcard-doc
-"# VARIATIONS")
-
-
-;; Inverted
-
-(defn inverted []
- [s/segment {:soda {:inverted? true}}
- [h/fake-content]
- [s/divider {:soda {:inverted? true}}]
- [h/fake-content]])
-
-(defcard-doc
- "
-### Inverted
-
-A divider can have its colors inverted
-"
- (mkdn-pprint-source inverted))
-
-(defcard-rg
- [inverted])
-
-
-;; Fitted
-
-(defn fitted []
- [:div
- [h/fake-content]
- [s/divider {:soda {:fitted? true}}]
- [h/fake-content]])
-
-(defcard-doc
- "
-### Fitted
-
-A divider can be fitted, without any space above or below it.
-"
- (mkdn-pprint-source fitted))
-
-(defcard-rg
- [fitted])
-
-
-;; Hidden
-
-(defn hidden []
- [:div
- [h/fake-content]
- [s/divider {:soda {:hidden? true}}]
- [h/fake-content]])
-
-(defcard-doc
- "
-### Hidden
-
-A hidden divider divides content without creating a dividing line
-"
- (mkdn-pprint-source hidden))
-
-(defcard-rg
- [hidden])
-
-
-;; Section
-
-(defn section []
- [:div
- [s/header {:soda {:tag :h3}}
- "Section Two"]
- [h/fake-content]
- [s/divider {:soda {:section? true}}]
- [s/header {:soda {:tag :h3}}
- "Section Two"]
- [h/fake-content]])
-
-(defcard-doc
- "
-### Section
-
-A divider can provide greater margins to divide sections of content
-"
- (mkdn-pprint-source section))
-
-(defcard-rg
- [section])
-
-
-;; Clearing
-
-(defn clearing []
- [s/segment {:soda {:type :default}}
- [s/header {:soda {:tag :h2
- :floated :right}}
- "Floated Content"]
- [s/divider {:soda {:clearing? true}}]
- [h/fake-content]])
-
-(defcard-doc
- "
-### Clearing
-
-A divider can clear the contents above it
-"
- (mkdn-pprint-source clearing))
-
-(defcard-rg
- [clearing])
diff --git a/src/devcards/soda_ash/elements/flag_card.cljs b/src/devcards/soda_ash/elements/flag_card.cljs
deleted file mode 100644
index 6e00202..0000000
--- a/src/devcards/soda_ash/elements/flag_card.cljs
+++ /dev/null
@@ -1,43 +0,0 @@
-(ns soda-ash.elements.flag-card
- (:require-macros [devcards.core
- :as dc
- :refer [defcard-rg defcard-doc mkdn-pprint-source]])
- (:require [reagent.core :as reagent]
- [devcards.core]
- [soda-ash.elements.card-helpers :as h]
- [soda-ash.element :as s]))
-
-
-
-(defcard-doc
-"
-[back](#!/soda_ash.an_overview_card)
-
-# flag
-
-* **base class* flag
-* **default tag** :i
-* **:flag** see [Semantic UI docs](http://semantic-ui.com/elements/flag.html)
-
----
-")
-
-
-;; Flag
-
-(defn flag []
- [:div
- [s/flag {:soda {:flag :ae}}]
- [s/flag {:soda {:flag :france}}]
- [s/flag {:soda {:flag :myanmar}}]])
-
-(defcard-doc
- "
-### Flag
-
-A flag can use the two digit country code, the full name, or a common alias
-"
- (mkdn-pprint-source flag))
-
-(defcard-rg
- [flag])
diff --git a/src/devcards/soda_ash/elements/header_card.cljs b/src/devcards/soda_ash/elements/header_card.cljs
deleted file mode 100644
index 7098800..0000000
--- a/src/devcards/soda_ash/elements/header_card.cljs
+++ /dev/null
@@ -1,457 +0,0 @@
-(ns soda-ash.elements.header-card
- (:require-macros [devcards.core
- :as dc
- :refer [defcard-rg defcard-doc mkdn-pprint-source]])
- (:require [reagent.core :as reagent]
- [devcards.core]
- [soda-ash.elements.card-helpers :as h]
- [soda-ash.element :as s]))
-
-
-
-(defcard-doc
-"
-[back](#!/soda_ash.an_overview_card)
-
-# header
-
-* **base class** ui header
-* **default tag** :div
-* **:type**
- :default |
- *HEADERS* :huge | :large | :medium | :small | :tiny
- *ICON* :icon
- *SUB* :sub
-* **:state** :default | :disabled
-* **content** image | icon | subheader
-* **variations**
- :aligned | :attached | :block? | :color |
- :dividing? | :floated | inverted?
-
-where
-
-* **aligned** :right | :left | :justified | :center
-* **:color**
- :red | :orange | :yellow | :olive |
- :green | :teal | :blue | :violet |
- :purple | :pink | :brown | :grey |
- :black
-* **:floated** :right | :left
-
----
-")
-
-
-
-;; ====================
-;; TYPES
-
-(defcard-doc
-"# TYPES")
-
-
-;; page headers
-
-(defn page-headers []
- [:div
- [s/header {:soda {:tag :h1}} "First header"]
- [s/header {:soda {:tag :h2}} "Second header"]
- [s/header {:soda {:tag :h3}} "Third header"]
- [s/header {:soda {:tag :h4}} "Fourth header"]
- [s/header {:soda {:tag :h5}} "Fifth header"]
- ])
-
-(defcard-doc
- "
-### Page Headers
-
-Headers may be oriented to give the hierarchy of a section in the context of the page
-
-Notes:
-
-* Page headings are sized using rem and are not affected by surrounding content size.
-"
- (mkdn-pprint-source page-headers))
-
-(defcard-rg
- [page-headers])
-
-
-;; content headers
-
-(defn content-headers []
- [:div
- [s/header {:soda {:type :huge}} "Huge"]
- [s/header {:soda {:type :large}} "Large"]
- [s/header {:soda {:type :medium}} "Medium"]
- [s/header {:soda {:type :small}} "Small"]
- [s/header {:soda {:type :tiny}} "Tiny"]
- ])
-
-(defcard-doc
- "
-### Content Headers
-
-Headers may be oriented to give the importance of a section in the context of the content that surrounds it.
-
-Notes:
-
-* Content headings are sized with *em* and are based on the font-size of their container.
-"
- (mkdn-pprint-source content-headers))
-
-(defcard-rg
- [content-headers])
-
-
-;; icon headers
-
-(defn icon-headers []
- [s/header {:soda {:tag :h2
- :type :icon}}
- [s/icon {:soda {:icon :settings}}]
- "Account Settings"])
-
-(defcard-doc
- "
-### Icon Headers
-
-A header can be formatted to emphasize an icon
-"
- (mkdn-pprint-source icon-headers))
-
-(defcard-rg
- [icon-headers])
-
-
-;; sub headers
-
-(defn sub-headers []
- [:div
- [s/header {:soda {:tag :h2
- :type :sub}}
- "Price"]
- [:span "$10.99"]])
-
-(defcard-doc
- "
-### Sub Headers
-
-Headers may be formatted to label smaller or de-emphasized content.
-"
- (mkdn-pprint-source sub-headers))
-
-(defcard-rg
- [sub-headers])
-
-
-
-;; ====================
-;; CONTENT
-
-(defcard-doc
-"# Content")
-
-
-;; image
-
-(defn image []
- [s/header {:soda {:tag :h2}}
- [s/image {:src "images/icons/school.png"}]
- [:div.content
- "Learn More"]])
-
-(defcard-doc
- "
-### Image
-
-A header may contain an image
-"
- (mkdn-pprint-source image))
-
-(defcard-rg
- [image])
-
-
-;; icon
-
-(defn icon []
- [s/header {:soda {:tag :h2}}
- [s/icon {:soda {:icon :plug}}]
- [:div.content
- "Uptime Guarantee"]])
-
-(defcard-doc
- "
-### Icon
-
-A header may contain an icon
-"
- (mkdn-pprint-source icon))
-
-(defcard-rg
- [icon])
-
-
-;; subheader
-
-(defn subheader []
- [:div
- [s/header {:soda {:tag :h2}}
- "H1"
- [:div.sub.header ;; <-- attention (note: this isn't a soda header element)
- "Sub Header"]]
-
- [s/header {:soda {:tag :h2}}
- "H2"
- [:div.sub.header
- "Sub Header"]]
-
- [s/header {:soda {:tag :h3}}
- "H3"
- [:div.sub.header
- "Sub Header"]]
-
- [s/header {:soda {:tag :h4}}
- "H4"
- [:div.sub.header
- "Sub Header"]]
-
- [s/header {:soda {:tag :h5}}
- "H5"
- [:div.sub.header
- "Sub Header"]]])
-
-(defcard-doc
- "
-### Subheader
-
-Headers may contain subheaders
-"
- (mkdn-pprint-source subheader))
-
-(defcard-rg
- [subheader])
-
-
-
-;; ====================
-;; STATES
-
-(defcard-doc
-"# States")
-
-
-(defn states []
- [s/header {:soda {:state :disabled}}
- "Disabled Header"])
-
-(defcard-doc
- "
-### Disabled
-
-A header can show that it is inactive
-"
- (mkdn-pprint-source states))
-
-(defcard-rg
- [states])
-
-
-
-;; ====================
-;; VARIATIONS
-
-(defcard-doc
-"# Variations")
-
-
-;; dividing
-
-(defn dividing []
- [:div
- [h/fake-content]
- [s/header {:soda {:dividing? true}}
- "Dividing Header"]
- [h/fake-content]])
-
-(defcard-doc
- "
-### Dividing
-
-A header can be formatted to divide itself from the content below it
-"
- (mkdn-pprint-source dividing))
-
-(defcard-rg
- [dividing])
-
-
-;; block
-
-(defn block []
- [:div
- [s/header {:soda {:block? true}}
- "Block Header"]
- [h/fake-content]])
-
-(defcard-doc
- "
-### Block
-
-A header can be formatted to appear inside a content block
-"
- (mkdn-pprint-source block))
-
-(defcard-rg
- [block])
-
-
-;; attached
-
-(defn attached []
- [:div
- [s/header {:soda {:tag :h3
- :attached :top}}
- "Top Attached"]
- [s/segment {:soda {:attached :default}}
- [h/fake-content]]
- [s/header {:soda {:tag :h3
- :attached :default}}
- "Attached"]
- [s/segment {:soda {:attached :default}}
- [h/fake-content]]
- [s/header {:soda {:tag :h3
- :attached :bottom}}
- "Bottom Attached"]])
-
-(defcard-doc
- "
-### Attached
-
-A header can be attached to other content, like a segment
-"
- (mkdn-pprint-source attached))
-
-(defcard-rg
- [attached])
-
-
-;; floating
-
-(defn floating []
- [s/segment {:soda {:clearing? true}}
- [s/header {:soda {:floated :right}}
- "Go Forward"]
- [s/header {:soda {:floated :left}}
- "Go Back"]
- [h/fake-content]])
-
-(defcard-doc
- "
-### Floating
-
-A header can sit to the left or right of other content
-"
- (mkdn-pprint-source floating))
-
-(defcard-rg
- [floating])
-
-
-;; alignment
-
-(defn alignment []
- [s/segment {:soda {:type :default}}
- [s/header {:soda {:aligned :right}} "Right"]
- [s/header {:soda {:aligned :left}} "Left"]
- [s/header {:soda {:aligned :justified}}
- "This should take up the full width even if only one line"]
- [s/header {:soda {:aligned :center}} "Center"]])
-
-(defcard-doc
- "
-### Text Alignment
-
-A header can have its text aligned to a side
-"
- (mkdn-pprint-source alignment))
-
-(defcard-rg
- [alignment])
-
-
-;; colored
-
-(defn colored []
- [:div
- [s/header {:soda {:color :red}} "Red"]
- [s/header {:soda {:color :orange}} "Orange"]
- [s/header {:soda {:color :yellow}} "Yellow"]
- [s/header {:soda {:color :olive}} "Olive"]
- [s/header {:soda {:color :green}} "Green"]
- [s/header {:soda {:color :teal}} "Teal"]
- [s/header {:soda {:color :blue}} "Blue"]
- [s/header {:soda {:color :purple}} "Purple"]
- [s/header {:soda {:color :violet}} "Violet"]
- [s/header {:soda {:color :pink}} "Pink"]
- [s/header {:soda {:color :brown}} "Brown"]
- [s/header {:soda {:color :grey}} "Grey"]
- ])
-
-(defcard-doc
- "
-### Colored
-
-A header can be formatted with different colors
-"
- (mkdn-pprint-source colored))
-
-(defcard-rg
- [colored])
-
-
-;; inverted-colored
-
-(defn inverted-colored []
- [s/segment {:soda {:inverted? true}}
- [s/header {:soda {:inverted? true
- :color :red}} "Red"]
- [s/header {:soda {:inverted? true
- :color :orange}} "Orange"]
- [s/header {:soda {:inverted? true
- :color :yellow}} "Yellow"]
- [s/header {:soda {:inverted? true
- :color :olive}} "Olive"]
- [s/header {:soda {:inverted? true
- :color :green}} "Green"]
- [s/header {:soda {:inverted? true
- :color :teal}} "Teal"]
- [s/header {:soda {:inverted? true
- :color :blue}} "Blue"]
- [s/header {:soda {:inverted? true
- :color :purple}} "Purple"]
- [s/header {:soda {:inverted? true
- :color :violet}} "Violet"]
- [s/header {:soda {:inverted? true
- :color :pink}} "Pink"]
- [s/header {:soda {:inverted? true
- :color :brown}} "Brown"]
- [s/header {:soda {:inverted? true
- :color :grey}} "Grey"]
- ])
-
-(defcard-doc
- "
-### Inverted-Colored
-
-A header can have its colors inverted for contrast
-
-Notes:
-
-* Inverted headers use modified light versions of your site's color scheme that are adapted to have more contrast on dark background
-"
- (mkdn-pprint-source inverted-colored))
-
-(defcard-rg
- [inverted-colored])
diff --git a/src/devcards/soda_ash/elements/icon_card.cljs b/src/devcards/soda_ash/elements/icon_card.cljs
deleted file mode 100644
index 3a578c4..0000000
--- a/src/devcards/soda_ash/elements/icon_card.cljs
+++ /dev/null
@@ -1,427 +0,0 @@
-(ns soda-ash.elements.icon-card
- (:require-macros [devcards.core
- :as dc
- :refer [defcard-rg defcard-doc mkdn-pprint-source]])
- (:require [reagent.core :as reagent]
- [devcards.core]
- [soda-ash.elements.card-helpers :as h]
- [soda-ash.element :as s]))
-
-
-
-(defcard-doc
- "
-[back](#!/soda_ash.an_overview_card)
-
-# icon
-
-* **base class** icon
-* **default tag** :i
-* **:icon** see [Semantic UI docs](http://semantic-ui.com/elements/icon.html)
-* **:state** :default | :disabled | :loading
-* **variations**
- :bordered? | :circular? | :color | :corner? (inside icons) |
- :flipped | :fitted? | :inverted? | :link? | :rotated | :size
-
-where
-
-* **:color**
- :red | :orange | :yellow | :olive |
- :green | :teal | :blue | :violet |
- :purple | :pink | :brown | :grey |
- :black
-* **:flipped** :horizontally | :vertically
-* **:rotated** :clockwise | :counterclockwise
-* **:size**
- :mini | :tiny | :small | :large | :big | :huge | :massive
-
-# icons
-
-* **base class** icons
-* **default tag** :i
-
----
-")
-
-
-
-;; ====================
-;; STATES
-
-(defcard-doc
- "# STATES")
-
-
-;; Disabled
-
-(defn disabled []
- [s/icon {:soda {:icon :users
- :state :disabled}}])
-
-(defcard-doc
- "
-### Disabled
-
-An icon can show that it is disabled
-"
- (mkdn-pprint-source disabled))
-
-(defcard-rg
- [disabled])
-
-
-;; Loading
-
-(defn loading []
- [:div
- [s/icon {:soda {:icon :spinner
- :state :loading}}]
-
- [s/icon {:soda {:icon :notched-circle
- :state :loading}}]
-
- [s/icon {:soda {:icon :asterisk
- :state :loading}}]])
-
-(defcard-doc
- "
-### Loading
-
-An icon can be used as a simple loader
-"
- (mkdn-pprint-source loading))
-
-(defcard-rg
- [loading])
-
-
-
-;; ====================
-;; VARIATIONS
-
-(defcard-doc
- "# VARIATIONS")
-
-
-;; Fitted
-
-(defn fitted []
- [:div
- "Tight spacing"
- [s/icon {:soda {:icon :help
- :fitted? true}}]
- "Tight spacing"])
-
-(defcard-doc
- "
-### Fitted
-
-An icon can be fitted, without any space to the left or right of it.
-"
- (mkdn-pprint-source fitted))
-
-(defcard-rg
- [fitted])
-
-
-
-;; Size
-
-(defn size []
- [:div
- [s/icon {:soda {:icon :home :size :mini}}]
- [s/icon {:soda {:icon :home :size :tiny}}]
- [s/icon {:soda {:icon :home :size :small}}]
- [s/icon {:soda {:icon :home}}]
- [s/icon {:soda {:icon :home :size :large}}]
- [s/icon {:soda {:icon :home :size :big}}]
- [s/icon {:soda {:icon :home :size :huge}}]
- [s/icon {:soda {:icon :home :size :massive}}]])
-
-(defcard-doc
- "
-### Size
-
-An icon can vary in size
-"
- (mkdn-pprint-source size))
-
-(defcard-rg
- [size])
-
-
-;; Link
-
-(defn link []
- [:div
- [s/icon {:soda {:icon :close
- :link? true}}]
- [s/icon {:soda {:icon :help
- :link? true}}]])
-
-(defcard-doc
- "
-### Link
-
-An icon can be formatted as a link
-"
- (mkdn-pprint-source link))
-
-(defcard-rg
- [link])
-
-
-;; Flipped
-
-(defn flipped []
- [:div
- [s/icon {:soda {:icon :cloud
- :flipped :horizontally}}]
- [s/icon {:soda {:icon :cloud
- :flipped :vertically}}]])
-
-(defcard-doc
- "
-### Flipped
-
-An icon can be flipped
-"
- (mkdn-pprint-source flipped))
-
-(defcard-rg
- [flipped])
-
-
-;; Rotated
-
-(defn rotated []
- [:div
- [s/icon {:soda {:icon :cloud
- :rotated :clockwise}}]
- [s/icon {:soda {:icon :cloud
- :rotated :counterclockwise}}]])
-
-(defcard-doc
- "
-### Rotated
-
-An icon can be rotated
-"
- (mkdn-pprint-source rotated))
-
-(defcard-rg
- [rotated])
-
-
-;; Circular
-
-(defn circular []
- [:div
- [s/icon {:soda {:icon :users
- :circular? true}}]
- [s/icon {:soda {:icon :users
- :circular? true
- :color :teal}}]
- [s/icon {:soda {:icon :users
- :circular? true
- :inverted? true}}]
- [s/icon {:soda {:icon :users
- :circular? true
- :color :teal
- :inverted? true}}]])
-
-(defcard-doc
- "
-### Circular
-
-An icon can be formatted to appear circular
-"
- (mkdn-pprint-source circular))
-
-(defcard-rg
- [circular])
-
-
-;; Bordered
-
-(defn bordered []
- [:div
- [s/icon {:soda {:icon :users
- :bordered? true}}]
- [s/icon {:soda {:icon :users
- :bordered? true
- :color :teal}}]
- [s/icon {:soda {:icon :users
- :bordered? true
- :inverted? true}}]
- [s/icon {:soda {:icon :users
- :bordered? true
- :color :teal
- :inverted? true}}]])
-
-(defcard-doc
- "
-### Bordered
-
-An icon can be formatted to appear bordered
-"
- (mkdn-pprint-source bordered))
-
-(defcard-rg
- [bordered])
-
-
-;; Colored
-
-(defn colored []
- [:div
- [s/icon {:soda {:icon :users
- :color :red}}]
- [s/icon {:soda {:icon :users
- :color :orange}}]
- [s/icon {:soda {:icon :users
- :color :yellow}}]
- [s/icon {:soda {:icon :users
- :color :olive}}]
- [s/icon {:soda {:icon :users
- :color :green}}]
- [s/icon {:soda {:icon :users
- :color :teal}}]
- [s/icon {:soda {:icon :users
- :color :blue}}]
- [s/icon {:soda {:icon :users
- :color :violet}}]
- [s/icon {:soda {:icon :users
- :color :purple}}]
- [s/icon {:soda {:icon :users
- :color :pink}}]
- [s/icon {:soda {:icon :users
- :color :brown}}]
- [s/icon {:soda {:icon :users
- :color :grey}}]
- [s/icon {:soda {:icon :users
- :color :black}}]])
-
-(defcard-doc
- "
-### Colored
-
-An icon can be formatted with different colors
-"
- (mkdn-pprint-source colored))
-
-(defcard-rg
- [colored])
-
-
-;; Inverted
-
-(defn inverted []
- [s/segment {:soda {:inverted? true}}
- [s/icon {:soda {:icon :users
- :color :red
- :inverted? true}}]
- [s/icon {:soda {:icon :users
- :color :orange
- :inverted? true}}]
- [s/icon {:soda {:icon :users
- :color :yellow
- :inverted? true}}]
- [s/icon {:soda {:icon :users
- :color :olive
- :inverted? true}}]
- [s/icon {:soda {:icon :users
- :color :green
- :inverted? true}}]
- [s/icon {:soda {:icon :users
- :color :teal
- :inverted? true}}]
- [s/icon {:soda {:icon :users
- :color :blue
- :inverted? true}}]
- [s/icon {:soda {:icon :users
- :color :violet
- :inverted? true}}]
- [s/icon {:soda {:icon :users
- :color :purple
- :inverted? true}}]
- [s/icon {:soda {:icon :users
- :color :pink
- :inverted? true}}]
- [s/icon {:soda {:icon :users
- :color :brown
- :inverted? true}}]
- [s/icon {:soda {:icon :users
- :color :grey
- :inverted? true}}]
- [s/icon {:soda {:icon :users
- :color :black
- :inverted? true}}]])
-
-(defcard-doc
- "
-### Inverted
-
-An icon can have its colors inverted for contrast
-"
- (mkdn-pprint-source inverted))
-
-(defcard-rg
- [inverted])
-
-
-
-
-;; ====================
-;; GROUPS
-
-(defcard-doc
- "# GROUPS")
-
-
-;; Icons
-
-(defn icons []
- [:div
- [s/icons {:soda {:size :huge}}
- [s/icon {:soda {:icon :thin-circle
- :size :big}}]
- [s/icon {:soda {:icon :user}}]]
-
- [s/icons {:soda {:size :huge}}
- [s/icon {:soda {:icon :loading-sun
- :color :teal
- :size :big}}]
- [s/icon {:soda {:icon :user}}]]])
-
-(defcard-doc
- "
-### Icons
-
-Several icons can be used together as a group
-"
- (mkdn-pprint-source icons))
-
-(defcard-rg
- [icons])
-
-
-;; Corner-Icons
-
-(defn corner-icons []
- [:div
- [s/icons {:soda {:size :huge}}
- [s/icon {:soda {:icon :puzzle}}]
- [s/icon {:soda {:icon :add
- :corner? true}}]]])
-
-(defcard-doc
- "
-### Corner Icons
-
-A group of icons can display a smaller corner icon
-"
- (mkdn-pprint-source corner-icons))
-
-(defcard-rg
- [corner-icons])
diff --git a/src/devcards/soda_ash/elements/image_card.cljs b/src/devcards/soda_ash/elements/image_card.cljs
deleted file mode 100644
index 5485691..0000000
--- a/src/devcards/soda_ash/elements/image_card.cljs
+++ /dev/null
@@ -1,413 +0,0 @@
-(ns soda-ash.elements.image-card
- (:require-macros [devcards.core
- :as dc
- :refer [defcard-rg defcard-doc mkdn-pprint-source]])
- (:require [reagent.core :as reagent]
- [devcards.core]
- [soda-ash.elements.card-helpers :as h]
- [soda-ash.element :as s]))
-
-
-
-(defcard-doc
- "
-[back](#!/soda_ash.an_overview_card)
-
-# image
-
-* **base class** ui image
-* **default tag** :img
-* **:state** :hidden | :disabled
-* **variations**
- :aligned | :avatar? | :bordered? | :centered? |
- :circular? | :floated | :fluid? | :rounded? | :size |
- :spaced | :state
-
-where
-
-* **:aligned** :top | :middle | :bottom
-* **:floated** :left | :right
-* **:size** :mini | :tiny | :small | :medium | :large | :big | :huge | :massive
-* **:spaced** :default | :left | :right
-* **:state** :default | :hidden | :disabled
-
-# images
-
-* **base class** ui images
-* **default tag** :div
-
----
-")
-
-
-
-;; ====================
-;; TYPES
-
-(defcard-doc
- "# TYPES")
-
-
-;; Image
-
-(defn image []
- [s/image {:soda {:size :small}
- :src "images/wireframe/image.png"}])
-
-(defcard-doc
- "
-### Image
-
-An image
-"
- (mkdn-pprint-source image))
-
-(defcard-rg
- [image])
-
-
-;; Image-Link
-
-(defn image-link []
- [:a {:href "http://google.com"
- :target "_blank"}
- [s/image {:soda {:size :medium}
- :src "images/wireframe/image.png"}]])
-
-(defcard-doc
- "
-### Image Link
-
-An image can be formatted to link to other content
-"
- (mkdn-pprint-source image-link))
-
-(defcard-rg
- [image-link])
-
-
-
-;; ====================
-;; STATES
-
-(defcard-doc
- "# STATES")
-
-
-;; hidden
-
-(defn hidden []
- [s/image {:soda {:state :hidden}
- :src "images/wireframe/image.png"}])
-
-(defcard-doc
- "
-### Hidden
-
-An image can be hidden
-"
- (mkdn-pprint-source hidden))
-
-(defcard-rg
- [hidden])
-
-
-;; disabled
-
-(defn disabled []
- [s/image {:soda {:state :disabled
- :size :medium}
- :src "images/wireframe/image.png"}])
-
-(defcard-doc
- "
-### Disabled
-
-An image can show that it is disabled and cannot be selected
-"
- (mkdn-pprint-source disabled))
-
-(defcard-rg
- [disabled])
-
-
-
-;; ====================
-;; VARIATIONS
-
-(defcard-doc
- "# VARIATIONS")
-
-
-;; avatar
-
-(defn avatar []
- [:div
- [s/image {:soda {:avatar? true}
- :src "images/wireframe/image.png"}]
- "Username"])
-
-(defcard-doc
- "
-### Avatar
-
-An image may be formatted to appear inline with text as an avatar
-"
- (mkdn-pprint-source avatar))
-
-(defcard-rg
- [avatar])
-
-
-;; bordered
-
-(defn bordered []
- [s/image {:soda {:bordered? true
- :size :medium}
- :src "images/wireframe/white-image.png"}])
-
-(defcard-doc
- "
-### Bordered
-
-An image may include a border to emphasize the edges of white or transparent content
-"
- (mkdn-pprint-source bordered))
-
-(defcard-rg
- [bordered])
-
-
-;; fluid
-
-(defn fluid []
- [s/image {:soda {:fluid? true}
- :src "images/wireframe/image.png"}])
-
-(defcard-doc
- "
-### Fluid
-
-An image can take up the width of its container
-"
- (mkdn-pprint-source fluid))
-
-(defcard-rg
- [fluid])
-
-
-;; rounded
-
-(defn rounded []
- [s/image {:soda {:rounded? true
- :size :medium}
- :src "images/wireframe/image.png"}])
-
-(defcard-doc
- "
-### Rounded
-
-An image may appear rounded
-"
- (mkdn-pprint-source rounded))
-
-(defcard-rg
- [rounded])
-
-
-;; circular
-
-(defn circular []
- [s/image {:soda {:circular? true
- :size :medium}
- :src "images/wireframe/square-image.png"}])
-
-(defcard-doc
- "
-### Circular
-
-An image may appear circular
-"
- (mkdn-pprint-source circular))
-
-(defcard-rg
- [circular])
-
-
-;; aligned
-
-(defn aligned []
- [:div
- [s/image {:soda {:aligned :top
- :size :tiny}
- :src "images/wireframe/square-image.png"}]
- "Top Aligned"
-
- [s/divider {:soda {:type :default}}]
-
- [s/image {:soda {:aligned :middle
- :size :tiny}
- :src "images/wireframe/square-image.png"}]
- "Middle Aligned"
-
- [s/divider {:soda {:type :default}}]
-
- [s/image {:soda {:aligned :bottom
- :size :tiny}
- :src "images/wireframe/square-image.png"}]
- "Bottom Aligned"])
-
-(defcard-doc
- "
-### Vertically Aligned
-
-An image can specify its vertical alignment
-"
- (mkdn-pprint-source aligned))
-
-(defcard-rg
- [aligned])
-
-
-;; centered
-
-(defn centered []
- [s/segment {:soda {:type :default}}
- [s/image {:soda {:centered? true
- :size :medium}
- :src "images/wireframe/square-image.png"}]
- [h/fake-content]])
-
-(defcard-doc
- "
-### Centered
-
-An image can appear centered in a content block
-"
- (mkdn-pprint-source centered))
-
-(defcard-rg
- [centered])
-
-
-;; spaced
-
-(defn spaced []
- [s/segment {:soda {:type :default}}
- [s/image {:soda {:spaced :right
- :size :mini}
- :src "images/wireframe/square-image.png"}]
-
- "foo bar baz"
-
- [s/image {:soda {:spaced :default
- :size :mini}
- :src "images/wireframe/square-image.png"}]
-
- "foo bar baz"
-
- [s/image {:soda {:spaced :left
- :size :mini}
- :src "images/wireframe/square-image.png"}]
- ])
-
-(defcard-doc
- "
-### Spaced
-
-An image can appear spaced in a content block
-"
- (mkdn-pprint-source spaced))
-
-(defcard-rg
- [spaced])
-
-
-;; floated
-
-(defn floated []
- [s/segment {:soda {:type :default}}
- [s/image {:soda {:floated :left
- :size :small}
- :src "images/wireframe/square-image.png"}]
- [h/fake-content]
- [h/fake-content]
-
- [s/image {:soda {:floated :right
- :size :small}
- :src "images/wireframe/square-image.png"}]
- [h/fake-content]
- [h/fake-content]
- ])
-
-(defcard-doc
- "
-### Floated
-
-An image can sit to the left or right of other content
-"
- (mkdn-pprint-source floated))
-
-(defcard-rg
- [floated])
-
-
-;; size
-
-(defn size []
- [:div
- [s/image {:soda {:size :mini}
- :src "images/wireframe/square-image.png"}]
- [s/image {:soda {:size :tiny}
- :src "images/wireframe/square-image.png"}]
- [s/image {:soda {:size :small}
- :src "images/wireframe/square-image.png"}]
- [s/image {:soda {:size :medium}
- :src "images/wireframe/square-image.png"}]
- [s/image {:soda {:size :large}
- :src "images/wireframe/square-image.png"}]
- [s/image {:soda {:size :big}
- :src "images/wireframe/square-image.png"}]
- [s/image {:soda {:size :huge}
- :src "images/wireframe/square-image.png"}]
- [s/image {:soda {:size :massive}
- :src "images/wireframe/square-image.png"}]])
-
-(defcard-doc
- "
-### Size
-
-An image may appear at different sizes
-"
- (mkdn-pprint-source size))
-
-(defcard-rg
- [size])
-
-
-
-;; ====================
-;; GROUPS
-
-(defcard-doc
- "# GROUPS")
-
-
-;; Groups-Size
-
-(defn groups-size []
- [s/images {:soda {:size :tiny}}
- [s/image {:src "images/wireframe/image.png"}]
- [s/image {:src "images/wireframe/image.png"}]
- [s/image {:src "images/wireframe/image.png"}]])
-
-(defcard-doc
- "
-### Size
-
-A group of images can be formatted to have the same size.
-"
- (mkdn-pprint-source groups-size))
-
-(defcard-rg
- [groups-size])
diff --git a/src/devcards/soda_ash/elements/input_card.cljs b/src/devcards/soda_ash/elements/input_card.cljs
deleted file mode 100644
index 14c0650..0000000
--- a/src/devcards/soda_ash/elements/input_card.cljs
+++ /dev/null
@@ -1,416 +0,0 @@
-(ns soda-ash.elements.input-card
- (:require-macros [devcards.core
- :as dc
- :refer [defcard-rg defcard-doc mkdn-pprint-source]])
- (:require [reagent.core :as reagent]
- [devcards.core]
- [soda-ash.elements.card-helpers :as h]
- [soda-ash.element :as s]))
-
-
-
-(defcard-doc
-"
-[back](#!/soda_ash.an_overview_card)
-
-# input
-
-* **base class** ui input
-* **default tag** :div
-* **:state** :focus | :loading | :disabled | :error
-* **variations**
- :action | :fluid? | :icon | :inverted? | :labeled | :transparent? |
- :size
-
-where
-
-* **:action** :default | :left
-* **:icon** :default | :left
-* **:labeled** :default | :right | :left-corner | :corner
-* **size**
- :mini | :tiny | :small | :large | :big | :huge | :massive
-
----
-")
-
-
-;; Input
-
-(defn input []
- [s/input {}
- [:input {:type "text"
- :placeholder "Search..."}]])
-
-(defcard-doc
- "
-### Input
-
-A standard input
-"
- (mkdn-pprint-source input))
-
-(defcard-rg
- [input])
-
-
-
-;; ====================
-;; STATES
-
-(defcard-doc
-"# STATES")
-
-
-;; Focus
-
-(defn focus []
- [s/input {:soda {:state :focus}}
- [:input {:type "text"
- :placeholder "Search..."}]])
-
-(defcard-doc
- "
-### Focus
-
-An input field can show a user is currently interacting with it
-"
- (mkdn-pprint-source focus))
-
-(defcard-rg
- [focus])
-
-
-;; Loading
-
-(defn loading []
- [s/input {:soda {:icon :left
- :state :loading}}
- [:input {:type "text"
- :placeholder "Search..."}]
- [s/icon {:soda {:icon :search}}]])
-
-(defcard-doc
- "
-### Loading
-
-An icon input field can show that it is currently loading data
-
-Notes:
-
-* Loading inputs automatically modify the input's icon on loading state to show loading indication
-"
- (mkdn-pprint-source loading))
-
-(defcard-rg
- [loading])
-
-
-;; Disabled
-
-(defn disabled []
- [s/input {:soda {:state :disabled}}
- [:input {:type "text"
- :placeholder "Search..."}]])
-
-(defcard-doc
- "
-### Disabled
-
-An input field can show that it is disabled
-"
- (mkdn-pprint-source disabled))
-
-(defcard-rg
- [disabled])
-
-
-;; Error
-
-(defn error []
- [s/input {:soda {:state :error}}
- [:input {:type "text"
- :placeholder "Search..."}]])
-
-(defcard-doc
- "
-### Error
-
-An input field can show the data contains errors
-"
- (mkdn-pprint-source error))
-
-(defcard-rg
- [error])
-
-
-
-;; ====================
-;; VARIATIONS
-
-(defcard-doc
-"# VARIATIONS")
-
-
-;; Icon
-
-(defn icon []
- [:div
- [s/input {:soda {:icon :default}}
- [:input {:type "text"
- :placeholder "Search..."}]
- [s/icon {:soda {:icon :search}}]]
-
- [s/divider {}]
-
- [s/input {:soda {:icon :left}}
- [:input {:type "text"
- :placeholder "Search users..."}]
- [s/icon {:soda {:icon :users}}]]])
-
-(defcard-doc
- "
-### Icon
-
-An input can be formatted with an icon
-
-Notes:
-
-* Input icons do not receive pointer-events unless a link icon is used.
-"
- (mkdn-pprint-source icon))
-
-(defcard-rg
- [icon])
-
-
-;; Labeled
-
-(defn labeled []
- [s/input {:soda {:labeled :default}}
- [s/label {} "http://"]
- [:input {:type "text" :placeholder "mysite.com"}]])
-
-(defcard-doc
- "
-### Labeled
-
-An input can be formatted with a label
-"
- (mkdn-pprint-source labeled))
-
-(defcard-rg
- [labeled])
-
-
-;; Labeled-right
-
-(defn labeled-right []
- [s/input {:soda {:labeled :right}}
- [:input {:type "text" :placeholder "Enter weight.."}]
- [s/label {:soda {:basic? true}} "kg"]])
-
-(defcard-doc
- (mkdn-pprint-source labeled-right))
-
-(defcard-rg
- [labeled-right])
-
-
-;; Labeled-right2
-
-(defn labeled-right2 []
- [s/input {:soda {:labeled :right}}
- [s/label {} "$"]
- [:input {:type "text" :placeholder "Amount"}]
- [s/label {:soda {:basic? true}} ".00"]
-])
-
-(defcard-doc
- (mkdn-pprint-source labeled-right2))
-
-(defcard-rg
- [labeled-right2])
-
-
-;; Labeled-right-icon-left
-
-(defn labeled-right-icon-left []
- [s/input {:soda {:labeled :right
- :icon :left}}
- [s/icon {:soda {:icon :tags}}]
- [:input {:type "text" :placeholder "Enter tags"}]
- [s/label {:soda {:tag :a
- :type :tag}} "Add Tag"]])
-
-(defcard-doc
- (mkdn-pprint-source labeled-right-icon-left))
-
-(defcard-rg
- [labeled-right-icon-left])
-
-
-;; Labeled-left-corner
-
-(defn labeled-left-corner []
- [s/input {:soda {:labeled :left-corner}}
- [:input {:type "text" :placeholder "Search"}]
- [s/label {:soda {:type :left-corner}}
- [s/icon {:soda {:icon :asterisk}}]]])
-
-(defcard-doc
- (mkdn-pprint-source labeled-left-corner))
-
-(defcard-rg
- [labeled-left-corner])
-
-
-;; Labeled-right-corner
-
-(defn labeled-right-corner []
- [s/input {:soda {:labeled :corner}}
- [:input {:type "text" :placeholder "Search"}]
- [s/label {:soda {:type :right-corner}}
- [s/icon {:soda {:icon :asterisk}}]]])
-
-(defcard-doc
- (mkdn-pprint-source labeled-right-corner))
-
-(defcard-rg
- [labeled-right-corner])
-
-
-;; action
-
-(defn action []
- [s/input {:soda {:action :default}}
- [:input {:type "text" :placeholder "Search"}]
- [s/button {:on-click #(js/console.log "clicked!")}
- "Search"]])
-
-(defcard-doc
- "
-### Action
-
-An input can be formatted to alert the user to an action they may perform
-"
- (mkdn-pprint-source action))
-
-(defcard-rg
- [action])
-
-
-;; left-action
-
-(defn left-action []
- [s/input {:soda {:action :left}}
- [s/button {:soda {:type :labeled-icon
- :color :teal}
- :on-click #(js/console.log "clicked!")}
- [s/icon {:soda {:icon :cart}}]
- "Checkout"]
- [:input {:type "text" :value "52.03"}]])
-
-(defcard-doc
- (mkdn-pprint-source left-action))
-
-(defcard-rg
- [left-action])
-
-
-;; transparent
-
-(defn transparent []
- [s/input {:soda {:transparent? true}}
- [:input {:type "text" :placeholder "Search..."}]])
-
-(defcard-doc
- "
-### Transparent
-
-A transparent input has no background
-"
- (mkdn-pprint-source transparent))
-
-(defcard-rg
- [transparent])
-
-
-;; inverted
-
-(defn inverted []
- [s/segment {:soda {:inverted? true}}
- [s/input {:soda {:inverted? true}}
- [:input {:type "text" :placeholder "Search..."}]]])
-
-(defcard-doc
- "
-### Inverted
-
-An input can be formatted to appear on dark backgrounds
-"
- (mkdn-pprint-source inverted))
-
-(defcard-rg
- [inverted])
-
-
-;; fluid
-
-(defn fluid []
- [s/input {:soda {:fluid? true}}
- [:input {:type "text" :placeholder "Search..."}]])
-
-(defcard-doc
- "
-### Fluid
-
-An input can take the size of its container
-"
- (mkdn-pprint-source fluid))
-
-(defcard-rg
- [fluid])
-
-
-;; size
-
-(defn size []
- [:div
- [s/input {:soda {:size :mini}}
- [:input {:type "text" :placeholder "Search mini..."}]]
-
- [s/divider {:soda {:hidden? true}}]
- [s/input {:soda {:size :small}}
- [:input {:type "text" :placeholder "Search small..."}]]
-
- [s/divider {:soda {:hidden? true}}]
- [s/input {:soda {:size :large}}
- [:input {:type "text" :placeholder "Search large..."}]]
-
- [s/divider {:soda {:hidden? true}}]
- [s/input {:soda {:size :big}}
- [:input {:type "text" :placeholder "Search big..."}]]
-
- [s/divider {:soda {:hidden? true}}]
- [s/input {:soda {:size :huge}}
- [:input {:type "text" :placeholder "Search huge..."}]]
-
- [s/divider {:soda {:hidden? true}}]
- [s/input {:soda {:size :massive}}
- [:input {:type "text" :placeholder "Search massive..."}]]
- ])
-
-(defcard-doc
- "
-### Size
-
-An input can vary in size
-
-Notes:
-
-* Inputs will automatically size themselves unless you manually declare a width
-"
- (mkdn-pprint-source size))
-
-(defcard-rg
- [size])
diff --git a/src/devcards/soda_ash/elements/label_card.cljs b/src/devcards/soda_ash/elements/label_card.cljs
deleted file mode 100644
index 8b2e31a..0000000
--- a/src/devcards/soda_ash/elements/label_card.cljs
+++ /dev/null
@@ -1,737 +0,0 @@
-(ns soda-ash.elements.label-card
- (:require-macros [devcards.core
- :as dc
- :refer [defcard-rg defcard-doc mkdn-pprint-source]])
- (:require [reagent.core :as reagent]
- [devcards.core]
- [soda-ash.elements.card-helpers :as h]
- [soda-ash.element :as s]))
-
-
-
-(defcard-doc
-"
-[back](#!/soda_ash.an_overview_card)
-
-# label
-
-* **base class** ui label
-* **default tag** :div
-* **:type**
- :default |
- *ATTACHED*
- :top-attached |
- :bottom-attached |
- :top-right-attached |
- :top-left-attached |
- :bottom-left-attached |
- :bottom-right-attached |
- *CORNER*
- :left-corner |
- :right-corner |
- *FLOATING*
- :floating |
- *HORIZONTAL*
- :horizontal |
- *IMAGE*
- :image |
- *POINTING*
- :pointing |
- :pointing-below |
- :left-pointing |
- :right-pointing |
- *TAG*
- :tag |
- *RIBBON*
- :ribbon |
- :right-ribbon
-* **content** detail | icon | image | link
-* **variations** :basic? | :circular? | :color | :size
-
-where
-
-* **:color**
- :red | :orange | :yellow | :olive |
- :green | :teal | :blue | :violet |
- :purple | :pink | :brown | :grey |
- :black
-* **:size**
- :mini | :tiny | :small | :large | :big | :huge | :massive
-
-# labels
-
-* **base class** ui labels
-* **default tag** :div
-
----
-")
-
-
-
-;; ====================
-;; TYPES
-
-(defcard-doc
-"# TYPES")
-
-
-;; Label
-
-(defn label []
- [s/label {:soda {:type :default}}
- [s/icon {:soda {:icon :mail}}]
- "23"])
-
-(defcard-doc
- "
-### Label
-
-A label
-"
- (mkdn-pprint-source label))
-
-(defcard-rg
- [label])
-
-
-;; Image
-
-(defn image []
- [:div
- [s/label {:soda {:tag :a
- :type :image}}
- [s/image {:src "images/avatar/small/joe.jpg"}]
- "Joe"
- [s/icon {:soda {:icon :delete}}]]
- [s/label {:soda {:tag :a
- :type :image}}
- [s/image {:src "images/avatar/small/elliot.jpg"}]
- "Elliot"
- [s/icon {:soda {:icon :delete}}]]
- [s/label {:soda {:tag :a
- :type :image}}
- [s/image {:src "images/avatar/small/stevie.jpg"}]
- "Stevie"
- [s/icon {:soda {:icon :delete}}]]
- ])
-
-(defcard-doc
- "
-### Image
-
-A label can be formatted to emphasize an image
-"
- (mkdn-pprint-source image))
-
-(defcard-rg
- [image])
-
-
-;; Pointing
-
-(defn pointing []
- [:form.ui.fluid.form
- [:div.field
- [:input {:type "text" :placeholder "Some text.."}]
- [s/label {:soda {:type :pointing}}
- "Please enter a value"]]
-
- [:div.field
- [s/label {:soda {:type :pointing-below}}
- "Please enter a value"]
- [:input {:type "text" :placeholder "Some text.."}]]
-
- [:div.inline.field
- [:input {:type "text" :placeholder "Some text.."}]
- [s/label {:soda {:type :left-pointing
- :color :red
- :basic? :red}}
- "Please enter a value"]]
-
- [:div.inline.field
- [s/label {:soda {:type :right-pointing}}
- "Please enter a value"]
- [:input {:type "text" :placeholder "Some text.."}]]
- ])
-
-(defcard-doc
- "
-### Pointing
-
-A label can point to content next to it
-"
- (mkdn-pprint-source pointing))
-
-(defcard-rg
- [pointing])
-
-
-;; Corner
-
-(defn corner []
- [:div.ui.two.column.grid
- [:div.column
- [:div.ui.fluid.image
- [s/label {:soda {:type :left-corner}}
- [s/icon {:soda {:icon :heart}}]]
- [s/image {:src "images/wireframe/image.png"}]
- ]]
-
- [:div.column
- [:div.ui.fluid.image
- [s/label {:soda {:type :right-corner
- :color :red}}
- [s/icon {:soda {:icon :save}}]]
- [s/image {:src "images/wireframe/image.png"}]
- ]]])
-
-(defcard-doc
- "
-### Corner
-
-A label can position itself in the corner of an element
-
-Notes:
-
-* Regarding style (not soda): A corner label must be positioned inside a container with *position: relative* to display properly. If a container is rounded you will need to add *overflow:hidden* to the container to produce a rounded label.
-"
- (mkdn-pprint-source corner))
-
-(defcard-rg
- [corner])
-
-
-;; Tag
-
-(defn tag []
- [:div
- [s/label {:soda {:tag :a
- :type :tag}}
- "New"]
-
- [s/label {:soda {:tag :a
- :type :tag
- :color :red}}
- "Upcoming"]
-
- [s/label {:soda {:tag :a
- :type :tag
- :color :teal}}
- "Featured"]])
-
-(defcard-doc
- "
-### Tag
-
-A label can appear as a tag
-"
- (mkdn-pprint-source tag))
-
-(defcard-rg
- [tag])
-
-
-;; Ribbon
-
-(defn ribbon []
- [:div.ui.two.column.grid
- [:div.column
- [s/segment {:soda {:type :raised}}
- [s/label {:soda {:type :ribbon
- :color :red}}
- "Overview"]
- [:span "Account Details"]
- [h/fake-content]
- ]]
-
- [:div.column
- [s/segment {:soda {:type :raised}}
- [s/label {:soda {:type :right-ribbon
- :color :orange}}
- "Specs"]
- [h/fake-content]]]])
-
-(defcard-doc
- "
-### Ribbon
-
-A label can appear as a ribbon attaching itself to an element.
-"
- (mkdn-pprint-source ribbon))
-
-(defcard-rg
- [ribbon])
-
-
-
-;; Attached
-
-(defn attached []
- [:div
- [s/segment {:soda {:type :default}}
- [s/label {:soda {:type :top-attached}} "HTML"]
- [h/fake-content]]
-
- [s/segment {:soda {:type :default}}
- [s/label {:soda {:type :bottom-attached}} "CSS"]
- [h/fake-content]]
-
- [s/segment {:soda {:type :default}}
- [s/label {:soda {:type :top-right-attached}} "Code"]
- [h/fake-content]]
-
- [s/segment {:soda {:type :default}}
- [s/label {:soda {:type :top-left-attached}} "View"]
- [h/fake-content]]
-
- [s/segment {:soda {:type :default}}
- [s/label {:soda {:type :bottom-left-attached}} "User View"]
- [h/fake-content]]
-
- [s/segment {:soda {:type :default}}
- [s/label {:soda {:type :bottom-right-attached}} "Admin View"]
- [h/fake-content]]])
-
-(defcard-doc
- "
-### Attached
-
-A label can attach to a content segment
-
-Notes:
-
-* Attached labels attempt to intelligently pad other content to account for their position, but may not in all cases apply this padding correctly. If this happens you may need to manually correct the padding of the other elements inside the container.
-"
- (mkdn-pprint-source attached))
-
-(defcard-rg
- [attached])
-
-
-;; Horizontal
-
-(defn horizontal []
- [:div.ui.divided.selection.list
- [:a.item
- [s/label {:soda {:type :horizontal
- :color :red}}
- "Fruit"]
- "Kumquats"]
- [:a.item
- [s/label {:soda {:type :horizontal
- :color :purple}}
- "Candy"]
- "Ice Cream"]
- ])
-
-(defcard-doc
- "
-### Horizontal
-
-A horizontal label is formatted to label content along-side it horizontally
-"
- (mkdn-pprint-source horizontal))
-
-(defcard-rg
- [horizontal])
-
-
-;; Floating
-
-(defn floating []
- [:div.ui.compact.menu
- [:a.item
- [s/icon {:soda {:icon :mail}}]
- "Messages"
- [s/label {:soda {:type :floating
- :color :red}}
- "22"]]
-
- [:a.item
- [s/icon {:soda {:icon :users}}]
- "Friends"
- [s/label {:soda {:type :floating
- :color :teal}}
- "22"]]])
-
-(defcard-doc
- "
-### Floating
-
-A label can float above another element
-"
- (mkdn-pprint-source floating))
-
-(defcard-rg
- [floating])
-
-
-
-;; ====================
-;; CONTENT
-
-(defcard-doc
-"# CONTENT")
-
-
-;; Detail
-
-(defn detail []
- [s/label {:soda {:type :default}}
- "Dogs"
- [:div.detail "214"]])
-
-(defcard-doc
- "
-### Detail
-
-A label can contain a detail
-"
- (mkdn-pprint-source detail))
-
-(defcard-rg
- [detail])
-
-
-;; Icon
-
-(defn icon []
- [:div
- [s/label {:soda {:tag :a}}
- [s/icon {:soda {:icon :mail}}]
- "Mail"]
-
- [s/label {:soda {:tag :a}}
- "Tag"
- [s/icon {:soda {:icon :delete}}]]])
-
-(defcard-doc
- "
-### Icon
-
-A label can contain a icon
-"
- (mkdn-pprint-source icon))
-
-(defcard-rg
- [icon])
-
-
-;; Image
-
-(defn content-image []
- [:div
- [s/label {:soda {:tag :a}}
- [s/image {:soda {:spaced :right
- :avatar? true}
- :src "images/avatar/small/elliot.jpg"}]
- "Elliot"]
-
- [s/label {:soda {:tag :a}}
- [:img {:src "images/avatar/small/stevie.jpg"}]
- "Stevie"]])
-
-(defcard-doc
- "
-### Image
-
-A label can include an image
-"
- (mkdn-pprint-source content-image))
-
-(defcard-rg
- [content-image])
-
-
-;; Link
-
-(defn content-link []
- [s/label {:soda {:tag :a}}
- [s/icon {:soda {:icon :mail}}]
- "23"])
-
-(defcard-doc
- "
-### Link
-
-A label can be a link or contain an item that links
-"
- (mkdn-pprint-source content-link))
-
-(defcard-rg
- [content-link])
-
-
-
-;; ====================
-;; VARIATIONS
-
-(defcard-doc
- "# VARIATIONS")
-
-(def colors
- [:red :orange :yellow :olive
- :green :teal :blue :violet
- :purple :pink :brown :grey
- :black])
-
-
-;; Circular
-
-(defn circle [color]
- [s/label {:soda {:tag :a
- :circular? true
- :color color}}
- "2"])
-
-(defn circular []
- [:div
- (for [color colors]
- ^{:key color}
- [circle color])])
-
-(defcard-doc
- "
-### Circular
-
-A label can be circular
-"
- (mkdn-pprint-source circular))
-
-(defcard-rg
- [circular])
-
-
-;; Circular-Empty
-
-(defn circle-empty [color]
- [s/label {:soda {:tag :a
- :circular? true
- :color color
- :empty? true}}])
-
-(defn circular-empty []
- [:div
- (for [color colors]
- ^{:key color}
- [circle-empty color])])
-
-(defcard-doc
- (mkdn-pprint-source circular-empty))
-
-(defcard-rg
- [circular-empty])
-
-
-;; Basic
-
-(defn basic []
- [:div
- [s/label {:soda {:tag :a
- :basic? true}}
- "Basic"]
-
- [s/label {:soda {:tag :a
- :type :pointing
- :basic? true
- :color :blue}}
- "Pointing"]
-
- [s/label {:soda {:type :image
- :basic? true}}
- [s/image {:src "images/avatar/small/elliot.jpg"}]
- "Elliot"]])
-
-(defcard-doc
- "
-### Basic
-
-A label can reduce its complexity
-"
- (mkdn-pprint-source basic))
-
-(defcard-rg
- [basic])
-
-
-;; Colored
-
-(defn colored []
- [:div
- [s/label {:soda {:tag :a
- :color :red}}
- "Red"]
- [s/label {:soda {:tag :a
- :color :orange}}
- "Orange"]
- [s/label {:soda {:tag :a
- :color :yellow}}
- "Yellow"]
- [s/label {:soda {:tag :a
- :color :olive}}
- "Olive"]
- [s/label {:soda {:tag :a
- :color :green}}
- "Green"]
- [s/label {:soda {:tag :a
- :color :teal}}
- "Teal"]
- [s/label {:soda {:tag :a
- :color :blue}}
- "Blue"]
- [s/label {:soda {:tag :a
- :color :violet}}
- "Violet"]
- [s/label {:soda {:tag :a
- :color :purple}}
- "Purple"]
- [s/label {:soda {:tag :a
- :color :pink}}
- "Pink"]
- [s/label {:soda {:tag :a
- :color :brown}}
- "Brown"]
- [s/label {:soda {:tag :a
- :color :grey}}
- "Grey"]
- [s/label {:soda {:tag :a
- :color :black}}
- "Black"]])
-
-(defcard-doc
- "
-### Colored
-
-A label can have different colors
-"
- (mkdn-pprint-source colored))
-
-(defcard-rg
- [colored])
-
-
-
-;; Size
-
-(defn size []
- [:div
- [s/label {:soda {:size :mini}}
- "Mini"]
- [s/label {:soda {:size :tiny}}
- "Tiny"]
- [s/label {:soda {:size :small}}
- "Small"]
- [s/label {:soda {:type :default}}
- "Medium"]
- [s/label {:soda {:size :large}}
- "Large"]
- [s/label {:soda {:size :big}}
- "Big"]
- [s/label {:soda {:size :huge}}
- "Huge"]
- [s/label {:soda {:size :massive}}
- "Massive"]
- ])
-
-(defcard-doc
- "
-### Size
-
-A label can have different sizes
-"
- (mkdn-pprint-source size))
-
-(defcard-rg
- [size])
-
-
-
-;; ====================
-;; GROUPS
-
-(defcard-doc
-"# GROUPS")
-
-
-;; Group-Size
-
-(defn group-size []
- [s/labels {:soda {:size :huge}}
- [s/label {} "Fun"]
- [s/label {} "Happy"]
- [s/label {} "Smart"]
- [s/label {} "Witty"]])
-
-(defcard-doc
- "
-### Group Size
-
-Labels can share sizes together
-"
- (mkdn-pprint-source group-size))
-
-(defcard-rg
- [group-size])
-
-
-;; Colored-Group
-
-(defn colored-group []
- [s/labels {:soda {:color :blue}}
- [s/label {} "Fun"]
- [s/label {} "Happy"]
- [s/label {} "Smart"]
- [s/label {} "Witty"]])
-
-(defcard-doc
- "
-### Colored Group
-
-Labels can share colors together
-"
- (mkdn-pprint-source colored-group))
-
-(defcard-rg
- [colored-group])
-
-
-;; Tag-Group
-
-(defn tag-group []
- [s/labels {:soda {:type :tag}}
- [s/label {} "Fun"]
- [s/label {} "Happy"]
- [s/label {} "Smart"]
- [s/label {} "Witty"]])
-
-(defcard-doc
- "
-### Tag Group
-
-Labels can share tag formatting
-"
- (mkdn-pprint-source tag-group))
-
-(defcard-rg
- [tag-group])
-
-
-;; Circular-Group
-
-(defn circular-group []
- [s/labels {:soda {:circular? true}}
- [s/label {} "Fun"]
- [s/label {} "Happy"]
- [s/label {} "Smart"]
- [s/label {} "Witty"]])
-
-(defcard-doc
- "
-### Circular Group
-
-Labels can share shapes
-"
- (mkdn-pprint-source circular-group))
-
-(defcard-rg
- [circular-group])
diff --git a/src/devcards/soda_ash/elements/list_card.cljs b/src/devcards/soda_ash/elements/list_card.cljs
deleted file mode 100644
index a62dec5..0000000
--- a/src/devcards/soda_ash/elements/list_card.cljs
+++ /dev/null
@@ -1,911 +0,0 @@
-(ns soda-ash.elements.list-card
- (:require-macros [devcards.core
- :as dc
- :refer [defcard-rg defcard-doc mkdn-pprint-source]])
- (:require [reagent.core :as reagent]
- [devcards.core]
- [soda-ash.elements.card-helpers :as h]
- [soda-ash.element :as s]))
-
-
-
-(defcard-doc
-"
-[back](#!/soda_ash.an_overview_card)
-
-# list
-
-* **base class** ui list
-* **default tag** :div
-* **:type** :bulleted | :bulleted-link | :link | :ordered | :ordered-link
-* **variations**
- :aligned | :animated? | :celled? | :divided? | :horizontal? |
- :inverted? | :right-floated? | :relaxed | :selection? | :size
-
-where
-
-* **:aligned** :top | :middle | :bottom
-* **:relaxed** :default | :very
-* **:size** :default | :mini | :tiny | :small | :large | :big | :huge | :massive
-
----
-")
-
-
-
-;; ====================
-;; TYPES
-
-(defcard-doc
- "# TYPES")
-
-
-;; List
-
-(defn s-list []
- [s/s-list {}
- [:div.item "Apples"]
- [:div.item "Pears"]
- [:div.item "Oranges"]])
-
-(defcard-doc
- "
-### List
-
-A list groups related content
-"
- (mkdn-pprint-source s-list))
-
-(defcard-rg
- [s-list])
-
-
-
-;; List2
-
-(defn s-list2 []
- [s/s-list {}
- [:div.item
- [s/icon {:soda {:icon :users}}]
- [:div.content "Semantic UI"]]
-
- [:div.item
- [s/icon {:soda {:icon :marker}}]
- [:div.content "New York, NY"]]
-
- [:div.item
- [s/icon {:soda {:icon :mail}}]
- [:div.content
- [:a {:href "mailto:jack@semantic-ui.com"}
- "jack@semantic-ui.com"]]]
-
- [:div.item
- [s/icon {:soda {:icon :linkify}}]
- [:div.content
- [:a {:href "http://www.semantic-ui.com"}
- "semantic-ui.com"]]]])
-
-(defcard-doc
- (mkdn-pprint-source s-list2))
-
-(defcard-rg
- [s-list2])
-
-
-;; Bulleted
-
-(defn s-bulleted []
- [s/s-list {:soda {:type :bulleted}}
- [:div.item "Gaining Access"]
- [:div.item "Inviting Friends"]
- [:div.item
- [:div "Benefits"]
- [:div.list ;; <-- Note: not the same as an s-list
- [:div.item "Use Anywhere"]
- [:div.item "Rebates"]
- [:div.item "Discounts"]]]
- [:div.item "Warranty"]])
-
-(defcard-doc
-"
-### Bulleted
-
-A list can mark items with a bullet
-"
- (mkdn-pprint-source s-bulleted))
-
-(defcard-rg
- [s-bulleted])
-
-
-;; Bulleted2
-
-(defn s-bulleted2 []
- [s/s-list {:soda {:tag :ul
- :type :bulleted}}
- [:li "Gaining Access"]
- [:li "Inviting Friends"]
- [:li "Benefits"
- [:ul
- [:li "Use Anywhere"]
- [:li "Rebates"]
- [:li "Discounts"]]]
- [:li "Warranty"]])
-
-(defcard-doc
-"
-For convenience, a simple bulleted list can also use `:ul` tag.
-"
- (mkdn-pprint-source s-bulleted2))
-
-(defcard-rg
- [s-bulleted2])
-
-
-
-;; Ordered
-
-(defn s-ordered []
- [s/s-list {:soda {:type :ordered}}
- [:div.item "Gaining Access"]
- [:div.item "Inviting Friends"]
- [:div.item
- [:div "Benefits"]
- [:div.list ;; <-- Note: not the same as an s-list
- [:div.item "Use Anywhere"]
- [:div.item "Rebates"]
- [:div.item "Discounts"]]]
- [:div.item "Warranty"]])
-
-(defcard-doc
-"
-### Ordered
-
-A list can be ordered numerically
-"
- (mkdn-pprint-source s-ordered))
-
-(defcard-rg
- [s-ordered])
-
-
-;; Ordered2
-
-(defn s-ordered2 []
- [s/s-list {:soda {:tag :ol
- :type :ordered}}
- [:li "Gaining Access"]
- [:li "Inviting Friends"]
- [:li "Benefits"
- [:ol
- [:li "Use Anywhere"]
- [:li "Rebates"]
- [:li "Discounts"]]]
- [:li "Warranty"]])
-
-(defcard-doc
-"
-An ordered list can also use the `:ol` tag
-"
- (mkdn-pprint-source s-ordered2))
-
-(defcard-rg
- [s-ordered2])
-
-
-;; Ordered3
-
-(defn s-ordered3 []
- [s/s-list {:soda {:tag :ol
- :type :ordered}}
- [:li {:value "*"} "Gaining Access"]
- [:li {:value "*"} "Inviting Friends"]
- [:li {:value "*"} "Benefits"
- [:ol
- [:li {:value "-"} "Use Anywhere"]
- [:li {:value "-"} "Rebates"]
- [:li {:value "-"} "Discounts"]]]
- [:li {:value "*"} "Warranty"]])
-
-(defcard-doc
-"
-You can also manually specify a value for an ordered list using `:data-value` on a `:div`, or `:value` on an `:li`.
-"
- (mkdn-pprint-source s-ordered3))
-
-(defcard-rg
- [s-ordered3])
-
-
-;; Link
-
-(defn s-link []
- [s/s-list {:soda {:type :link}}
- [:a.active.item "Home"]
- [:a.item "About"]
- [:a.item "Jobs"]
- [:a.item "Team"]])
-
-(defcard-doc
-"
-### Link
-
-A list can be specially formatted for navigation links
-"
- (mkdn-pprint-source s-link))
-
-(defcard-rg
- [s-link])
-
-
-
-;; ====================
-;; CONTENT
-
-(defcard-doc
- "# CONTENT")
-
-
-;; Item
-
-(defn s-item []
- [s/s-list {}
- [:div.item "1"]
- [:div.item "2"]
- [:div.item "3"]])
-
-(defcard-doc
-"
-### Item
-
-A list item can contain a set of items
-"
- (mkdn-pprint-source s-item))
-
-(defcard-rg
- [s-item])
-
-
-;; Icon
-
-(defn s-icon []
- [s/s-list {}
- [:a.item
- [s/icon {:soda {:icon :help}}]
- [:div.content
- [:div.header "Floated Icon"]
- [:div.description
- "This text will always have a left margin to make sure it sits
- alongside your icon"]]]
-
- [:a.item
- [s/icon {:soda {:icon :right-triangle}}]
- [:div.content
- [:div.header "Icon Alignment"]
- [:div.description
- "Floated icons are by default top aligned. To have an icon top
- aligned try this example."]]]])
-
-(defcard-doc
-"
-### Icon
-
-A list item can contain an icon
-"
- (mkdn-pprint-source s-icon))
-
-(defcard-rg
- [s-icon])
-
-
-;; Image
-
-(defn s-image []
- [s/s-list {}
- [:div.item
- [s/image {:soda {:avatar? true}
- :src "images/avatar2/small/rachel.png"}]
- [:div.content
- [s/header {} "Rachel"]
- [:div.description
- "Last seen watching "
- [:a [:b "Arrested Development"]]
- " just now."]]]
-
- [:div.item
- [s/image {:soda {:avatar? true}
- :src "images/avatar2/small/lindsay.png"}]
- [:div.content
- [s/header {} "Lindsay"]
- [:div.description
- "Last seen watching "
- [:a [:b "Bob's Burgers"]]
- " 10 hours ago."]]]])
-
-(defcard-doc
-"
-### Image
-
-A list item can contain an image
-"
- (mkdn-pprint-source s-image))
-
-(defcard-rg
- [s-image])
-
-
-;; Link-content
-
-(defn s-link-content []
- [s/s-list {}
- [:a.item "What is a FAQ?"]
- [:a.item "Who is our user?"]
- [:a.item "Where is our office located?"]])
-
-(defcard-doc
-"
-### Link
-
-A list can contain links
-"
- (mkdn-pprint-source s-link-content))
-
-(defcard-rg
- [s-link-content])
-
-
-;; Link-content2
-
-(defn s-link-content2 []
- [s/s-list {}
- [:div.item
- [:a.header "Header"]
- [:div.description
- "Click a link in our "
- [:a "description"]]]
-
- [:div.item
- [:a.header "Learn More"]
- [:div.description
- "Learn more about this site on "
- [:a "our FAQ page."]]]])
-
-(defcard-doc
- (mkdn-pprint-source s-link-content2))
-
-(defcard-rg
- [s-link-content2])
-
-
-;; header
-
-(defn s-header []
- [s/s-list {}
- [:div.item
- [:div.header "New York City"]
- "A lovely city"]
-
- [:div.item
- [:div.header "Chicago"]
- "Also quite a lovely city"]
-
- [:div.item
- [:div.header "Los Angeles"]
- "Sometimes can be a lovely city"]
- ])
-
-(defcard-doc
-"
-### Header
-
-A list item can contain a header
-"
- (mkdn-pprint-source s-header))
-
-(defcard-rg
- [s-header])
-
-
-;; description
-
-(defn s-description []
- [s/s-list {}
- [:div.item
- [s/icon {:soda {:icon :marker}}]
- [:div.content
- [:a.header "Krowlewski Jadlo"]
- [:div.description
- "Ad excellent polish restaurant, quick delivery and heart,
- filling mieals."]]]
-
- [:div.item
- [s/icon {:soda {:icon :marker}}]
- [:div.content
- [:a.header "Xian Famous Foods"]
- [:div.description
- "A taste of Shaanxi's delicious culinary traditions, with
- delights like spicy cold noodles and lamb burgers."]]]])
-
-(defcard-doc
-"
-### Description
-
-A list item can contain a description
-"
- (mkdn-pprint-source s-description))
-
-(defcard-rg
- [s-description])
-
-
-
-;; ====================
-;; VARIATIONS
-
-(defcard-doc
- "# VARIATIONS")
-
-
-;; Horizontal
-
-(defn s-horizontal []
- [s/s-list {:soda {:horizontal? true}}
- [:div.item
- [s/image {:soda {:avatar? true}
- :src "images/avatar/small/tom.jpg"}]
- [:div.content
- [:div.header "Tom"]
- "Top Contributor"]]
-
- [:div.item
- [s/image {:soda {:avatar? true}
- :src "images/avatar/small/christian.jpg"}]
- [:div.content
- [:div.header "Christian Rocha"]
- "Admin"]]
-
- [:div.item
- [s/image {:soda {:avatar? true}
- :src "images/avatar/small/matt.jpg"}]
- [:div.content
- [:div.header "Matt"]
- "Top Rated User"]]])
-
-(defcard-doc
- "
-### Horizontal
-
-A list can be formatted to have items appear horizontally
-"
- (mkdn-pprint-source s-horizontal))
-
-(defcard-rg
- [s-horizontal])
-
-
-;; Ordered-Horizontal
-
-(defn s-ordered-horizontal []
- [s/s-list {:soda {:type :ordered
- :horizontal? true}}
- [:div.item
- [s/image {:soda {:avatar? true}
- :src "images/avatar/small/tom.jpg"}]
- [:div.content
- [:div.header "Tom"]
- "Top Contributor"]]
-
- [:div.item
- [s/image {:soda {:avatar? true}
- :src "images/avatar/small/christian.jpg"}]
- [:div.content
- [:div.header "Christian Rocha"]
- "Admin"]]
-
- [:div.item
- [s/image {:soda {:avatar? true}
- :src "images/avatar/small/matt.jpg"}]
- [:div.content
- [:div.header "Matt"]
- "Top Rated User"]]])
-
-(defcard-doc
- "
-### Ordered Horizontal
-"
- (mkdn-pprint-source s-ordered-horizontal))
-
-(defcard-rg
- [s-ordered-horizontal])
-
-
-;; Inverted
-
-(defn s-inverted []
- [s/segment {:soda {:inverted? true}}
- [s/s-list {:soda {:inverted? true
- :divided? true
- :relaxed :default}}
- [:div.item
- [:div.content
- [:div.header "Snickerdoodle"]
- "An excellent companion"]]
-
- [:div.item
- [:div.content
- [:div.header "Poodle"]
- "A poodle, its pretty basic"]]
-
- [:div.item
- [:div.content
- [:div.header "Paulo"]
- "He's alsa a dog"]]]])
-
-(defcard-doc
- "
-### Inverted
-
-A list can be inverted to appear on a dark background
-"
- (mkdn-pprint-source s-inverted))
-
-(defcard-rg
- [s-inverted])
-
-
-;; Selection
-
-(defn s-selection []
- [s/s-list {:soda {:selection? true}}
- [:div.item
- [:div.content
- [:div.header "Snickerdoodle"]
- "An excellent companion"]]
-
- [:div.item
- [:div.content
- [:div.header "Poodle"]
- "A poodle, its pretty basic"]]
-
- [:div.item
- [:div.content
- [:div.header "Paulo"]
- "He's alsa a dog"]]])
-
-(defcard-doc
- "
-### Selection
-
-A selection list formats list items as possible choices
-"
- (mkdn-pprint-source s-selection))
-
-(defcard-rg
- [s-selection])
-
-
-;; Animated
-
-(defn s-animated []
- [s/s-list {:soda {:animated? true}}
-
- [:div.item
- [s/image {:soda {:avatar? true}
- :src "images/avatar/small/tom.jpg"}]
- [:div.content
- [:div.header "Tom"]
- "Top Contributor"]]
-
- [:div.item
- [s/image {:soda {:avatar? true}
- :src "images/avatar/small/christian.jpg"}]
- [:div.content
- [:div.header "Christian Rocha"]
- "Admin"]]
-
- [:div.item
- [s/image {:soda {:avatar? true}
- :src "images/avatar/small/matt.jpg"}]
- [:div.content
- [:div.header "Matt"]
- "Top Rated User"]]])
-
-(defcard-doc
- "
-### Animated
-
-A list can animate to set the current item apart from the list
-
-Notes:
-
-* Be sure content can fit on one line when using the animated variation, otherwise text content will reflow when hovered.
-"
- (mkdn-pprint-source s-animated))
-
-(defcard-rg
- [s-animated])
-
-
-;; Relaxed
-
-(defn s-relaxed []
- [s/s-list {:soda {:relaxed :default}}
-
- [:div.item
- [s/image {:soda {:avatar? true}
- :src "images/avatar/small/tom.jpg"}]
- [:div.content
- [:div.header "Tom"]
- "Top Contributor"]]
-
- [:div.item
- [s/image {:soda {:avatar? true}
- :src "images/avatar/small/christian.jpg"}]
- [:div.content
- [:div.header "Christian Rocha"]
- "Admin"]]
-
- [:div.item
- [s/image {:soda {:avatar? true}
- :src "images/avatar/small/matt.jpg"}]
- [:div.content
- [:div.header "Matt"]
- "Top Rated User"]]])
-
-(defcard-doc
- "
-### Relaxed
-
-A list can relax its padding to provide more negative space
-
-Notes:
-
-* Be sure content can fit on one line when using the relaxed variation, otherwise text content will reflow when hovered.
-"
- (mkdn-pprint-source s-relaxed))
-
-(defcard-rg
- [s-relaxed])
-
-
-;; Very-Relaxed
-
-(defn s-very-relaxed []
- [s/s-list {:soda {:relaxed :very}}
-
- [:div.item
- [s/image {:soda {:avatar? true}
- :src "images/avatar/small/tom.jpg"}]
- [:div.content
- [:div.header "Tom"]
- "Top Contributor"]]
-
- [:div.item
- [s/image {:soda {:avatar? true}
- :src "images/avatar/small/christian.jpg"}]
- [:div.content
- [:div.header "Christian Rocha"]
- "Admin"]]
-
- [:div.item
- [s/image {:soda {:avatar? true}
- :src "images/avatar/small/matt.jpg"}]
- [:div.content
- [:div.header "Matt"]
- "Top Rated User"]]])
-
-(defcard-doc
- "
-### Very Relaxed
-"
- (mkdn-pprint-source s-very-relaxed))
-
-(defcard-rg
- [s-very-relaxed])
-
-
-;; Divided
-
-(defn s-divided []
- [s/s-list {:soda {:divided? true}}
-
- [:div.item
- [s/image {:soda {:avatar? true}
- :src "images/avatar/small/tom.jpg"}]
- [:div.content
- [:div.header "Tom"]
- "Top Contributor"]]
-
- [:div.item
- [s/image {:soda {:avatar? true}
- :src "images/avatar/small/christian.jpg"}]
- [:div.content
- [:div.header "Christian Rocha"]
- "Admin"]]
-
- [:div.item
- [s/image {:soda {:avatar? true}
- :src "images/avatar/small/matt.jpg"}]
- [:div.content
- [:div.header "Matt"]
- "Top Rated User"]]])
-
-(defcard-doc
- "
-### Divided
-
-A list can show divisions between content
-"
- (mkdn-pprint-source s-divided))
-
-(defcard-rg
- [s-divided])
-
-
-;; Celled
-
-(defn s-celled []
- [s/s-list {:soda {:horizontal? true
- :celled? true}}
- [:div.item "About Us"]
- [:div.item "Contact"]
- [:div.item "Support"]])
-
-(defcard-doc
- "
-### Celled
-
-A list can divide its items into cells
-"
- (mkdn-pprint-source s-celled))
-
-(defcard-rg
- [s-celled])
-
-
-;; Size
-
-(defn s-size []
- [:div
- [s/s-list {:soda {:horizontal? true
- :size :mini}}
- [:div.item "About Us"]
- [:div.item "Contact"]
- [:div.item "Support"]]
-
- [s/divider {}]
-
- [s/s-list {:soda {:horizontal? true
- :size :tiny}}
- [:div.item "About Us"]
- [:div.item "Contact"]
- [:div.item "Support"]]
-
- [s/divider {}]
-
- [s/s-list {:soda {:horizontal? true
- :size :small}}
- [:div.item "About Us"]
- [:div.item "Contact"]
- [:div.item "Support"]]
-
- [s/divider {}]
-
- [s/s-list {:soda {:horizontal? true
- :size :default}}
- [:div.item "About Us"]
- [:div.item "Contact"]
- [:div.item "Support"]]
-
- [s/divider {}]
-
- [s/s-list {:soda {:horizontal? true
- :size :large}}
- [:div.item "About Us"]
- [:div.item "Contact"]
- [:div.item "Support"]]
-
- [s/divider {}]
-
- [s/s-list {:soda {:horizontal? true
- :size :big}}
- [:div.item "About Us"]
- [:div.item "Contact"]
- [:div.item "Support"]]
-
- [s/divider {}]
-
- [s/s-list {:soda {:horizontal? true
- :size :huge}}
- [:div.item "About Us"]
- [:div.item "Contact"]
- [:div.item "Support"]]
-
- [s/divider {}]
-
- [s/s-list {:soda {:horizontal? true
- :size :massive}}
- [:div.item "About Us"]
- [:div.item "Contact"]
- [:div.item "Support"]]])
-
-(defcard-doc
- "
-### Size
-
-A list can vary in size
-"
- (mkdn-pprint-source s-size))
-
-(defcard-rg
- [s-size])
-
-
-
-;; ====================
-;; CONTENT VARIATIONS
-
-(defcard-doc
- "# CONTENT VARIATIONS")
-
-
-;; Aligned
-
-(defn s-aligned []
- [s/s-list {:soda {:horizontal? true}}
- [:div.item
- [s/image {:soda {:avatar? true}
- :src "images/wireframe/square-image.png"}]
- [:div.top.aligned.content
- "Top Aligned"]]
-
- [:div.item
- [s/image {:soda {:avatar? true}
- :src "images/wireframe/square-image.png"}]
- [:div.middle.aligned.content
- "Middle Aligned"]]
-
- [:div.item
- [s/image {:soda {:avatar? true}
- :src "images/wireframe/square-image.png"}]
- [:div.bottom.aligned.content
- "Bottom Aligned"]]])
-
-(defcard-doc
- "
-### Vertically Aligned
-
-An element inside a list can be vertically aligned
-"
- (mkdn-pprint-source s-aligned))
-
-(defcard-rg
- [s-aligned])
-
-
-;; Floated
-
-(defn s-floated []
- [:div
- [s/s-list {:soda {:horizontal? true
- :right-floated? true}}
- [:div.disabled.item {:href "#"}]
- "© GitHub, Inc."
- [:a.item {:href "#"} "Terms"]
- [:a.item {:href "#"} "Privacy"]
- [:a.item {:href "#"} "Contact"]]
-
- [s/s-list {:soda {:horizontal? true}}
- [:a.item {:href "#"} "About Us"]
- [:a.item {:href "#"} "Jobs"]]])
-
-(defcard-doc
- "
-### Floated
-
-An list, or an element inside a list can be floated left or right
-"
- (mkdn-pprint-source s-floated))
-
-(defcard-rg
- [s-floated])
diff --git a/src/devcards/soda_ash/elements/loader_card.cljs b/src/devcards/soda_ash/elements/loader_card.cljs
deleted file mode 100644
index 91bc276..0000000
--- a/src/devcards/soda_ash/elements/loader_card.cljs
+++ /dev/null
@@ -1,281 +0,0 @@
-(ns soda-ash.elements.loader-card
- (:require-macros [devcards.core
- :as dc
- :refer [defcard-rg defcard-doc mkdn-pprint-source]])
- (:require [reagent.core :as reagent]
- [devcards.core]
- [soda-ash.elements.card-helpers :as h]
- [soda-ash.element :as s]))
-
-
-
-(defcard-doc
-"
-[back](#!/soda_ash.an_overview_card)
-
-# loader
-
-* **base class** ui loader
-* **default tag** :i
-* **:type** :default | :text
-* **variations** :centered? | :inline | :inverted? | :size | :state
-
-where
-
-* **:inline** :default | :small | :large
-* **:size** :mini | :small | :medium | :large
-* **:state** :default | :indeterminate | :active | :disabled
-
----
-")
-
-
-
-;; ====================
-;; TYPES
-
-(defcard-doc
-"# TYPES")
-
-
-;; Loader
-
-(defn loader []
- [s/segment {:soda {:type :default}}
- [h/fake-content]
- [:div.ui.active.dimmer
- [s/loader {:soda {:type :default}}]]])
-
-(defcard-doc
- "
-### Loader
-
-A loader
-
-Notes:
-
-* Loaders are hidden unless active or inside an active dimmer.
-"
- (mkdn-pprint-source loader))
-
-(defcard-rg
- [loader])
-
-
-;; Text
-
-(defn text []
- [s/segment {:soda {:type :default}}
- [h/fake-content]
- [:div.ui.active.inverted.dimmer
- [s/loader {:soda {:type :text}}
- "Loading"]]])
-
-(defcard-doc
- "
-### Text Loader
-
-A loader can contain text
-"
- (mkdn-pprint-source text))
-
-(defcard-rg
- [text])
-
-
-
-;; ====================
-;; STATES
-
-(defcard-doc
- "# STATES")
-
-
-;; Indeterminate
-
-(defn indeterminate []
- [s/segment {:soda {:type :default}}
- [:div.ui.active.dimmer
- [s/loader {:soda {:type :text
- :state :indeterminate}}
- "Preparing Files"]]
- [h/fake-content]])
-
-(defcard-doc
- "
-### Indeterminate
-
-A loader can show it's unsure of how long a task will take
-"
- (mkdn-pprint-source indeterminate))
-
-(defcard-rg
- [indeterminate])
-
-
-;; Active
-
-(defn active []
- [s/segment {:soda {:type :default}}
- [s/loader {:soda {:state :active}}]
- [h/fake-content]])
-
-(defcard-doc
- "
-### Active
-
-A loader can be active or visible
-
-Notes:
-
-* An active dimmer may not be clearly visible without using a ui dimmer
-"
- (mkdn-pprint-source active))
-
-(defcard-rg
- [active])
-
-
-;; Disabled
-
-(defn disabled []
- [s/segment {:soda {:type :default}}
- [s/loader {:soda {:state :disabled}}]
- [h/fake-content]])
-
-(defcard-doc
- "
-### Disabled
-
-A loader can be disabled or hidden
-
-Notes:
-
-* An disabled dimmer may not be clearly visible without using a ui dimmer
-"
- (mkdn-pprint-source disabled))
-
-(defcard-rg
- [disabled])
-
-
-
-;; ====================
-;; VARIATIONS
-
-(defcard-doc
-"# VARIATIONS")
-
-
-;; Inline
-
-(defn inline []
- [:div
- [s/loader {:soda {:state :active
- :inline :small}}]
- [s/loader {:soda {:state :active
- :inline :default}}]
- [s/loader {:soda {:state :active
- :inline :large}}]
-
- ;; centered
- [s/loader {:soda {:state :active
- :centered? true
- :inline :small}}]
- [s/loader {:soda {:state :active
- :centered? true
- :inline :default}}]
- [s/loader {:soda {:state :active
- :centered? true
- :inline :large}}]
- ])
-
-(defcard-doc
- "
-### Inline
-
-Loaders can appear inline with content
-"
- (mkdn-pprint-source inline))
-
-(defcard-rg
- [inline])
-
-
-
-;; Size
-
-(defn size []
- [:div
- [s/segment {:soda {:type :default}}
- [:div.ui.active.dimmer
- [s/loader {:soda {:type :text
- :size :mini}}
- "Loading"]]
- [h/fake-content]]
-
-
- [s/segment {:soda {:type :default}}
- [:div.ui.active.dimmer
- [s/loader {:soda {:type :text
- :size :small}}
- "Loading"]]
- [h/fake-content]]
-
- [s/segment {:soda {:type :default}}
- [:div.ui.active.dimmer
- [s/loader {:soda {:type :text
- :size :medium}}
- "Loading"]]
- [h/fake-content]]
-
-
- [s/segment {:soda {:type :default}}
- [:div.ui.active.dimmer
- [s/loader {:soda {:type :text
- :size :lage}}
- "Loading"]]
- [h/fake-content]]])
-
-(defcard-doc
- "
-### Size
-
-Loaders can have different sizes
-"
- (mkdn-pprint-source size))
-
-(defcard-rg
- [size])
-
-
-;; Inverted
-
-(defn inverted []
- [:div
- [s/segment {:soda {:inverted? true}}
- [s/loader {:soda {:state :active
- :inverted? true}}]
- [h/fake-content]]
-
- ;; with dimmer
- [s/segment {:soda {:type :default}}
- [:div.ui.active.inverted.dimmer
- [s/loader {:soda {:type :default}}]]
- [h/fake-content]]
- ])
-
-(defcard-doc
- "
-### Inverted
-
-Loaders can have their colors inverted.
-
-Notes:
-
-* Loaders will automatically be inverted inside inverted dimmer
-"
- (mkdn-pprint-source inverted))
-
-(defcard-rg
- [inverted])
diff --git a/src/devcards/soda_ash/elements/rail_card.cljs b/src/devcards/soda_ash/elements/rail_card.cljs
deleted file mode 100644
index 17454ea..0000000
--- a/src/devcards/soda_ash/elements/rail_card.cljs
+++ /dev/null
@@ -1,208 +0,0 @@
-(ns soda-ash.elements.rail-card
- (:require-macros [devcards.core
- :as dc
- :refer [defcard-rg defcard-doc mkdn-pprint-source]])
- (:require [reagent.core :as reagent]
- [devcards.core]
- [soda-ash.elements.card-helpers :as h]
- [soda-ash.element :as s]))
-
-
-
-(defcard-doc
-"
-[back](#!/soda_ash.an_overview_card)
-
-# rail
-
-* **base class** ui rail
-* **default tag** :div
-* **:type** :left | :right | *INTERNAL* :left-internal | :right-internal | *DIVIDING* :left-dividing | :right-dividing
-* **variations** :attached? | :close
-
-where
-
-* **:close** :default | :very
-
-### Notes
-
-#### When to Use
-
-Rails display optional accompanying content outside of the main viewport of your website. Sites often use rails with sticky content to fix additional—often optional—content to your viewport as you scroll through the page.
-
-Semantic's default rail is 300px wide, just large enough to fit many common ad unit sizes, and just wide enough for a sub-navigation menu or a prominent call-to-action.
-
-#### Adjusting Sizes
-
-Railed content will most likely require arbitrary breakpoints that are specific to your site's content, to ensure they do not exceed the horizontal width of a user's browser.
-
-Rails are generally used beside long, single-column containers with long-form content like blog posts, articles, or user profiles. Generally your main text container width should be set between around 600-800px depending on your font size to optimize line length for readability.
-
-This set-up means most tablet browsers can only accomodate a single rail. Ultrabooks and lower resolution computers two small rails, and larger monitors, usually two full-sized rails. The specifics of this implementation is left up to you in your project.
-
-#### Regarding the Examples Below
-
-The following examples **do not** use any breakpoints, so some railed content may appear outside your browser's viewport on smaller screens.
-
----
-")
-
-
-;; Rail
-
-(defn rail []
- [s/segment {}
- [s/rail {:soda {:type :left}}
- [s/segment {}
- "Left Rail Content"]]
-
- [s/rail {:soda {:type :right}}
- [s/segment {}
- "Right Rail Content"]]
-
- [h/fake-content]])
-
-(defcard-doc
- "
-### Rail
-
-A rail can be presented on the left or right side of a container
-"
- (mkdn-pprint-source rail))
-
-(defcard-rg
- [rail])
-
-
-;; Internal Rail
-
-(defn internal-rail []
- [s/segment {}
- [s/rail {:soda {:type :left-internal}}
- [s/segment {}
- "Left Rail Content"]]
-
- [s/rail {:soda {:type :right-internal}}
- [s/segment {}
- "Right Rail Content"]]
-
- [h/fake-content]])
-
-(defcard-doc
- "
-### Internal
-
-A rail can attach itself to the inside of a container
-"
- (mkdn-pprint-source internal-rail))
-
-(defcard-rg
- [internal-rail])
-
-
-;; Dividing Rail
-
- (defn dividing-rail []
- [s/segment {}
- [s/rail {:soda {:type :left-dividing}}
- [s/segment {:soda {:type :default}}
- "Left Rail Content"]]
-
- [s/rail {:soda {:type :right-dividing}}
- [s/segment {}
- "Right Rail Content"]]
-
- [h/fake-content]])
-
-(defcard-doc
- "
-### Dividing
-
-A rail can create a division between itself and a container
-"
- (mkdn-pprint-source dividing-rail))
-
-(defcard-rg
- [dividing-rail])
-
-
-;; Attached
-
- (defn attached []
- [s/segment {}
- [s/rail {:soda {:type :left
- :attached? true}}
- [s/segment {}
- "Left Rail Content"]]
-
- [s/rail {:soda {:type :right
- :attached? true}}
- [s/segment {}
- "Right Rail Content"]]
-
- [h/fake-content]])
-
-(defcard-doc
- "
-### Attached
-
-A rail can appear attached to the main viewport
-"
- (mkdn-pprint-source attached))
-
-(defcard-rg
- [attached])
-
-
-;; Close
-
- (defn close []
- [s/segment {}
- [s/rail {:soda {:type :left
- :close :default}}
- [s/segment {}
- "Left Rail Content"]]
-
- [s/rail {:soda {:type :right
- :close :default}}
- [s/segment {}
- "Right Rail Content"]]
-
- [h/fake-content]])
-
-(defcard-doc
- "
-### Close
-
-A rail can appear closer to the main viewport
-"
- (mkdn-pprint-source close))
-
-(defcard-rg
- [close])
-
-
-;; Very-Close
-
- (defn very-close []
- [s/segment {}
- [s/rail {:soda {:type :left
- :close :very}}
- [s/segment {}
- "Left Rail Content"]]
-
- [s/rail {:soda {:type :right
- :close :very}}
- [s/segment {}
- "Right Rail Content"]]
-
- [h/fake-content]])
-
-(defcard-doc
- "
-### Very Close
-"
- (mkdn-pprint-source very-close))
-
-(defcard-rg
- [very-close])
diff --git a/src/devcards/soda_ash/elements/reveal_card.cljs b/src/devcards/soda_ash/elements/reveal_card.cljs
deleted file mode 100644
index ae818cd..0000000
--- a/src/devcards/soda_ash/elements/reveal_card.cljs
+++ /dev/null
@@ -1,318 +0,0 @@
-(ns soda-ash.elements.reveal-card
- (:require-macros [devcards.core
- :as dc
- :refer [defcard-rg defcard-doc mkdn-pprint-source]])
- (:require [reagent.core :as reagent]
- [devcards.core]
- [soda-ash.elements.card-helpers :as h]
- [soda-ash.element :as s]))
-
-
-
-(defcard-doc
-"
-[back](#!/soda_ash.an_overview_card)
-
-# reveal
-
-* **base class** ui reveal
-* **default tag** :div
-* **:type**
- *FADE* :fade |
- *MOVE* :move | :move-right | :move-up | :move-down |
-