diff --git a/dev/config.js b/dev/config.js index 7e67c7e..16ced90 100644 --- a/dev/config.js +++ b/dev/config.js @@ -62,8 +62,8 @@ module.exports = [ "defaultValue": "More Settings" }, { - "type": "radio", - "appKey": "radio-test", + "type": "radiogroup", + "appKey": "radiogroup-test", "defaultValue": "quote' \"test", "label": "Radio test", "options": [ @@ -74,6 +74,19 @@ module.exports = [ { "label": "Final thing", "value": "three" } ] }, + { + "type": "checkboxgroup", + "appKey": "checkboxgroup-test", + "defaultValue": ["quote' \"test", "two"], + "label": "Checkbox test", + "options": [ + { "label": "Test thing one", "value": "one" }, + { "label": "Another thing", "value": "two" }, + { "label": "One really long thing that would not fit", "value": "three" }, + { "label": "Small", "value": "quote' \"test" }, + { "label": "Final thing", "value": "three" } + ] + }, { "type": "input", "appKey": "date", diff --git a/dist/clay.js b/dist/clay.js index 7df89f1..dc23715 100644 --- a/dist/clay.js +++ b/dist/clay.js @@ -80,6 +80,20 @@ function stringifyRegExp (re) { },{}],2:[function(require,module,exports){ 'use strict'; +module.exports = { + name: 'checkboxgroup', + template: require('../../templates/components/checkboxgroup.tpl'), + style: require('../../styles/clay/components/checkboxgroup.scss'), + manipulator: 'checkboxgroup', + defaults: { + label: '', + options: [] + } +}; + +},{"../../styles/clay/components/checkboxgroup.scss":13,"../../templates/components/checkboxgroup.tpl":19}],3:[function(require,module,exports){ +'use strict'; + module.exports = { name: 'color', template: require('../../templates/components/color.tpl'), @@ -273,7 +287,7 @@ module.exports = { } }; -},{"../../styles/clay/components/color.scss":11,"../../templates/components/color.tpl":15}],3:[function(require,module,exports){ +},{"../../styles/clay/components/color.scss":14,"../../templates/components/color.tpl":20}],4:[function(require,module,exports){ 'use strict'; module.exports = { @@ -285,7 +299,7 @@ module.exports = { } }; -},{"../../templates/components/footer.tpl":16}],4:[function(require,module,exports){ +},{"../../templates/components/footer.tpl":21}],5:[function(require,module,exports){ 'use strict'; module.exports = { @@ -298,7 +312,7 @@ module.exports = { } }; -},{"../../templates/components/heading.tpl":17}],5:[function(require,module,exports){ +},{"../../templates/components/heading.tpl":22}],6:[function(require,module,exports){ 'use strict'; module.exports = { @@ -309,10 +323,12 @@ module.exports = { select: require('./select'), submit: require('./submit'), text: require('./text'), - toggle: require('./toggle') + toggle: require('./toggle'), + radiogroup: require('./radiogroup'), + checkboxgroup: require('./checkboxgroup') }; -},{"./color":2,"./footer":3,"./heading":4,"./input":6,"./select":7,"./submit":8,"./text":9,"./toggle":10}],6:[function(require,module,exports){ +},{"./checkboxgroup":2,"./color":3,"./footer":4,"./heading":5,"./input":7,"./radiogroup":8,"./select":9,"./submit":10,"./text":11,"./toggle":12}],7:[function(require,module,exports){ 'use strict'; module.exports = { @@ -326,7 +342,21 @@ module.exports = { } }; -},{"../../styles/clay/components/input.scss":12,"../../templates/components/input.tpl":18}],7:[function(require,module,exports){ +},{"../../styles/clay/components/input.scss":15,"../../templates/components/input.tpl":23}],8:[function(require,module,exports){ +'use strict'; + +module.exports = { + name: 'radiogroup', + template: require('../../templates/components/radiogroup.tpl'), + style: require('../../styles/clay/components/radiogroup.scss'), + manipulator: 'radiogroup', + defaults: { + label: '', + options: [] + } +}; + +},{"../../styles/clay/components/radiogroup.scss":16,"../../templates/components/radiogroup.tpl":24}],9:[function(require,module,exports){ 'use strict'; module.exports = { @@ -350,7 +380,7 @@ module.exports = { } }; -},{"../../styles/clay/components/select.scss":13,"../../templates/components/select.tpl":19}],8:[function(require,module,exports){ +},{"../../styles/clay/components/select.scss":17,"../../templates/components/select.tpl":25}],10:[function(require,module,exports){ 'use strict'; module.exports = { @@ -363,7 +393,7 @@ module.exports = { } }; -},{"../../templates/components/submit.tpl":20}],9:[function(require,module,exports){ +},{"../../templates/components/submit.tpl":26}],11:[function(require,module,exports){ 'use strict'; module.exports = { @@ -375,7 +405,7 @@ module.exports = { } }; -},{"../../templates/components/text.tpl":21}],10:[function(require,module,exports){ +},{"../../templates/components/text.tpl":27}],12:[function(require,module,exports){ 'use strict'; module.exports = { @@ -389,44 +419,56 @@ module.exports = { } }; -},{"../../styles/clay/components/toggle.scss":14,"../../templates/components/toggle.tpl":22}],11:[function(require,module,exports){ -module.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 input:disabled ~ .value, .component-color input:disabled ~ .label { opacity: 0.25; }\n\n.component-color .picker-wrap { left: 0; top: 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 0em; }\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"; - -},{}],12:[function(require,module,exports){ -module.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"; - -},{}],13:[function(require,module,exports){ -module.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"; +},{"../../styles/clay/components/toggle.scss":18,"../../templates/components/toggle.tpl":28}],13:[function(require,module,exports){ +module.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 { display: none; }\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(require,module,exports){ -module.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"; +module.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 input:disabled ~ .value, .component-color input:disabled ~ .label { opacity: 0.25; }\n\n.component-color .picker-wrap { left: 0; top: 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 0em; }\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(require,module,exports){ -module.exports = "