Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@evs-chris/raui

Package Overview
Dependencies
Maintainers
1
Versions
173
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@evs-chris/raui - npm Package Compare versions

Comparing version 0.4.19 to 0.4.20

4

es/form.js

@@ -7,4 +7,4 @@ import globalRegister from './globalRegister';

var boxy = data('raui.form.boxy');
return ("\n label.field {\n display: inline-block;\n font-size: 0.9em;\n font-weight: 500;\n color: " + (primary.fg || '#222') + ";\n transition: 0.2s ease-in-out;\n transition-property: color;\n vertical-align: middle;\n box-sizing: border-box;\n padding: 0.5em 0.25em;\n line-height: 1.5em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-family: inherit;\n }\n\n label.field.textarea {\n display: block;\n border: 0.0625em solid " + (primary.bc || '#ccc') + ";\n padding: 0.5em 0.8em 0.8em 0.8em;\n border-radius: " + (primary.radius || '0.2em') + ";\n box-shadow: none;\n transition-property: color, border-color, box-shadow;\n margin: 0.8em 0.2em;\n min-height: auto;\n background-color: " + (boxy ? primary.bg || '#fff' : 'transparent') + ";\n }\n\n label.field.focus {\n color: " + (active.fg || '#07e') + ";\n }\n\n label.field.textarea.focus {\n border-color: " + (active.fg || primary.fga || '#07e') + ";\n " + (!boxy ? ("box-shadow: 0.0625em 0.0625em " + (active.fg || primary.fga || '#07e') + ",\n -0.0625em 0.0625em " + (active.fg || primary.fga || '#07e') + ",\n 0.0625em -0.0625em " + (active.fg || primary.fga || '#07e') + ",\n -0.0625em -0.0625em " + (active.fg || primary.fga || '#07e') + ";") : '') + "\n }\n\n label.field input,\n label.field select,\n label.field textarea\n {\n display: block;\n border-width: " + (boxy ? '0.0625em' : '0 0 0.0625em 0') + ";\n border-color: " + (primary.bc || '#ccc') + ";\n border-style: solid;\n box-sizing: border-box;\n background-color: " + (boxy ? primary.bg || '#fff' : 'transparent') + ";\n transition: 0.2s ease-in-out;\n transition-property: box-shadow, color;\n outline: none;\n " + (boxy ? 'padding: 0 0.75em;' : '') + "\n line-height: 2.6em;\n box-shadow: none;\n width: 100%;\n margin-bottom: 0.8em;\n font-size: 1.1em;" + (boxy ? ("\n border-radius: " + (primary.radius || '0.2em') + ";") : '') + "\n font-weight: 400;\n font-family: inherit;\n }\n label.field textarea {\n line-height: 1.2em;\n }\n label.field .field-wrapper {\n display: block;\n }\n label.field > select, label.field > input,\n label.field > .field-wrapper > input, label.field > .field-wrapper > select {\n height: 2.5em;\n }\n\n " + (!boxy ? ("label.field:hover > input,\n label.field:hover select,\n label.field.file:hover:after {\n box-shadow: 0 0.0625em 0 0 " + (primary.bc || '#ccc') + ";\n }\n label.field.check:hover input:before,\n label.field.radio:hover input:before,\n label.field.textarea:hover {\n box-shadow: 0.0625em 0.0625em " + (primary.bc || '#ccc') + ",\n -0.0625em 0.0625em " + (primary.bc || '#ccc') + ",\n 0.0625em -0.0625em " + (primary.bc || '#ccc') + ",\n -0.0625em -0.0625em " + (primary.bc || '#ccc') + ";\n }\n label.field.check.focus input:before,\n label.field.radio.focus input:before {\n box-shadow: 0.0625em 0.0625em " + (active.fg || primary.fga || '#07e') + ",\n -0.0625em 0.0625em " + (active.fg || primary.fga || '#07e') + ",\n 0.0625em -0.0625em " + (active.fg || primary.fga || '#07e') + ",\n -0.0625em -0.0625em " + (active.fg || primary.fga || '#07e') + ";\n }\n label.field.textarea.focus:hover {\n box-shadow: 0.0625em 0.0625em " + (active.fg || primary.fga || '#07e') + ",\n -0.0625em 0.0625em " + (active.fg || primary.fga || '#07e') + ",\n 0.0625em -0.0625em " + (active.fg || primary.fga || '#07e') + ",\n -0.0625em -0.0625em " + (active.fg || primary.fga || '#07e') + ";\n }\n label.field.check input:checked:before,\n label.field.radio input:checked:before {\n box-shadow: -0.0625em 0.0625em " + (primary.checked || primary.fga || '#07e') + ";\n }\n label.field.check.focus input:checked:before,\n label.field.radio.focus input:checked:before {\n box-shadow: -0.0625em 0.0625em " + (active.checked || active.fga || primary.fga || '#07e') + ";\n }") : '') + "\n\n label.field.check, label.field.radio {\n vertical-align: top;\n cursor: pointer;" + (boxy ? "\n padding-top: 2em;\n line-height: 3.1em;" : "\n line-height: 1em;\n padding-top: 2.8em;") + "\n }\n\n label.field.check input, label.field.radio input {\n width: 1em;\n height: 1em;\n border: none;\n " + (boxy ? "margin-left: -0.5em;\n margin-right: 0.75em" : "margin-right: 0.5em;\n position: relative;\n margin-top: 0;") + ";\n float: left;\n box-shadow: none;\n background-color: transparent;\n }\n\n label.field select {\n padding-right: 2em;\n }\n\n label.field.select {\n cursor: pointer;\n position: relative;\n }\n\n label.field.select:after {\n content: ' ';\n position: absolute;\n display: block;\n width: 0.6em;\n right: 1em;\n height: 0.6em;" + (boxy ? "\n top: 3em;" : "\n top: 2.75em;") + "\n border-bottom: 0.125em solid;\n border-right: 0.125em solid;\n transform: rotate(45deg);\n pointer-events: none;\n }\n \n label.field.inline.select:after {\n top: 1.5em;\n }\n\n label.field textarea {\n border: none;" + (boxy ? "\n padding: 0;" : '') + "\n }\n\n label.field.check input:before,\n label.field.radio input:before {\n content: '';\n display: block;\n border: 0.0625em solid " + (primary.bc || '#ccc') + ";\n width: 1em;\n height: 1em;\n box-sizing: border-box;\n transition: 0.2s ease-in-out;\n transition-property: transform, border-color, height, width, box-shadow, border-radius;\n " + (boxy ? "margin-top: 0.5em;" :
"margin-top: -0.25em;") + "\n border-radius: 0.2em;\n }\n\n label.field.check.focus input:before,\n label.field.radio.focus input:before {\n border-color: " + (active.fg || primary.fga || '#07e') + ";\n }\n\n label.field.check input:checked:before,\n label.field.radio input:checked:before {\n height: 0.7em;\n width: 1.3em;\n border-width: 0.125em;\n border-color: " + (primary.checked || primary.fga || '#07e') + ";\n border-top-color: transparent;\n border-right-color: transparent;\n transform: rotate(-50deg);\n border-radius: 0;\n }\n\n label.field.check input,\n label.field > select {\n -moz-appearance: none;\n -webkit-appearance: none;\n }\n\n label.field input:focus,\n label.field select:focus,\n label.field.file.focus:after\n {\n border-color: " + (active.fg || primary.fga || '#07e') + ";\n " + (!boxy ? ("box-shadow: 0 0.0625em 0 0 " + (active.fg || primary.fga || '#07e') + ";") : '') + "\n }\n\n label.field input[type=checkbox]:focus,\n label.field input[type=radio]:focus {\n box-shadow: none;\n }\n\n label.field.file.focus:after {\n color: " + (active.fg || primary.fga || '#07e') + ";\n }\n label.field.file [type=file] {\n position: absolute;\n width: 0;\n height: 0;\n opacity: 0;\n z-index: -1;\n }\n label.field.file:after {\n position: absolute;\n content: 'Choose a file';\n box-sizing: border-box;\n width: calc(100% - 0.3em);\n height: 2.5em;\n font-size: 1.1em;\n line-height: 1.5em;\n color: " + (primary.fg || '#222') + ";\n text-align: center;\n padding: 0.5em 1em;\n cursor: pointer;\n font-style: oblique;\n left: 0.25em;\n top: 1.75em;\n transition: 0.2s ease-in-out;\n transition-property: color, border-bolor, box-shadow;" + (boxy ? ("\n border-radius: " + (primary.radius || '0.2em') + ";\n border-color: " + (primary.bc || '#ccc') + ";\n border-style: solid;\n border-width: 0.0625em;") : ("\n border-bottom-color: " + (primary.bc || '#ccc') + ";\n border-bottom-width: 0.0625em;\n border-bottom-style: solid;\n ")) + "\n }\n\n label.field.button {\n vertical-align: top;\n padding-top: 1.75em;\n }\n label.field.button button {\n font-size: 1.1em;\n }\n\n label.field.plain > div {\n position: absolute;\n font-size: 1.1em;\n top: 2.4em;\n }\n ");
return ("\n label.field {\n display: inline-block;\n font-size: 0.9em;\n font-weight: 500;\n color: " + (primary.fg || '#222') + ";\n transition: 0.2s ease-in-out;\n transition-property: color;\n vertical-align: middle;\n box-sizing: border-box;\n padding: 0.5em 0.25em;\n line-height: 1.5em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-family: inherit;\n }\n\n label.field.textarea {\n display: block;\n border: 0.0625em solid " + (primary.bc || '#ccc') + ";\n padding: 0.5em 0.8em 0.8em 0.8em;\n border-radius: " + (primary.radius || '0.2em') + ";\n box-shadow: none;\n transition-property: color, border-color, box-shadow;\n margin: 0.8em 0.2em;\n min-height: auto;\n background-color: " + (boxy ? primary.bg || '#fff' : 'transparent') + ";\n }\n\n label.field.focus {\n color: " + (active.fg || '#07e') + ";\n }\n\n label.field.textarea.focus {\n border-color: " + (active.fg || primary.fga || '#07e') + ";\n " + (!boxy ? ("box-shadow: 0.0625em 0.0625em " + (active.fg || primary.fga || '#07e') + ",\n -0.0625em 0.0625em " + (active.fg || primary.fga || '#07e') + ",\n 0.0625em -0.0625em " + (active.fg || primary.fga || '#07e') + ",\n -0.0625em -0.0625em " + (active.fg || primary.fga || '#07e') + ";") : '') + "\n }\n\n label.field input,\n label.field select,\n label.field textarea\n {\n display: block;\n border-width: " + (boxy ? '0.0625em' : '0 0 0.0625em 0') + ";\n border-color: " + (primary.bc || '#ccc') + ";\n border-style: solid;\n box-sizing: border-box;\n background-color: " + (boxy ? primary.bg || '#fff' : 'transparent') + ";\n transition: 0.2s ease-in-out;\n transition-property: box-shadow, color;\n outline: none;\n " + (boxy ? 'padding: 0 0.75em;' : '') + "\n line-height: 2.6em;\n box-shadow: none;\n width: 100%;\n margin-bottom: 0.8em;\n font-size: 1.1em;" + (boxy ? ("\n border-radius: " + (primary.radius || '0.2em') + ";") : '') + "\n font-weight: 400;\n font-family: inherit;\n }\n label.field textarea {\n line-height: 1.2em;\n }\n label.field .field-wrapper {\n display: block;\n }\n label.field > select, label.field > input,\n label.field > .field-wrapper > input, label.field > .field-wrapper > select {\n height: 2.5em;\n }\n\n " + (!boxy ? ("label.field:hover > input,\n label.field:hover select,\n label.field.file:hover:after {\n box-shadow: 0 0.0625em 0 0 " + (primary.bc || '#ccc') + ";\n }\n label.field.check:hover input:before,\n label.field.radio:hover input:before,\n label.field.textarea:hover {\n box-shadow: 0.0625em 0.0625em " + (primary.bc || '#ccc') + ",\n -0.0625em 0.0625em " + (primary.bc || '#ccc') + ",\n 0.0625em -0.0625em " + (primary.bc || '#ccc') + ",\n -0.0625em -0.0625em " + (primary.bc || '#ccc') + ";\n }\n label.field.check.focus input:before,\n label.field.radio.focus input:before {\n box-shadow: 0.0625em 0.0625em " + (active.fg || primary.fga || '#07e') + ",\n -0.0625em 0.0625em " + (active.fg || primary.fga || '#07e') + ",\n 0.0625em -0.0625em " + (active.fg || primary.fga || '#07e') + ",\n -0.0625em -0.0625em " + (active.fg || primary.fga || '#07e') + ";\n }\n label.field.textarea.focus:hover {\n box-shadow: 0.0625em 0.0625em " + (active.fg || primary.fga || '#07e') + ",\n -0.0625em 0.0625em " + (active.fg || primary.fga || '#07e') + ",\n 0.0625em -0.0625em " + (active.fg || primary.fga || '#07e') + ",\n -0.0625em -0.0625em " + (active.fg || primary.fga || '#07e') + ";\n }\n label.field.check input:checked:before,\n label.field.radio input:checked:before {\n box-shadow: -0.0625em 0.0625em " + (primary.checked || primary.fga || '#07e') + ";\n }\n label.field.check.focus input:checked:before,\n label.field.radio.focus input:checked:before {\n box-shadow: -0.0625em 0.0625em " + (active.checked || active.fga || primary.fga || '#07e') + ";\n }") : '') + "\n\n label.field.check, label.field.radio {\n vertical-align: top;\n cursor: pointer;" + (boxy ? "\n padding-top: 2em;\n line-height: 3.1em;" : "\n line-height: 1em;\n padding-top: 2.8em;") + "\n }\n\n label.field.check input, label.field.radio input {\n width: 1em;\n height: 1em;\n border: none;\n " + (boxy ? "margin-left: -0.5em;\n margin-right: 0.75em" : "margin-right: 0.5em;\n position: relative;\n margin-top: 0;") + ";\n float: left;\n box-shadow: none;\n background-color: transparent;\n }\n\n label.field select {\n padding-right: 2em;\n }\n\n label.field.select {\n cursor: pointer;\n position: relative;\n }\n\n label.field.select:after {\n content: ' ';\n position: absolute;\n display: block;\n width: 0.6em;\n right: 1em;\n height: 0.6em;\n top: 2.75em;\n border-bottom: 0.125em solid;\n border-right: 0.125em solid;\n transform: rotate(45deg);\n pointer-events: none;\n }\n\n label.field textarea {\n border: none;" + (boxy ? "\n padding: 0;" : '') + "\n }\n\n label.field.check input:before,\n label.field.radio input:before {\n content: '';\n display: block;\n border: 0.0625em solid " + (primary.bc || '#ccc') + ";\n width: 1em;\n height: 1em;\n box-sizing: border-box;\n transition: 0.2s ease-in-out;\n transition-property: transform, border-color, height, width, box-shadow, border-radius;\n " + (boxy ? "margin-top: 0.5em;" :
"margin-top: -0.25em;") + "\n border-radius: 0.2em;\n }\n\n label.field.check.focus input:before,\n label.field.radio.focus input:before {\n border-color: " + (active.fg || primary.fga || '#07e') + ";\n }\n\n label.field.check input:checked:before,\n label.field.radio input:checked:before {\n height: 0.7em;\n width: 1.3em;\n border-width: 0.125em;\n border-color: " + (primary.checked || primary.fga || '#07e') + ";\n border-top-color: transparent;\n border-right-color: transparent;\n transform: rotate(-50deg);\n border-radius: 0;\n }\n\n label.field.check input,\n label.field > select {\n -moz-appearance: none;\n -webkit-appearance: none;\n }\n\n label.field input:focus,\n label.field select:focus,\n label.field.file.focus:after\n {\n border-color: " + (active.fg || primary.fga || '#07e') + ";\n " + (!boxy ? ("box-shadow: 0 0.0625em 0 0 " + (active.fg || primary.fga || '#07e') + ";") : '') + "\n }\n\n label.field input[type=checkbox]:focus,\n label.field input[type=radio]:focus {\n box-shadow: none;\n }\n\n label.field.file.focus:after {\n color: " + (active.fg || primary.fga || '#07e') + ";\n }\n label.field.file [type=file] {\n position: absolute;\n width: 0;\n height: 0;\n opacity: 0;\n z-index: -1;\n }\n label.field.file:after {\n position: absolute;\n content: 'Choose a file';\n box-sizing: border-box;\n width: calc(100% - 0.3em);\n height: 2.5em;\n font-size: 1.1em;\n line-height: 1.5em;\n color: " + (primary.fg || '#222') + ";\n text-align: center;\n padding: 0.5em 1em;\n cursor: pointer;\n font-style: oblique;\n left: 0.25em;\n top: 1.75em;\n transition: 0.2s ease-in-out;\n transition-property: color, border-bolor, box-shadow;" + (boxy ? ("\n border-radius: " + (primary.radius || '0.2em') + ";\n border-color: " + (primary.bc || '#ccc') + ";\n border-style: solid;\n border-width: 0.0625em;") : ("\n border-bottom-color: " + (primary.bc || '#ccc') + ";\n border-bottom-width: 0.0625em;\n border-bottom-style: solid;\n ")) + "\n }\n\n label.field.button {\n vertical-align: top;\n padding-top: 1.75em;\n }\n label.field.button button {\n font-size: 1.1em;\n }\n\n label.field.plain > div {\n position: absolute;\n font-size: 1.1em;\n top: 2.4em;\n }\n\n /* inline fields (no labels) */\n label.field.inline {\n height: 3.3em;\n }\n\n label.field.check.inline {\n padding-top: " + (boxy ? '0' : '1') + ".5em;\n }\n\n label.field.button.inline {\n margin-top: 0.2em;\n padding-top: 0.4em;\n }\n\n label.field.inline.select:after {\n top: 1." + (boxy ? '4' : '2') + "em;\n }\n ");
// TODO: other themes

