├── boot.properties ├── version.properties ├── src └── material_hl │ ├── icon-toggle.cljs.hl_ │ ├── navigation.cljs.hl_ │ ├── elevation.cljs │ ├── form_field.cljs │ ├── boot_material.clj │ ├── ripple.cljs │ ├── fab.cljs │ ├── radio.cljs │ ├── tables.cljs.hl_ │ ├── switch.cljs │ ├── button.cljs │ ├── checkbox.cljs │ ├── tooltip.cljs.hl_ │ ├── tabs.cljs.hl_ │ ├── text_input.cljs │ ├── snackbar.cljs │ ├── stepper.cljs.hl_ │ ├── core.cljs │ ├── loading.cljs.hl_ │ ├── menu.cljs │ ├── layout_grid.cljs │ ├── dialog.cljs │ ├── toolbar.cljs │ ├── list.cljs │ ├── card.cljs │ ├── drawer.cljs │ └── layout.cljs.hl_ ├── .gitignore ├── dependencies.edn ├── LICENSE ├── README.md └── doc └── api ├── material-hl.tables.html ├── material-hl.navigation.html ├── material-hl.badges.html ├── material-hl.snackbar.html ├── material-hl.core.html ├── material-hl.toggles.html ├── material-hl.tabs.html ├── material-hl.menus.html ├── material-hl.tooltip.html ├── material-hl.dialogs.html ├── material-hl.loading.html ├── material-hl.text-input.html ├── material-hl.buttons.html ├── material-hl.cards.html ├── material-hl.lists.html ├── material-hl.footer.html ├── material-hl.grid.html ├── material-hl.layout.html ├── css └── default.css └── index.html /boot.properties: -------------------------------------------------------------------------------- 1 | BOOT_VERSION=2.7.1 2 | -------------------------------------------------------------------------------- /version.properties: -------------------------------------------------------------------------------- 1 | #Mon May 15 12:37:58 MDT 2017 2 | VERSION=0.10.0 3 | -------------------------------------------------------------------------------- /src/material_hl/icon-toggle.cljs.hl_: -------------------------------------------------------------------------------- 1 | (ns material-hl.icon-toggle 2 | (:require [material-hl.core :as core])) 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | pom.xml 2 | pom.xml.asc 3 | *jar 4 | /lib/ 5 | /classes/ 6 | /target/ 7 | /dist/ 8 | /checkouts/ 9 | .lein-deps-sum 10 | .lein-repl-history 11 | .lein-plugins/ 12 | .lein-failures 13 | .nrepl-port 14 | -------------------------------------------------------------------------------- /src/material_hl/navigation.cljs.hl_: -------------------------------------------------------------------------------- 1 | (ns material-hl.navigation 2 | (:require [material-hl.core])) 3 | 4 | (defelem navigation [attr kids] 5 | (nav :class [:mdl-navigation] 6 | attr kids)) 7 | 8 | (defelem nav-link [attr kids] 9 | (a :class [:mdl-navigation__link] 10 | attr kids)) 11 | -------------------------------------------------------------------------------- /src/material_hl/elevation.cljs: -------------------------------------------------------------------------------- 1 | (ns material-hl.elevation 2 | (:require [hoplon.core :as hl] 3 | [material-hl.core :as core])) 4 | 5 | (defmethod hoplon.core/do! :elevation 6 | [elem _ v] 7 | (let [] 8 | (when v 9 | (hoplon.core/do! elem :class {(keyword (str "mdc-elevation--z" v)) true})))) 10 | -------------------------------------------------------------------------------- /src/material_hl/form_field.cljs: -------------------------------------------------------------------------------- 1 | (ns material-hl.form-field 2 | (:require [hoplon.core :as hl] 3 | [material-hl.core :as core] 4 | [goog.dom.classlist :as gcl])) 5 | 6 | (hl/defelem form-field [attr kids] 7 | (let [] 8 | (hl/div (core/assoc-class attr {:mdc-form-field true}) 9 | kids))) 10 | -------------------------------------------------------------------------------- /dependencies.edn: -------------------------------------------------------------------------------- 1 | [[org.clojure/clojure "1.8.0"] 2 | [org.clojure/clojurescript "1.9.542"] 3 | [adzerk/boot-cljs "2.0.0" :scope "test"] 4 | [cljsjs/material-components "0.10.0-0"] 5 | [degree9/boot-semver "1.4.4" :scope "test"] 6 | [degree9/boot-npm "1.4.0" :scope "test"] 7 | [hoplon/hoplon "7.0.1"]] 8 | -------------------------------------------------------------------------------- /src/material_hl/boot_material.clj: -------------------------------------------------------------------------------- 1 | (ns material-hl.boot-material 2 | (:require [boot.core :as boot] 3 | [degree9.boot-npm :as npm])) 4 | 5 | 6 | (boot/deftask material 7 | "Download material web components npm package." 8 | [m material VAL str "Version for material web components package."] 9 | (npm/npm 10 | :install {:material-components-web (:material *opts* "latest")} 11 | :cache-key ::material)) 12 | -------------------------------------------------------------------------------- /src/material_hl/ripple.cljs: -------------------------------------------------------------------------------- 1 | (ns material-hl.ripple 2 | (:require [hoplon.core :as hl] 3 | [material-hl.core :as core] 4 | [cljsjs.material-components])) 5 | 6 | (defelem ripple [attr kids] 7 | (let [] 8 | (hl/div 9 | (core/assoc-class attr 10 | {:mdc-ripple-surface true}) 11 | kids))) 12 | 13 | (defmethod hoplon.core/do! :ripple 14 | [elem _ v] 15 | (let [ripple js/mdc.ripple.MDCRipple] 16 | (when v 17 | (.attachTo ripple elem)))) 18 | -------------------------------------------------------------------------------- /src/material_hl/fab.cljs: -------------------------------------------------------------------------------- 1 | (ns material-hl.fab 2 | (:require [hoplon.core :as hl] 3 | [material-hl.core :as core])) 4 | 5 | (def ^:dynamic *mini* false) 6 | (def ^:dynamic *plain* false) 7 | 8 | (hl/defelem fab [attr kids] 9 | (let [mini (:mini attr *mini*) 10 | plain (:plain attr *plain*)] 11 | (hl/button 12 | (core/assoc-class attr 13 | {:mdc-fab true 14 | :mdc-fab--mini mini 15 | :mdc-fab--plain plain}) 16 | (hl/span :class [:mdc-fab__icon] kids)))) 17 | -------------------------------------------------------------------------------- /src/material_hl/radio.cljs: -------------------------------------------------------------------------------- 1 | (ns material-hl.checkbox 2 | (:require [hoplon.core :as hl] 3 | [material-hl.core :as core] 4 | [hoplon.svg :as svg])) 5 | 6 | (def ^:dynamic *disabled* nil) 7 | 8 | (defelem checkbox [attr kids] 9 | (let [dark (:dark attr *dark*) 10 | disabled (:disabled attr *disabled*)] 11 | (hl/div 12 | (core/assoc-class attr 13 | {:mdc-radio true 14 | :mdc-radio--disabled disabled}) 15 | (hl/input :type "radio" :class [:mdc-radio__native-control]) 16 | (hl/div :class [:mdc-radio__background] 17 | (hl/div :class [:mdc-radio__outer-circle]) 18 | (hl/div :class [:mdc-radio__inner-circle]))))) 19 | -------------------------------------------------------------------------------- /src/material_hl/tables.cljs.hl_: -------------------------------------------------------------------------------- 1 | (ns material-hl.tables 2 | (:require [material-hl.core :as core] 3 | [goog.dom.classlist :as gcl])) 4 | 5 | (def ^:dynamic *selectable* false) 6 | 7 | (defelem table [attr kids] 8 | (let [selectable (or (:selectable attr) *selectable*)] 9 | (table (core/assoc-class attr {:mdl-data-table true 10 | :mdl-js-data-table true 11 | :mdl-data-table--selectable selectable}) 12 | kids))) 13 | 14 | (defmethod do! :sorted 15 | [elem _ v] 16 | (when v 17 | (gcl/add elem (str "mdl-data-table__header-sorted--" (name v))))) 18 | 19 | (defmethod do! :non-numeric 20 | [elem _ v] 21 | (when v 22 | (gcl/add elem (str "mdl-data-table__cell--non-numeric" (name ascending))))) 23 | -------------------------------------------------------------------------------- /src/material_hl/switch.cljs: -------------------------------------------------------------------------------- 1 | (ns material-hl.switch 2 | (:require [hoplon.core :as hl] 3 | [material-hl.core :as core] 4 | [material-hl.button :as btn] 5 | [cljsjs.material-components])) 6 | 7 | (def ^:dynamic *disabled* nil) 8 | 9 | (defelem switch [attr kids] 10 | (let [disabled (:disabled attr *disabled*)] 11 | (hl/div 12 | (core/assoc-class (dissoc attr :id) 13 | {:mdc-switch true 14 | :mdc-switch--disabled disabled}) 15 | (hl/input :type "checkbox" :id (:id attr) :class [:mdc-switch__native-control] :disabled disabled) 16 | (hl/div :class [:mdc-switch__background] 17 | (hl/div :class [:mdc-switch__knob]))))) 18 | 19 | (defelem switch-label [attr kids] 20 | (let [] 21 | (hl/div 22 | (core/assoc-class attr 23 | {:mdc-switch-label true}) 24 | kids))) 25 | -------------------------------------------------------------------------------- /src/material_hl/button.cljs: -------------------------------------------------------------------------------- 1 | (ns material-hl.button 2 | (:require [hoplon.core :as hl] 3 | [material-hl.core :as core])) 4 | 5 | (def ^:dynamic *accent* nil) 6 | (def ^:dynamic *compact* nil) 7 | (def ^:dynamic *dense* nil) 8 | (def ^:dynamic *primary* nil) 9 | (def ^:dynamic *raised* nil) 10 | 11 | (hl/defelem button [attr kids] 12 | (let [accent (:accent attr *accent*) 13 | compact (:compact attr *compact*) 14 | dense (:dense attr *dense*) 15 | primary (:primary attr *primary*) 16 | raised (:raised attr *raised*)] 17 | (hl/button 18 | (core/assoc-class attr 19 | {:mdc-button true 20 | :mdc-button--accent accent 21 | :mdc-button--compact compact 22 | :mdc-button--dense dense 23 | :mdc-button--primary primary 24 | :mdc-button--raised raised}) 25 | kids))) 26 | -------------------------------------------------------------------------------- /src/material_hl/checkbox.cljs: -------------------------------------------------------------------------------- 1 | (ns material-hl.checkbox 2 | (:require [hoplon.core :as hl] 3 | [material-hl.core :as core] 4 | [hoplon.svg :as svg])) 5 | 6 | (def ^:dynamic *dark* nil) 7 | 8 | (hl/defelem checkbox [attr kids] 9 | (let [dark (:dark attr *dark*)] 10 | (hl/div 11 | (core/assoc-class attr 12 | {:mdc-checkbox true 13 | :mdc-checkbox--theme-dark dark}) 14 | (hl/input :type "checkbox" :class [:mdc-checkbox__native-control]) 15 | (hl/div :class [:mdc-checkbox__background] 16 | (svg/svg :version "1.1" :class [:mdc-checkbox__checkmark] 17 | :svg/viewBox "0 0 24 24" :xml:space "preserve" 18 | (svg/path :class [:mdc-checkbox__checkmark__path] :fill "none" 19 | :stroke "white" :d "M1.73,12.91 8.1,19.28 22.79,4.59")) 20 | (hl/div :class [:mdc-checkbox__mixedmark]))))) 21 | -------------------------------------------------------------------------------- /src/material_hl/tooltip.cljs.hl_: -------------------------------------------------------------------------------- 1 | (ns material-hl.tooltip 2 | (:require [material-hl.core :as core])) 3 | 4 | (def ^:dynamic *large* false) 5 | (def ^:dynamic *align-left* false) 6 | (def ^:dynamic *align-right* false) 7 | (def ^:dynamic *align-top* false) 8 | (def ^:dynamic *align-bottom* false) 9 | 10 | (defelem tooltip [attr kids] 11 | (let [large (or (:large attr) *large*) 12 | left (or (:align-left attr) *align-left*) 13 | right (or (:align-right attr) *align-right*) 14 | top (or (:align-top attr) *align-top*) 15 | bottom (or (:align-bottom attr) *align-bottom*)] 16 | (span (core/assoc-class attr 17 | {:mdl-tooltip true 18 | :mdl-tooltip--large large 19 | :mdl-tooltip--left left 20 | :mdl-tooltip--right right 21 | :mdl-tooltip--top top 22 | :mdl-tooltip--bottom bottom}) 23 | kids))) 24 | -------------------------------------------------------------------------------- /src/material_hl/tabs.cljs.hl_: -------------------------------------------------------------------------------- 1 | (ns material-hl.tabs 2 | (:require [material-hl.core :as core])) 3 | 4 | (def ^:dynamic *ripple-effect* false) 5 | (def ^:dynamic *active-tab* nil) 6 | 7 | (defelem tabs [attr kids] 8 | (let [ripple (or (:ripple-effect attr) *ripple-effect*)] 9 | (div (core/assoc-class attr {:mdl-tabs true 10 | :mdl-js-tabs true 11 | :mdl-js-ripple-effect ripple}) 12 | kids))) 13 | 14 | (defelem tab-bar [attr kids] 15 | (let [] 16 | (div (core/assoc-class attr {:mdl-tabs__tab-bar true}) kids))) 17 | 18 | (defelem tab [attr kids] 19 | (let [active (or (:active attr) (= (:id attr) *active-tab*))] 20 | (a (core/assoc-class attr {:mdl-tabs__tab true 21 | :is-active active}) kids))) 22 | 23 | (defelem tab-panel [attr kids] 24 | (let [] 25 | (div (core/assoc-class attr {:mdl-tabs__panel true}) kids))) 26 | -------------------------------------------------------------------------------- /src/material_hl/text_input.cljs: -------------------------------------------------------------------------------- 1 | (ns material-hl.text-input 2 | (:require [hoplon.core :as hl] 3 | [material-hl.core :as core] 4 | [goog.dom.classlist :as gcl])) 5 | 6 | ;(def ^:dynamic *floating-label* false) 7 | (def ^:dynamic *multiline* false) 8 | 9 | (hl/defelem textfield [attr kids] 10 | (let [multiline (:multiline attr *multiline*)] 11 | (hl/div (core/assoc-class attr {:mdc-textfield true 12 | :multiline multiline}) 13 | kids))) 14 | 15 | (hl/defelem input [attr kids] 16 | (let [] 17 | (hl/input (core/assoc-class attr {:mdc-textfield__input true}) 18 | kids))) 19 | 20 | (hl/defelem label [attr kids] 21 | (let [] 22 | (hl/label (core/assoc-class attr {:mdc-textfield__label true}) 23 | kids))) 24 | 25 | (hl/defelem textarea [attr kids] 26 | (let [] 27 | (hl/textarea (core/assoc-class attr {:mdl-textfield__input true}) 28 | kids))) 29 | -------------------------------------------------------------------------------- /src/material_hl/snackbar.cljs: -------------------------------------------------------------------------------- 1 | (ns material-hl.snackbar 2 | (:require [hoplon.core :as hl] 3 | [material-hl.core :as core] 4 | [material-hl.button :as btn] 5 | [cljsjs.material-components])) 6 | 7 | (defelem snackbar [attr kids] 8 | (let [] 9 | (hl/div :snackbar true 10 | (core/assoc-class attr 11 | {:mdc-snackbar true}) 12 | kids))) 13 | 14 | (defelem snackbar-text [attr kids] 15 | (let [] 16 | (hl/div 17 | (core/assoc-class attr 18 | {:mdc-snackbar__text true}) 19 | kids))) 20 | 21 | (defelem snackbar-action-wrapper [attr kids] 22 | (let [] 23 | (hl/div 24 | (core/assoc-class attr 25 | {:mdc-snackbar__action-wrapper true}) 26 | kids))) 27 | 28 | (defelem snackbar-action-button [attr kids] 29 | (let [] 30 | (btn/button 31 | (core/assoc-class attr 32 | {:mdc-snackbar__action-button true}) 33 | kids))) 34 | 35 | (defmethod hoplon.core/do! :snackbar 36 | [elem _ v] 37 | (let [snackbar js/mdc.snackbar.MDCSnackbar] 38 | (when v 39 | (.attachTo snackbar elem)))) 40 | -------------------------------------------------------------------------------- /src/material_hl/stepper.cljs.hl_: -------------------------------------------------------------------------------- 1 | (ns material-hl.stepper 2 | (:refer-clojure :exclude [stepper]) 3 | (:require [cljsjs.mdl-stepper] 4 | [material-hl.core :as core])) 5 | 6 | (defelem stepper [attr kids] 7 | (ul (core/assoc-class attr {:mdl-stepper true}) kids)) 8 | 9 | (defelem step [attr kids] 10 | (li (core/assoc-class attr {:mdl-step true}) kids)) 11 | 12 | (defelem step-label [attr kids] 13 | (span (core/assoc-class attr {:mdl-step__label true}) kids)) 14 | 15 | (defelem step-title [attr kids] 16 | (span (core/assoc-class attr {:mdl-step__title true}) kids)) 17 | 18 | (defelem step-title-text [attr kids] 19 | (span (core/assoc-class attr {:mdl-step__title-text true}) kids)) 20 | 21 | (defelem step-title-message [attr kids] 22 | (span (core/assoc-class attr {:mdl-step__title-message true}) kids)) 23 | 24 | (defelem step-content [attr kids] 25 | (div (core/assoc-class attr {:mdl-step__content true}) kids)) 26 | 27 | (defelem step-actions [attr kids] 28 | (div (core/assoc-class attr {:mdl-step__actions true}) kids)) 29 | 30 | (defn back [id] 31 | (-> js/document (.querySelector id) (aget "MaterialStepper") .back)) 32 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Degree9 Solutions Inc. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/material_hl/core.cljs: -------------------------------------------------------------------------------- 1 | (ns material-hl.core 2 | (:require [hoplon.core :as hl] 3 | [javelin.core :as j] 4 | [cljsjs.material-components] 5 | [goog.dom.classlist :as gcl])) 6 | 7 | (def include-fonts #(hl/link :rel "stylesheet" :href "https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en" :type "text/css")) 8 | 9 | (def include-icons #(hl/link :rel "stylesheet" :href "https://fonts.googleapis.com/icon?family=Material+Icons")) 10 | 11 | (defn include-colors [primary accent] 12 | (hl/link :rel "stylesheet" :href (str "https://code.getmdl.io/1.1.3/material." (name primary) "-" (name accent) ".min.css"))) 13 | 14 | (defn normalize-class [kvs] 15 | (let [->map #(zipmap % (repeat true))] 16 | (if (map? kvs) 17 | kvs 18 | (->map (if (string? kvs) (.split kvs #"\s+") (seq kvs)))))) 19 | 20 | (defn assoc-class [attr & [pre post]] 21 | (let [class (:class attr)] 22 | (assoc attr :class (j/cell= (merge pre (normalize-class class) post))))) 23 | 24 | ;(defmethod hoplon.core/do! :upgrade 25 | ; [elem _ v] 26 | ; (when v 27 | ; (.. js/componentHandler (upgradeElement elem)))) 28 | -------------------------------------------------------------------------------- /src/material_hl/loading.cljs.hl_: -------------------------------------------------------------------------------- 1 | (ns material-hl.loading 2 | (:require [material-hl.core :as core] 3 | [goog.events :as event])) 4 | 5 | (def ^:dynamic *buffer* nil) 6 | (def ^:dynamic *progress* nil) 7 | (def ^:dynamic *indeterminate* false) 8 | (def ^:dynamic *active-spinner* false) 9 | (def ^:dynamic *single-color* false) 10 | 11 | (defelem progress [attr kids] 12 | (let [indeterminate (or (:indeterminate attr) *indeterminate*)] 13 | (div (core/assoc-class attr {:mdl-progress true 14 | :mdl-js-progress true 15 | :mdl-progress--indeterminate indeterminate}) 16 | kids))) 17 | 18 | (defmethod do! :data-progress 19 | [elem _ v] 20 | (when v (event/listen elem "mdl-componentupgraded" #(.setProgress (.MaterialProgress elem) v)))) 21 | 22 | (defelem spinner [attr kids] 23 | (let [active (or (:active attr) *active-spinner*) 24 | color (or (:single-color attr) *single-color*)] 25 | (div (core/assoc-class attr {:mdl-spinner true 26 | :mdl-js-spinner true 27 | :is-active active 28 | :single-color color}) 29 | kids))) 30 | -------------------------------------------------------------------------------- /src/material_hl/menu.cljs: -------------------------------------------------------------------------------- 1 | (ns material-hl.menu 2 | (:require [hoplon.core :as hl] 3 | [material-hl.core :as core])) 4 | 5 | (def ^:dynamic *top-right* nil) 6 | (def ^:dynamic *top-left* nil) 7 | (def ^:dynamic *bottom-right* nil) 8 | (def ^:dynamic *bottom-left* nil) 9 | 10 | (defelem menu [attr kids] 11 | (let [top-right (:top-right attr *top-right*) 12 | top-left (:top-left attr *top-left*) 13 | bottom-right (:bottom-right attr *bottom-right*) 14 | bottom-left (:bottom-left attr *bottom-left*)] 15 | (hl/div 16 | (core/assoc-class attr 17 | {:mdc-simple-menu true 18 | :mdc-simple-menu--open-from-top-right top-right 19 | :mdc-simple-menu--open-from-top-left top-left 20 | :mdc-simple-menu--open-from-bottom-right bottom-right 21 | :mdc-simple-menu--open-from-bottom-left bottom-left}) 22 | kids))) 23 | 24 | (defelem menu-items [attr kids] 25 | (let [] 26 | (hl/ul 27 | (-> attr 28 | (assoc :role "menu") 29 | (core/assoc-class 30 | {:mdc-list true 31 | :mdc-simple-menu__items true})) 32 | kids))) 33 | 34 | (defelem menu-item [attr kids] 35 | (let [] 36 | (hl/li 37 | (-> attr 38 | (assoc :role "menuitem") 39 | (core/assoc-class 40 | {:mdc-list-item true})) 41 | kids))) 42 | -------------------------------------------------------------------------------- /src/material_hl/layout_grid.cljs: -------------------------------------------------------------------------------- 1 | (ns material-hl.layout-grid 2 | (:require [hoplon.core :as hl] 3 | [material-hl.core :as core])) 4 | 5 | (def ^:dynamic *columns* nil) 6 | (def ^:dynamic *desktop-columns* nil) 7 | (def ^:dynamic *tablet-columns* nil) 8 | (def ^:dynamic *phone-columns* nil) 9 | (def ^:dynamic *order* nil) 10 | (def ^:dynamic *align* nil) 11 | 12 | (hl/defelem grid [attr kids] 13 | (let [] 14 | (hl/div 15 | (core/assoc-class attr 16 | {:mdc-layout-grid true}) 17 | kids))) 18 | 19 | (hl/defelem cell [attr kids] 20 | (let [columns (:columns attr *columns*) 21 | desktop-columns (:desktop-columns attr *desktop-columns*) 22 | tablet-columns (:tablet-columns attr *tablet-columns*) 23 | phone-columns (:phone-columns attr *phone-columns*) 24 | order (:order attr *order*) 25 | align (:align attr *align*)] 26 | (hl/div 27 | (core/assoc-class attr 28 | {:mdc-layout-grid__cell true 29 | (keyword (str "mdc-layout-grid__cell--span-" columns)) columns 30 | (keyword (str "mdc-layout-grid__cell--span-" desktop-columns "-desktop")) desktop-columns 31 | (keyword (str "mdc-layout-grid__cell--span-" tablet-columns "-tablet")) tablet-columns 32 | (keyword (str "mdc-layout-grid__cell--span-" phone-columns "-phone")) phone-columns 33 | (keyword (str "mdc-layout-grid__cell--order-" order)) order 34 | (keyword (str "mdc-layout-grid__cell--align-" align)) align}) 35 | kids))) 36 | -------------------------------------------------------------------------------- /src/material_hl/dialog.cljs: -------------------------------------------------------------------------------- 1 | (ns material-hl.dialog 2 | (:require [hoplon.core :as hl] 3 | [material-hl.core :as core] 4 | [material-hl.button :as btn])) 5 | 6 | (def ^:dynamic *scrollable* false) 7 | (def ^:dynamic *cancel* false) 8 | (def ^:dynamic *accept* false) 9 | 10 | (hl/defelem dialog [attr kids] 11 | (let [attr (assoc attr :role "alertdialog")] 12 | (hl/aside (core/assoc-class attr {:mdc-dialog true} 13 | :mdc-dialog--scrollable scrollable) 14 | kids))) 15 | 16 | (hl/defelem surface [attr kids] 17 | (let [] 18 | (hl/div (core/assoc-class attr {:mdc-dialog__surface true}) 19 | kids))) 20 | 21 | (hl/defelem header [attr kids] 22 | (let [] 23 | (hl/header (core/assoc-class attr {:mdc-dialog__header true}) 24 | kids))) 25 | 26 | (hl/defelem header-title [attr kids] 27 | (let [] 28 | (hl/h2 (core/assoc-class attr {:mdc-dialog__header__title true}) 29 | kids))) 30 | 31 | (hl/defelem body [attr kids] 32 | (let [scrollable (:scrollable attr *scrollable*)] 33 | (hl/section (core/assoc-class attr {:mdc-dialog__body true 34 | :mdc-dialog__body--scrollable scrollable}) 35 | kids))) 36 | 37 | (hl/defelem footer [attr kids] 38 | (let [] 39 | (hl/footer (core/assoc-class attr {:mdc-dialog__footer true}) 40 | kids))) 41 | 42 | (hl/defelem footer-button [attr kids] 43 | (let [accept (:accept attr *accept*) 44 | cancel (:cancel attr *cancel*)] 45 | (btn/button (core/assoc-class attr {:mdc-dialog__footer__button true 46 | :mdc-dialog__footer__button--accept accept 47 | :mdc-dialog__footer__button--cancel cancel}) 48 | kids))) 49 | 50 | (hl/defelem backdrop [attr kids] 51 | (let [] 52 | (hl/div (core/assoc-class attr {:mdc-dialog__backdrop true}) 53 | kids))) 54 | -------------------------------------------------------------------------------- /src/material_hl/toolbar.cljs: -------------------------------------------------------------------------------- 1 | (ns material-hl.toolbar 2 | (:require [hoplon.core :as hl] 3 | [material-hl.core :as core])) 4 | 5 | (def ^:dynamic *fixed* nil) 6 | (def ^:dynamic *last-row* nil) 7 | (def ^:dynamic *flexible* nil) 8 | (def ^:dynamic *waterfall* nil) 9 | (def ^:dynamic *start* nil) 10 | (def ^:dynamic *end* nil) 11 | (def ^:dynamic *shrink* nil) 12 | 13 | (hl/defelem toolbar [attr kids] 14 | (let [fixed (:fixed attr *fixed*) 15 | last-row (:last-row attr *last-row*) 16 | flexible (:flexible attr *flexible*) 17 | waterfall (:waterfall attr *waterfall*)] 18 | (hl/header 19 | (core/assoc-class attr 20 | {:mdc-toolbar true 21 | :mdc-toolbar--fixed fixed 22 | :mdc-toolbar--fixed-lastrow-only last-row 23 | :mdc-toolbar--flexible flexible 24 | :mdc-toolbar--waterfall waterfall}) 25 | kids))) 26 | 27 | (hl/defelem row [attr kids] 28 | (let [] 29 | (hl/div 30 | (core/assoc-class attr 31 | {:mdc-toolbar__row true}) 32 | kids))) 33 | 34 | (hl/defelem content [attr kids] 35 | (let [fixed (:fixed attr *fixed*)] 36 | (hl/main 37 | (core/assoc-class attr 38 | {:mdc-toolbar-fixed-adjust fixed}) 39 | kids))) 40 | 41 | (hl/defelem section [attr kids] 42 | (let [start (:start attr *start*) 43 | end (:end attr *end*) 44 | shrink (:shrink attr *shrink*)] 45 | (hl/section 46 | (core/assoc-class attr 47 | {:mdc-toolbar__section true 48 | :mdc-toolbar__section--align-start start 49 | :mdc-toolbar__section--align-end end 50 | :mdc-toolbar__section--shrink-to-fit shrink}) 51 | kids))) 52 | 53 | (hl/defelem title [attr kids] 54 | (let [] 55 | (hl/span 56 | (core/assoc-class attr 57 | {:mdc-toolbar__title true}) 58 | kids))) 59 | -------------------------------------------------------------------------------- /src/material_hl/list.cljs: -------------------------------------------------------------------------------- 1 | (ns material-hl.list 2 | (:require [hoplon.core :as hl] 3 | [material-hl.core :as core])) 4 | 5 | (def ^:dynamic *dense* nil) 6 | (def ^:dynamic *two-line* nil) 7 | (def ^:dynamic *avatar* nil) 8 | (def ^:dynamic *start* nil) 9 | (def ^:dynamic *end* nil) 10 | (def ^:dynamic *inset* nil) 11 | 12 | (hl/defelem list [attr kids] 13 | (let [dense (:dense attr *dense*) 14 | two-line (:two-line attr *two-line*) 15 | avatar (:avatar attr *avatar*)] 16 | (hl/ul 17 | (core/assoc-class attr 18 | {:mdc-list true 19 | :mdc-list--dense dense 20 | :mdc-list--two-line two-line 21 | :mdc-list--avatar-list avatar}) 22 | kids))) 23 | 24 | (hl/defelem list-item [attr kids] 25 | (let [] 26 | (hl/li 27 | (core/assoc-class attr 28 | {:mdc-list-item true}) 29 | kids))) 30 | 31 | (hl/defelem list-item-text [attr kids] 32 | (let [] 33 | (hl/span 34 | (core/assoc-class attr 35 | {:mdc-list-item__text true}) 36 | kids))) 37 | 38 | (hl/defelem list-item-text-primary [attr kids] 39 | (let [] 40 | (hl/span 41 | (core/assoc-class attr 42 | {:mdc-list-item__text__primary true}) 43 | kids))) 44 | 45 | (hl/defelem list-item-text-secondary [attr kids] 46 | (let [] 47 | (hl/span 48 | (core/assoc-class attr 49 | {:mdc-list-item__text__secondary true}) 50 | kids))) 51 | 52 | (hl/defelem list-item-detail [attr kids] 53 | (let [start (:start attr *start*) 54 | end (:end attr *end*)] 55 | (hl/span 56 | (core/assoc-class attr 57 | {:mdc-list-item__end-detail end 58 | :mdc-list-item__start-detail (or start true)}) 59 | kids))) 60 | 61 | (hl/defelem list-divider [attr kids] 62 | (let [inset (:inset attr *inset*)] 63 | (hl/li 64 | (-> attr 65 | (assoc :role "separator") 66 | (core/assoc-class 67 | {:mdc-list-divider true 68 | :mdc-list-divider--inset inset})) 69 | kids))) 70 | 71 | (hl/defelem list-group [attr kids] 72 | (let [] 73 | (hl/div 74 | (core/assoc-class attr 75 | {:mdc-list-group true}) 76 | kids))) 77 | 78 | (hl/defelem list-group-subheader [attr kids] 79 | (let [] 80 | (hl/h3 81 | (core/assoc-class attr 82 | {:mdc-list-group__subheader true}) 83 | kids))) 84 | -------------------------------------------------------------------------------- /src/material_hl/card.cljs: -------------------------------------------------------------------------------- 1 | (ns material-hl.card 2 | (:require [hoplon.core :as hl] 3 | [material-hl.core :as core] 4 | [material-hl.button :as btn])) 5 | 6 | (def ^:dynamic *dark* nil) 7 | (def ^:dynamic *large* nil) 8 | (def ^:dynamic *size* nil) 9 | (def ^:dynamic *vertical* nil) 10 | 11 | (hl/defelem card [attr kids] 12 | (let [dark (:dark attr *dark*)] 13 | (hl/div 14 | (core/assoc-class attr 15 | {:mdc-card true 16 | :mdc-card--theme-dark dark}) 17 | kids))) 18 | 19 | (hl/defelem media [attr kids] 20 | (let [] 21 | (hl/section 22 | (core/assoc-class attr 23 | {:mdc-card__media true}) 24 | kids))) 25 | 26 | (hl/defelem actions [attr kids] 27 | (let [vertical (:vertical attr *vertical*)] 28 | (hl/section 29 | (core/assoc-class attr 30 | {:mdc-card__actions true 31 | :mdc-card__actions--vertical vertical}) 32 | kids))) 33 | 34 | (hl/defelem action [attr kids] 35 | (let [] 36 | (btn/button 37 | (core/assoc-class attr 38 | {:mdc-card__action true} 39 | {:compact true}) 40 | kids))) 41 | 42 | (hl/defelem primary [attr kids] 43 | (let [] 44 | (hl/section 45 | (core/assoc-class attr 46 | {:mdc-card__primary true}) 47 | kids))) 48 | 49 | (hl/defelem title [attr kids] 50 | (let [large (:large attr *large*)] 51 | (hl/h1 52 | (core/assoc-class attr 53 | {:mdc-card__title true 54 | :mdc-card__title--large large}) 55 | kids))) 56 | 57 | (hl/defelem subtitle [attr kids] 58 | (let [] 59 | (hl/h2 60 | (core/assoc-class attr 61 | {:mdc-card__subtitle true}) 62 | kids))) 63 | 64 | (hl/defelem supporting-text [attr kids] 65 | (let [] 66 | (hl/section 67 | (core/assoc-class attr 68 | {:mdc-card__supporting-text true}) 69 | kids))) 70 | 71 | (hl/defelem horizontal-block [attr kids] 72 | (let [] 73 | (hl/div 74 | (core/assoc-class attr 75 | {:mdc-card__horizontal-block true}) 76 | kids))) 77 | 78 | (hl/defelem media-item [attr kids] 79 | (let [size (:size attr *size*)] 80 | (hl/img 81 | (core/assoc-class attr 82 | {:mdc-card__media-item true 83 | (case size 84 | :1.5 :mdc-card__media-item--1dot5x 85 | :2 :mdc-card__media-item--2x 86 | :3 :mdc-card__media-item--3x) true}) 87 | kids))) 88 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # material-hl 2 | Material Components Web for Hoplon 3 | 4 | | MDC-Web Component | Material-hl | 5 | | :----------------------------------------: | :---------------------: | 6 | | [`@material/animation`][mdc-animation] | N/A | 7 | | [`@material/button`][mdc-button] | material-hl.button | 8 | | [`@material/card`][mdc-card] | material-hl.card | 9 | | [`@material/checkbox`][mdc-checkbox] | material-hl.checkbox | 10 | | [`@material/dialog`][mdc-dialog] | material-hl.dialog | 11 | | [`@material/fab`][mdc-fab] | material-hl.fab | 12 | | [`@material/icon-toggle`][mdc-icon-toggle] | material-hl.icon-toggle | 13 | 14 | 35 | 36 | [mdc-animation]: https://github.com/material-components/material-components-web/tree/master/packages/mdc-animation 37 | [mdc-button]: https://github.com/material-components/material-components-web/tree/master/packages/mdc-button 38 | [mdc-card]: https://github.com/material-components/material-components-web/tree/master/packages/mdc-card 39 | [mdc-checkbox]: https://github.com/material-components/material-components-web/tree/master/packages/mdc-checkbox 40 | [mdc-dialog]: https://github.com/material-components/material-components-web/tree/master/packages/mdc-dialog 41 | [mdc-fab]: https://github.com/material-components/material-components-web/tree/master/packages/mdc-fab 42 | [mdc-icon-toggle]: https://github.com/material-components/material-components-web/tree/master/packages/mdc-icon-toggle 43 | -------------------------------------------------------------------------------- /src/material_hl/drawer.cljs: -------------------------------------------------------------------------------- 1 | (ns material-hl.drawer 2 | (:require [hoplon.core :as hl] 3 | [material-hl.core :as core])) 4 | 5 | (hl/defelem permanent [attr kids] 6 | (let [] 7 | (hl/nav 8 | (core/assoc-class attr 9 | {:mdc-permanent-drawer true}) 10 | kids))) 11 | 12 | (hl/defelem permanent-toolbar-spacer [attr kids] 13 | (let [] 14 | (hl/div 15 | (core/assoc-class attr 16 | {:mdc-permanent-drawer__toolbar-spacer true}) 17 | kids))) 18 | 19 | (hl/defelem permanent-content [attr kids] 20 | (let [] 21 | (hl/div 22 | (core/assoc-class attr 23 | {:mdc-permanent-drawer__content true}) 24 | kids))) 25 | 26 | (hl/defelem persistent [attr kids] 27 | (let [] 28 | (hl/aside 29 | (core/assoc-class attr 30 | {:mdc-persistent-drawer true}) 31 | kids))) 32 | 33 | (hl/defelem persistent-drawer [attr kids] 34 | (let [] 35 | (hl/nav 36 | (core/assoc-class attr 37 | {:mdc-persistent-drawer__drawer true}) 38 | kids))) 39 | 40 | (hl/defelem persistent-content [attr kids] 41 | (let [] 42 | (hl/div 43 | (core/assoc-class attr 44 | {:mdc-temporary-drawer__content true}) 45 | kids))) 46 | 47 | (hl/defelem persistent-toolbar-spacer [attr kids] 48 | (let [] 49 | (hl/div 50 | (core/assoc-class attr 51 | {:mdc-persistent-drawer__toolbar-spacer true}) 52 | kids))) 53 | 54 | (hl/defelem persistent-header [attr kids] 55 | (let [] 56 | (hl/header 57 | (core/assoc-class attr 58 | {:mdc-persistent-drawer__header true}) 59 | kids))) 60 | 61 | (hl/defelem persistent-header-content [attr kids] 62 | (let [] 63 | (hl/header 64 | (core/assoc-class attr 65 | {:mdc-persistent-drawer__header-content true}) 66 | kids))) 67 | 68 | (hl/defelem temporary [attr kids] 69 | (let [] 70 | (hl/aside 71 | (core/assoc-class attr 72 | {:mdc-temporary-drawer true}) 73 | kids))) 74 | 75 | (hl/defelem temporary-drawer [attr kids] 76 | (let [] 77 | (hl/nav 78 | (core/assoc-class attr 79 | {:mdc-temporary-drawer__drawer true}) 80 | kids))) 81 | 82 | (hl/defelem temporary-content [attr kids] 83 | (let [] 84 | (hl/div 85 | (core/assoc-class attr 86 | {:mdc-temporary-drawer__content true 87 | :mdc-list-group true}) 88 | kids))) 89 | 90 | (hl/defelem temporary-toolbar-spacer [attr kids] 91 | (let [] 92 | (hl/div 93 | (core/assoc-class attr 94 | {:mdc-temporary-drawer__toolbar-spacer true}) 95 | kids))) 96 | 97 | (hl/defelem temporary-header [attr kids] 98 | (let [] 99 | (hl/header 100 | (core/assoc-class attr 101 | {:mdc-temporary-drawer__header true}) 102 | kids))) 103 | 104 | (hl/defelem temporary-header-content [attr kids] 105 | (let [] 106 | (hl/header 107 | (core/assoc-class attr 108 | {:mdc-temporary-drawer__header-content true}) 109 | kids))) 110 | -------------------------------------------------------------------------------- /src/material_hl/layout.cljs.hl_: -------------------------------------------------------------------------------- 1 | (ns material-hl.layout 2 | (:require [material-hl.core :as core] 3 | [goog.dom.classlist :as gcl])) 4 | 5 | (def ^:dynamic *fixed-drawer* false) 6 | (def ^:dynamic *fixed-header* false) 7 | (def ^:dynamic *fixed-tabs* false) 8 | (def ^:dynamic *waterfall-header* false) 9 | (def ^:dynamic *hide-top* false) 10 | (def ^:dynamic *transparent-header* false) 11 | (def ^:dynamic *seamed-header* false) 12 | (def ^:dynamic *drawer-button* false) 13 | (def ^:dynamic *desktop-drawer-button* false) 14 | (def ^:dynamic *active-tab* nil) 15 | 16 | (defelem layout [attr kids] 17 | (let [drawer (or (:fixed-drawer attr) *fixed-drawer*) 18 | header (or (:fixed-header attr) *fixed-header*) 19 | tabs (or (:fixed-tabs attr) *fixed-tabs*) 20 | button (or (:drawer-button attr) *drawer-button*) 21 | desktop-button (or (:desktop-drawer-button attr) *desktop-drawer-button*)] 22 | (div (core/assoc-class attr {:mdl-layout true 23 | :mdl-js-layout true 24 | :mdl-layout--fixed-drawer drawer 25 | :mdl-layout--fixed-header header 26 | :mdl-layout--fixed-tabs tabs 27 | :mdl-layout--no-drawer-button (not button) 28 | :mdl-layout--no-desktop-drawer-button (not desktop-button)}) 29 | kids))) 30 | 31 | (defelem layout-drawer [attr kids] 32 | (let [] 33 | (div (core/assoc-class attr {:mdl-layout__drawer true}) 34 | kids))) 35 | 36 | (defelem layout-drawer-button [attr kids] 37 | (let [] 38 | (div (core/assoc-class attr {:mdl-layout__drawer-button true}) 39 | kids))) 40 | 41 | (defelem layout-header [attr kids] 42 | (let [waterfall (or (:waterfall attr) *waterfall-header*) 43 | hide-top (or (:hide-top attr) *hide-top*) 44 | scroll (or (:scroll attr) (and (not *fixed-header*) 45 | (not *waterfall-header*))) 46 | transparent (or (:transparent attr) *transparent-header*) 47 | seamed (or (:seamed attr) *seamed-header*)] 48 | (header :class (cell= (cond-> [:mdl-layout__header] 49 | scroll (conj :mdl-layout__header--scroll) 50 | waterfall (conj :mdl-layout__header--waterfall) 51 | hide-top (conj :mdl-layout__header--waterfall-hide-top) 52 | transparent (conj :mdl-layout__header--transparent) 53 | seamed (conj :mdl-layout__header--seamed))) 54 | attr kids))) 55 | 56 | (defelem header-row [attr kids] 57 | (let [] 58 | (div :class [:mdl-layout__header-row] 59 | attr kids))) 60 | 61 | (defelem tab-bar-container [attr kids] 62 | (let [] 63 | (div :class [:mdl-layout__tab-bar-container] 64 | attr kids))) 65 | 66 | (defelem tab-bar [attr kids] 67 | (let [] 68 | (div :class [:mdl-layout__tab-bar] 69 | attr kids))) 70 | 71 | (defelem tab [attr kids] 72 | (let [active (or (:active attr) (= (:id attr) *active-tab*))] 73 | (a :class (cell= (cond-> [:mdl-layout__tab] 74 | active (conj :is-active))) 75 | attr kids))) 76 | 77 | (defelem tab-panel [attr kids] 78 | (let [] 79 | (section :class [:mdl-layout__tab-panel] 80 | attr kids))) 81 | 82 | (defelem layout-content [attr kids] 83 | (let [] 84 | (main :class [:mdl-layout__content] 85 | attr kids))) 86 | 87 | (defelem layout-icon [attr kids] 88 | (div :class "mdl-layout-icon" 89 | attr kids)) 90 | 91 | (defelem layout-title [attr kids] 92 | (span 93 | (assoc attr :class "mdl-layout__title") 94 | kids)) 95 | 96 | (defelem layout-spacer [attr kids] 97 | (div :class "mdl-layout-spacer" 98 | attr kids)) 99 | 100 | (defmethod do! :screen 101 | [elem _ v] 102 | (case v 103 | :large (comp (gcl/remove elem "mdl-layout--small-screen-only") 104 | (gcl/add elem "mdl-layout--large-screen-only")) 105 | :small (comp (gcl/remove elem "mdl-layout--large-screen-only") 106 | (gcl/add elem "mdl-layout--small-screen-only")) 107 | :else (comp (gcl/remove elem "mdl-layout--large-screen-only") 108 | (gcl/remove elem "mdl-layout--small-screen-only")))) 109 | -------------------------------------------------------------------------------- /doc/api/material-hl.tables.html: -------------------------------------------------------------------------------- 1 | 2 | material-hl.tables documentation

