diff --git a/README.md b/README.md index eb02981..d4ba78a 100755 --- a/README.md +++ b/README.md @@ -178,6 +178,7 @@ Standard text input field. | appKey | string (unique) | The AppMessage key matching the `appKey` item defined in your `appinfo.json`. Set this to a unique string to allow this item to be looked up using `Clay.getItemsByAppKey()` in your custom function. You must set this if you wish for the value of this item to be persisted after the user closes the config page. | | label | string | The label that should appear next to this item. | | defaultValue | string | The default value of the input field. | +| description | string | Optional sub-text to include below the component | | attributes | object | An object containing HTML attributes to set on the input field. You can add basic HTML5 validation this way by setting attributes such as `required` or `type`. | @@ -215,6 +216,7 @@ Switch for a single item. | appKey | string (unique) | The AppMessage key matching the `appKey` item defined in your `appinfo.json`. Set this to a unique string to allow this item to be looked up using `Clay.getItemsByAppKey()` in your custom function. You must set this if you wish for the value of this item to be persisted after the user closes the config page. | | label | string | The label that should appear next to this item. | | defaultValue | int\|boolean | The default value of the toggle. Defaults to `false` if not specified. | +| description | string | Optional sub-text to include below the component | | attributes | object | An object containing HTML attributes to set on the input field. You can add basic HTML5 validation this way by setting attribute such as `required`. | @@ -249,6 +251,7 @@ A dropdown menu containing multiple options. | appKey | string (unique) | The AppMessage key matching the `appKey` item defined in your `appinfo.json`. Set this to a unique string to allow this item to be looked up using `Clay.getItemsByAppKey()` in your custom function. You must set this if you wish for the value of this item to be persisted after the user closes the config page. | | label | string | The label that should appear next to this item. | | defaultValue | string | The default value of the dropdown menu. Must match a value in the `options` array. | +| description | string | Optional sub-text to include below the component | | attributes | object | An object containing HTML attributes to set on the input field. You can add basic HTML5 validation this way by setting attribute such as `required`. | | options | array of objects | The options you want to appear in the dropdown menu. Each option is an object with a `label` and `value` property. | @@ -301,6 +304,7 @@ A color picker containing the 64 supported colors on Basalt and Chalk. | appKey | string (unique) | The AppMessage key matching the `appKey` item defined in your `appinfo.json`. Set this to a unique string to allow this item to be looked up using `Clay.getItemsByAppKey()` in your custom function. You must set this if you wish for the value of this item to be persisted after the user closes the config page. | | label | string | The label that should appear next to this item. | | defaultValue | string OR int | The default color. Always use the uncorrected value even if `sunlight` is true. The component will do the conversion internally. | +| description | string | Optional sub-text to include below the component | | sunlight | boolean | Use the color-corrected sunlight color palette if `true`, else the uncorrected version. Defaults to `true` if not specified. | ##### Example @@ -332,6 +336,7 @@ A list of options allowing the user can only choose one option to submit. | appKey | string (unique) | The AppMessage key matching the `appKey` item defined in your `appinfo.json`. Set this to a unique string to allow this item to be looked up using `Clay.getItemsByAppKey()` in your custom function. You must set this if you wish for the value of this item to be persisted after the user closes the config page. | | label | string | The label that should appear next to this item. | | defaultValue | string | The default selected item. Must match a value in the `options` array. | +| description | string | Optional sub-text to include below the component | | attributes | object | An object containing HTML attributes to set on the input field. You can add basic HTML5 validation this way by setting attribute such as `required`. | | options | array of objects | The options you want to appear in the radio group. Each option is an object with a `label` and `value` property. | @@ -376,6 +381,7 @@ A list of options where a user may choose more than one option to submit. | appKey | string (unique) | The AppMessage key matching the `appKey` item defined in your `appinfo.json`. Set this to a unique string to allow this item to be looked up using `Clay.getItemsByAppKey()` in your custom function. You must set this if you wish for the value of this item to be persisted after the user closes the config page. | | label | string | The label that should appear next to this item. | | defaultValue | array of strings | The default selected items. Each value must match one in the `options` array. | +| description | string | Optional sub-text to include below the component | | attributes | object | An object containing HTML attributes to set on the input field. You can add basic HTML5 validation this way by setting attribute such as `required`. | | options | array of objects | The options you want to appear in the checkbox group. Each option is an object with a `label` and `value` property. | diff --git a/dev/config.js b/dev/config.js index 76aa57a..60e1550 100644 --- a/dev/config.js +++ b/dev/config.js @@ -30,13 +30,18 @@ module.exports = [ "limit": 10, "required": "required", type: "email" - } + }, + "description": "Some arbitrary text explaining how this all works. " + + "It's cool if this wraps across multiple lines" + }, { "type": "toggle", "appKey": "cool_stuff", "label": "Enable Cool Stuff", - "defaultValue": false + "defaultValue": false, + "description": "Some arbitrary text explaining how this all works. " + + "It's cool if this wraps across multiple lines" }, { "type": "color", @@ -50,7 +55,9 @@ module.exports = [ "appKey": "sunnyColorTest", "defaultValue": "00FF00", "label": "Sunny Color", - "sunlight": true + "sunlight": true, + "description": "Some arbitrary text explaining how this all works. " + + "It's cool if this wraps across multiple lines" } ] }, @@ -71,7 +78,9 @@ module.exports = [ { "label": "One really long thing that would not fit", "value": "three" }, { "label": "Small", "value": "quote' \"test" }, { "label": "Final thing", "value": "three" } - ] + ], + "description": "Some arbitrary text explaining how this all works. " + + "It's cool if this wraps across multiple lines" }, { "type": "checkboxgroup", @@ -84,7 +93,9 @@ module.exports = [ { "label": "One really long thing that would not fit", "value": "three" }, { "label": "Small", "value": "quote' \"test" }, { "label": "Final thing", "value": "three" } - ] + ], + "description": "Some arbitrary text explaining how this all works. " + + "It's cool if this wraps across multiple lines" }, { "type": "input", @@ -108,7 +119,9 @@ module.exports = [ ], "attributes": { "required": "required" - } + }, + "description": "Some arbitrary text explaining how this all works. " + + "It's cool if this wraps across multiple lines" } ] }, diff --git a/dist/clay.js b/dist/clay.js index e6043d2..f891e71 100644 --- a/dist/clay.js +++ b/dist/clay.js @@ -1,3 +1,3 @@ -/* Clay - https://github.com/pebble/clay - Version: 0.1.0 - Build Date: 2016-02-24T03:25:39.111Z */ -!function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var e;e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,e.clay=t()}}(function(){return function t(e,n,o){function r(a,c){if(!n[a]){if(!e[a]){var s="function"==typeof require&&require;if(!c&&s)return s(a,!0);if(i)return i(a,!0);var l=new Error("Cannot find module '"+a+"'");throw l.code="MODULE_NOT_FOUND",l}var u=n[a]={exports:{}};e[a][0].call(u.exports,function(t){var n=e[a][1][t];return r(n?n:t)},u,u.exports,t,e,n,o)}return n[a].exports}for(var i="function"==typeof require&&require,a=0;a0)return"{$circularReference:"+u+"}";if(c.push(t),Array.isArray(t))return"["+s(t.map(function(t){return a(t,e,n,l,c.slice())}))+"]";var f=Object.keys(t);return f.length?"{"+s(f.map(function(r){return(o(r)?r:JSON.stringify(r))+":"+a(t[r],e,n,l,c.slice())}))+"}":"{}"}var c=[];return a(t,e,void 0===n?" ":n||"",i||"",c)};var i=/^(abstract|boolean|break|byte|case|catch|char|class|const|continue|debugger|default|delete|do|double|else|enum|export|extends|false|final|finally|float|for|function|goto|if|implements|import|in|instanceof|int|interface|long|native|new|null|package|private|protected|public|return|short|static|super|switch|synchronized|this|throw|throws|transient|true|try|typeof|undefined|var|void|volatile|while|with)$/,a="\\/"===new RegExp("/").source},{}],2:[function(t,e,n){"use strict";e.exports={name:"checkboxgroup",template:t("../../templates/components/checkboxgroup.tpl"),style:t("../../styles/clay/components/checkboxgroup.scss"),manipulator:"checkboxgroup",defaults:{label:"",options:[],attributes:{}}}},{"../../styles/clay/components/checkboxgroup.scss":13,"../../templates/components/checkboxgroup.tpl":19}],3:[function(t,e,n){"use strict";e.exports={name:"color",template:t("../../templates/components/color.tpl"),style:t("../../styles/clay/components/color.scss"),manipulator:"color",defaults:{label:""},initialize:function(t){function e(t){if(t===!1)return"transparent";for("number"==typeof t&&(t=t.toString(16));t.length<6;)t="0"+t;return"#"+(r?i[t]:t)}for(var n=t.HTML,o=this,r=o.config.sunlight!==!1,i={"000000":"000000","000055":"001e41","0000aa":"004387","0000ff":"0068ca","005500":"2b4a2c","005555":"27514f","0055aa":"16638d","0055ff":"007dce","00aa00":"5e9860","00aa55":"5c9b72","00aaaa":"57a5a2","00aaff":"4cb4db","00ff00":"8ee391","00ff55":"8ee69e","00ffaa":"8aebc0","00ffff":"84f5f1",550000:"4a161b",550055:"482748","5500aa":"40488a","5500ff":"2f6bcc",555500:"564e36",555555:"545454","5555aa":"4f6790","5555ff":"4180d0","55aa00":"759a64","55aa55":"759d76","55aaaa":"71a6a4","55aaff":"69b5dd","55ff00":"9ee594","55ff55":"9de7a0","55ffaa":"9becc2","55ffff":"95f6f2",aa0000:"99353f",aa0055:"983e5a",aa00aa:"955694",aa00ff:"8f74d2",aa5500:"9d5b4d",aa5555:"9d6064",aa55aa:"9a7099",aa55ff:"9587d5",aaaa00:"afa072",aaaa55:"aea382",aaaaaa:"ababab",ffffff:"ffffff",aaaaff:"a7bae2",aaff00:"c9e89d",aaff55:"c9eaa7",aaffaa:"c7f0c8",aaffff:"c3f9f7",ff0000:"e35462",ff0055:"e25874",ff00aa:"e16aa3",ff00ff:"de83dc",ff5500:"e66e6b",ff5555:"e6727c",ff55aa:"e37fa7",ff55ff:"e194df",ffaa00:"f1aa86",ffaa55:"f1ad93",ffaaaa:"efb5b8",ffaaff:"ecc3eb",ffff00:"ffeeab",ffff55:"fff1b5",ffffaa:"fff6d3"},a=o.config.layout||[[!1,!1,"55ff00","aaff55",!1,"ffff55","ffffaa",!1,!1],[!1,"aaffaa","55ff55","00ff00","aaff00","ffff00","ffaa55","ffaaaa",!1],["55ffaa","00ff55","00aa00","55aa00","aaaa55","aaaa00","ffaa00","ff5500","ff5555"],["aaffff","00ffaa","00aa55","55aa55","005500","555500","aa5500","ff0000","ff0055"],[!1,"55aaaa","00aaaa","005555","ffffff","000000","aa5555","aa0000",!1],["55ffff","00ffff","00aaff","0055aa","aaaaaa","555555","550000","aa0055","ff55aa"],["55aaff","0055ff","0000ff","0000aa","000055","550055","aa00aa","ff00aa","ffaaff"],[!1,"5555aa","5555ff","5500ff","5500aa","aa00ff","ff00ff","ff55ff",!1],[!1,!1,!1,"aaaaff","aa55ff","aa55aa",!1,!1,!1]],c="",s=100/a[0].length,l=100/a.length,u=o.$element,f=0;f'}u.select(".color-box-container").add(n(c));var y=u.select(".value"),v=u.select(".picker-wrap"),x=o.$manipulatorTarget.get("disabled");u.select("label").on("click",function(t){x||v.set("show")}),o.on("change",function(){var t=o.get();y.set("$background-color",e(t)),u.select(".color-box").set("-selected"),u.select('.color-box[data-value="'+t+'"]').set("+selected")}),u.select(".color-box.selectable").on("click",function(t){o.set(parseInt(t.target.dataset.value,10)),v.set("-show")}),v.on("click",function(){v.set("-show")}),o.on("disabled",function(){x=!0}),o.on("enabled",function(){x=!1})}}},{"../../styles/clay/components/color.scss":14,"../../templates/components/color.tpl":20}],4:[function(t,e,n){"use strict";e.exports={name:"footer",template:t("../../templates/components/footer.tpl"),manipulator:"html"}},{"../../templates/components/footer.tpl":21}],5:[function(t,e,n){"use strict";e.exports={name:"heading",template:t("../../templates/components/heading.tpl"),manipulator:"html",defaults:{size:4}}},{"../../templates/components/heading.tpl":22}],6:[function(t,e,n){"use strict";e.exports={color:t("./color"),footer:t("./footer"),heading:t("./heading"),input:t("./input"),select:t("./select"),submit:t("./submit"),text:t("./text"),toggle:t("./toggle"),radiogroup:t("./radiogroup"),checkboxgroup:t("./checkboxgroup")}},{"./checkboxgroup":2,"./color":3,"./footer":4,"./heading":5,"./input":7,"./radiogroup":8,"./select":9,"./submit":10,"./text":11,"./toggle":12}],7:[function(t,e,n){"use strict";e.exports={name:"input",template:t("../../templates/components/input.tpl"),style:t("../../styles/clay/components/input.scss"),manipulator:"val",defaults:{label:"",attributes:{}}}},{"../../styles/clay/components/input.scss":15,"../../templates/components/input.tpl":23}],8:[function(t,e,n){"use strict";e.exports={name:"radiogroup",template:t("../../templates/components/radiogroup.tpl"),style:t("../../styles/clay/components/radiogroup.scss"),manipulator:"radiogroup",defaults:{label:"",options:[],attributes:{}}}},{"../../styles/clay/components/radiogroup.scss":16,"../../templates/components/radiogroup.tpl":24}],9:[function(t,e,n){"use strict";e.exports={name:"select",template:t("../../templates/components/select.tpl"),style:t("../../styles/clay/components/select.scss"),manipulator:"val",defaults:{label:"",options:[],attributes:{}},initialize:function(){var t=this,e=t.$element.select(".value");t.on("change",function(n){var o=t.$manipulatorTarget.select("option:checked").get("innerHTML");e.set("innerHTML",o)})}}},{"../../styles/clay/components/select.scss":17,"../../templates/components/select.tpl":25}],10:[function(t,e,n){"use strict";e.exports={name:"submit",template:t("../../templates/components/submit.tpl"),manipulator:"html",defaults:{attributes:{}}}},{"../../templates/components/submit.tpl":26}],11:[function(t,e,n){"use strict";e.exports={name:"text",template:t("../../templates/components/text.tpl"),manipulator:"html"}},{"../../templates/components/text.tpl":27}],12:[function(t,e,n){"use strict";e.exports={name:"toggle",template:t("../../templates/components/toggle.tpl"),style:t("../../styles/clay/components/toggle.scss"),manipulator:"checked",defaults:{label:"",attributes:{}}}},{"../../styles/clay/components/toggle.scss":18,"../../templates/components/toggle.tpl":28}],13:[function(t,e,n){e.exports=".component-checkbox { -webkit-tap-highlight-color: transparent; display: block; }\n\n.component-checkbox:active { background-color: transparent; }\n\n.component-checkbox > .label { display: block; padding-bottom: 0.35rem; }\n\n.component-checkbox .checkbox-group label { padding: 0.35rem 0; -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1); }\n\n.component-checkbox .checkbox-group label:active { background-color: rgba(255, 255, 255, 0.1); }\n\n.component-checkbox .checkbox-group .label { font-size: 0.9em; padding: 0 0.375rem; }\n\n.component-checkbox .checkbox-group input { opacity: 0; position: absolute; }\n\n.component-checkbox .checkbox-group i { display: block; position: relative; border-radius: 0.25rem; width: 1.4rem; height: 1.4rem; border: 0.11765rem solid #767676; -webkit-flex-shrink: 0; flex-shrink: 0; }\n\n.component-checkbox .checkbox-group input:checked ~ i { border-color: #ff4700; background: #ff4700; }\n\n.component-checkbox .checkbox-group input:checked ~ i:after { content: ''; box-sizing: border-box; -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; left: 0.35rem; top: -0.05rem; display: block; width: 0.5rem; height: 1rem; border: 0 solid #ffffff; border-right-width: 0.11765rem; border-bottom-width: 0.11765rem; }\n"},{}],14:[function(t,e,n){e.exports=".component-color .value { width: 2.2652rem; height: 1.4rem; border-radius: 0.7rem; box-shadow: #2f2f2f 0 0.1rem 0.1rem; }\n\n.component-color .picker-wrap { left: 0; top: 0; right: 0; bottom: 0; position: fixed; padding: 1rem; background: rgba(0, 0, 0, 0.7); opacity: 0; -webkit-transition: opacity 70ms ease-in 175ms; transition: opacity 70ms ease-in 175ms; pointer-events: none; z-index: 100; }\n\n.component-color .picker-wrap .picker { padding: 1rem; background: #f2f2f2; border-radius: 0.25rem; }\n\n.component-color .picker-wrap.show { -webkit-transition-delay: 0ms; transition-delay: 0ms; pointer-events: auto; opacity: 1; }\n\n.component-color .color-box-wrap { box-sizing: border-box; position: relative; height: 0; width: 100%; padding: 0 0 100% 0; margin: 0.6em 0 0; }\n\n.component-color .color-box-wrap .color-box-container { position: absolute; height: 99.97%; width: 100%; left: 0; top: 0; }\n\n.component-color .color-box-wrap .color-box-container .color-box { float: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }\n\n.component-color .color-box-wrap .color-box-container .color-box.rounded-tl { border-top-left-radius: 0.25rem; }\n\n.component-color .color-box-wrap .color-box-container .color-box.rounded-tr { border-top-right-radius: 0.25rem; }\n\n.component-color .color-box-wrap .color-box-container .color-box.rounded-bl { border-bottom-left-radius: 0.25rem; }\n\n.component-color .color-box-wrap .color-box-container .color-box.rounded-br { border-bottom-right-radius: 0.25rem; }\n\n.component-color .color-box-wrap .color-box-container .color-box.selected { -webkit-transform: scale(1.15); transform: scale(1.15); border-radius: 0.25rem; box-shadow: #111 0 0 0.24rem; position: relative; z-index: 100; }\n"},{}],15:[function(t,e,n){e.exports=".component-input { display: block; }\n\n.component-input .label { padding-bottom: 0.7rem; }\n\n.component-input .input { position: relative; min-width: 100%; margin-top: 0.7rem; margin-left: 0; }\n\n.component-input input { display: block; width: 100%; background: #333333; border-radius: 0.25rem; padding: 0.35rem 0.375rem; border: none; vertical-align: baseline; color: #ffffff; font-size: inherit; }\n\n.component-input input::-webkit-input-placeholder { color: #858585; }\n\n.component-input input::-moz-placeholder { color: #858585; }\n\n.component-input input:-moz-placeholder { color: #858585; }\n\n.component-input input:-ms-input-placeholder { color: #858585; }\n\n.component-input input:focus { border: none; box-shadow: none; }\n\n.component-input input:focus::-webkit-input-placeholder { color: #666666; }\n\n.component-input input:focus::-moz-placeholder { color: #666666; }\n\n.component-input input:focus:-moz-placeholder { color: #666666; }\n\n.component-input input:focus:-ms-input-placeholder { color: #666666; }\n"},{}],16:[function(t,e,n){e.exports=".component-radio { -webkit-tap-highlight-color: transparent; display: block; }\n\n.component-radio:active { background-color: transparent; }\n\n.component-radio > .label { display: block; padding-bottom: 0.35rem; }\n\n.component-radio .radio-group label { padding: 0.35rem 0; -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1); }\n\n.component-radio .radio-group label:active { background-color: rgba(255, 255, 255, 0.1); }\n\n.component-radio .radio-group .label { font-size: 0.9em; padding: 0 0.375rem; }\n\n.component-radio .radio-group input { opacity: 0; position: absolute; }\n\n.component-radio .radio-group i { display: block; position: relative; border-radius: 1.4rem; width: 1.4rem; height: 1.4rem; border: 2px solid #767676; -webkit-flex-shrink: 0; flex-shrink: 0; }\n\n.component-radio .radio-group input:checked ~ i { border-color: #ff4700; }\n\n.component-radio .radio-group input:checked ~ i:after { content: ''; display: block; position: absolute; left: 15%; right: 15%; top: 15%; bottom: 15%; border-radius: 1.4rem; background: #ff4700; }\n"},{}],17:[function(t,e,n){e.exports='.component-select { position: relative; }\n\n.component-select .value { position: relative; padding-right: 1.1rem; }\n\n.component-select .value:after { content: ""; position: absolute; right: 0; top: 50%; margin-top: -0.1rem; height: 0; width: 0; border-left: 0.425rem solid transparent; border-right: 0.425rem solid transparent; border-top: 0.425rem solid #ececec; }\n\n.component-select select { opacity: 0; position: absolute; display: block; left: 0; right: 0; top: 0; bottom: 0; background: #000; width: 100%; border: none; margin: 0; padding: 0; }\n'},{}],18:[function(t,e,n){e.exports=".component-toggle input { display: none; }\n\n.component-toggle .graphic { display: inline-block; position: relative; }\n\n.component-toggle .graphic .slide { display: block; border-radius: 1.05rem; height: 1.05rem; width: 2.2652rem; background: #2f2f2f; -webkit-transition: background-color 150ms linear; transition: background-color 150ms linear; }\n\n.component-toggle .graphic .marker { background: #ececec; width: 1.4rem; height: 1.4rem; border-radius: 1.4rem; position: absolute; left: 0; display: block; top: -0.175rem; -webkit-transition: -webkit-transform 150ms linear; transition: -webkit-transform 150ms linear; transition: transform 150ms linear; transition: transform 150ms linear, -webkit-transform 150ms linear; box-shadow: #2f2f2f 0 0.1rem 0.1rem; }\n\n.component-toggle input:checked + .graphic .slide { background: #993d19; }\n\n.component-toggle input:checked + .graphic .marker { background: #ff4700; -webkit-transform: translateX(0.8652rem); transform: translateX(0.8652rem); }\n"},{}],19:[function(t,e,n){e.exports='
\n {{{label}}}\n
\n {{each options}}\n \n {{/each}}\n
\n
\n'},{}],20:[function(t,e,n){e.exports='
\n \n
\n
\n
\n
\n
\n
\n
\n
\n'},{}],21:[function(t,e,n){e.exports='
\n'},{}],22:[function(t,e,n){e.exports='
\n \n
\n'},{}],23:[function(t,e,n){e.exports='\n'},{}],24:[function(t,e,n){e.exports='
\n {{{label}}}\n
\n {{each options}}\n \n {{/each}}\n
\n
\n'},{}],25:[function(t,e,n){e.exports='\n'},{}],26:[function(t,e,n){e.exports='
\n \n
\n'},{}],27:[function(t,e,n){e.exports='
\n

\n
\n'},{}],28:[function(t,e,n){e.exports='\n'},{}],29:[function(t,e,n){e.exports='
'; -},{}],"pebble-clay":[function(t,e,n){"use strict";function o(t,e,n){function o(t){Array.isArray(t)?t.forEach(function(t){o(t)}):"section"===t.type?o(t.items):a[t.type]&&r.registerComponent(a[t.type])}var r=this;if(!Array.isArray(t))throw new Error("config must be an Array");if(e&&"function"!=typeof e)throw new Error('customFn must be a function or "null"');n=n||{},r.config=t,r.customFn=e||function(){},r.components={},n.autoHandleEvents!==!1&&"undefined"!=typeof Pebble&&(Pebble.addEventListener("showConfiguration",function(){Pebble.openURL(r.generateUrl())}),Pebble.addEventListener("webviewclosed",function(t){t&&t.response&&Pebble.sendAppMessage(r.getSettings(t.response),function(){console.log("Sent config data to Pebble")},function(t){console.log("Failed to send config data!"),console.log(JSON.stringify(t))})})),o(r.config)}var r=t("./tmp/config-page.html"),i=t("tosource"),a=t("./src/scripts/components");o.prototype.registerComponent=function(t){this.components[t.name]=t},o.prototype.generateUrl=function(){var t={},e=!Pebble||"pypkjs"===Pebble.platform,n=e?"$$$RETURN_TO$$$":"pebblejs://close#";try{t=JSON.parse(localStorage.getItem("clay-settings"))||{}}catch(a){console.error(a.toString())}var c=r.replace("$$RETURN_TO$$",n).replace("$$CUSTOM_FN$$",i(this.customFn)).replace("$$CONFIG$$",i(this.config)).replace("$$SETTINGS$$",i(t)).replace("$$COMPONENTS$$",i(this.components));return e?o.encodeDataUri(c,"http://clay.pebble.com.s3-website-us-west-2.amazonaws.com/#"):o.encodeDataUri(c)},o.prototype.getSettings=function(t){var e={};try{e=JSON.parse(decodeURIComponent(t))}catch(n){throw new Error("The provided response was not valid JSON")}return localStorage.setItem("clay-settings",JSON.stringify(e)),e},o.encodeDataUri=function(t,e){if(e="undefined"!=typeof e?e:"data:text/html;base64,",window.btoa)return e+encodeURIComponent(window.btoa(t));var n="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";t=String(t);var o,r,i,a,c,s,l,u=0,f=[];if(/[^\x00-\xFF]/.test(t))throw Error("InvalidCharacterError");for(;u>2,c=(3&o)<<4|r>>4,s=(15&r)<<2|i>>6,l=63&i,u===t.length+2?(s=64,l=64):u===t.length+1&&(l=64),f.push(n.charAt(a),n.charAt(c),n.charAt(s),n.charAt(l));return e+encodeURIComponent(f.join(""))},e.exports=o},{"./src/scripts/components":6,"./tmp/config-page.html":29,tosource:1}]},{},["pebble-clay"])("pebble-clay")}); \ No newline at end of file +/* Clay - https://github.com/pebble/clay - Version: 0.1.0 - Build Date: 2016-02-29T12:16:57.922Z */ +!function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var e;e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,e.clay=t()}}(function(){return function t(e,n,o){function r(a,s){if(!n[a]){if(!e[a]){var c="function"==typeof require&&require;if(!s&&c)return c(a,!0);if(i)return i(a,!0);var l=new Error("Cannot find module '"+a+"'");throw l.code="MODULE_NOT_FOUND",l}var u=n[a]={exports:{}};e[a][0].call(u.exports,function(t){var n=e[a][1][t];return r(n?n:t)},u,u.exports,t,e,n,o)}return n[a].exports}for(var i="function"==typeof require&&require,a=0;a0)return"{$circularReference:"+u+"}";if(s.push(t),Array.isArray(t))return"["+c(t.map(function(t){return a(t,e,n,l,s.slice())}))+"]";var f=Object.keys(t);return f.length?"{"+c(f.map(function(r){return(o(r)?r:JSON.stringify(r))+":"+a(t[r],e,n,l,s.slice())}))+"}":"{}"}var s=[];return a(t,e,void 0===n?" ":n||"",i||"",s)};var i=/^(abstract|boolean|break|byte|case|catch|char|class|const|continue|debugger|default|delete|do|double|else|enum|export|extends|false|final|finally|float|for|function|goto|if|implements|import|in|instanceof|int|interface|long|native|new|null|package|private|protected|public|return|short|static|super|switch|synchronized|this|throw|throws|transient|true|try|typeof|undefined|var|void|volatile|while|with)$/,a="\\/"===new RegExp("/").source},{}],2:[function(t,e,n){"use strict";e.exports={name:"checkboxgroup",template:t("../../templates/components/checkboxgroup.tpl"),style:t("../../styles/clay/components/checkboxgroup.scss"),manipulator:"checkboxgroup",defaults:{label:"",options:[],attributes:{}}}},{"../../styles/clay/components/checkboxgroup.scss":13,"../../templates/components/checkboxgroup.tpl":20}],3:[function(t,e,n){"use strict";e.exports={name:"color",template:t("../../templates/components/color.tpl"),style:t("../../styles/clay/components/color.scss"),manipulator:"color",defaults:{label:""},initialize:function(t){function e(t){if(t===!1)return"transparent";for("number"==typeof t&&(t=t.toString(16));t.length<6;)t="0"+t;return"#"+(r?i[t]:t)}for(var n=t.HTML,o=this,r=o.config.sunlight!==!1,i={"000000":"000000","000055":"001e41","0000aa":"004387","0000ff":"0068ca","005500":"2b4a2c","005555":"27514f","0055aa":"16638d","0055ff":"007dce","00aa00":"5e9860","00aa55":"5c9b72","00aaaa":"57a5a2","00aaff":"4cb4db","00ff00":"8ee391","00ff55":"8ee69e","00ffaa":"8aebc0","00ffff":"84f5f1",550000:"4a161b",550055:"482748","5500aa":"40488a","5500ff":"2f6bcc",555500:"564e36",555555:"545454","5555aa":"4f6790","5555ff":"4180d0","55aa00":"759a64","55aa55":"759d76","55aaaa":"71a6a4","55aaff":"69b5dd","55ff00":"9ee594","55ff55":"9de7a0","55ffaa":"9becc2","55ffff":"95f6f2",aa0000:"99353f",aa0055:"983e5a",aa00aa:"955694",aa00ff:"8f74d2",aa5500:"9d5b4d",aa5555:"9d6064",aa55aa:"9a7099",aa55ff:"9587d5",aaaa00:"afa072",aaaa55:"aea382",aaaaaa:"ababab",ffffff:"ffffff",aaaaff:"a7bae2",aaff00:"c9e89d",aaff55:"c9eaa7",aaffaa:"c7f0c8",aaffff:"c3f9f7",ff0000:"e35462",ff0055:"e25874",ff00aa:"e16aa3",ff00ff:"de83dc",ff5500:"e66e6b",ff5555:"e6727c",ff55aa:"e37fa7",ff55ff:"e194df",ffaa00:"f1aa86",ffaa55:"f1ad93",ffaaaa:"efb5b8",ffaaff:"ecc3eb",ffff00:"ffeeab",ffff55:"fff1b5",ffffaa:"fff6d3"},a=o.config.layout||[[!1,!1,"55ff00","aaff55",!1,"ffff55","ffffaa",!1,!1],[!1,"aaffaa","55ff55","00ff00","aaff00","ffff00","ffaa55","ffaaaa",!1],["55ffaa","00ff55","00aa00","55aa00","aaaa55","aaaa00","ffaa00","ff5500","ff5555"],["aaffff","00ffaa","00aa55","55aa55","005500","555500","aa5500","ff0000","ff0055"],[!1,"55aaaa","00aaaa","005555","ffffff","000000","aa5555","aa0000",!1],["55ffff","00ffff","00aaff","0055aa","aaaaaa","555555","550000","aa0055","ff55aa"],["55aaff","0055ff","0000ff","0000aa","000055","550055","aa00aa","ff00aa","ffaaff"],[!1,"5555aa","5555ff","5500ff","5500aa","aa00ff","ff00ff","ff55ff",!1],[!1,!1,!1,"aaaaff","aa55ff","aa55aa",!1,!1,!1]],s="",c=100/a[0].length,l=100/a.length,u=o.$element,f=0;f'}u.select(".color-box-container").add(n(s));var y=u.select(".value"),v=u.select(".picker-wrap"),x=o.$manipulatorTarget.get("disabled");u.select("label").on("click",function(t){x||v.set("show")}),o.on("change",function(){var t=o.get();y.set("$background-color",e(t)),u.select(".color-box").set("-selected"),u.select('.color-box[data-value="'+t+'"]').set("+selected")}),u.select(".color-box.selectable").on("click",function(t){o.set(parseInt(t.target.dataset.value,10)),v.set("-show")}),v.on("click",function(){v.set("-show")}),o.on("disabled",function(){x=!0}),o.on("enabled",function(){x=!1})}}},{"../../styles/clay/components/color.scss":14,"../../templates/components/color.tpl":21}],4:[function(t,e,n){"use strict";e.exports={name:"footer",template:t("../../templates/components/footer.tpl"),manipulator:"html"}},{"../../templates/components/footer.tpl":22}],5:[function(t,e,n){"use strict";e.exports={name:"heading",template:t("../../templates/components/heading.tpl"),manipulator:"html",defaults:{size:4}}},{"../../templates/components/heading.tpl":23}],6:[function(t,e,n){"use strict";e.exports={color:t("./color"),footer:t("./footer"),heading:t("./heading"),input:t("./input"),select:t("./select"),submit:t("./submit"),text:t("./text"),toggle:t("./toggle"),radiogroup:t("./radiogroup"),checkboxgroup:t("./checkboxgroup")}},{"./checkboxgroup":2,"./color":3,"./footer":4,"./heading":5,"./input":7,"./radiogroup":8,"./select":9,"./submit":10,"./text":11,"./toggle":12}],7:[function(t,e,n){"use strict";e.exports={name:"input",template:t("../../templates/components/input.tpl"),style:t("../../styles/clay/components/input.scss"),manipulator:"val",defaults:{label:"",attributes:{}}}},{"../../styles/clay/components/input.scss":15,"../../templates/components/input.tpl":24}],8:[function(t,e,n){"use strict";e.exports={name:"radiogroup",template:t("../../templates/components/radiogroup.tpl"),style:t("../../styles/clay/components/radiogroup.scss"),manipulator:"radiogroup",defaults:{label:"",options:[],attributes:{}}}},{"../../styles/clay/components/radiogroup.scss":16,"../../templates/components/radiogroup.tpl":25}],9:[function(t,e,n){"use strict";e.exports={name:"select",template:t("../../templates/components/select.tpl"),style:t("../../styles/clay/components/select.scss"),manipulator:"val",defaults:{label:"",options:[],attributes:{}},initialize:function(){var t=this,e=t.$element.select(".value");t.on("change",function(){var n=t.$manipulatorTarget.get("selectedIndex"),o=t.$manipulatorTarget.select("option"),r=o[n]&&o[n].innerHTML;e.set("innerHTML",r)})}}},{"../../styles/clay/components/select.scss":17,"../../templates/components/select.tpl":26}],10:[function(t,e,n){"use strict";e.exports={name:"submit",template:t("../../templates/components/submit.tpl"),style:t("../../styles/clay/components/submit.scss"),manipulator:"html",defaults:{attributes:{}}}},{"../../styles/clay/components/submit.scss":18,"../../templates/components/submit.tpl":27}],11:[function(t,e,n){"use strict";e.exports={name:"text",template:t("../../templates/components/text.tpl"),manipulator:"html"}},{"../../templates/components/text.tpl":28}],12:[function(t,e,n){"use strict";e.exports={name:"toggle",template:t("../../templates/components/toggle.tpl"),style:t("../../styles/clay/components/toggle.scss"),manipulator:"checked",defaults:{label:"",attributes:{}}}},{"../../styles/clay/components/toggle.scss":19,"../../templates/components/toggle.tpl":29}],13:[function(t,e,n){e.exports=".component-checkbox { display: block; }\n\n.component-checkbox > .label { display: block; padding-bottom: 0.35rem; }\n\n.component-checkbox .checkbox-group label { padding: 0.35rem 0; }\n\n.component-checkbox .checkbox-group .label { font-size: 0.9em; padding: 0 0.375rem; }\n\n.component-checkbox .checkbox-group input { opacity: 0; position: absolute; }\n\n.component-checkbox .checkbox-group i { display: block; position: relative; border-radius: 0.25rem; width: 1.4rem; height: 1.4rem; border: 0.11765rem solid #767676; -webkit-flex-shrink: 0; flex-shrink: 0; }\n\n.component-checkbox .checkbox-group input:checked + i { border-color: #ff4700; background: #ff4700; }\n\n.component-checkbox .checkbox-group input:checked + i:after { content: ''; box-sizing: border-box; -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; left: 0.35rem; top: -0.05rem; display: block; width: 0.5rem; height: 1rem; border: 0 solid #ffffff; border-right-width: 0.11765rem; border-bottom-width: 0.11765rem; }\n"},{}],14:[function(t,e,n){e.exports=".component-color .value { width: 2.2652rem; height: 1.4rem; border-radius: 0.7rem; box-shadow: #2f2f2f 0 0.1rem 0.1rem; display: block; }\n\n.component-color .picker-wrap { left: 0; top: 0; right: 0; bottom: 0; position: fixed; padding: 1rem; background: rgba(0, 0, 0, 0.7); opacity: 0; -webkit-transition: opacity 70ms ease-in 175ms; transition: opacity 70ms ease-in 175ms; pointer-events: none; z-index: 100; }\n\n.component-color .picker-wrap .picker { padding: 1rem; background: #f2f2f2; border-radius: 0.25rem; }\n\n.component-color .picker-wrap.show { -webkit-transition-delay: 0ms; transition-delay: 0ms; pointer-events: auto; opacity: 1; }\n\n.component-color .color-box-wrap { box-sizing: border-box; position: relative; height: 0; width: 100%; padding: 0 0 100% 0; margin: 0.6em 0 0; }\n\n.component-color .color-box-wrap .color-box-container { position: absolute; height: 99.97%; width: 100%; left: 0; top: 0; }\n\n.component-color .color-box-wrap .color-box-container .color-box { float: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }\n\n.component-color .color-box-wrap .color-box-container .color-box.rounded-tl { border-top-left-radius: 0.25rem; }\n\n.component-color .color-box-wrap .color-box-container .color-box.rounded-tr { border-top-right-radius: 0.25rem; }\n\n.component-color .color-box-wrap .color-box-container .color-box.rounded-bl { border-bottom-left-radius: 0.25rem; }\n\n.component-color .color-box-wrap .color-box-container .color-box.rounded-br { border-bottom-right-radius: 0.25rem; }\n\n.component-color .color-box-wrap .color-box-container .color-box.selected { -webkit-transform: scale(1.15); transform: scale(1.15); border-radius: 0.25rem; box-shadow: #111 0 0 0.24rem; position: relative; z-index: 100; }\n"},{}],15:[function(t,e,n){e.exports=".component-input { display: block; }\n\n.component-input .label { padding-bottom: 0.7rem; }\n\n.component-input .input { position: relative; min-width: 100%; margin-top: 0.7rem; margin-left: 0; }\n\n.component-input input { display: block; width: 100%; background: #333333; border-radius: 0.25rem; padding: 0.35rem 0.375rem; border: none; vertical-align: baseline; color: #ffffff; font-size: inherit; }\n\n.component-input input::-webkit-input-placeholder { color: #858585; }\n\n.component-input input::-moz-placeholder { color: #858585; }\n\n.component-input input:-moz-placeholder { color: #858585; }\n\n.component-input input:-ms-input-placeholder { color: #858585; }\n\n.component-input input:focus { border: none; box-shadow: none; }\n\n.component-input input:focus::-webkit-input-placeholder { color: #666666; }\n\n.component-input input:focus::-moz-placeholder { color: #666666; }\n\n.component-input input:focus:-moz-placeholder { color: #666666; }\n\n.component-input input:focus:-ms-input-placeholder { color: #666666; }\n"},{}],16:[function(t,e,n){e.exports=".component-radio { display: block; }\n\n.component-radio > .label { display: block; padding-bottom: 0.35rem; }\n\n.component-radio .radio-group label { padding: 0.35rem 0; }\n\n.component-radio .radio-group .label { font-size: 0.9em; padding: 0 0.375rem; }\n\n.component-radio .radio-group input { opacity: 0; position: absolute; }\n\n.component-radio .radio-group i { display: block; position: relative; border-radius: 1.4rem; width: 1.4rem; height: 1.4rem; border: 2px solid #767676; -webkit-flex-shrink: 0; flex-shrink: 0; }\n\n.component-radio .radio-group input:checked + i { border-color: #ff4700; }\n\n.component-radio .radio-group input:checked + i:after { content: ''; display: block; position: absolute; left: 15%; right: 15%; top: 15%; bottom: 15%; border-radius: 1.4rem; background: #ff4700; }\n"},{}],17:[function(t,e,n){e.exports='.component-select { position: relative; }\n\n.component-select .value { position: relative; padding-right: 1.1rem; display: block; }\n\n.component-select .value:after { content: ""; position: absolute; right: 0; top: 50%; margin-top: -0.1rem; height: 0; width: 0; border-left: 0.425rem solid transparent; border-right: 0.425rem solid transparent; border-top: 0.425rem solid #ececec; }\n\n.component-select select { opacity: 0; position: absolute; display: block; left: 0; right: 0; top: 0; bottom: 0; background: #000; width: 100%; border: none; margin: 0; padding: 0; }\n'},{}],18:[function(t,e,n){e.exports=".component-submit { text-align: center; }\n"},{}],19:[function(t,e,n){e.exports=".component-toggle input { display: none; }\n\n.component-toggle .graphic { display: inline-block; position: relative; }\n\n.component-toggle .graphic .slide { display: block; border-radius: 1.05rem; height: 1.05rem; width: 2.2652rem; background: #2f2f2f; -webkit-transition: background-color 150ms linear; transition: background-color 150ms linear; }\n\n.component-toggle .graphic .marker { background: #ececec; width: 1.4rem; height: 1.4rem; border-radius: 1.4rem; position: absolute; left: 0; display: block; top: -0.175rem; -webkit-transition: -webkit-transform 150ms linear; transition: -webkit-transform 150ms linear; transition: transform 150ms linear; transition: transform 150ms linear, -webkit-transform 150ms linear; box-shadow: #2f2f2f 0 0.1rem 0.1rem; }\n\n.component-toggle input:checked + .graphic .slide { background: #993d19; }\n\n.component-toggle input:checked + .graphic .marker { background: #ff4700; -webkit-transform: translateX(0.8652rem); transform: translateX(0.8652rem); }\n"},{}],20:[function(t,e,n){e.exports='
\n {{{label}}}\n
\n {{each options}}\n \n {{/each}}\n
\n
\n'},{}],21:[function(t,e,n){e.exports='
\n \n
\n
\n
\n
\n
\n
\n
\n
\n'},{}],22:[function(t,e,n){e.exports='
\n'},{}],23:[function(t,e,n){e.exports='
\n \n
\n'},{}],24:[function(t,e,n){e.exports='\n'},{}],25:[function(t,e,n){e.exports='
\n {{{label}}}\n
\n {{each options}}\n \n {{/each}}\n
\n
\n'},{}],26:[function(t,e,n){e.exports='\n'},{}],27:[function(t,e,n){e.exports='
\n \n
\n'},{}],28:[function(t,e,n){e.exports='
\n

\n
\n'},{}],29:[function(t,e,n){e.exports='\n'},{}],30:[function(t,e,n){e.exports='
'; +},{}],"pebble-clay":[function(t,e,n){"use strict";function o(t,e,n){function o(t){Array.isArray(t)?t.forEach(function(t){o(t)}):"section"===t.type?o(t.items):a[t.type]&&r.registerComponent(a[t.type])}var r=this;if(!Array.isArray(t))throw new Error("config must be an Array");if(e&&"function"!=typeof e)throw new Error('customFn must be a function or "null"');n=n||{},r.config=t,r.customFn=e||function(){},r.components={},n.autoHandleEvents!==!1&&"undefined"!=typeof Pebble&&(Pebble.addEventListener("showConfiguration",function(){Pebble.openURL(r.generateUrl())}),Pebble.addEventListener("webviewclosed",function(t){t&&t.response&&Pebble.sendAppMessage(r.getSettings(t.response),function(){console.log("Sent config data to Pebble")},function(t){console.log("Failed to send config data!"),console.log(JSON.stringify(t))})})),o(r.config)}var r=t("./tmp/config-page.html"),i=t("tosource"),a=t("./src/scripts/components");o.prototype.registerComponent=function(t){this.components[t.name]=t},o.prototype.generateUrl=function(){var t={},e=!Pebble||"pypkjs"===Pebble.platform,n=e?"$$$RETURN_TO$$$":"pebblejs://close#";try{t=JSON.parse(localStorage.getItem("clay-settings"))||{}}catch(a){console.error(a.toString())}var s=r.replace("$$RETURN_TO$$",n).replace("$$CUSTOM_FN$$",i(this.customFn)).replace("$$CONFIG$$",i(this.config)).replace("$$SETTINGS$$",i(t)).replace("$$COMPONENTS$$",i(this.components));return e?o.encodeDataUri(s,"http://clay.pebble.com.s3-website-us-west-2.amazonaws.com/#"):o.encodeDataUri(s)},o.prototype.getSettings=function(t){var e={};try{e=JSON.parse(decodeURIComponent(t))}catch(n){throw new Error("The provided response was not valid JSON")}return localStorage.setItem("clay-settings",JSON.stringify(e)),e},o.encodeDataUri=function(t,e){if(e="undefined"!=typeof e?e:"data:text/html;base64,",window.btoa)return e+encodeURIComponent(window.btoa(t));var n="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";t=String(t);var o,r,i,a,s,c,l,u=0,f=[];if(/[^\x00-\xFF]/.test(t))throw Error("InvalidCharacterError");for(;u>2,s=(3&o)<<4|r>>4,c=(15&r)<<2|i>>6,l=63&i,u===t.length+2?(c=64,l=64):u===t.length+1&&(l=64),f.push(n.charAt(a),n.charAt(s),n.charAt(c),n.charAt(l));return e+encodeURIComponent(f.join(""))},e.exports=o},{"./src/scripts/components":6,"./tmp/config-page.html":30,tosource:1}]},{},["pebble-clay"])("pebble-clay")}); \ No newline at end of file diff --git a/src/scripts/components/checkboxgroup.js b/src/scripts/components/checkboxgroup.js index a327bef..b894745 100644 --- a/src/scripts/components/checkboxgroup.js +++ b/src/scripts/components/checkboxgroup.js @@ -8,6 +8,7 @@ module.exports = { defaults: { label: '', options: [], + description: '', attributes: {} } }; diff --git a/src/scripts/components/color.js b/src/scripts/components/color.js index d12932c..cebb6f0 100644 --- a/src/scripts/components/color.js +++ b/src/scripts/components/color.js @@ -6,7 +6,8 @@ module.exports = { style: require('../../styles/clay/components/color.scss'), manipulator: 'color', defaults: { - label: '' + label: '', + description: '' }, initialize: function(minified) { var HTML = minified.HTML; diff --git a/src/scripts/components/input.js b/src/scripts/components/input.js index eaf8050..45fce5f 100644 --- a/src/scripts/components/input.js +++ b/src/scripts/components/input.js @@ -7,6 +7,7 @@ module.exports = { manipulator: 'val', defaults: { label: '', + description: '', attributes: {} } }; diff --git a/src/scripts/components/radiogroup.js b/src/scripts/components/radiogroup.js index 771c1cd..5cd436b 100644 --- a/src/scripts/components/radiogroup.js +++ b/src/scripts/components/radiogroup.js @@ -8,6 +8,7 @@ module.exports = { defaults: { label: '', options: [], + description: '', attributes: {} } }; diff --git a/src/scripts/components/select.js b/src/scripts/components/select.js index 7cfd71e..91097cd 100644 --- a/src/scripts/components/select.js +++ b/src/scripts/components/select.js @@ -8,6 +8,7 @@ module.exports = { defaults: { label: '', options: [], + description: '', attributes: {} }, initialize: function() { diff --git a/src/scripts/components/toggle.js b/src/scripts/components/toggle.js index f0b2d56..ca4eace 100644 --- a/src/scripts/components/toggle.js +++ b/src/scripts/components/toggle.js @@ -7,6 +7,7 @@ module.exports = { manipulator: 'checked', defaults: { label: '', + description: '', attributes: {} } }; diff --git a/src/styles/clay/_base.scss b/src/styles/clay/_base.scss index 6a468fa..dfbaa6a 100644 --- a/src/styles/clay/_base.scss +++ b/src/styles/clay/_base.scss @@ -147,52 +147,59 @@ a { } } +.description { + padding-top: $item-spacing-v; + @include font-size(0.9); + color: $color-gray-9; +} + .inputs { display: block; width:100%; border-collapse: collapse; - .section & .component { - display: table; - width:100%; - - .label, - .input { - display: table-cell; - } - - .input { - text-align: right; - } - - &.invalid { - .input:after { - content: "!"; - display: inline-block; - color: $color-white; - background: $color-orange; - border-radius: $border-radius; - width: 1.2em; - text-align: center; - height: 1.2em; - font-size: 1em; - vertical-align: middle; - line-height: 1.3em; - margin-left: -0.7em; - position:absolute; - @include font-pfdin(regular); - } - - .input input { - color: $color-orange; - padding-right: 1em; - - @include placeholder { - color: $color-orange; - } - - } - } - - } + //.section & .component { + // display: table; + // width:100%; + // + // .label, + // .input { + // display: table-cell; + // } + // + // .input { + // text-align: right; + // } + // + // &.invalid { + // .input:after { + // content: "!"; + // display: inline-block; + // color: $color-white; + // background: $color-orange; + // border-radius: $border-radius; + // width: 1.2em; + // text-align: center; + // height: 1.2em; + // font-size: 1em; + // vertical-align: middle; + // line-height: 1.3em; + // margin-left: -0.7em; + // position:absolute; + // @include font-pfdin(regular); + // } + // + // .input input { + // color: $color-orange; + // padding-right: 1em; + // + // @include placeholder { + // color: $color-orange; + // } + // + // } + // } + // + //} } + diff --git a/src/styles/clay/components/select.scss b/src/styles/clay/components/select.scss index 1b43d93..93ae3c3 100644 --- a/src/styles/clay/components/select.scss +++ b/src/styles/clay/components/select.scss @@ -2,7 +2,10 @@ @import "clay"; .component-select { - position: relative; + + label { + position: relative; + } .value { $triangle-size: 0.85rem; diff --git a/src/templates/components/checkboxgroup.tpl b/src/templates/components/checkboxgroup.tpl index 203e2d2..708fab4 100755 --- a/src/templates/components/checkboxgroup.tpl +++ b/src/templates/components/checkboxgroup.tpl @@ -15,4 +15,7 @@ {{/each}} + {{if description}} +
{{{description}}}
+ {{/if}} diff --git a/src/templates/components/color.tpl b/src/templates/components/color.tpl index 9e985c6..2ac528f 100755 --- a/src/templates/components/color.tpl +++ b/src/templates/components/color.tpl @@ -7,6 +7,9 @@ {{{label}}} + {{if description}} +
{{{description}}}
+ {{/if}}
diff --git a/src/templates/components/input.tpl b/src/templates/components/input.tpl index 7f1a758..d29f155 100755 --- a/src/templates/components/input.tpl +++ b/src/templates/components/input.tpl @@ -6,4 +6,7 @@ {{each key: attributes}}{{key}}="{{this}}"{{/each}} /> + {{if description}} +
{{{description}}}
+ {{/if}} diff --git a/src/templates/components/radiogroup.tpl b/src/templates/components/radiogroup.tpl index 93a9667..e87843f 100755 --- a/src/templates/components/radiogroup.tpl +++ b/src/templates/components/radiogroup.tpl @@ -15,4 +15,7 @@ {{/each}}
+ {{if description}} +
{{{description}}}
+ {{/if}}
diff --git a/src/templates/components/select.tpl b/src/templates/components/select.tpl index f76e8f3..396f016 100755 --- a/src/templates/components/select.tpl +++ b/src/templates/components/select.tpl @@ -1,9 +1,14 @@ - +
+ + {{if description}} +
{{{description}}}
+ {{/if}} +
diff --git a/src/templates/components/toggle.tpl b/src/templates/components/toggle.tpl index 1233d08..5122fe9 100755 --- a/src/templates/components/toggle.tpl +++ b/src/templates/components/toggle.tpl @@ -1,14 +1,19 @@ -