Add flex design property and fix existing default layout

This commit is contained in:
Andrew Kingston 2020-10-13 17:46:18 +01:00
parent bb997eaf26
commit 650ace2f9e
4 changed files with 44 additions and 47 deletions

View File

@ -28,7 +28,9 @@
_id: "screenslot-placeholder",
_component: "@budibase/standard-components/container",
_styles: {
normal: {},
normal: {
flex: "1 1 auto",
},
hover: {},
active: {},
selected: {},
@ -46,6 +48,7 @@
display: "flex",
"flex-direction": "column",
"align-items": "center",
flex: "1 1 auto",
},
hover: {},
active: {},

View File

@ -11,21 +11,6 @@ export default `<html>
*, *:before, *:after {
box-sizing: border-box;
}
.lay-__screenslot__text {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 20px 0;
border: dashed 2px #ccc;
font-family: sans-serif;
font-size: 1.2rem;
color: #999;
text-transform: uppercase;
font-weight: bold;
}
.container-screenslot-placeholder {
display: flex;
align-items: center;
@ -36,9 +21,8 @@ export default `<html>
border-width: 1px;
color: #000000;
background: #fafafa;
height: 94%;
flex: 1 1 auto;
}
.container-screenslot-placeholder span {
display: block;
margin-bottom: 10px;

View File

@ -261,6 +261,16 @@ export const padding = [
]
export const size = [
{
label: "Flex",
key: "flex",
control: OptionSelect,
defaultValue: "0 1 auto",
options: [
{ label: "Shrink", value: "0 1 auto" },
{ label: "Grow", value: "1 1 auto" },
],
},
{
label: "Width",
key: "width",

View File

@ -62,10 +62,11 @@
"_component": "##builtin/screenslot",
"_styles": {
"normal": {
"padding": "0px",
"align-items": "flex-start",
"height": "100vh",
"background-image": "None"
"flex": "1 1 auto",
"display": "flex",
"flex-direction": "column",
"justify-content": "flex-start",
"align-items": "stretch"
},
"hover": {},
"active": {},
@ -84,10 +85,9 @@
"flex-direction": "column",
"align-items": "stretch",
"justify-content": "flex-start",
"height": "",
"max-width": "",
"margin-right": "auto",
"margin-left": "auto"
"margin-left": "auto",
"min-height": "100%"
},
"selected": {}
},