Material-hl Api Documentation

Version: 0.1.0

material-hl.tables

table

(table attr kids)
-------------------------------------------------------------------------------- /doc/api/material-hl.navigation.html: -------------------------------------------------------------------------------- 1 | 2 | material-hl.navigation documentation

Material-hl Api Documentation

Version: 0.1.0

material-hl.navigation

navigation

(navigation attr kids)
-------------------------------------------------------------------------------- /doc/api/material-hl.badges.html: -------------------------------------------------------------------------------- 1 | 2 | material-hl.badges documentation

Material-hl Api Documentation

Version: 0.1.0

material-hl.badges

*overlap*

dynamic

badge

(badge attr kids)
-------------------------------------------------------------------------------- /doc/api/material-hl.snackbar.html: -------------------------------------------------------------------------------- 1 | 2 | material-hl.snackbar documentation

Material-hl Api Documentation

Version: 0.1.0

material-hl.snackbar

snackbar

(snackbar attr kids)

snackbar-action

(snackbar-action attr kids)

snackbar-text

(snackbar-text attr kids)
-------------------------------------------------------------------------------- /doc/api/material-hl.core.html: -------------------------------------------------------------------------------- 1 | 2 | material-hl.core documentation

Material-hl Api Documentation

Version: 0.1.0