@@ -11,0 +11,0 @@ }

2

package.json
{
"name": "@evs-chris/raui",
"version": "0.4.19",
"version": "0.4.20",
"description": "Components, decorators, and helpers for Ractive apps that are generally Material-ish",

@@ -5,0 +5,0 @@ "homepage": "https://github.com/evs-chris/raui",

27

src/form.js

@@ -154,5 +154,4 @@ import globalRegister from './globalRegister';

right: 1em;
height: 0.6em;${boxy ? `
top: 3em;` : `
top: 2.75em;`}
height: 0.6em;
top: 2.75em;
border-bottom: 0.125em solid;

@@ -163,6 +162,2 @@ border-right: 0.125em solid;

}
label.field.inline.select:after {
top: 1.5em;
}

@@ -275,2 +270,20 @@ label.field textarea {

}
/* inline fields (no labels) */
label.field.inline {
height: 3.3em;
}
label.field.check.inline {
padding-top: ${boxy ? '0' : '1'}.5em;
}
label.field.button.inline {
margin-top: 0.2em;
padding-top: 0.4em;
}
label.field.inline.select:after {
top: 1.${boxy ? '4' : '2'}em;
}
`;

@@ -277,0 +290,0 @@ // TODO: other themes

4

umd/form.js

@@ -39,4 +39,4 @@ (function (global, factory) {

var boxy = data('raui.form.boxy');
return ("\n label.field {\n display: inline-block;\n font-size: 0.9em;\n font-weight: 500;\n color: " + (primary.fg || '#222') + ";\n transition: 0.2s ease-in-out;\n transition-property: color;\n vertical-align: middle;\n box-sizing: border-box;\n padding: 0.5em 0.25em;\n line-height: 1.5em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-family: inherit;\n }\n\n label.field.textarea {\n display: block;\n border: 0.0625em solid " + (primary.bc || '#ccc') + ";\n padding: 0.5em 0.8em 0.8em 0.8em;\n border-radius: " + (primary.radius || '0.2em') + ";\n box-shadow: none;\n transition-property: color, border-color, box-shadow;\n margin: 0.8em 0.2em;\n min-height: auto;\n background-color: " + (boxy ? primary.bg || '#fff' : 'transparent') + ";\n }\n\n label.field.focus {\n color: " + (active.fg || '#07e') + ";\n }\n\n label.field.textarea.focus {\n border-color: " + (active.fg || primary.fga || '#07e') + ";\n " + (!boxy ? ("box-shadow: 0.0625em 0.0625em " + (active.fg || primary.fga || '#07e') + ",\n -0.0625em 0.0625em " + (active.fg || primary.fga || '#07e') + ",\n 0.0625em -0.0625em " + (active.fg || primary.fga || '#07e') + ",\n -0.0625em -0.0625em " + (active.fg || primary.fga || '#07e') + ";") : '') + "\n }\n\n label.field input,\n label.field select,\n label.field textarea\n {\n display: block;\n border-width: " + (boxy ? '0.0625em' : '0 0 0.0625em 0') + ";\n border-color: " + (primary.bc || '#ccc') + ";\n border-style: solid;\n box-sizing: border-box;\n background-color: " + (boxy ? primary.bg || '#fff' : 'transparent') + ";\n transition: 0.2s ease-in-out;\n transition-property: box-shadow, color;\n outline: none;\n " + (boxy ? 'padding: 0 0.75em;' : '') + "\n line-height: 2.6em;\n box-shadow: none;\n width: 100%;\n margin-bottom: 0.8em;\n font-size: 1.1em;" + (boxy ? ("\n border-radius: " + (primary.radius || '0.2em') + ";") : '') + "\n font-weight: 400;\n font-family: inherit;\n }\n label.field textarea {\n line-height: 1.2em;\n }\n label.field .field-wrapper {\n display: block;\n }\n label.field > select, label.field > input,\n label.field > .field-wrapper > input, label.field > .field-wrapper > select {\n height: 2.5em;\n }\n\n " + (!boxy ? ("label.field:hover > input,\n label.field:hover select,\n label.field.file:hover:after {\n box-shadow: 0 0.0625em 0 0 " + (primary.bc || '#ccc') + ";\n }\n label.field.check:hover input:before,\n label.field.radio:hover input:before,\n label.field.textarea:hover {\n box-shadow: 0.0625em 0.0625em " + (primary.bc || '#ccc') + ",\n -0.0625em 0.0625em " + (primary.bc || '#ccc') + ",\n 0.0625em -0.0625em " + (primary.bc || '#ccc') + ",\n -0.0625em -0.0625em " + (primary.bc || '#ccc') + ";\n }\n label.field.check.focus input:before,\n label.field.radio.focus input:before {\n box-shadow: 0.0625em 0.0625em " + (active.fg || primary.fga || '#07e') + ",\n -0.0625em 0.0625em " + (active.fg || primary.fga || '#07e') + ",\n 0.0625em -0.0625em " + (active.fg || primary.fga || '#07e') + ",\n -0.0625em -0.0625em " + (active.fg || primary.fga || '#07e') + ";\n }\n label.field.textarea.focus:hover {\n box-shadow: 0.0625em 0.0625em " + (active.fg || primary.fga || '#07e') + ",\n -0.0625em 0.0625em " + (active.fg || primary.fga || '#07e') + ",\n 0.0625em -0.0625em " + (active.fg || primary.fga || '#07e') + ",\n -0.0625em -0.0625em " + (active.fg || primary.fga || '#07e') + ";\n }\n label.field.check input:checked:before,\n label.field.radio input:checked:before {\n box-shadow: -0.0625em 0.0625em " + (primary.checked || primary.fga || '#07e') + ";\n }\n label.field.check.focus input:checked:before,\n label.field.radio.focus input:checked:before {\n box-shadow: -0.0625em 0.0625em " + (active.checked || active.fga || primary.fga || '#07e') + ";\n }") : '') + "\n\n label.field.check, label.field.radio {\n vertical-align: top;\n cursor: pointer;" + (boxy ? "\n padding-top: 2em;\n line-height: 3.1em;" : "\n line-height: 1em;\n padding-top: 2.8em;") + "\n }\n\n label.field.check input, label.field.radio input {\n width: 1em;\n height: 1em;\n border: none;\n " + (boxy ? "margin-left: -0.5em;\n margin-right: 0.75em" : "margin-right: 0.5em;\n position: relative;\n margin-top: 0;") + ";\n float: left;\n box-shadow: none;\n background-color: transparent;\n }\n\n label.field select {\n padding-right: 2em;\n }\n\n label.field.select {\n cursor: pointer;\n position: relative;\n }\n\n label.field.select:after {\n content: ' ';\n position: absolute;\n display: block;\n width: 0.6em;\n right: 1em;\n height: 0.6em;" + (boxy ? "\n top: 3em;" : "\n top: 2.75em;") + "\n border-bottom: 0.125em solid;\n border-right: 0.125em solid;\n transform: rotate(45deg);\n pointer-events: none;\n }\n \n label.field.inline.select:after {\n top: 1.5em;\n }\n\n label.field textarea {\n border: none;" + (boxy ? "\n padding: 0;" : '') + "\n }\n\n label.field.check input:before,\n label.field.radio input:before {\n content: '';\n display: block;\n border: 0.0625em solid " + (primary.bc || '#ccc') + ";\n width: 1em;\n height: 1em;\n box-sizing: border-box;\n transition: 0.2s ease-in-out;\n transition-property: transform, border-color, height, width, box-shadow, border-radius;\n " + (boxy ? "margin-top: 0.5em;" :
"margin-top: -0.25em;") + "\n border-radius: 0.2em;\n }\n\n label.field.check.focus input:before,\n label.field.radio.focus input:before {\n border-color: " + (active.fg || primary.fga || '#07e') + ";\n }\n\n label.field.check input:checked:before,\n label.field.radio input:checked:before {\n height: 0.7em;\n width: 1.3em;\n border-width: 0.125em;\n border-color: " + (primary.checked || primary.fga || '#07e') + ";\n border-top-color: transparent;\n border-right-color: transparent;\n transform: rotate(-50deg);\n border-radius: 0;\n }\n\n label.field.check input,\n label.field > select {\n -moz-appearance: none;\n -webkit-appearance: none;\n }\n\n label.field input:focus,\n label.field select:focus,\n label.field.file.focus:after\n {\n border-color: " + (active.fg || primary.fga || '#07e') + ";\n " + (!boxy ? ("box-shadow: 0 0.0625em 0 0 " + (active.fg || primary.fga || '#07e') + ";") : '') + "\n }\n\n label.field input[type=checkbox]:focus,\n label.field input[type=radio]:focus {\n box-shadow: none;\n }\n\n label.field.file.focus:after {\n color: " + (active.fg || primary.fga || '#07e') + ";\n }\n label.field.file [type=file] {\n position: absolute;\n width: 0;\n height: 0;\n opacity: 0;\n z-index: -1;\n }\n label.field.file:after {\n position: absolute;\n content: 'Choose a file';\n box-sizing: border-box;\n width: calc(100% - 0.3em);\n height: 2.5em;\n font-size: 1.1em;\n line-height: 1.5em;\n color: " + (primary.fg || '#222') + ";\n text-align: center;\n padding: 0.5em 1em;\n cursor: pointer;\n font-style: oblique;\n left: 0.25em;\n top: 1.75em;\n transition: 0.2s ease-in-out;\n transition-property: color, border-bolor, box-shadow;" + (boxy ? ("\n border-radius: " + (primary.radius || '0.2em') + ";\n border-color: " + (primary.bc || '#ccc') + ";\n border-style: solid;\n border-width: 0.0625em;") : ("\n border-bottom-color: " + (primary.bc || '#ccc') + ";\n border-bottom-width: 0.0625em;\n border-bottom-style: solid;\n ")) + "\n }\n\n label.field.button {\n vertical-align: top;\n padding-top: 1.75em;\n }\n label.field.button button {\n font-size: 1.1em;\n }\n\n label.field.plain > div {\n position: absolute;\n font-size: 1.1em;\n top: 2.4em;\n }\n ");
return ("\n label.field {\n display: inline-block;\n font-size: 0.9em;\n font-weight: 500;\n color: " + (primary.fg || '#222') + ";\n transition: 0.2s ease-in-out;\n transition-property: color;\n vertical-align: middle;\n box-sizing: border-box;\n padding: 0.5em 0.25em;\n line-height: 1.5em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-family: inherit;\n }\n\n label.field.textarea {\n display: block;\n border: 0.0625em solid " + (primary.bc || '#ccc') + ";\n padding: 0.5em 0.8em 0.8em 0.8em;\n border-radius: " + (primary.radius || '0.2em') + ";\n box-shadow: none;\n transition-property: color, border-color, box-shadow;\n margin: 0.8em 0.2em;\n min-height: auto;\n background-color: " + (boxy ? primary.bg || '#fff' : 'transparent') + ";\n }\n\n label.field.focus {\n color: " + (active.fg || '#07e') + ";\n }\n\n label.field.textarea.focus {\n border-color: " + (active.fg || primary.fga || '#07e') + ";\n " + (!boxy ? ("box-shadow: 0.0625em 0.0625em " + (active.fg || primary.fga || '#07e') + ",\n -0.0625em 0.0625em " + (active.fg || primary.fga || '#07e') + ",\n 0.0625em -0.0625em " + (active.fg || primary.fga || '#07e') + ",\n -0.0625em -0.0625em " + (active.fg || primary.fga || '#07e') + ";") : '') + "\n }\n\n label.field input,\n label.field select,\n label.field textarea\n {\n display: block;\n border-width: " + (boxy ? '0.0625em' : '0 0 0.0625em 0') + ";\n border-color: " + (primary.bc || '#ccc') + ";\n border-style: solid;\n box-sizing: border-box;\n background-color: " + (boxy ? primary.bg || '#fff' : 'transparent') + ";\n transition: 0.2s ease-in-out;\n transition-property: box-shadow, color;\n outline: none;\n " + (boxy ? 'padding: 0 0.75em;' : '') + "\n line-height: 2.6em;\n box-shadow: none;\n width: 100%;\n margin-bottom: 0.8em;\n font-size: 1.1em;" + (boxy ? ("\n border-radius: " + (primary.radius || '0.2em') + ";") : '') + "\n font-weight: 400;\n font-family: inherit;\n }\n label.field textarea {\n line-height: 1.2em;\n }\n label.field .field-wrapper {\n display: block;\n }\n label.field > select, label.field > input,\n label.field > .field-wrapper > input, label.field > .field-wrapper > select {\n height: 2.5em;\n }\n\n " + (!boxy ? ("label.field:hover > input,\n label.field:hover select,\n label.field.file:hover:after {\n box-shadow: 0 0.0625em 0 0 " + (primary.bc || '#ccc') + ";\n }\n label.field.check:hover input:before,\n label.field.radio:hover input:before,\n label.field.textarea:hover {\n box-shadow: 0.0625em 0.0625em " + (primary.bc || '#ccc') + ",\n -0.0625em 0.0625em " + (primary.bc || '#ccc') + ",\n 0.0625em -0.0625em " + (primary.bc || '#ccc') + ",\n -0.0625em -0.0625em " + (primary.bc || '#ccc') + ";\n }\n label.field.check.focus input:before,\n label.field.radio.focus input:before {\n box-shadow: 0.0625em 0.0625em " + (active.fg || primary.fga || '#07e') + ",\n -0.0625em 0.0625em " + (active.fg || primary.fga || '#07e') + ",\n 0.0625em -0.0625em " + (active.fg || primary.fga || '#07e') + ",\n -0.0625em -0.0625em " + (active.fg || primary.fga || '#07e') + ";\n }\n label.field.textarea.focus:hover {\n box-shadow: 0.0625em 0.0625em " + (active.fg || primary.fga || '#07e') + ",\n -0.0625em 0.0625em " + (active.fg || primary.fga || '#07e') + ",\n 0.0625em -0.0625em " + (active.fg || primary.fga || '#07e') + ",\n -0.0625em -0.0625em " + (active.fg || primary.fga || '#07e') + ";\n }\n label.field.check input:checked:before,\n label.field.radio input:checked:before {\n box-shadow: -0.0625em 0.0625em " + (primary.checked || primary.fga || '#07e') + ";\n }\n label.field.check.focus input:checked:before,\n label.field.radio.focus input:checked:before {\n box-shadow: -0.0625em 0.0625em " + (active.checked || active.fga || primary.fga || '#07e') + ";\n }") : '') + "\n\n label.field.check, label.field.radio {\n vertical-align: top;\n cursor: pointer;" + (boxy ? "\n padding-top: 2em;\n line-height: 3.1em;" : "\n line-height: 1em;\n padding-top: 2.8em;") + "\n }\n\n label.field.check input, label.field.radio input {\n width: 1em;\n height: 1em;\n border: none;\n " + (boxy ? "margin-left: -0.5em;\n margin-right: 0.75em" : "margin-right: 0.5em;\n position: relative;\n margin-top: 0;") + ";\n float: left;\n box-shadow: none;\n background-color: transparent;\n }\n\n label.field select {\n padding-right: 2em;\n }\n\n label.field.select {\n cursor: pointer;\n position: relative;\n }\n\n label.field.select:after {\n content: ' ';\n position: absolute;\n display: block;\n width: 0.6em;\n right: 1em;\n height: 0.6em;\n top: 2.75em;\n border-bottom: 0.125em solid;\n border-right: 0.125em solid;\n transform: rotate(45deg);\n pointer-events: none;\n }\n\n label.field textarea {\n border: none;" + (boxy ? "\n padding: 0;" : '') + "\n }\n\n label.field.check input:before,\n label.field.radio input:before {\n content: '';\n display: block;\n border: 0.0625em solid " + (primary.bc || '#ccc') + ";\n width: 1em;\n height: 1em;\n box-sizing: border-box;\n transition: 0.2s ease-in-out;\n transition-property: transform, border-color, height, width, box-shadow, border-radius;\n " + (boxy ? "margin-top: 0.5em;" :
"margin-top: -0.25em;") + "\n border-radius: 0.2em;\n }\n\n label.field.check.focus input:before,\n label.field.radio.focus input:before {\n border-color: " + (active.fg || primary.fga || '#07e') + ";\n }\n\n label.field.check input:checked:before,\n label.field.radio input:checked:before {\n height: 0.7em;\n width: 1.3em;\n border-width: 0.125em;\n border-color: " + (primary.checked || primary.fga || '#07e') + ";\n border-top-color: transparent;\n border-right-color: transparent;\n transform: rotate(-50deg);\n border-radius: 0;\n }\n\n label.field.check input,\n label.field > select {\n -moz-appearance: none;\n -webkit-appearance: none;\n }\n\n label.field input:focus,\n label.field select:focus,\n label.field.file.focus:after\n {\n border-color: " + (active.fg || primary.fga || '#07e') + ";\n " + (!boxy ? ("box-shadow: 0 0.0625em 0 0 " + (active.fg || primary.fga || '#07e') + ";") : '') + "\n }\n\n label.field input[type=checkbox]:focus,\n label.field input[type=radio]:focus {\n box-shadow: none;\n }\n\n label.field.file.focus:after {\n color: " + (active.fg || primary.fga || '#07e') + ";\n }\n label.field.file [type=file] {\n position: absolute;\n width: 0;\n height: 0;\n opacity: 0;\n z-index: -1;\n }\n label.field.file:after {\n position: absolute;\n content: 'Choose a file';\n box-sizing: border-box;\n width: calc(100% - 0.3em);\n height: 2.5em;\n font-size: 1.1em;\n line-height: 1.5em;\n color: " + (primary.fg || '#222') + ";\n text-align: center;\n padding: 0.5em 1em;\n cursor: pointer;\n font-style: oblique;\n left: 0.25em;\n top: 1.75em;\n transition: 0.2s ease-in-out;\n transition-property: color, border-bolor, box-shadow;" + (boxy ? ("\n border-radius: " + (primary.radius || '0.2em') + ";\n border-color: " + (primary.bc || '#ccc') + ";\n border-style: solid;\n border-width: 0.0625em;") : ("\n border-bottom-color: " + (primary.bc || '#ccc') + ";\n border-bottom-width: 0.0625em;\n border-bottom-style: solid;\n ")) + "\n }\n\n label.field.button {\n vertical-align: top;\n padding-top: 1.75em;\n }\n label.field.button button {\n font-size: 1.1em;\n }\n\n label.field.plain > div {\n position: absolute;\n font-size: 1.1em;\n top: 2.4em;\n }\n\n /* inline fields (no labels) */\n label.field.inline {\n height: 3.3em;\n }\n\n label.field.check.inline {\n padding-top: " + (boxy ? '0' : '1') + ".5em;\n }\n\n label.field.button.inline {\n margin-top: 0.2em;\n padding-top: 0.4em;\n }\n\n label.field.inline.select:after {\n top: 1." + (boxy ? '4' : '2') + "em;\n }\n ");
// TODO: other themes

@@ -43,0 +43,0 @@ }

2

umd/form.min.js

@@ -1,1 +0,1 @@

!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n(e.RMForm={})}(this,function(e){"use strict";var n="undefined"!=typeof window?window:null;function o(e,o,i){if(n&&n.Ractive&&"object"==typeof n.Ractive[o]){var t=document.currentScript;if(t||(t=(t=document.querySelectorAll("script"))[t.length-1]),t){var r=t.getAttribute("data-alias");r&&(r=(r=r.split("&")).reduce(function(e,n){var o=n.split("="),i=o[0],t=o[1];return e[i]=t,e},{})),Ractive[o][r&&r[e]||e]=i}}}function i(e){var n=Object.assign({},e("raui.primary"),e("raui.form.primary")),o=Object.assign({},e("raui.primary.active"),e("raui.form.primary.active")),i=e("raui.form.boxy");return"\n label.field {\n display: inline-block;\n font-size: 0.9em;\n font-weight: 500;\n color: "+(n.fg||"#222")+";\n transition: 0.2s ease-in-out;\n transition-property: color;\n vertical-align: middle;\n box-sizing: border-box;\n padding: 0.5em 0.25em;\n line-height: 1.5em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-family: inherit;\n }\n\n label.field.textarea {\n display: block;\n border: 0.0625em solid "+(n.bc||"#ccc")+";\n padding: 0.5em 0.8em 0.8em 0.8em;\n border-radius: "+(n.radius||"0.2em")+";\n box-shadow: none;\n transition-property: color, border-color, box-shadow;\n margin: 0.8em 0.2em;\n min-height: auto;\n background-color: "+(i?n.bg||"#fff":"transparent")+";\n }\n\n label.field.focus {\n color: "+(o.fg||"#07e")+";\n }\n\n label.field.textarea.focus {\n border-color: "+(o.fg||n.fga||"#07e")+";\n "+(i?"":"box-shadow: 0.0625em 0.0625em "+(o.fg||n.fga||"#07e")+",\n -0.0625em 0.0625em "+(o.fg||n.fga||"#07e")+",\n 0.0625em -0.0625em "+(o.fg||n.fga||"#07e")+",\n -0.0625em -0.0625em "+(o.fg||n.fga||"#07e")+";")+"\n }\n\n label.field input,\n label.field select,\n label.field textarea\n {\n display: block;\n border-width: "+(i?"0.0625em":"0 0 0.0625em 0")+";\n border-color: "+(n.bc||"#ccc")+";\n border-style: solid;\n box-sizing: border-box;\n background-color: "+(i?n.bg||"#fff":"transparent")+";\n transition: 0.2s ease-in-out;\n transition-property: box-shadow, color;\n outline: none;\n "+(i?"padding: 0 0.75em;":"")+"\n line-height: 2.6em;\n box-shadow: none;\n width: 100%;\n margin-bottom: 0.8em;\n font-size: 1.1em;"+(i?"\n border-radius: "+(n.radius||"0.2em")+";":"")+"\n font-weight: 400;\n font-family: inherit;\n }\n label.field textarea {\n line-height: 1.2em;\n }\n label.field .field-wrapper {\n display: block;\n }\n label.field > select, label.field > input,\n label.field > .field-wrapper > input, label.field > .field-wrapper > select {\n height: 2.5em;\n }\n\n "+(i?"":"label.field:hover > input,\n label.field:hover select,\n label.field.file:hover:after {\n box-shadow: 0 0.0625em 0 0 "+(n.bc||"#ccc")+";\n }\n label.field.check:hover input:before,\n label.field.radio:hover input:before,\n label.field.textarea:hover {\n box-shadow: 0.0625em 0.0625em "+(n.bc||"#ccc")+",\n -0.0625em 0.0625em "+(n.bc||"#ccc")+",\n 0.0625em -0.0625em "+(n.bc||"#ccc")+",\n -0.0625em -0.0625em "+(n.bc||"#ccc")+";\n }\n label.field.check.focus input:before,\n label.field.radio.focus input:before {\n box-shadow: 0.0625em 0.0625em "+(o.fg||n.fga||"#07e")+",\n -0.0625em 0.0625em "+(o.fg||n.fga||"#07e")+",\n 0.0625em -0.0625em "+(o.fg||n.fga||"#07e")+",\n -0.0625em -0.0625em "+(o.fg||n.fga||"#07e")+";\n }\n label.field.textarea.focus:hover {\n box-shadow: 0.0625em 0.0625em "+(o.fg||n.fga||"#07e")+",\n -0.0625em 0.0625em "+(o.fg||n.fga||"#07e")+",\n 0.0625em -0.0625em "+(o.fg||n.fga||"#07e")+",\n -0.0625em -0.0625em "+(o.fg||n.fga||"#07e")+";\n }\n label.field.check input:checked:before,\n label.field.radio input:checked:before {\n box-shadow: -0.0625em 0.0625em "+(n.checked||n.fga||"#07e")+";\n }\n label.field.check.focus input:checked:before,\n label.field.radio.focus input:checked:before {\n box-shadow: -0.0625em 0.0625em "+(o.checked||o.fga||n.fga||"#07e")+";\n }")+"\n\n label.field.check, label.field.radio {\n vertical-align: top;\n cursor: pointer;"+(i?"\n padding-top: 2em;\n line-height: 3.1em;":"\n line-height: 1em;\n padding-top: 2.8em;")+"\n }\n\n label.field.check input, label.field.radio input {\n width: 1em;\n height: 1em;\n border: none;\n "+(i?"margin-left: -0.5em;\n margin-right: 0.75em":"margin-right: 0.5em;\n position: relative;\n margin-top: 0;")+";\n float: left;\n box-shadow: none;\n background-color: transparent;\n }\n\n label.field select {\n padding-right: 2em;\n }\n\n label.field.select {\n cursor: pointer;\n position: relative;\n }\n\n label.field.select:after {\n content: ' ';\n position: absolute;\n display: block;\n width: 0.6em;\n right: 1em;\n height: 0.6em;"+(i?"\n top: 3em;":"\n top: 2.75em;")+"\n border-bottom: 0.125em solid;\n border-right: 0.125em solid;\n transform: rotate(45deg);\n pointer-events: none;\n }\n \n label.field.inline.select:after {\n top: 1.5em;\n }\n\n label.field textarea {\n border: none;"+(i?"\n padding: 0;":"")+"\n }\n\n label.field.check input:before,\n label.field.radio input:before {\n content: '';\n display: block;\n border: 0.0625em solid "+(n.bc||"#ccc")+";\n width: 1em;\n height: 1em;\n box-sizing: border-box;\n transition: 0.2s ease-in-out;\n transition-property: transform, border-color, height, width, box-shadow, border-radius;\n "+(i?"margin-top: 0.5em;":"margin-top: -0.25em;")+"\n border-radius: 0.2em;\n }\n\n label.field.check.focus input:before,\n label.field.radio.focus input:before {\n border-color: "+(o.fg||n.fga||"#07e")+";\n }\n\n label.field.check input:checked:before,\n label.field.radio input:checked:before {\n height: 0.7em;\n width: 1.3em;\n border-width: 0.125em;\n border-color: "+(n.checked||n.fga||"#07e")+";\n border-top-color: transparent;\n border-right-color: transparent;\n transform: rotate(-50deg);\n border-radius: 0;\n }\n\n label.field.check input,\n label.field > select {\n -moz-appearance: none;\n -webkit-appearance: none;\n }\n\n label.field input:focus,\n label.field select:focus,\n label.field.file.focus:after\n {\n border-color: "+(o.fg||n.fga||"#07e")+";\n "+(i?"":"box-shadow: 0 0.0625em 0 0 "+(o.fg||n.fga||"#07e")+";")+"\n }\n\n label.field input[type=checkbox]:focus,\n label.field input[type=radio]:focus {\n box-shadow: none;\n }\n\n label.field.file.focus:after {\n color: "+(o.fg||n.fga||"#07e")+";\n }\n label.field.file [type=file] {\n position: absolute;\n width: 0;\n height: 0;\n opacity: 0;\n z-index: -1;\n }\n label.field.file:after {\n position: absolute;\n content: 'Choose a file';\n box-sizing: border-box;\n width: calc(100% - 0.3em);\n height: 2.5em;\n font-size: 1.1em;\n line-height: 1.5em;\n color: "+(n.fg||"#222")+";\n text-align: center;\n padding: 0.5em 1em;\n cursor: pointer;\n font-style: oblique;\n left: 0.25em;\n top: 1.75em;\n transition: 0.2s ease-in-out;\n transition-property: color, border-bolor, box-shadow;"+(i?"\n border-radius: "+(n.radius||"0.2em")+";\n border-color: "+(n.bc||"#ccc")+";\n border-style: solid;\n border-width: 0.0625em;":"\n border-bottom-color: "+(n.bc||"#ccc")+";\n border-bottom-width: 0.0625em;\n border-bottom-style: solid;\n ")+"\n }\n\n label.field.button {\n vertical-align: top;\n padding-top: 1.75em;\n }\n label.field.button button {\n font-size: 1.1em;\n }\n\n label.field.plain > div {\n position: absolute;\n font-size: 1.1em;\n top: 2.4em;\n }\n "}function t(){}function r(e){~this.className.indexOf("focus")||(this.className+=" focus")}function l(e){this.className=this.className.replace(/\bfocus\b/g,"").trim()}function a(e){var n,o,i,a,c,d,f,b,s=this.getContext(e);function u(){var t=m().split(/\s+/).filter(function(e){return!!e});(n=!!~t.indexOf("field"))||(t.push("field"),n=!0),(o=!!e.querySelector("input[type=checkbox]"))&&!~t.indexOf("check")&&t.push("check"),(i=!!e.querySelector("input[type=radio]"))&&!~t.indexOf("radio")&&t.push("radio"),(a=!!e.querySelector("textarea"))&&!~t.indexOf("textarea")&&t.push("textarea"),(c=!!e.querySelector("select"))&&!~t.indexOf("select")&&t.push("select"),(d=!!e.querySelector("input[type=file]"))&&!~t.indexOf("file")&&t.push("file"),(f=!!e.querySelector("button"))&&!~t.indexOf("button")&&t.push("button"),(b=!!e.querySelector("div"))&&!~t.indexOf("plain")&&t.push("plain"),!(o||i||d||!e.querySelector("input"))&&!~t.indexOf("input")&&t.push("input"),e.className=t.join(" ")}function m(){var t=e.className;return n||(t=t.replace(/\bfield\b/g,"").trim()),o||(t=t.replace(/\bcheck\b/g,"").trim()),i||(t=t.replace(/\bradio\b/g,"").trim()),a||(t=t.replace(/\btextarea\b/g,"").trim()),c||(t=t.replace(/\bselect\b/g,"").trim()),d||(t=t.replace(/\bfile\b/g,"").trim()),f||(t=t.replace(/\bbutton\b/g,"").trim()),b||(t=t.replace(/\bplain\b/g,"").trim()),t=t.replace(/ +/g," ")}var p=s.listen("focusin",r),h=s.listen("focusout",l);return u(),{update:t,invalidate:u,teardown:function(){var n=m();n=n.replace(/\bfocus\b/g,"").trim(),p.cancel(),h.cancel(),e.className=n}}}function c(e){return"function"==typeof e.focus&&e.focus(),{teardown:t}}function d(e){return void 0===e&&(e={}),function(n){var o=n.Ractive,t=n.instance;if(!o.isInstance(t)&&e.includeStyle)if(t===o)o.addCSS("form-decorator",i);else{var r=t.css;t.css=function(e){return("function"!=typeof r?r||"":r(e))+i(e)}}t.decorators[e.name||"field"]=a,t.decorators[e.autofocusName||"autofocus"]=c}}a.style=i,o("field","decorators",a),o("autofocus","decorators",c),e.style=i,e.field=a,e.autofocus=c,e.plugin=d,e.default=d,Object.defineProperty(e,"__esModule",{value:!0})});
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n(e.RMForm={})}(this,function(e){"use strict";var n="undefined"!=typeof window?window:null;function i(e,i,o){if(n&&n.Ractive&&"object"==typeof n.Ractive[i]){var t=document.currentScript;if(t||(t=(t=document.querySelectorAll("script"))[t.length-1]),t){var l=t.getAttribute("data-alias");l&&(l=(l=l.split("&")).reduce(function(e,n){var i=n.split("="),o=i[0],t=i[1];return e[o]=t,e},{})),Ractive[i][l&&l[e]||e]=o}}}function o(e){var n=Object.assign({},e("raui.primary"),e("raui.form.primary")),i=Object.assign({},e("raui.primary.active"),e("raui.form.primary.active")),o=e("raui.form.boxy");return"\n label.field {\n display: inline-block;\n font-size: 0.9em;\n font-weight: 500;\n color: "+(n.fg||"#222")+";\n transition: 0.2s ease-in-out;\n transition-property: color;\n vertical-align: middle;\n box-sizing: border-box;\n padding: 0.5em 0.25em;\n line-height: 1.5em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-family: inherit;\n }\n\n label.field.textarea {\n display: block;\n border: 0.0625em solid "+(n.bc||"#ccc")+";\n padding: 0.5em 0.8em 0.8em 0.8em;\n border-radius: "+(n.radius||"0.2em")+";\n box-shadow: none;\n transition-property: color, border-color, box-shadow;\n margin: 0.8em 0.2em;\n min-height: auto;\n background-color: "+(o?n.bg||"#fff":"transparent")+";\n }\n\n label.field.focus {\n color: "+(i.fg||"#07e")+";\n }\n\n label.field.textarea.focus {\n border-color: "+(i.fg||n.fga||"#07e")+";\n "+(o?"":"box-shadow: 0.0625em 0.0625em "+(i.fg||n.fga||"#07e")+",\n -0.0625em 0.0625em "+(i.fg||n.fga||"#07e")+",\n 0.0625em -0.0625em "+(i.fg||n.fga||"#07e")+",\n -0.0625em -0.0625em "+(i.fg||n.fga||"#07e")+";")+"\n }\n\n label.field input,\n label.field select,\n label.field textarea\n {\n display: block;\n border-width: "+(o?"0.0625em":"0 0 0.0625em 0")+";\n border-color: "+(n.bc||"#ccc")+";\n border-style: solid;\n box-sizing: border-box;\n background-color: "+(o?n.bg||"#fff":"transparent")+";\n transition: 0.2s ease-in-out;\n transition-property: box-shadow, color;\n outline: none;\n "+(o?"padding: 0 0.75em;":"")+"\n line-height: 2.6em;\n box-shadow: none;\n width: 100%;\n margin-bottom: 0.8em;\n font-size: 1.1em;"+(o?"\n border-radius: "+(n.radius||"0.2em")+";":"")+"\n font-weight: 400;\n font-family: inherit;\n }\n label.field textarea {\n line-height: 1.2em;\n }\n label.field .field-wrapper {\n display: block;\n }\n label.field > select, label.field > input,\n label.field > .field-wrapper > input, label.field > .field-wrapper > select {\n height: 2.5em;\n }\n\n "+(o?"":"label.field:hover > input,\n label.field:hover select,\n label.field.file:hover:after {\n box-shadow: 0 0.0625em 0 0 "+(n.bc||"#ccc")+";\n }\n label.field.check:hover input:before,\n label.field.radio:hover input:before,\n label.field.textarea:hover {\n box-shadow: 0.0625em 0.0625em "+(n.bc||"#ccc")+",\n -0.0625em 0.0625em "+(n.bc||"#ccc")+",\n 0.0625em -0.0625em "+(n.bc||"#ccc")+",\n -0.0625em -0.0625em "+(n.bc||"#ccc")+";\n }\n label.field.check.focus input:before,\n label.field.radio.focus input:before {\n box-shadow: 0.0625em 0.0625em "+(i.fg||n.fga||"#07e")+",\n -0.0625em 0.0625em "+(i.fg||n.fga||"#07e")+",\n 0.0625em -0.0625em "+(i.fg||n.fga||"#07e")+",\n -0.0625em -0.0625em "+(i.fg||n.fga||"#07e")+";\n }\n label.field.textarea.focus:hover {\n box-shadow: 0.0625em 0.0625em "+(i.fg||n.fga||"#07e")+",\n -0.0625em 0.0625em "+(i.fg||n.fga||"#07e")+",\n 0.0625em -0.0625em "+(i.fg||n.fga||"#07e")+",\n -0.0625em -0.0625em "+(i.fg||n.fga||"#07e")+";\n }\n label.field.check input:checked:before,\n label.field.radio input:checked:before {\n box-shadow: -0.0625em 0.0625em "+(n.checked||n.fga||"#07e")+";\n }\n label.field.check.focus input:checked:before,\n label.field.radio.focus input:checked:before {\n box-shadow: -0.0625em 0.0625em "+(i.checked||i.fga||n.fga||"#07e")+";\n }")+"\n\n label.field.check, label.field.radio {\n vertical-align: top;\n cursor: pointer;"+(o?"\n padding-top: 2em;\n line-height: 3.1em;":"\n line-height: 1em;\n padding-top: 2.8em;")+"\n }\n\n label.field.check input, label.field.radio input {\n width: 1em;\n height: 1em;\n border: none;\n "+(o?"margin-left: -0.5em;\n margin-right: 0.75em":"margin-right: 0.5em;\n position: relative;\n margin-top: 0;")+";\n float: left;\n box-shadow: none;\n background-color: transparent;\n }\n\n label.field select {\n padding-right: 2em;\n }\n\n label.field.select {\n cursor: pointer;\n position: relative;\n }\n\n label.field.select:after {\n content: ' ';\n position: absolute;\n display: block;\n width: 0.6em;\n right: 1em;\n height: 0.6em;\n top: 2.75em;\n border-bottom: 0.125em solid;\n border-right: 0.125em solid;\n transform: rotate(45deg);\n pointer-events: none;\n }\n\n label.field textarea {\n border: none;"+(o?"\n padding: 0;":"")+"\n }\n\n label.field.check input:before,\n label.field.radio input:before {\n content: '';\n display: block;\n border: 0.0625em solid "+(n.bc||"#ccc")+";\n width: 1em;\n height: 1em;\n box-sizing: border-box;\n transition: 0.2s ease-in-out;\n transition-property: transform, border-color, height, width, box-shadow, border-radius;\n "+(o?"margin-top: 0.5em;":"margin-top: -0.25em;")+"\n border-radius: 0.2em;\n }\n\n label.field.check.focus input:before,\n label.field.radio.focus input:before {\n border-color: "+(i.fg||n.fga||"#07e")+";\n }\n\n label.field.check input:checked:before,\n label.field.radio input:checked:before {\n height: 0.7em;\n width: 1.3em;\n border-width: 0.125em;\n border-color: "+(n.checked||n.fga||"#07e")+";\n border-top-color: transparent;\n border-right-color: transparent;\n transform: rotate(-50deg);\n border-radius: 0;\n }\n\n label.field.check input,\n label.field > select {\n -moz-appearance: none;\n -webkit-appearance: none;\n }\n\n label.field input:focus,\n label.field select:focus,\n label.field.file.focus:after\n {\n border-color: "+(i.fg||n.fga||"#07e")+";\n "+(o?"":"box-shadow: 0 0.0625em 0 0 "+(i.fg||n.fga||"#07e")+";")+"\n }\n\n label.field input[type=checkbox]:focus,\n label.field input[type=radio]:focus {\n box-shadow: none;\n }\n\n label.field.file.focus:after {\n color: "+(i.fg||n.fga||"#07e")+";\n }\n label.field.file [type=file] {\n position: absolute;\n width: 0;\n height: 0;\n opacity: 0;\n z-index: -1;\n }\n label.field.file:after {\n position: absolute;\n content: 'Choose a file';\n box-sizing: border-box;\n width: calc(100% - 0.3em);\n height: 2.5em;\n font-size: 1.1em;\n line-height: 1.5em;\n color: "+(n.fg||"#222")+";\n text-align: center;\n padding: 0.5em 1em;\n cursor: pointer;\n font-style: oblique;\n left: 0.25em;\n top: 1.75em;\n transition: 0.2s ease-in-out;\n transition-property: color, border-bolor, box-shadow;"+(o?"\n border-radius: "+(n.radius||"0.2em")+";\n border-color: "+(n.bc||"#ccc")+";\n border-style: solid;\n border-width: 0.0625em;":"\n border-bottom-color: "+(n.bc||"#ccc")+";\n border-bottom-width: 0.0625em;\n border-bottom-style: solid;\n ")+"\n }\n\n label.field.button {\n vertical-align: top;\n padding-top: 1.75em;\n }\n label.field.button button {\n font-size: 1.1em;\n }\n\n label.field.plain > div {\n position: absolute;\n font-size: 1.1em;\n top: 2.4em;\n }\n\n /* inline fields (no labels) */\n label.field.inline {\n height: 3.3em;\n }\n\n label.field.check.inline {\n padding-top: "+(o?"0":"1")+".5em;\n }\n\n label.field.button.inline {\n margin-top: 0.2em;\n padding-top: 0.4em;\n }\n\n label.field.inline.select:after {\n top: 1."+(o?"4":"2")+"em;\n }\n "}function t(){}function l(e){~this.className.indexOf("focus")||(this.className+=" focus")}function r(e){this.className=this.className.replace(/\bfocus\b/g,"").trim()}function a(e){var n,i,o,a,c,d,f,b,s=this.getContext(e);function u(){var t=m().split(/\s+/).filter(function(e){return!!e});(n=!!~t.indexOf("field"))||(t.push("field"),n=!0),(i=!!e.querySelector("input[type=checkbox]"))&&!~t.indexOf("check")&&t.push("check"),(o=!!e.querySelector("input[type=radio]"))&&!~t.indexOf("radio")&&t.push("radio"),(a=!!e.querySelector("textarea"))&&!~t.indexOf("textarea")&&t.push("textarea"),(c=!!e.querySelector("select"))&&!~t.indexOf("select")&&t.push("select"),(d=!!e.querySelector("input[type=file]"))&&!~t.indexOf("file")&&t.push("file"),(f=!!e.querySelector("button"))&&!~t.indexOf("button")&&t.push("button"),(b=!!e.querySelector("div"))&&!~t.indexOf("plain")&&t.push("plain"),!(i||o||d||!e.querySelector("input"))&&!~t.indexOf("input")&&t.push("input"),e.className=t.join(" ")}function m(){var t=e.className;return n||(t=t.replace(/\bfield\b/g,"").trim()),i||(t=t.replace(/\bcheck\b/g,"").trim()),o||(t=t.replace(/\bradio\b/g,"").trim()),a||(t=t.replace(/\btextarea\b/g,"").trim()),c||(t=t.replace(/\bselect\b/g,"").trim()),d||(t=t.replace(/\bfile\b/g,"").trim()),f||(t=t.replace(/\bbutton\b/g,"").trim()),b||(t=t.replace(/\bplain\b/g,"").trim()),t=t.replace(/ +/g," ")}var p=s.listen("focusin",l),h=s.listen("focusout",r);return u(),{update:t,invalidate:u,teardown:function(){var n=m();n=n.replace(/\bfocus\b/g,"").trim(),p.cancel(),h.cancel(),e.className=n}}}function c(e){return"function"==typeof e.focus&&e.focus(),{teardown:t}}function d(e){return void 0===e&&(e={}),function(n){var i=n.Ractive,t=n.instance;if(!i.isInstance(t)&&e.includeStyle)if(t===i)i.addCSS("form-decorator",o);else{var l=t.css;t.css=function(e){return("function"!=typeof l?l||"":l(e))+o(e)}}t.decorators[e.name||"field"]=a,t.decorators[e.autofocusName||"autofocus"]=c}}a.style=o,i("field","decorators",a),i("autofocus","decorators",c),e.style=o,e.field=a,e.autofocus=c,e.plugin=d,e.default=d,Object.defineProperty(e,"__esModule",{value:!0})});
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc