few ThemeBuilder fixes. replaces bootstrap example in Block docs. closes #92

src/components/Block/Block.stories.svelte

@@ -55,7 +55,7 @@
 <Story name="Custom layouts" {...withStoryDocs(customLayoutsDocs)}>
   <Block width="fluid">
     <!-- Enter bootstrap grid! -->
-    <div class="container-fluid text-center">
+    <div id="block-flex-example">
       <div class="row">
         <div class="col">Column</div>
         <div class="col-6">Column</div>
@@ -148,8 +148,11 @@
     }
   }
 
-  div.container-fluid {
+  div#block-flex-example {
     padding: 25px 0;
+    div.row {
+      display: flex;
+    }
     div.row > div {
       background-color: rgb(211, 132, 123);
       border: 1px solid white;
@@ -157,6 +160,7 @@
       padding: 20px;
       color: white;
       text-align: center;
+      flex-grow: 1;
     }
     div.row:first-child {
       div {

src/components/Block/stories/docs/customLayouts.md

@@ -10,4 +10,4 @@ If you need to get really radical, the easiest way is to create a `Block` with a
 </Block>
 ```
 
-The demo below does exactly that to create an edge-to-edge grid with [bootstrap](https://getbootstrap.com/docs/5.2/layout/grid/).
+The demo below does exactly that to create an edge-to-edge grid with [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).

src/docs/docs-components/ThemeBuilder/Customiser/Value.jsx

@@ -5,7 +5,7 @@ import ColourPicker from './ColourPicker.jsx';
 
 const Input = ({ value, onChange }) => {
   // Number type
-  if (!isNaN(value)) return <input type="number" value={value} onChange={(e) => onChange(e.target.value)}/>;
+  if (!isNaN(value)) return <input type="number" value={value} onChange={(e) => onChange(Number(e.target.value))}/>;
   // Colour type
   if (!/var\(.*\)/i.test(value) && CSS.supports('color', value)) return (
     <ColourPicker colour={value} onChange={onChange} />

src/docs/docs-components/ThemeBuilder/Customiser/styles.module.scss

@@ -40,7 +40,7 @@
   }
   div.key {
     div.key {
-      padding-left: 20px;
+      padding-left: 10px;
     }
   }
   div.value {
@@ -67,10 +67,11 @@
 
 .colourpicker :global {
   width: 160px;
+  margin-bottom: 10px;
   .react-colorful {
-    height: 140px;
+    height: 120px;
     width: 160px;
-    border: 1px solid #ccc;
+    border: 1px solid #666;
     border-radius: 4px;
     overflow: hidden;
   }
@@ -87,6 +88,6 @@
   }
   input {
     width: 100%;
-    margin-bottom: 10px !important;
+    margin-bottom: 5px !important;
   }
 }