@pageboard/html 0.11.3 → 0.11.4

package/elements/fieldsets.js

@@ -25,14 +25,16 @@ exports.fieldset = {
 			}
 		},
 		plain: {
-			title: 'Without borders',
+			title: 'Plain',
+			description: 'Without legend or borders',
 			type: 'boolean',
 			default: false
 		}
 	},
 	contents: "fieldset_legend block+",
 	html: '<fieldset class="[plain|?]" data-name="[name]" data-value="[value]" is="element-fieldset"></fieldset>',
-	scripts: ["../ui/fieldset.js"]
+	scripts: ["../ui/fieldset.js"],
+	stylesheets: ['../ui/fieldset.css']
 };
 
 exports.fieldset_legend = {

package/elements/layout.js

@@ -94,6 +94,33 @@ exports.layout = {
 				const: '%'
 			}]
 		},
+		margins: {
+			title: 'Margins',
+			type: 'object',
+			nullable: true,
+			properties: {
+				inline: {
+					title: 'Inline (em)',
+					type: 'number',
+					default: 0,
+					multipleOf: 0.1,
+					nullable: true
+				},
+				inlineUnits: {
+					const: 'em'
+				},
+				block: {
+					title: 'Block (rem)',
+					type: 'number',
+					default: 0,
+					multipleOf: 0.1,
+					nullable: true
+				},
+				blockUnits: {
+					const: 'rem'
+				}
+			}
+		},
 		invert: {
 			title: 'Invert',
 			description: 'Invert background',
@@ -127,6 +154,7 @@ exports.layout = {
 				crop: {
 					title: 'Crop and scale',
 					type: "object",
+					nullable: true,
 					properties: {
 						x: {
 							type: "number",
@@ -260,6 +288,8 @@ exports.layout = {
 		[direction]
 		[invert|?:inverted]"
 		is="element-layout"
+		style-margin-block="[margins.block|eq:0:|not|magnet][margins.blockUnits]"
+		style-margin-inline="[margins.inline|eq:0:|not|magnet][margins.inlineUnits]"
 		style-height="[height|eq:0:|not|magnet][heightUnits]"
 		data-src="[background.image]"
 		data-crop="[background.crop.x];[background.crop.y];[background.crop.width];[background.crop.height];[background.crop.zoom]"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pageboard/html",
-  "version": "0.11.3",
+  "version": "0.11.4",
   "description": "",
   "main": "index.js",
   "scripts": {

package/ui/fieldset-list.css

@@ -1,6 +1,3 @@
-fieldset {
-	padding: 1rem;
-}
 element-fieldset-list {
 	display: block;
 	position: relative;

package/ui/fieldset.css

@@ -0,0 +1,14 @@
+fieldset:not(.plain) {
+	padding: 1em;
+	padding-top:0.5em;
+}
+fieldset.plain {
+	padding:0;
+}
+fieldset.plain > legend {
+	display:none;
+}
+fieldset:not(.plain) > legend {
+	padding-left:0.1em;
+	padding-right:0.2em;
+}