material-hl.core

assoc-class

(assoc-class attr & [pre post])

include-colors

(include-colors primary accent)
-------------------------------------------------------------------------------- /doc/api/material-hl.toggles.html: -------------------------------------------------------------------------------- 1 | 2 | material-hl.toggles documentation

Material-hl Api Documentation

Version: 0.1.0

material-hl.toggles

checkbox

(checkbox attr kids)

icon-toggle

(icon-toggle attr kids)

radio

(radio attr kids)

switch

(switch attr kids)
-------------------------------------------------------------------------------- /doc/api/material-hl.tabs.html: -------------------------------------------------------------------------------- 1 | 2 | material-hl.tabs documentation

Material-hl Api Documentation

Version: 0.1.0

material-hl.tabs

tab

(tab attr kids)

tab-bar

(tab-bar attr kids)

tab-panel

(tab-panel attr kids)

tabs

(tabs attr kids)
-------------------------------------------------------------------------------- /doc/api/material-hl.menus.html: -------------------------------------------------------------------------------- 1 | 2 | material-hl.menus documentation

Material-hl Api Documentation

Version: 0.1.0

material-hl.menus

menu

(menu attr kids)

menu-item

(menu-item attr kids)
-------------------------------------------------------------------------------- /doc/api/material-hl.tooltip.html: -------------------------------------------------------------------------------- 1 | 2 | material-hl.tooltip documentation

Material-hl Api Documentation

Version: 0.1.0

material-hl.tooltip

*large*

dynamic

tooltip

(tooltip attr kids)
-------------------------------------------------------------------------------- /doc/api/material-hl.dialogs.html: -------------------------------------------------------------------------------- 1 | 2 | material-hl.dialogs documentation

Material-hl Api Documentation

Version: 0.1.0

material-hl.dialogs

*dialogs*

dynamic

dialog

(dialog attr kids)

dialog-actions

(dialog-actions attr kids)

dialog-content

(dialog-content attr kids)

dialog-title

(dialog-title attr kids)
-------------------------------------------------------------------------------- /doc/api/material-hl.loading.html: -------------------------------------------------------------------------------- 1 | 2 | material-hl.loading documentation

Material-hl Api Documentation

Version: 0.1.0

material-hl.loading

*buffer*

dynamic

*progress*

dynamic

progress

(progress attr kids)

spinner

(spinner attr kids)
-------------------------------------------------------------------------------- /doc/api/material-hl.text-input.html: -------------------------------------------------------------------------------- 1 | 2 | material-hl.text-input documentation

Material-hl Api Documentation

Version: 0.1.0

material-hl.text-input

expandable-holder

(expandable-holder attr kids)

textarea

(textarea attr kids)

