Padding and margin fix
This commit is contained in:
parent
28bf917210
commit
400f8b42e4
|
@ -1,3 +1,5 @@
|
||||||
|
import {toNumber} from "lodash/fp"
|
||||||
|
|
||||||
export const generate_screen_css = component_arr => {
|
export const generate_screen_css = component_arr => {
|
||||||
let styles = ""
|
let styles = ""
|
||||||
for (const { _styles, _id, _children, _component } of component_arr) {
|
for (const { _styles, _id, _children, _component } of component_arr) {
|
||||||
|
@ -37,7 +39,7 @@ export const generate_css = style => {
|
||||||
export const generate_array_styles = item => {
|
export const generate_array_styles = item => {
|
||||||
let safeItem = item === "" ? 0 : item
|
let safeItem = item === "" ? 0 : item
|
||||||
let hasPx = new RegExp("px$")
|
let hasPx = new RegExp("px$")
|
||||||
if (!hasPx.test(safeItem)) {
|
if (!hasPx.test(safeItem) && !isNaN(toNumber(safeItem))) {
|
||||||
return `${safeItem}px`
|
return `${safeItem}px`
|
||||||
} else {
|
} else {
|
||||||
return safeItem
|
return safeItem
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
export let meta = []
|
export let meta = []
|
||||||
export let label = ""
|
export let label = ""
|
||||||
export let value = [0, 0, 0, 0]
|
export let value = [0, 0, 0, 0]
|
||||||
export let type = "number"
|
export let type = "text"
|
||||||
export let onChange = () => {}
|
export let onChange = () => {}
|
||||||
|
|
||||||
function handleChange(val, idx) {
|
function handleChange(val, idx) {
|
||||||
|
@ -28,8 +28,6 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.input-container {
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
flex: 0;
|
flex: 0;
|
||||||
|
@ -53,18 +51,17 @@
|
||||||
border: 1px solid var(--grey);
|
border: 1px solid var(--grey);
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
outline: none;
|
outline: none;
|
||||||
float: right;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="number"]::-webkit-inner-spin-button,
|
input[type="text"]::-webkit-inner-spin-button,
|
||||||
input[type="number"]::-webkit-outer-spin-button {
|
input[type="text"]::-webkit-outer-spin-button {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="number"] {
|
input[type="text"] {
|
||||||
-moz-appearance: textfield;
|
-moz-appearance: textfield;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -26,7 +26,7 @@ export const layout = [
|
||||||
options: [
|
options: [
|
||||||
{ label: "Row", value: "row" },
|
{ label: "Row", value: "row" },
|
||||||
{ label: "Row Reverse", value: "rowReverse" },
|
{ label: "Row Reverse", value: "rowReverse" },
|
||||||
{ label: "column", value: "column" },
|
{ label: "Column", value: "column" },
|
||||||
{ label: "Column Reverse", value: "columnReverse" },
|
{ label: "Column Reverse", value: "columnReverse" },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
@ -71,14 +71,18 @@ export const layout = [
|
||||||
]
|
]
|
||||||
|
|
||||||
const spacingMeta = [
|
const spacingMeta = [
|
||||||
{ placeholder: "L" },
|
|
||||||
{ placeholder: "B" },
|
|
||||||
{ placeholder: "R" },
|
|
||||||
{ placeholder: "T" },
|
{ placeholder: "T" },
|
||||||
|
{ placeholder: "R" },
|
||||||
|
{ placeholder: "B" },
|
||||||
|
{ placeholder: "L" },
|
||||||
]
|
]
|
||||||
|
|
||||||
export const spacing = [
|
export const spacing = [
|
||||||
{ label: "Margin", key: "margin", control: InputGroup, meta: spacingMeta },
|
{ label: "Margin",
|
||||||
|
key: "margin",
|
||||||
|
control: InputGroup,
|
||||||
|
meta: spacingMeta
|
||||||
|
},
|
||||||
{
|
{
|
||||||
label: "Padding",
|
label: "Padding",
|
||||||
key: "padding",
|
key: "padding",
|
||||||
|
|
Loading…
Reference in New Issue