solid-ui 2.4.12-3bba27e0 → 2.4.12-4e6bd47a

package/lib/style.js

@@ -19,19 +19,19 @@ var formFieldNameBoxWidth = '8em'; // The fixed amount to get form fields to lin
 var style = {
   // styleModule
   checkboxStyle: 'colour: black; font-size: 100%; padding-left: 0.5 em; padding-right: 0.5 em;',
-  checkboxInputStyle: 'font-size: 150%; height: 1.2em; width: 1.2em; background-color: #eef; margin: 0.1em',
+  checkboxInputStyle: 'font-size: 150%; height: 1.2em; width: 1.2em; background-color: #eef; border-radius:0.2em; margin: 0.1em',
   fieldLabelStyle: 'color: #3B5998; text-decoration: none;',
   formSelectSTyle: 'background-color: #eef; padding: 0.5em;  border: .05em solid #88c;  border-radius:0.2em; font-size: 100%; margin:0.2em;',
   textInputStyle: 'background-color: #eef; padding: 0.5em;  border: .05em solid #88c;  border-radius:0.2em; font-size: 100%; margin:0.2em;',
   textInputStyleUneditable: // Color difference only
-  'background-color: white; padding: 0.5em;  border: .05em solid white;  border-radius:0.2em; font-size: 100%; margin:0.2em; ',
+  'background-color: white; padding: 0.5em;  border: .05em solid white;  border-radius:0.2em; font-size: 100%; margin:0.2em;',
   textInputSize: 20,
   // Default text input size in characters roughly
   buttonStyle: 'background-color: #fff; padding: 0.7em;  border: .01em solid white;  border-radius:0.2em; font-size: 100%; margin: 0.3em;',
   // 'background-color: #eef;
   commentStyle: 'padding: 0.7em;  border: none; font-size: 100%; white-space: pre-wrap;',
   iconStyle: 'width: 3em; height: 3em; margin: 0.1em; border-radius: 1em;',
-  smallButtonStyle: 'margin: 0.2em; width: 1em; height:1em',
+  smallButtonStyle: 'margin: 0.2em; width: 1em; height:1em;',
   classIconStyle: 'width: 3em; height: 3em; margin: 0.1em; border-radius: 0.2em; border: 0.1em solid green; padding: 0.2em; background-color: #efe;',
   // combine with buttonStyle
   confirmPopupStyle: 'padding: 0.7em; border-radius: 0.2em; border: 0.1em solid orange; background-color: white; box-shadow: 0.5em 0.9em #888;',

package/lib/style.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/style.js"],"names":["formBorderColor","lowProfileLinkColor","formFieldNameBoxWidth","style","checkboxStyle","checkboxInputStyle","fieldLabelStyle","formSelectSTyle","textInputStyle","textInputStyleUneditable","textInputSize","buttonStyle","commentStyle","iconStyle","smallButtonStyle","classIconStyle","confirmPopupStyle","tabBorderRadius","messageBodyStyle","pendingeditModifier","highlightColor","personaBarStyle","searchInputStyle","autocompleteRowStyle","signInButtonStyle","heading1Style","heading2Style","heading3Style","heading4Style","formHeadingColor","formHeadingStyle","formTextInput","formGroupStyle","formFieldLabelStyle","formFieldNameBoxStyle","textInputBackgroundColor","textInputBackgroundColorUneditable","textInputColor","textInputColorPending","multilineTextInputStyle","renderAsDivStyle","imageDivStyle","linkDivStyle","setStyle","ele","styleName","module","exports"],"mappings":";;;;;;AAAA;AACA;AACA;AAEA;AAEA,IAAMA,eAAe,GAAG,SAAxB,C,CAAkC;;AAClC,IAAMC,mBAAmB,GAAG,SAA5B,C,CAAsC;;AACtC,IAAMC,qBAAqB,GAAG,KAA9B,C,CAAoC;AACpC;AACA;;AAEO,IAAMC,KAAK,GAAG;AAAE;AAErBC,EAAAA,aAAa,EAAE,8EAFI;AAGnBC,EAAAA,kBAAkB,EAAE,qFAHD;AAKnBC,EAAAA,eAAe,EAAE,wCALE;AAMnBC,EAAAA,eAAe,EACb,yHAPiB;AAQnBC,EAAAA,cAAc,EACZ,yHATiB;AAUnBC,EAAAA,wBAAwB,EAAE;AACxB,8HAXiB;AAYnBC,EAAAA,aAAa,EAAE,EAZI;AAYA;AACnBC,EAAAA,WAAW,EACP,2HAde;AAc8G;AACjIC,EAAAA,YAAY,EAAE,wEAfK;AAgBnBC,EAAAA,SAAS,EAAE,6DAhBQ;AAiBnBC,EAAAA,gBAAgB,EAAE,uCAjBC;AAkBnBC,EAAAA,cAAc,EAAE,kIAlBG;AAkBiI;AACpJC,EAAAA,iBAAiB,EAAE,0HAnBA;AAoBnBC,EAAAA,eAAe,EAAE,OApBE;AAqBnBC,EAAAA,gBAAgB,EACd,wIAtBiB;AAuBnBC,EAAAA,mBAAmB,EAAE,cAvBF;AAwBnBC,EAAAA,cAAc,EAAE,SAxBG;AAwBQ;AAE3B;AACAC,EAAAA,eAAe,EAAE,2EA3BE;AA4BnBC,EAAAA,gBAAgB,EAAE,mHA5BC;AA6BnBC,EAAAA,oBAAoB,EAAE,4BA7BH;AA+BnB;AACAC,EAAAA,iBAAiB,EAAE,qDAhCA;AAgCuD;AAE1E;AACAC,EAAAA,aAAa,EAAE,yFAnCI;AAmCuF;AAC1GC,EAAAA,aAAa,EAAE,0FApCI;AAoCwF;AAC3GC,EAAAA,aAAa,EAAE,0FArCI;AAqCwF;AAC3GC,EAAAA,aAAa,EAAE,0FAtCI;AAsCwF;AAE3G5B,EAAAA,eAAe,EAAEA,eAxCE;AAwCe;AAClC6B,EAAAA,gBAAgB,EAAE,SAzCC;AAyCU;AAC7BC,EAAAA,gBAAgB,EAAE,2FA1CC;AA0C4F;AAC/GC,EAAAA,aAAa,EAAE,iDA3CI;AA2C+C;AAClEC,EAAAA,cAAc,EAAE,kDAA2ChC,eAA3C,8BAAqF;AAArF,oDAC6BA,eAD7B,+EAE4BA,eAF5B,+EAG4BA,eAH5B,6BAGqE;AAHrE,GA5CG;AAkDnBiC,EAAAA,mBAAmB,oBAAahC,mBAAb,8BAlDA;AAmDnBC,EAAAA,qBAAqB,EAAEA,qBAnDJ;AAoDnBgC,EAAAA,qBAAqB,0DAAmDhC,qBAAnD,MApDF;AAqDnBiC,EAAAA,wBAAwB,EAAE,MArDP;AAsDnBC,EAAAA,kCAAkC,EAAE,MAtDjB;AAuDnBC,EAAAA,cAAc,EAAE,MAvDG;AAwDnBC,EAAAA,qBAAqB,EAAE,MAxDJ;AAyDnBC,EAAAA,uBAAuB,EAAE,mEACzB,kEA1DmB;AA4DnB;AACAC,EAAAA,gBAAgB,EAAE,kGA7DC;AA8DnBC,EAAAA,aAAa,EAAE,4CA9DI;AA+DnBC,EAAAA,YAAY,EAAE;AA/DK,CAAd;;;AAkEPvC,KAAK,CAACwC,QAAN,GAAiB,SAASA,QAAT,CAAmBC,GAAnB,EAAwBC,SAAxB,EAAmC;AAClDD,EAAAA,GAAG,CAACzC,KAAJ,GAAYA,KAAK,CAAC0C,SAAD,CAAjB;AACD,CAFD;;AAIAC,MAAM,CAACC,OAAP,GAAiB5C,KAAjB,C,CAAuB","sourcesContent":["// Common readable consistent stylesheet\n// to avoid using style sheets which are document-global\n// and make programmable style toggling with selection, drag over, etc easier\n\n// These must all end with semicolon so they can be appended to.\n\nconst formBorderColor = '#888888' // Mid-grey\nconst lowProfileLinkColor = '#3B5998' // Grey-blue, e.g., for field labels linking to ontology\nconst formFieldNameBoxWidth = '8em' // The fixed amount to get form fields to line up\n// The latter we put in when switching awy from using tables.  Getting allignment between\n// fields in different groups though is hard problem.\n\nexport const style = { // styleModule\n\n  checkboxStyle: 'colour: black; font-size: 100%; padding-left: 0.5 em; padding-right: 0.5 em;',\n  checkboxInputStyle: 'font-size: 150%; height: 1.2em; width: 1.2em; background-color: #eef; margin: 0.1em',\n\n  fieldLabelStyle: 'color: #3B5998; text-decoration: none;',\n  formSelectSTyle:\n    'background-color: #eef; padding: 0.5em;  border: .05em solid #88c;  border-radius:0.2em; font-size: 100%; margin:0.2em;',\n  textInputStyle:\n    'background-color: #eef; padding: 0.5em;  border: .05em solid #88c;  border-radius:0.2em; font-size: 100%; margin:0.2em;',\n  textInputStyleUneditable: // Color difference only\n    'background-color: white; padding: 0.5em;  border: .05em solid white;  border-radius:0.2em; font-size: 100%; margin:0.2em; ',\n  textInputSize: 20, // Default text input size in characters roughly\n  buttonStyle:\n      'background-color: #fff; padding: 0.7em;  border: .01em solid white;  border-radius:0.2em; font-size: 100%; margin: 0.3em;', // 'background-color: #eef;\n  commentStyle: 'padding: 0.7em;  border: none; font-size: 100%; white-space: pre-wrap;',\n  iconStyle: 'width: 3em; height: 3em; margin: 0.1em; border-radius: 1em;',\n  smallButtonStyle: 'margin: 0.2em; width: 1em; height:1em',\n  classIconStyle: 'width: 3em; height: 3em; margin: 0.1em; border-radius: 0.2em; border: 0.1em solid green; padding: 0.2em; background-color: #efe;', // combine with buttonStyle\n  confirmPopupStyle: 'padding: 0.7em; border-radius: 0.2em; border: 0.1em solid orange; background-color: white; box-shadow: 0.5em 0.9em #888;',\n  tabBorderRadius: '0.2em',\n  messageBodyStyle:\n    'white-space: pre-wrap; width: 99%; font-size:100%; border: 0.07em solid #eee; border-radius:0.2em; padding: .3em 0.5em; margin: 0.1em;',\n  pendingeditModifier: 'color: #bbb;',\n  highlightColor: '#7C4DFF', // Solid lavendar https://design.inrupt.com/atomic-core/?cat=Core\n\n  // Contacts\n  personaBarStyle: 'width: 100%; height: 4em; background-color: #eee; vertical-align: middle;',\n  searchInputStyle: 'border: 0.1em solid #444; border-radius: 0.2em; width: 100%; font-size: 100%; padding: 0.1em 0.6em; margin 0.2em;',\n  autocompleteRowStyle: 'border: 0.2em solid straw;',\n\n  // Login buttons\n  signInButtonStyle: 'padding: 1em; border-radius:0.2em; font-size: 100%;', // was 0.5em radius\n\n  // Forms\n  heading1Style: 'font-size: 180%; font-weight: bold; color: #888888; padding: 0.5em; margin: 0.7em 0.0m;', // originally was brown; now grey\n  heading2Style: 'font-size: 130%; font-weight: bold; color: #888888; padding: 0.4em; margin: 0.7em 0.0em;', // originally was brown; now grey\n  heading3Style: 'font-size: 120%; font-weight: bold; color: #888888; padding: 0.3em; margin: 0.7em 0.0em;', // For example, in large forms or before a small form\n  heading4Style: 'font-size: 110%; font-weight: bold; color: #888888; padding: 0.2em; margin: 0.7em 0.0em;', // Lowest level used by default in small things\n\n  formBorderColor: formBorderColor, // originally was brown; now grey\n  formHeadingColor: '#888888', // originally was brown; now grey\n  formHeadingStyle: 'font-size: 110%; font-weight: bold; color: #888888; padding: 0.2em;  margin: 0.7em 0.0em;', // originally was brown; now grey\n  formTextInput: 'font-size: 100%; margin: 0.1em; padding: 0.1em;', // originally used this\n  formGroupStyle: [`padding-left: 0em; border: 0.0em solid ${formBorderColor}; border-radius: 0.2em;`, // weight 0\n    `padding-left: 2em; border: 0.05em solid ${formBorderColor}; border-radius: 0.2em;`,\n    `padding-left: 2em; border: 0.1em solid ${formBorderColor}; border-radius: 0.2em;`,\n    `padding-left: 2em; border: 0.2em solid ${formBorderColor}; border-radius: 0.2em;` // @@ pink\n  ],\n\n  formFieldLabelStyle: `'color: ${lowProfileLinkColor}; text-decoration: none;'`,\n  formFieldNameBoxWidth: formFieldNameBoxWidth,\n  formFieldNameBoxStyle: `padding: 0.3em; vertical-align: middle; width:${formFieldNameBoxWidth};`,\n  textInputBackgroundColor: '#eef',\n  textInputBackgroundColorUneditable: '#fff',\n  textInputColor: '#000',\n  textInputColorPending: '#888',\n  multilineTextInputStyle: 'font-size:100%; white-space: pre-wrap; background-color: #eef;' +\n  ' border: 0.07em solid gray; padding: 1em 0.5em; margin: 1em 1em;',\n\n  // Buttons\n  renderAsDivStyle: 'display: flex; align-items: center; justify-content: space-between; height: 2.5em; padding: 1em;',\n  imageDivStyle: 'width:2.5em; padding:0.5em; height: 2.5em;',\n  linkDivStyle: 'width:2em; padding:0.5em; height: 4em;'\n}\n\nstyle.setStyle = function setStyle (ele, styleName) {\n  ele.style = style[styleName]\n}\n\nmodule.exports = style // @@ No way to do this in ESM\n"],"file":"style.js"}
+{"version":3,"sources":["../src/style.js"],"names":["formBorderColor","lowProfileLinkColor","formFieldNameBoxWidth","style","checkboxStyle","checkboxInputStyle","fieldLabelStyle","formSelectSTyle","textInputStyle","textInputStyleUneditable","textInputSize","buttonStyle","commentStyle","iconStyle","smallButtonStyle","classIconStyle","confirmPopupStyle","tabBorderRadius","messageBodyStyle","pendingeditModifier","highlightColor","personaBarStyle","searchInputStyle","autocompleteRowStyle","signInButtonStyle","heading1Style","heading2Style","heading3Style","heading4Style","formHeadingColor","formHeadingStyle","formTextInput","formGroupStyle","formFieldLabelStyle","formFieldNameBoxStyle","textInputBackgroundColor","textInputBackgroundColorUneditable","textInputColor","textInputColorPending","multilineTextInputStyle","renderAsDivStyle","imageDivStyle","linkDivStyle","setStyle","ele","styleName","module","exports"],"mappings":";;;;;;AAAA;AACA;AACA;AAEA;AAEA,IAAMA,eAAe,GAAG,SAAxB,C,CAAkC;;AAClC,IAAMC,mBAAmB,GAAG,SAA5B,C,CAAsC;;AACtC,IAAMC,qBAAqB,GAAG,KAA9B,C,CAAoC;AACpC;AACA;;AAEO,IAAMC,KAAK,GAAG;AAAE;AAErBC,EAAAA,aAAa,EAAE,8EAFI;AAGnBC,EAAAA,kBAAkB,EAAE,0GAHD;AAKnBC,EAAAA,eAAe,EAAE,wCALE;AAMnBC,EAAAA,eAAe,EACb,yHAPiB;AAQnBC,EAAAA,cAAc,EACZ,yHATiB;AAUnBC,EAAAA,wBAAwB,EAAE;AACxB,6HAXiB;AAYnBC,EAAAA,aAAa,EAAE,EAZI;AAYA;AACnBC,EAAAA,WAAW,EACP,2HAde;AAc8G;AACjIC,EAAAA,YAAY,EAAE,wEAfK;AAgBnBC,EAAAA,SAAS,EAAE,6DAhBQ;AAiBnBC,EAAAA,gBAAgB,EAAE,wCAjBC;AAkBnBC,EAAAA,cAAc,EAAE,kIAlBG;AAkBiI;AACpJC,EAAAA,iBAAiB,EAAE,0HAnBA;AAoBnBC,EAAAA,eAAe,EAAE,OApBE;AAqBnBC,EAAAA,gBAAgB,EACd,wIAtBiB;AAuBnBC,EAAAA,mBAAmB,EAAE,cAvBF;AAwBnBC,EAAAA,cAAc,EAAE,SAxBG;AAwBQ;AAE3B;AACAC,EAAAA,eAAe,EAAE,2EA3BE;AA4BnBC,EAAAA,gBAAgB,EAAE,mHA5BC;AA6BnBC,EAAAA,oBAAoB,EAAE,4BA7BH;AA+BnB;AACAC,EAAAA,iBAAiB,EAAE,qDAhCA;AAgCuD;AAE1E;AACAC,EAAAA,aAAa,EAAE,yFAnCI;AAmCuF;AAC1GC,EAAAA,aAAa,EAAE,0FApCI;AAoCwF;AAC3GC,EAAAA,aAAa,EAAE,0FArCI;AAqCwF;AAC3GC,EAAAA,aAAa,EAAE,0FAtCI;AAsCwF;AAE3G5B,EAAAA,eAAe,EAAEA,eAxCE;AAwCe;AAClC6B,EAAAA,gBAAgB,EAAE,SAzCC;AAyCU;AAC7BC,EAAAA,gBAAgB,EAAE,2FA1CC;AA0C4F;AAC/GC,EAAAA,aAAa,EAAE,iDA3CI;AA2C+C;AAClEC,EAAAA,cAAc,EAAE,kDAA2ChC,eAA3C,8BAAqF;AAArF,oDAC6BA,eAD7B,+EAE4BA,eAF5B,+EAG4BA,eAH5B,6BAGqE;AAHrE,GA5CG;AAkDnBiC,EAAAA,mBAAmB,oBAAahC,mBAAb,8BAlDA;AAmDnBC,EAAAA,qBAAqB,EAAEA,qBAnDJ;AAoDnBgC,EAAAA,qBAAqB,0DAAmDhC,qBAAnD,MApDF;AAqDnBiC,EAAAA,wBAAwB,EAAE,MArDP;AAsDnBC,EAAAA,kCAAkC,EAAE,MAtDjB;AAuDnBC,EAAAA,cAAc,EAAE,MAvDG;AAwDnBC,EAAAA,qBAAqB,EAAE,MAxDJ;AAyDnBC,EAAAA,uBAAuB,EAAE,mEACzB,kEA1DmB;AA4DnB;AACAC,EAAAA,gBAAgB,EAAE,kGA7DC;AA8DnBC,EAAAA,aAAa,EAAE,4CA9DI;AA+DnBC,EAAAA,YAAY,EAAE;AA/DK,CAAd;;;AAkEPvC,KAAK,CAACwC,QAAN,GAAiB,SAASA,QAAT,CAAmBC,GAAnB,EAAwBC,SAAxB,EAAmC;AAClDD,EAAAA,GAAG,CAACzC,KAAJ,GAAYA,KAAK,CAAC0C,SAAD,CAAjB;AACD,CAFD;;AAIAC,MAAM,CAACC,OAAP,GAAiB5C,KAAjB,C,CAAuB","sourcesContent":["// Common readable consistent stylesheet\n// to avoid using style sheets which are document-global\n// and make programmable style toggling with selection, drag over, etc easier\n\n// These must all end with semicolon so they can be appended to.\n\nconst formBorderColor = '#888888' // Mid-grey\nconst lowProfileLinkColor = '#3B5998' // Grey-blue, e.g., for field labels linking to ontology\nconst formFieldNameBoxWidth = '8em' // The fixed amount to get form fields to line up\n// The latter we put in when switching awy from using tables.  Getting allignment between\n// fields in different groups though is hard problem.\n\nexport const style = { // styleModule\n\n  checkboxStyle: 'colour: black; font-size: 100%; padding-left: 0.5 em; padding-right: 0.5 em;',\n  checkboxInputStyle: 'font-size: 150%; height: 1.2em; width: 1.2em; background-color: #eef; border-radius:0.2em; margin: 0.1em',\n\n  fieldLabelStyle: 'color: #3B5998; text-decoration: none;',\n  formSelectSTyle:\n    'background-color: #eef; padding: 0.5em;  border: .05em solid #88c;  border-radius:0.2em; font-size: 100%; margin:0.2em;',\n  textInputStyle:\n    'background-color: #eef; padding: 0.5em;  border: .05em solid #88c;  border-radius:0.2em; font-size: 100%; margin:0.2em;',\n  textInputStyleUneditable: // Color difference only\n    'background-color: white; padding: 0.5em;  border: .05em solid white;  border-radius:0.2em; font-size: 100%; margin:0.2em;',\n  textInputSize: 20, // Default text input size in characters roughly\n  buttonStyle:\n      'background-color: #fff; padding: 0.7em;  border: .01em solid white;  border-radius:0.2em; font-size: 100%; margin: 0.3em;', // 'background-color: #eef;\n  commentStyle: 'padding: 0.7em;  border: none; font-size: 100%; white-space: pre-wrap;',\n  iconStyle: 'width: 3em; height: 3em; margin: 0.1em; border-radius: 1em;',\n  smallButtonStyle: 'margin: 0.2em; width: 1em; height:1em;',\n  classIconStyle: 'width: 3em; height: 3em; margin: 0.1em; border-radius: 0.2em; border: 0.1em solid green; padding: 0.2em; background-color: #efe;', // combine with buttonStyle\n  confirmPopupStyle: 'padding: 0.7em; border-radius: 0.2em; border: 0.1em solid orange; background-color: white; box-shadow: 0.5em 0.9em #888;',\n  tabBorderRadius: '0.2em',\n  messageBodyStyle:\n    'white-space: pre-wrap; width: 99%; font-size:100%; border: 0.07em solid #eee; border-radius:0.2em; padding: .3em 0.5em; margin: 0.1em;',\n  pendingeditModifier: 'color: #bbb;',\n  highlightColor: '#7C4DFF', // Solid lavendar https://design.inrupt.com/atomic-core/?cat=Core\n\n  // Contacts\n  personaBarStyle: 'width: 100%; height: 4em; background-color: #eee; vertical-align: middle;',\n  searchInputStyle: 'border: 0.1em solid #444; border-radius: 0.2em; width: 100%; font-size: 100%; padding: 0.1em 0.6em; margin 0.2em;',\n  autocompleteRowStyle: 'border: 0.2em solid straw;',\n\n  // Login buttons\n  signInButtonStyle: 'padding: 1em; border-radius:0.2em; font-size: 100%;', // was 0.5em radius\n\n  // Forms\n  heading1Style: 'font-size: 180%; font-weight: bold; color: #888888; padding: 0.5em; margin: 0.7em 0.0m;', // originally was brown; now grey\n  heading2Style: 'font-size: 130%; font-weight: bold; color: #888888; padding: 0.4em; margin: 0.7em 0.0em;', // originally was brown; now grey\n  heading3Style: 'font-size: 120%; font-weight: bold; color: #888888; padding: 0.3em; margin: 0.7em 0.0em;', // For example, in large forms or before a small form\n  heading4Style: 'font-size: 110%; font-weight: bold; color: #888888; padding: 0.2em; margin: 0.7em 0.0em;', // Lowest level used by default in small things\n\n  formBorderColor: formBorderColor, // originally was brown; now grey\n  formHeadingColor: '#888888', // originally was brown; now grey\n  formHeadingStyle: 'font-size: 110%; font-weight: bold; color: #888888; padding: 0.2em;  margin: 0.7em 0.0em;', // originally was brown; now grey\n  formTextInput: 'font-size: 100%; margin: 0.1em; padding: 0.1em;', // originally used this\n  formGroupStyle: [`padding-left: 0em; border: 0.0em solid ${formBorderColor}; border-radius: 0.2em;`, // weight 0\n    `padding-left: 2em; border: 0.05em solid ${formBorderColor}; border-radius: 0.2em;`,\n    `padding-left: 2em; border: 0.1em solid ${formBorderColor}; border-radius: 0.2em;`,\n    `padding-left: 2em; border: 0.2em solid ${formBorderColor}; border-radius: 0.2em;` // @@ pink\n  ],\n\n  formFieldLabelStyle: `'color: ${lowProfileLinkColor}; text-decoration: none;'`,\n  formFieldNameBoxWidth: formFieldNameBoxWidth,\n  formFieldNameBoxStyle: `padding: 0.3em; vertical-align: middle; width:${formFieldNameBoxWidth};`,\n  textInputBackgroundColor: '#eef',\n  textInputBackgroundColorUneditable: '#fff',\n  textInputColor: '#000',\n  textInputColorPending: '#888',\n  multilineTextInputStyle: 'font-size:100%; white-space: pre-wrap; background-color: #eef;' +\n  ' border: 0.07em solid gray; padding: 1em 0.5em; margin: 1em 1em;',\n\n  // Buttons\n  renderAsDivStyle: 'display: flex; align-items: center; justify-content: space-between; height: 2.5em; padding: 1em;',\n  imageDivStyle: 'width:2.5em; padding:0.5em; height: 2.5em;',\n  linkDivStyle: 'width:2em; padding:0.5em; height: 4em;'\n}\n\nstyle.setStyle = function setStyle (ele, styleName) {\n  ele.style = style[styleName]\n}\n\nmodule.exports = style // @@ No way to do this in ESM\n"],"file":"style.js"}

package/lib/versionInfo.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _default = {
-  buildTime: '2021-11-30T18:04:52Z',
-  commit: '3bba27e028a58b06553d0ecf1cfda06b6c109ca6',
+  buildTime: '2021-12-01T23:13:49Z',
+  commit: '4e6bd47aba6260c7eedb2c68aeca3ba8effcef88',
   npmInfo: {
     'solid-ui': '2.4.12',
     npm: '6.14.15',

package/lib/versionInfo.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/versionInfo.ts"],"names":["buildTime","commit","npmInfo","npm","ares","brotli","cldr","icu","llhttp","modules","napi","nghttp2","node","openssl","tz","unicode","uv","v8","zlib"],"mappings":";;;;;;eAAe;AACbA,EAAAA,SAAS,EAAE,sBADE;AAEbC,EAAAA,MAAM,EAAE,0CAFK;AAGbC,EAAAA,OAAO,EACT;AACE,gBAAY,QADd;AAEEC,IAAAA,GAAG,EAAE,SAFP;AAGEC,IAAAA,IAAI,EAAE,QAHR;AAIEC,IAAAA,MAAM,EAAE,OAJV;AAKEC,IAAAA,IAAI,EAAE,MALR;AAMEC,IAAAA,GAAG,EAAE,MANP;AAOEC,IAAAA,MAAM,EAAE,OAPV;AAQEC,IAAAA,OAAO,EAAE,IARX;AASEC,IAAAA,IAAI,EAAE,GATR;AAUEC,IAAAA,OAAO,EAAE,QAVX;AAWEC,IAAAA,IAAI,EAAE,SAXR;AAYEC,IAAAA,OAAO,EAAE,QAZX;AAaEC,IAAAA,EAAE,EAAE,OAbN;AAcEC,IAAAA,OAAO,EAAE,MAdX;AAeEC,IAAAA,EAAE,EAAE,QAfN;AAgBEC,IAAAA,EAAE,EAAE,oBAhBN;AAiBEC,IAAAA,IAAI,EAAE;AAjBR;AAJe,C","sourcesContent":["export default {\n  buildTime: '2021-11-30T18:04:52Z',\n  commit: '3bba27e028a58b06553d0ecf1cfda06b6c109ca6',\n  npmInfo:\n{\n  'solid-ui': '2.4.12',\n  npm: '6.14.15',\n  ares: '1.17.2',\n  brotli: '1.0.9',\n  cldr: '39.0',\n  icu: '69.1',\n  llhttp: '2.1.4',\n  modules: '83',\n  napi: '8',\n  nghttp2: '1.42.0',\n  node: '14.18.1',\n  openssl: '1.1.1l',\n  tz: '2021a',\n  unicode: '13.0',\n  uv: '1.42.0',\n  v8: '8.4.371.23-node.84',\n  zlib: '1.2.11'\n}\n}\n"],"file":"versionInfo.js"}
+{"version":3,"sources":["../src/versionInfo.ts"],"names":["buildTime","commit","npmInfo","npm","ares","brotli","cldr","icu","llhttp","modules","napi","nghttp2","node","openssl","tz","unicode","uv","v8","zlib"],"mappings":";;;;;;eAAe;AACbA,EAAAA,SAAS,EAAE,sBADE;AAEbC,EAAAA,MAAM,EAAE,0CAFK;AAGbC,EAAAA,OAAO,EACT;AACE,gBAAY,QADd;AAEEC,IAAAA,GAAG,EAAE,SAFP;AAGEC,IAAAA,IAAI,EAAE,QAHR;AAIEC,IAAAA,MAAM,EAAE,OAJV;AAKEC,IAAAA,IAAI,EAAE,MALR;AAMEC,IAAAA,GAAG,EAAE,MANP;AAOEC,IAAAA,MAAM,EAAE,OAPV;AAQEC,IAAAA,OAAO,EAAE,IARX;AASEC,IAAAA,IAAI,EAAE,GATR;AAUEC,IAAAA,OAAO,EAAE,QAVX;AAWEC,IAAAA,IAAI,EAAE,SAXR;AAYEC,IAAAA,OAAO,EAAE,QAZX;AAaEC,IAAAA,EAAE,EAAE,OAbN;AAcEC,IAAAA,OAAO,EAAE,MAdX;AAeEC,IAAAA,EAAE,EAAE,QAfN;AAgBEC,IAAAA,EAAE,EAAE,oBAhBN;AAiBEC,IAAAA,IAAI,EAAE;AAjBR;AAJe,C","sourcesContent":["export default {\n  buildTime: '2021-12-01T23:13:49Z',\n  commit: '4e6bd47aba6260c7eedb2c68aeca3ba8effcef88',\n  npmInfo:\n{\n  'solid-ui': '2.4.12',\n  npm: '6.14.15',\n  ares: '1.17.2',\n  brotli: '1.0.9',\n  cldr: '39.0',\n  icu: '69.1',\n  llhttp: '2.1.4',\n  modules: '83',\n  napi: '8',\n  nghttp2: '1.42.0',\n  node: '14.18.1',\n  openssl: '1.1.1l',\n  tz: '2021a',\n  unicode: '13.0',\n  uv: '1.42.0',\n  v8: '8.4.371.23-node.84',\n  zlib: '1.2.11'\n}\n}\n"],"file":"versionInfo.js"}

package/lib/webpack-bundle.js

@@ -12439,19 +12439,19 @@ var formFieldNameBoxWidth = '8em'; // The fixed amount to get form fields to lin
 var style = {
   // styleModule
   checkboxStyle: 'colour: black; font-size: 100%; padding-left: 0.5 em; padding-right: 0.5 em;',
-  checkboxInputStyle: 'font-size: 150%; height: 1.2em; width: 1.2em; background-color: #eef; margin: 0.1em',
+  checkboxInputStyle: 'font-size: 150%; height: 1.2em; width: 1.2em; background-color: #eef; border-radius:0.2em; margin: 0.1em',
   fieldLabelStyle: 'color: #3B5998; text-decoration: none;',
   formSelectSTyle: 'background-color: #eef; padding: 0.5em;  border: .05em solid #88c;  border-radius:0.2em; font-size: 100%; margin:0.2em;',
   textInputStyle: 'background-color: #eef; padding: 0.5em;  border: .05em solid #88c;  border-radius:0.2em; font-size: 100%; margin:0.2em;',
   textInputStyleUneditable: // Color difference only
-  'background-color: white; padding: 0.5em;  border: .05em solid white;  border-radius:0.2em; font-size: 100%; margin:0.2em; ',
+  'background-color: white; padding: 0.5em;  border: .05em solid white;  border-radius:0.2em; font-size: 100%; margin:0.2em;',
   textInputSize: 20,
   // Default text input size in characters roughly
   buttonStyle: 'background-color: #fff; padding: 0.7em;  border: .01em solid white;  border-radius:0.2em; font-size: 100%; margin: 0.3em;',
   // 'background-color: #eef;
   commentStyle: 'padding: 0.7em;  border: none; font-size: 100%; white-space: pre-wrap;',
   iconStyle: 'width: 3em; height: 3em; margin: 0.1em; border-radius: 1em;',
-  smallButtonStyle: 'margin: 0.2em; width: 1em; height:1em',
+  smallButtonStyle: 'margin: 0.2em; width: 1em; height:1em;',
   classIconStyle: 'width: 3em; height: 3em; margin: 0.1em; border-radius: 0.2em; border: 0.1em solid green; padding: 0.2em; background-color: #efe;',
   // combine with buttonStyle
   confirmPopupStyle: 'padding: 0.7em; border-radius: 0.2em; border: 0.1em solid orange; background-color: white; box-shadow: 0.5em 0.9em #888;',
@@ -15422,8 +15422,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _default = {
-  buildTime: '2021-11-30T18:04:52Z',
-  commit: '3bba27e028a58b06553d0ecf1cfda06b6c109ca6',
+  buildTime: '2021-12-01T23:13:49Z',
+  commit: '4e6bd47aba6260c7eedb2c68aeca3ba8effcef88',
   npmInfo: {
     'solid-ui': '2.4.12',
     npm: '6.14.15',
@@ -19075,10 +19075,8 @@ function buildCheckboxForm(dom, kb, lab, del, ins, form, dataDoc, tristate) {
   var rhs = (0, _basic.renderNameValuePair)(dom, kb, box, form);
   var editable = kb.updater.editable(dataDoc.uri);
   var input = dom.createElement('button');
-  var colorCarrier = input; // Which element changes color to flag changed/saving/saved?
-
-  input.style = style.checkboxInputStyle; // colorCarrier.style = style.checkboxStyle
-
+  var colorCarrier = input;
+  input.style = style.checkboxInputStyle;
   rhs.appendChild(input);
 
   function fix(x) {
@@ -19138,7 +19136,7 @@ function buildCheckboxForm(dom, kb, lab, del, ins, form, dataDoc, tristate) {
   if (!editable) return box;
 
   var boxHandler = function boxHandler(_e) {
-    colorCarrier.style.color = '#bbb;'; // grey -- not saved yet
+    colorCarrier.style.color = '#bbb'; // grey -- not saved yet
 
     var toDelete = input.state === true ? ins : input.state === false ? del : [];
     input.newState = input.state === null ? true : input.state === true ? false : tristate ? null : true;
@@ -19155,11 +19153,11 @@ function buildCheckboxForm(dom, kb, lab, del, ins, form, dataDoc, tristate) {
           }
         }
 
-        colorCarrier.style.color = 'color: #black;';
-        colorCarrier.style.backgroundColor = '#fee;';
+        colorCarrier.style.color = '#000';
+        colorCarrier.style.backgroundColor = '#fee';
         box.appendChild((0, _error.errorMessageBlock)(dom, "Checkbox: Error updating dataDoc from ".concat(input.state, " to ").concat(input.newState, ":\n\n").concat(errorBody)));
       } else {
-        colorCarrier.style = 'color: #black;';
+        colorCarrier.style.color = '#000';
         input.state = input.newState;
         input.textContent = {
           "true": checkMarkCharacter,
@@ -21632,33 +21630,22 @@ function basicField(dom, container, already, subject, form, doc, callbackFunctio
     return box.appendChild((0, _error.errorMessageBlock)(dom, 'Error: No property given for text field: ' + form));
   }
 
-  var rhs = renderNameValuePair(dom, kb, box, form);
-  /*
-  box.style.display = 'flex'
-  box.style.flexDirection = 'row'
-  const lhs = box.appendChild(dom.createElement('div'))
-  lhs.style.width = formFieldNameBoxWidth
-  const rhs = box.appendChild(dom.createElement('div'))
-  lhs.appendChild(fieldLabel(dom, property as NamedNode, form))
-  lhs.setAttribute('class', 'formFieldName')
-  lhs.setAttribute('style', formFieldNameBoxStyle)
-  rhs.setAttribute('class', 'formFieldValue')
-  */
-  // It can be cleaner to just remove empty fields if you can't edit them anyway
+  var rhs = renderNameValuePair(dom, kb, box, form); // It can be cleaner to just remove empty fields if you can't edit them anyway
 
   var suppressEmptyUneditable = kb.anyJS(form, ns.ui('suppressEmptyUneditable'), null, formDoc);
   var uri = (0, _fieldFunction.mostSpecificClassURI)(form);
   var params = _fieldParams.fieldParams[uri];
-  if (params === undefined) params = {}; // non-bottom field types can do this
-
-  var style = params.style || _style.textInputStyle; // box.appendChild(dom.createTextNode(' uri='+uri+', pattern='+ params.pattern))
+  if (params === undefined) params = {
+    style: ''
+  }; // non-bottom field types can do this
 
+  var paramStyle = params.style || '';
+  var style = _style.textInputStyle + paramStyle;
   var field = dom.createElement('input');
-  field.style = _style.textInputStyle; // Do we have to override length etc?
-
+  field.style = style;
   rhs.appendChild(field);
   field.setAttribute('type', params.type ? params.type : 'text');
-  var size = kb.anyJS(form, ns.ui('size')) || style.textInputSize || 20;
+  var size = kb.anyJS(form, ns.ui('size')) || _style.textInputSize || 20;
   field.setAttribute('size', size);
   var maxLength = kb.any(form, ns.ui('maxLength'));
   field.setAttribute('maxLength', maxLength ? '' + maxLength : '4096');
@@ -21687,7 +21674,7 @@ function basicField(dom, container, already, subject, form, doc, callbackFunctio
   if (!kb.updater.editable(doc.uri)) {
     field.readOnly = true // was: disabled. readOnly is better
     ;
-    field.style = _style.textInputStyleUneditable; // backgroundColor = textInputBackgroundColorUneditable
+    field.style = _style.textInputStyleUneditable + paramStyle; // backgroundColor = textInputBackgroundColorUneditable
 
     if (suppressEmptyUneditable && field.value === '') {
       box.style.display = 'none'; // clutter
@@ -21918,6 +21905,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var fieldParams = (_fieldParams = {}, (0, _defineProperty2["default"])(_fieldParams, ns.ui('ColorField').uri, {
   size: 9,
   type: 'color',
+  style: 'height: 3em;',
+  // around 1.5em is padding
   dt: 'color',
   pattern: /^\s*#[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f]([0-9a-f][0-9a-f])?\s*$/
 }), (0, _defineProperty2["default"])(_fieldParams, ns.ui('DateField').uri, {
@@ -21938,17 +21927,17 @@ var fieldParams = (_fieldParams = {}, (0, _defineProperty2["default"])(_fieldPar
   pattern: /^\s*([0-2]?[0-9]:[0-5][0-9](:[0-5][0-9])?)\s*$/
 }), (0, _defineProperty2["default"])(_fieldParams, ns.ui('IntegerField').uri, {
   size: 12,
-  style: 'text-align: right',
+  style: 'text-align: right;',
   dt: 'integer',
   pattern: /^\s*-?[0-9]+\s*$/
 }), (0, _defineProperty2["default"])(_fieldParams, ns.ui('DecimalField').uri, {
   size: 12,
-  style: 'text-align: right',
+  style: 'text-align: right;',
   dt: 'decimal',
   pattern: /^\s*-?[0-9]*(\.[0-9]*)?\s*$/
 }), (0, _defineProperty2["default"])(_fieldParams, ns.ui('FloatField').uri, {
   size: 12,
-  style: 'text-align: right',
+  style: 'text-align: right;',
   dt: 'float',
   pattern: /^\s*-?[0-9]*(\.[0-9]*)?((e|E)-?[0-9]*)?\s*$/
 }), (0, _defineProperty2["default"])(_fieldParams, ns.ui('SingleLineTextField').uri, {}), (0, _defineProperty2["default"])(_fieldParams, ns.ui('NamedNodeURIField').uri, {