textfield

(textfield attr kids)

textfield-error

(textfield-error attr kids)

textfield-input

(textfield-input attr kids)

textfield-label

(textfield-label attr kids)
-------------------------------------------------------------------------------- /doc/api/material-hl.buttons.html: -------------------------------------------------------------------------------- 1 | 2 | material-hl.buttons documentation

Material-hl Api Documentation

Version: 0.1.0

material-hl.buttons

*accent*

dynamic

*colored*

dynamic

*fab*

dynamic

*icon*

dynamic

*mini-fab*

dynamic

*primary*

dynamic

*raised*

dynamic

badge

(badge attr kids)
-------------------------------------------------------------------------------- /doc/api/material-hl.cards.html: -------------------------------------------------------------------------------- 1 | 2 | material-hl.cards documentation

Material-hl Api Documentation

Version: 0.1.0

material-hl.cards

*border*

dynamic

*shadow*

dynamic

card

(card attr kids)

card-actions

(card-actions attr kids)

card-media

(card-media attr kids)

card-subtitle-text

(card-subtitle-text attr kids)

card-supporting-text

(card-supporting-text attr kids)

card-title

(card-title attr kids)

card-title-text

(card-title-text attr kids)
-------------------------------------------------------------------------------- /doc/api/material-hl.lists.html: -------------------------------------------------------------------------------- 1 | 2 | material-hl.lists documentation

Material-hl Api Documentation

Version: 0.1.0

material-hl.lists

*lines*

dynamic

item-avatar

(item-avatar attr kids)

item-icon

(item-icon attr kids)

item-primary-content

(item-primary-content attr kids)

item-secondary-action

(item-secondary-action attr kids)

item-secondary-content

(item-secondary-content attr kids)

item-secondary-info

(item-secondary-info attr kids)

item-text-body

(item-text-body attr kids)

list

(list attr kids)

list-item

(list-item attr kids)
-------------------------------------------------------------------------------- /doc/api/material-hl.footer.html: -------------------------------------------------------------------------------- 1 | 2 | material-hl.footer documentation

Material-hl Api Documentation

Version: 0.1.0

material-hl.footer

-------------------------------------------------------------------------------- /doc/api/material-hl.grid.html: -------------------------------------------------------------------------------- 1 | 2 | material-hl.grid documentation

Material-hl Api Documentation

Version: 0.1.0

material-hl.grid

*align*

dynamic

*cols*

dynamic

*offset*

dynamic

*order*

dynamic

*shadow*

dynamic

cell

(cell attr kids)

cell-card

(cell-card attr kids)

grid

(grid attr kids)
-------------------------------------------------------------------------------- /doc/api/material-hl.layout.html: -------------------------------------------------------------------------------- 1 | 2 | material-hl.layout documentation

Material-hl Api Documentation

Version: 0.1.0

material-hl.layout

*hide-top*

dynamic

header-row

(header-row attr kids)

layout

(layout attr kids)

layout-content

(layout-content attr kids)

layout-drawer

(layout-drawer attr kids)

layout-header

(layout-header attr kids)

layout-icon

(layout-icon attr kids)

layout-spacer

(layout-spacer attr kids)

layout-title

(layout-title attr kids)

tab

(tab attr kids)

tab-bar

(tab-bar attr kids)

tab-panel

(tab-panel attr kids)
-------------------------------------------------------------------------------- /doc/api/css/default.css: -------------------------------------------------------------------------------- 1 | @import url(http://fonts.googleapis.com/css?family=Droid+Sans+Mono:200,300,400); 2 | @import url(http://fonts.googleapis.com/css?family=Lato:light,regular); 3 | @import url(http://fonts.googleapis.com/css?family=Ubuntu:300,400,500); 4 | 5 | body { 6 | font-family: "Lato", Helvetica, Arial, sans-serif; 7 | font-weight: 300; 8 | color:#585858; 9 | font-size: 100%; 10 | margin: 0px; 11 | } 12 | 13 | pre, code { 14 | font-family: "Droid Sans Mono","DejaVu Sans Mono","Monospace",monospace; 15 | font-weight: 300; 16 | } 17 | 18 | section.container { 19 | display: flex; 20 | font-size: 100%; 21 | } 22 | 23 | h2 { 24 | font-weight: normal; 25 | font-size: 3em; 26 | padding: 10px 0 2px 0; 27 | margin: 0; 28 | } 29 | 30 | header { 31 | color: #333; 32 | padding: 10px; 33 | } 34 | 35 | header small { 36 | font-style: italic; 37 | } 38 | 39 | header h1 { 40 | margin: 0; 41 | padding: 0; 42 | /* font-size: 12pt; */ 43 | font-weight: lighter; 44 | /* text-shadow: -1px -1px 0px #333; */ 45 | } 46 | 47 | header h1 a { 48 | color: #333; 49 | /* font-size: 32px; */ 50 | font-weight: 400; 51 | text-decoration: none; 52 | } 53 | 54 | #content { 55 | overflow: auto; 56 | background: #fff; 57 | color: #333; 58 | padding: 0 18px; 59 | font-size: 1.3em; 60 | } 61 | 62 | #namespaces { 63 | border-right: solid 1px #cccccc; 64 | min-width: 200px; 65 | padding-right: 15px; 66 | } 67 | 68 | #vars { 69 | border-right: solid 1px #cccccc; 70 | width: 200px; 71 | } 72 | 73 | .sidebar { 74 | overflow: auto; 75 | } 76 | 77 | .sidebar a { 78 | color: #333; 79 | display: block; 80 | text-decoration: none; 81 | } 82 | 83 | .sidebar h3 { 84 | margin: 0; 85 | padding: 10px 10px 0 10px; 86 | font-size: 19px; 87 | font-weight: normal; 88 | } 89 | 90 | .sidebar ul { 91 | padding: 0.5em 0em; 92 | margin: 0; 93 | } 94 | 95 | .sidebar li { 96 | display: block; 97 | vertical-align: middle; 98 | } 99 | 100 | .sidebar li a, .sidebar li .no-link { 101 | border-left: 3px solid transparent; 102 | padding: 0 15px; 103 | white-space: nowrap; 104 | } 105 | 106 | .sidebar li .no-link { 107 | display: block; 108 | color: #777; 109 | font-style: italic; 110 | } 111 | 112 | .sidebar li .inner { 113 | display: inline-block; 114 | padding-top: 7px; 115 | height: 24px; 116 | } 117 | 118 | .sidebar li a, .sidebar li .tree { 119 | height: 31px; 120 | /* height: 25px; */ 121 | } 122 | 123 | .depth-1 .inner { padding-left: 2px; } 124 | .depth-2 .inner { padding-left: 6px; } 125 | .depth-3 .inner { padding-left: 20px; } 126 | .depth-4 .inner { padding-left: 34px; } 127 | .depth-5 .inner { padding-left: 48px; } 128 | .depth-6 .inner { padding-left: 62px; } 129 | 130 | .sidebar li .tree { 131 | display: block; 132 | float: left; 133 | position: relative; 134 | top: -10px; 135 | margin: 0 4px 0 0; 136 | padding: 0; 137 | } 138 | 139 | .sidebar li.depth-1 .tree { 140 | display: none; 141 | } 142 | 143 | .sidebar li .tree .top, .sidebar li .tree .bottom { 144 | display: block; 145 | margin: 0; 146 | padding: 0; 147 | width: 7px; 148 | } 149 | 150 | .sidebar li .tree .top { 151 | border-left: 1px solid #aaa; 152 | border-bottom: 1px solid #aaa; 153 | height: 19px; 154 | } 155 | 156 | .sidebar li .tree .bottom { 157 | height: 22px; 158 | } 159 | 160 | .sidebar li.branch .tree .bottom { 161 | border-left: 1px solid #aaa; 162 | } 163 | 164 | #namespaces li.current a { 165 | border-left: 3px solid #a33; 166 | border-left: 3px solid #7a2518; 167 | color: #a33; 168 | color: #7a2518; 169 | 170 | } 171 | 172 | #vars li.current a { 173 | border-left: 3px solid #33a; 174 | color: #33a; 175 | } 176 | 177 | .namespace-docs h2 { 178 | color: #7a2518; 179 | } 180 | 181 | .namespace-docs h3 a { 182 | color: #ba3925; 183 | font-family: "Droid Sans Mono","DejaVu Sans Mono","Monospace",monospace; 184 | font-weight: 400; 185 | text-decoration: none; 186 | } 187 | 188 | .namespace-docs .usage code { 189 | display: block; 190 | color: #777; 191 | margin: 2px 0; 192 | font-size: 0.6em; 193 | } 194 | 195 | /* .usage code:first-child { */ 196 | /* padding-top: 10px; */ 197 | /* } */ 198 | 199 | 200 | 201 | .namespace-index h3 a { 202 | text-decoration: none; 203 | color: #ba3925; 204 | font-family: "Droid Sans Mono","DejaVu Sans Mono","Monospace",monospace; 205 | font-weight: 300; 206 | } 207 | 208 | .public h3 { 209 | margin: 0; 210 | } 211 | 212 | .public { 213 | margin: 0; 214 | border-top: 1px solid #efefef; 215 | padding-top: 14px; 216 | padding-bottom: 6px; 217 | } 218 | 219 | .public:last-child { 220 | margin-bottom: 20%; 221 | } 222 | 223 | .members .public:last-child { 224 | margin-bottom: 0; 225 | } 226 | 227 | .members { 228 | margin: 15px 0; 229 | } 230 | 231 | .members h4 { 232 | color: #555; 233 | font-weight: normal; 234 | font-variant: small-caps; 235 | margin: 0 0 5px 0; 236 | } 237 | 238 | .members .inner { 239 | padding-top: 5px; 240 | padding-left: 12px; 241 | margin-top: 2px; 242 | margin-left: 7px; 243 | border-left: 1px solid #bbb; 244 | } 245 | 246 | #content .members .inner h3 { 247 | /* font-size: 12pt; */ 248 | } 249 | 250 | .members .public { 251 | border-top: none; 252 | margin-top: 0; 253 | padding-top: 6px; 254 | padding-bottom: 0; 255 | } 256 | 257 | .members .public:first-child { 258 | padding-top: 0; 259 | } 260 | 261 | h4.type, 262 | h4.dynamic, 263 | h4.added, 264 | h4.deprecated { 265 | margin: 3px 10px 10spx 0; 266 | font-weight: bold; 267 | font-variant: small-caps; 268 | } 269 | 270 | .public h4.type, 271 | .public h4.dynamic, 272 | .public h4.added, 273 | .public h4.deprecated { 274 | font-weight: bold; 275 | /* margin: 3px 0 0 10px; */ 276 | font-size: 0.7em; 277 | } 278 | 279 | .members h4.type, 280 | .members h4.added, 281 | .members h4.deprecated { 282 | margin-top: 1px; 283 | } 284 | 285 | h4.type { 286 | color: #717171; 287 | } 288 | 289 | h4.dynamic { 290 | color: #9933aa; 291 | } 292 | 293 | h4.added { 294 | color: #508820; 295 | } 296 | 297 | h4.deprecated { 298 | color: #880000; 299 | } 300 | 301 | .namespace { 302 | margin-bottom: 40px; 303 | } 304 | 305 | .namespace:last-child { 306 | margin-bottom: 10%; 307 | } 308 | 309 | .index { 310 | padding: 0; 311 | margin: 15px 0; 312 | } 313 | 314 | .index * { 315 | display: inline; 316 | } 317 | 318 | .index p { 319 | padding-right: 3px; 320 | } 321 | 322 | .index li { 323 | padding-right: 5px; 324 | } 325 | 326 | .index li a { 327 | color: #333; 328 | font-family: "Droid Sans Mono","DejaVu Sans Mono","Monospace",monospace; 329 | font-size: 0.8em; 330 | text-decoration: none; 331 | font-weight: 300; 332 | } 333 | 334 | .index ul { 335 | padding-left: 0; 336 | } 337 | 338 | p { 339 | margin: 15px 0; 340 | } 341 | 342 | .public p:first-child, .public pre.plaintext { 343 | margin-top: 12px; 344 | } 345 | 346 | .doc { 347 | margin: 0 0 26px 0; 348 | clear: both; 349 | } 350 | 351 | .public .doc { 352 | margin: 0; 353 | } 354 | 355 | .namespace-index .doc { 356 | margin-bottom: 20px; 357 | } 358 | 359 | .namespace-index .namespace .doc { 360 | margin-bottom: 10px; 361 | } 362 | 363 | .markdown { 364 | /* line-height: 18px; */ 365 | /* font-size: 16px; */ 366 | } 367 | 368 | .doc, .public, .namespace .index { 369 | max-width: 780px; 370 | overflow-x: visible; 371 | } 372 | 373 | .markdown code, .src-link a { 374 | border-radius: 2px; 375 | font-size: 0.8em; 376 | color: #444; 377 | } 378 | 379 | .markdown pre { 380 | background: #f4f4f4; 381 | border: 1px solid #e0e0e0; 382 | /* border-radius: 2px; */ 383 | padding: 5px 5px; 384 | border-top: 1px solid #e0e0e0; 385 | border-bottom: 1px solid #e0e0e0; 386 | } 387 | 388 | .markdown pre code { 389 | background: transparent; 390 | border: none; 391 | } 392 | 393 | .doc ul, .doc ol { 394 | padding-left: 30px; 395 | } 396 | 397 | .doc table { 398 | border-collapse: collapse; 399 | margin: 0 10px; 400 | } 401 | 402 | .doc table td, .doc table th { 403 | border: 1px solid #dddddd; 404 | padding: 4px 6px; 405 | } 406 | 407 | .doc table th { 408 | background: #f2f2f2; 409 | } 410 | 411 | .doc dl { 412 | margin: 0 10px 20px 10px; 413 | } 414 | 415 | .doc dl dt { 416 | font-weight: bold; 417 | margin: 0; 418 | padding: 3px 0; 419 | border-bottom: 1px solid #ddd; 420 | } 421 | 422 | .doc dl dd { 423 | padding: 5px 0; 424 | margin: 0 0 5px 10px; 425 | } 426 | 427 | .doc abbr { 428 | border-bottom: 1px dotted #333; 429 | font-variant: none 430 | cursor: help; 431 | } 432 | 433 | .src-link { 434 | margin-bottom: 15px; 435 | } 436 | 437 | .src-link a { 438 | /* font-size: 70%; */ 439 | padding: 1px 4px; 440 | text-decoration: none; 441 | color: #5555bb; 442 | } -------------------------------------------------------------------------------- /doc/api/index.html: -------------------------------------------------------------------------------- 1 | 2 | Material-hl 0.1.0 API documentation

Material-hl Api Documentation

Version: 0.1.0

Material-hl

Material Design for Hoplon.

material-hl.badges

Public variables and functions:

material-hl.buttons

Public variables and functions:

material-hl.cards

Public variables and functions:

material-hl.core

Public variables and functions:

material-hl.dialogs

Public variables and functions:

material-hl.footer

Public variables and functions:

material-hl.grid

Public variables and functions:

material-hl.layout

Public variables and functions:

material-hl.lists

Public variables and functions:

material-hl.loading

Public variables and functions:

material-hl.menus

Public variables and functions:

material-hl.navigation

Public variables and functions:

material-hl.snackbar

Public variables and functions:

material-hl.tables

Public variables and functions:

material-hl.tabs

Public variables and functions:

material-hl.text-input

Public variables and functions:

material-hl.toggles

Public variables and functions:

material-hl.tooltip

Public variables and functions:

--------------------------------------------------------------------------------