@cocreate/builder
Version:
A simple builder component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.
1,611 lines (1,607 loc) • 114 kB
HTML
<!DOCTYPE html>
<style>
cocreate-select.styleunit selected {
/*padding:0 5px;*/
margin: 0;
text-align: center;
background: none;
}
.pickr {
padding: 0px;
width: 100%;
}
.pickr .pcr-button {
height: 24px;
width: 100%;
box-shadow: none !important;
}
</style>
<form
id="domEditorPanel"
state_id="builder"
array=""
object=""
crud="false"
save="false"
read="false"
class="min-width:305px">
<div class="padding-left:5px padding-top:5px">
<div class="display:flex margin-bottom:5px font-size:16px tabs">
<div
classkey="tab-round"
class="width:40px line-height:40px text-align:center margin:5px border-radius:50% cursor:pointer background:gainsboro background:silver:hover tab"
selected-value="active"
selected-query="#styles"
selected-group="editor-panels"
selected>
<i src="/assets/svg/paint-brush.svg"></i>
</div>
<div
class="tab"
selected-value="active"
selected-query="#database"
selected-group="editor-panels">
<i src="/assets/svg/database.svg"></i>
</div>
<div
class="tab"
selected-value="active"
selected-query="#broadcast"
selected-group="editor-panels">
<i src="/assets/svg/broadcast-tower.svg"></i>
</div>
<div
class="tab"
selected-value="active"
selected-query="#logic"
selected-group="editor-panels">
<i src="/assets/svg/brain.svg"></i>
</div>
<div
class="tab"
selected-value="active"
selected-query="#plugins"
selected-group="editor-panels">
<i src="/assets/svg/plug.svg"></i>
</div>
<div
class="tab"
selected-value="active"
selected-query="#settings"
selected-group="editor-panels">
<i class="height:18px" src="/assets/svg/cog.svg"></i>
</div>
</div>
<div class="overflow:auto height:90vh">
<div class="">
<!--Styles -->
<div id="styles" class="editor-panel display:none active">
<div class="padding:0px_5px_20px_5px">
<!--<cocreate-select class="floating-label " sortable multiple placeholder="Classes" attribute="class" state_id="builder" attribute-query="iframe; *" array="" object="" crud="false" save="false" read="false" active>-->
<!-- <input placeholder="Add a new class">-->
<!--</cocreate-select>-->
</div>
<!--Layout -->
<div
class="padding:5px background:gainsboro"
show=".sizing"
hide=".sizing">
<span class="sizing" hidden
><i
class="height:16px"
src="/assets/svg/plus.svg"></i
></span>
<span class="sizing"
><i
class="height:16px"
src="/assets/svg/minus.svg"></i
></span>
<span>Layout</span>
</div>
<div class="sizing padding-bottom:20px">
<div class="margin:5px">
<span>Visibility</span>
<div class="display:flex">
<div
class="card background:gainsboro width:50% text-align:center">
<input
type="radio"
class="display:none"
id="layout-visible"
value="visible" />
<span class="" for="layout-visible"
>Visible</span
>
</div>
<div
class="card background:gainsboro width:50% text-align:center">
<input
type="radio"
class="display:none"
id="layout-hidden"
value="hidden" />
<span class="" for="layout-hidden"
>Hidden</span
>
</div>
</div>
</div>
<div class="margin:5px">
<span>Behaviour</span>
<div class="display:flex">
<div
class="card background:gainsboro width:50% text-align:center">
<input
type="radio"
class="display:none"
id="layout-fill-query="$parent""
value="inherit" />
<span class="" for="layout-fill-query="$parent""
>Fill parent</span
>
</div>
<div
class="card background:gainsboro width:50% text-align:center">
<input
type="radio"
class="display:none"
id="layout-fit-content"
value="none" />
<span class="" for="layout-fit-content"
>Fit content</span
>
</div>
</div>
</div>
<div class="margin:5px">
<span> Vertical Align</span>
<div class="display:flex">
<div
class="card background:gainsboro text-align:center width:20% height:90% padding:10px">
<input
type="radio"
id="stretch"
class="display:none" />
<span class="" for="stretch"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
height="30px">
<path
fill="#000"
fill-rule="nonzero"
d="M15 19H9V6h6v13zM8 6v13H0v1h24v-1h-8V6h8V5H0v1h8z"></path></svg
></span>
</div>
<div
class="card background:gainsboro text-align:center width:20% height:90% padding:10px">
<input
type="radio"
id="verticaltop"
class="display:none" />
<span class="" for="top"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
height="30px">
<path
fill="#000"
fill-rule="nonzero"
d="M18 6H6v13h12V6zM5 6H0V5h24v1h-5v13c0 .6-.4 1-1 1H6a1 1 0 01-1-1V6zm14 6v1H5v-1h14z"></path></svg
></span>
</div>
<div
class="card background:gainsboro text-align:center width:20% height:90% padding:10px">
<input
type="radio"
id="verticalcenter"
class="display:none" />
<span class="" for="center"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
height="30px">
<path
fill="#000"
fill-rule="nonzero"
d="M18 6H6v13h12V6zm1 0v13c0 .6-.4 1-1 1H6a1 1 0 01-1-1V6c0-.6.4-1 1-1h12c.6 0 1 .4 1 1zm5 6v1H0v-1h24z"></path></svg
></span>
</div>
<div
class="card background:gainsboro text-align:center width:20% height:90% padding:10px">
<input
type="radio"
id="verticalbottom"
class="display:none" />
<span class="" for="bottom"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
height="30px">
<path
fill="#000"
fill-rule="nonzero"
d="M18 19H6V6h12v13zM5 19H0v1h24v-1h-5V6c0-.6-.4-1-1-1H6a1 1 0 00-1 1v13zm14-6v-1H5v1h14z"></path></svg
></span>
</div>
<div
class="card background:gainsboro text-align:center width:20% height:90% padding:10px">
<input
type="radio"
id="baseline"
class="display:none" />
<span class="" for="baseline"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
height="30px">
<path
fill="#000"
fill-rule="evenodd"
d="M19 14h1.1a.5.5 0 01.4.8L19 17.3a.5.5 0 01-.8 0l-1.6-2.5a.5.5 0 01.4-.8H18V5.5a.5.5 0 111 0V14zM0 19h24v1H0v-1zM13.4 5l.1 2.9h-.3l-.2-1c-.2-.4-.5-.7-.8-.8-.3-.2-.7-.3-1.2-.3H9.4V15c0 .8 0 1.2.2 1.4.2.3.6.4 1 .4h.4v.3H6v-.3h.4c.5 0 .9-.2 1-.5.2-.2.3-.6.3-1.3V6H5c-.4.2-.6.4-.8.7-.2.3-.4.7-.4 1.3h-.4L3.7 5h9.7z"></path></svg
></span>
</div>
</div>
</div>
<div class="margin:0_5px">
<input
id="order"
class="floating-label z-index:0"
placeholder="Order:"
attribute="classstyle"
attribute-property="order"
state_id="builder"
attribute-query="iframe; *"
array=""
object=""
crud="false"
save="false"
read="false"
active />
</div>
</div>
<!--Spacing -->
<div
class="padding:5px background:gainsboro"
show=".spacing"
hide=".spacing">
<span class="spacing" hidden
><i
class="height:16px"
src="/assets/svg/plus.svg"></i
></span>
<span class="spacing"
><i
class="height:16px"
src="/assets/svg/minus.svg"></i
></span>
<span>Spacing</span>
</div>
<div class="spacing padding-bottom:20px">
<div class="display:flex height:50px">
<div class="width:50% margin:0_5px">
<input
id="margin-left"
class="floating-label z-index:0"
placeholder="margin-left:"
attribute="classstyle"
attribute-property="margin-left"
state_id="builder"
attribute-query="iframe; *"
array=""
object=""
crud="false"
save="false"
read="false"
active />
<div
class="position:relative width:40px top:-32px right:8px float:right cursor:pointer">
<cocreate-select
id="margin-left-unit"
class="styleunit remove-none border:none padding:0 min-height:24px!important background:#eee"
state_id="builder"
array=""
object=""
crud="false"
save="false"
read="false"
attribute="attribute-unit"
attribute-query="#margin-left">
<ul
class="options overflow:auto padding:0px z-index:7"
array="modules"
filter-query-value="5ff747727005da1c27274193"
filter-query-key="_id.$eq"
key="units"
render-query="[template]">
<cc-option
class="margin:0px padding:3px border-radius:4px"
template
value="{{units}}"
><span value="{{units}}"
>{{units}}</span
></cc-option
>
</ul>
</cocreate-select>
</div>
</div>
<div class="width:50% margin:0_5px">
<input
id="margin-right"
class="floating-label z-index:0"
placeholder="margin-right:"
attribute="classstyle"
attribute-property="margin-right"
state_id="builder"
attribute-query="iframe; *"
array=""
object=""
crud="false"
save="false"
read="false"
active />
<div
class="position:relative width:40px top:-32px right:8px float:right cursor:pointer">
<cocreate-select
id="margin-right-unit"
class="styleunit remove-none border:none padding:0 min-height:24px!important background:#eee"
state_id="builder"
array=""
object=""
crud="false"
save="false"
read="false"
attribute="attribute-unit"
attribute-query="#margin-right">
<ul
class="options overflow:auto padding:0px z-index:7"
array="modules"
filter-query-value="5ff747727005da1c27274193"
filter-query-key="_id.$eq"
key="units"
render-query="[template]">
<cc-option
class="margin:0px padding:3px border-radius:4px"
template
value="{{units}}"
><span value="{{units}}"
>{{units}}</span
></cc-option
>
</ul>
</cocreate-select>
</div>
</div>
</div>
<div class="display:flex height:50px">
<div class="width:50% margin:0_5px">
<input
id="margin-top"
class="floating-label z-index:0"
placeholder="margin-top:"
attribute="classstyle"
attribute-property="margin-top"
state_id="builder"
attribute-query="iframe; *"
array=""
object=""
crud="false"
save="false"
read="false"
active />
<div
class="position:relative width:40px top:-32px right:8px float:right cursor:pointer">
<cocreate-select
id="margin-top-unit"
class="styleunit remove-none border:none padding:0 min-height:24px!important background:#eee"
state_id="builder"
array=""
object=""
crud="false"
save="false"
read="false"
attribute="attribute-unit"
attribute-query="#margin-top">
<ul
class="options overflow:auto padding:0px z-index:7"
array="modules"
filter-query-value="5ff747727005da1c27274193"
filter-query-key="_id.$eq"
key="units"
render-query="[template]">
<cc-option
class="margin:0px padding:3px border-radius:4px"
template
value="{{units}}"
><span value="{{units}}"
>{{units}}</span
></cc-option
>
</ul>
</cocreate-select>
</div>
</div>
<div class="width:50% margin:0_5px">
<input
id="margin-bottom"
class="floating-label z-index:0"
placeholder="margin-bottom:"
attribute="classstyle"
attribute-property="margin-bottom"
state_id="builder"
attribute-query="iframe; *"
array=""
object=""
crud="false"
save="false"
read="false"
active />
<div
class="position:relative width:40px top:-32px right:8px float:right cursor:pointer">
<cocreate-select
id="margin-bottom-unit"
class="styleunit remove-none border:none padding:0 min-height:24px!important background:#eee"
state_id="builder"
array=""
object=""
crud="false"
save="false"
read="false"
attribute="attribute-unit"
attribute-query="#margin-bottom">
<ul
class="options overflow:auto padding:0px z-index:7"
array="modules"
filter-query-value="5ff747727005da1c27274193"
filter-query-key="_id.$eq"
key="units"
render-query="[template]">
<cc-option
class="margin:0px padding:3px border-radius:4px"
template
value="{{units}}"
><span value="{{units}}"
>{{units}}</span
></cc-option
>
</ul>
</cocreate-select>
</div>
</div>
</div>
<div class="display:flex height:50px">
<div class="width:50% margin:0_5px">
<input
id="padding-left"
class="floating-label z-index:0"
placeholder="padding-left:"
attribute="classstyle"
attribute-property="padding-left"
state_id="builder"
attribute-query="iframe; *"
array=""
object=""
crud="false"
save="false"
read="false"
active />
<div
class="position:relative width:40px top:-32px right:8px float:right cursor:pointer">
<cocreate-select
id="padding-left-unit"
class="styleunit remove-none border:none padding:0 min-height:24px!important background:#eee"
state_id="builder"
array=""
object=""
crud="false"
save="false"
read="false"
attribute="attribute-unit"
attribute-query="#padding-left">
<ul
class="options overflow:auto padding:0px z-index:7"
array="modules"
filter-query-value="5ff747727005da1c27274193"
filter-query-key="_id.$eq"
key="units"
render-query="[template]">
<cc-option
class="margin:0px padding:3px border-radius:4px"
template
value="{{units}}"
><span value="{{units}}"
>{{units}}</span
></cc-option
>
</ul>
</cocreate-select>
</div>
</div>
<div class="width:50% margin:0_5px">
<input
id="padding-right"
class="floating-label z-index:0"
placeholder="padding-right:"
attribute="classstyle"
attribute-property="padding-right"
state_id="builder"
attribute-query="iframe; *"
array=""
object=""
crud="false"
save="false"
read="false"
active />
<div
class="position:relative width:40px top:-32px right:8px float:right cursor:pointer">
<cocreate-select
id="padding-right-unit"
class="styleunit remove-none border:none padding:0 min-height:24px!important background:#eee"
state_id="builder"
array=""
object=""
crud="false"
save="false"
read="false"
attribute="attribute-unit"
attribute-query="#padding-right">
<ul
class="options overflow:auto padding:0px z-index:7"
array="modules"
filter-query-value="5ff747727005da1c27274193"
filter-query-key="_id.$eq"
key="units"
render-query="[template]">
<cc-option
class="margin:0px padding:3px border-radius:4px"
template
value="{{units}}"
><span value="{{units}}"
>{{units}}</span
></cc-option
>
</ul>
</cocreate-select>
</div>
</div>
</div>
<div class="display:flex height:50px">
<div class="width:50% margin:0_5px">
<input
id="padding-top"
class="floating-label z-index:0"
placeholder="padding-top:"
attribute="classstyle"
attribute-property="padding-top"
state_id="builder"
attribute-query="iframe; *"
array=""
object=""
crud="false"
save="false"
read="false"
active />
<div
class="position:relative width:40px top:-32px right:8px float:right cursor:pointer">
<cocreate-select
id="padding-top-unit"
class="styleunit remove-none border:none padding:0 min-height:24px!important background:#eee"
state_id="builder"
array=""
object=""
crud="false"
save="false"
read="false"
attribute="attribute-unit"
attribute-query="#padding-top">
<ul
class="options overflow:auto padding:0px z-index:7"
array="modules"
filter-query-value="5ff747727005da1c27274193"
filter-query-key="_id.$eq"
key="units"
render-query="[template]">
<cc-option
class="margin:0px padding:3px border-radius:4px"
template
value="{{units}}"
><span value="{{units}}"
>{{units}}</span
></cc-option
>
</ul>
</cocreate-select>
</div>
</div>
<div class="width:50% margin:0_5px">
<input
id="padding-bottom"
class="floating-label z-index:0"
placeholder="padding-bottom:"
attribute="classstyle"
attribute-property="padding-bottom"
state_id="builder"
attribute-query="iframe; *"
array=""
object=""
crud="false"
save="false"
read="false"
active />
<div
class="position:relative width:40px top:-32px right:8px float:right cursor:pointer">
<cocreate-select
id="padding-bottom-unit"
class="styleunit remove-none border:none padding:0 min-height:24px!important background:#eee"
state_id="builder"
array=""
object=""
crud="false"
save="false"
read="false"
attribute="attribute-unit"
attribute-query="#padding-bottom">
<ul
class="options overflow:auto padding:0px z-index:7"
array="modules"
filter-query-value="5ff747727005da1c27274193"
filter-query-key="_id.$eq"
key="units"
render-query="[template]">
<cc-option
class="margin:0px padding:3px border-radius:4px"
template
value="{{units}}"
><span value="{{units}}"
>{{units}}</span
></cc-option
>
</ul>
</cocreate-select>
</div>
</div>
</div>
</div>
<!--Size -->
<div
class="padding:5px background:gainsboro"
show=".size"
hide=".size">
<span class="size" hidden
><i
class="height:16px"
src="/assets/svg/plus.svg"></i
></span>
<span class="size"
><i
class="height:16px"
src="/assets/svg/minus.svg"></i
></span>
<span>Size</span>
</div>
<div class="size padding-bottom:20px">
<div class="display:flex height:50px">
<div class="width:50% margin:0_5px">
<input
id="width"
class="floating-label z-index:0"
placeholder="width:"
attribute="classstyle"
attribute-property="width"
state_id="builder"
attribute-query="iframe; *"
array=""
object=""
crud="false"
save="false"
read="false"
active />
<div
class="position:relative width:40px top:-32px right:8px float:right cursor:pointer">
<cocreate-select
id="width-unit"
class="styleunit remove-none border:none padding:0 min-height:24px!important background:#eee"
state_id="builder"
array=""
object=""
crud="false"
save="false"
read="false"
attribute="attribute-unit"
attribute-query="#width">
<ul
class="options overflow:auto padding:0px z-index:7"
array="modules"
filter-query-value="5ff747727005da1c27274193"
filter-query-key="_id.$eq"
key="units"
render-query="[template]">
<cc-option
class="margin:0px padding:3px border-radius:4px"
template
value="{{units}}"
><span value="{{units}}"
>{{units}}</span
></cc-option
>
</ul>
</cocreate-select>
</div>
</div>
<div class="width:50% margin:0_5px">
<input
id="height"
class="floating-label z-index:0"
placeholder="height:"
attribute="classstyle"
attribute-property="height"
state_id="builder"
attribute-query="iframe; *"
array=""
object=""
crud="false"
save="false"
read="false"
active />
<div
class="position:relative width:40px top:-32px right:8px float:right cursor:pointer">
<cocreate-select
id="height-unit"
class="styleunit remove-none border:none padding:0 min-height:24px!important background:#eee"
state_id="builder"
array=""
object=""
crud="false"
save="false"
read="false"
attribute="attribute-unit"
attribute-query="#height">
<ul
class="options overflow:auto padding:0px z-index:7"
array="modules"
filter-query-value="5ff747727005da1c27274193"
filter-query-key="_id.$eq"
key="units"
render-query="[template]">
<cc-option
class="margin:0px padding:3px border-radius:4px"
template
value="{{units}}"
><span value="{{units}}"
>{{units}}</span
></cc-option
>
</ul>
</cocreate-select>
</div>
</div>
</div>
<div class="display:flex height:50px">
<div class="width:50% margin:0_5px">
<input
id="min-width"
class="floating-label z-index:0"
placeholder="min-width:"
attribute="classstyle"
attribute-property="min-width"
state_id="builder"
attribute-query="iframe; *"
array=""
object=""
crud="false"
save="false"
read="false"
active />
<div
class="position:relative width:40px top:-29px right:8px float:right cursor:pointer">
<cocreate-select
id="min-width-unit"
class="styleunit remove-none border:none padding:0 min-height:18px!important background:#eee"
attribute="attribute-unit"
attribute-query="#min-width">
<ul
class="options overflow:auto padding:0px z-index:7"
array="modules"
filter-query-value="5ff747727005da1c27274193"
filter-query-key="_id.$eq"
key="units"
render-query="[template]">
<cc-option
class="margin:0px padding:3px border-radius:4px"
template
value="{{units}}"
><span value="{{units}}"
>{{units}}</span
></cc-option
>
</ul>
</cocreate-select>
</div>
</div>
<div class="width:50% margin:0_5px">
<input
id="min-height"
class="floating-label z-index:0"
placeholder="min-height:"
attribute="classstyle"
attribute-property="min-height"
state_id="builder"
attribute-query="iframe; *"
array=""
object=""
crud="false"
save="false"
read="false"
active />
<div
class="position:relative width:40px top:-32px right:8px float:right cursor:pointer">
<cocreate-select
id="min-height-unit"
class="styleunit remove-none border:none padding:0 min-height:24px!important background:#eee"
state_id="builder"
array=""
object=""
crud="false"
save="false"
read="false"
attribute="attribute-unit"
attribute-query="#min-height">
<ul
class="options overflow:auto padding:0px z-index:7"
array="modules"
filter-query-value="5ff747727005da1c27274193"
filter-query-key="_id.$eq"
key="units"
render-query="[template]">
<cc-option
class="margin:0px padding:3px border-radius:4px"
template
value="{{units}}"
><span value="{{units}}"
>{{units}}</span
></cc-option
>
</ul>
</cocreate-select>
</div>
</div>
</div>
<div class="display:flex height:50px">
<div class="width:50% margin:0_5px">
<input
id="max-width"
class="floating-label z-index:0"
placeholder="max-width:"
attribute="classstyle"
attribute-property="max-width"
state_id="builder"
attribute-query="iframe; *"
array=""
object=""
crud="false"
save="false"
read="false"
active />
<div
class="position:relative width:40px top:-32px right:8px float:right cursor:pointer">
<cocreate-select
id="max-width-unit"
class="styleunit remove-none border:none padding:0 min-height:24px!important background:#eee"
state_id="builder"
array=""
object=""
crud="false"
save="false"
read="false"
attribute="attribute-unit"
attribute-query="#max-width">
<ul
class="options overflow:auto padding:0px z-index:7"
array="modules"
filter-query-value="5ff747727005da1c27274193"
filter-query-key="_id.$eq"
key="units"
render-query="[template]">
<cc-option
class="margin:0px padding:3px border-radius:4px"
template
value="{{units}}"
><span value="{{units}}"
>{{units}}</span
></cc-option
>
</ul>
</cocreate-select>
</div>
</div>
<div class="width:50% margin:0_5px">
<input
id="max-height"
class="floating-label z-index:0"
placeholder="max-height:"
attribute="classstyle"
attribute-property="max-height"
state_id="builder"
attribute-query="iframe; *"
array=""
object=""
crud="false"
save="false"
read="false"
active />
<div
class="position:relative width:40px top:-32px right:8px float:right cursor:pointer">
<cocreate-select
id="max-height-unit"
class="styleunit remove-none border:none padding:0 min-height:24px!important background:#eee"
state_id="builder"
array=""
object=""
crud="false"
save="false"
read="false"
attribute="attribute-unit"
attribute-query="#max-height">
<ul
class="options overflow:auto padding:0px z-index:7"
array="modules"
filter-query-value="5ff747727005da1c27274193"
filter-query-key="_id.$eq"
key="units"
render-query="[template]">
<cc-option
class="margin:0px padding:3px border-radius:4px"
template
value="{{units}}"
><span value="{{units}}"
>{{units}}</span
></cc-option
>
</ul>
</cocreate-select>
</div>
</div>
</div>
</div>
<!--Position -->
<div
class="padding:5px background:gainsboro"
show=".position"
hide=".position">
<span class="position" hidden
><i
class="height:16px"
src="/assets/svg/plus.svg"></i
></span>
<span class="position"
><i
class="height:16px"
src="/assets/svg/minus.svg"></i
></span>
<span>Position</span>
</div>
<div class="position padding-bottom:20px">
<div class="display:flex height:50px">
<div class="width:50% margin:0_5px">
<input
id="top"
class="floating-label z-index:0"
placeholder="top:"
attribute="classstyle"
attribute-property="top"
state_id="builder"
attribute-query="iframe; *"
array=""
object=""
crud="false"
save="false"
read="false"
active />
<div
class="position:relative width:40px top:-32px right:8px float:right cursor:pointer">
<cocreate-select
id="top-unit"
class="styleunit remove-none border:none padding:0 min-height:24px!important background:#eee"
state_id="builder"
array=""
object=""
crud="false"
save="false"
read="false"
attribute="attribute-unit"
attribute-query="#top">
<ul
class="options overflow:auto padding:0px z-index:7"
array="modules"
filter-query-value="5ff747727005da1c27274193"
filter-query-key="_id.$eq"
key="units"
render-query="[template]">
<cc-option
class="margin:0px padding:3px border-radius:4px"
template
value="{{units}}"
><span value="{{units}}"
>{{units}}</span
></cc-option
>
</ul>
</cocreate-select>
</div>
</div>
<div class="width:50% margin:0_5px">
<input
id="bottom"
class="floating-label z-index:0"
placeholder="bottom:"
attribute="classstyle"
attribute-property="bottom"
state_id="builder"
attribute-query="iframe; *"
array=""
object=""
crud="false"
save="false"
read="false"
active />
<div
class="position:relative width:40px top:-32px right:8px float:right cursor:pointer">
<cocreate-select
id="bottom-unit"
class="styleunit remove-none border:none padding:0 min-height:24px!important background:#eee"
state_id="builder"
array=""
object=""
crud="false"
save="false"
read="false"
attribute="attribute-unit"
attribute-query="#bottom">
<ul
class="options overflow:auto padding:0px z-index:7"
array="modules"
filter-query-value="5ff747727005da1c27274193"
filter-query-key="_id.$eq"
key="units"
render-query="[template]">
<cc-option
class="margin:0px padding:3px border-radius:4px"
template
value="{{units}}"
><span value="{{units}}"
>{{units}}</span
></cc-option
>
</ul>
</cocreate-select>
</div>
</div>
</div>
<div class="display:flex height:50px">
<div class="width:50% margin:0_5px">
<input
id="left"
class="floating-label z-index:0"
placeholder="left:"
attribute="classstyle"
attribute-property="left"
state_id="builder"
attribute-query="iframe; *"
array=""
object=""
crud="false"
save="false"
read="false"
active />
<div
class="position:relative width:40px top:-32px right:8px float:right cursor:pointer">
<cocreate-select
id="left-unit"
class="styleunit remove-none border:none padding:0 min-height:24px!important background:#eee"
state_id="builder"
array=""
object=""
crud="false"
save="false"
read="false"
attribute="attribute-unit"
attribute-query="#left">
<ul
class="options overflow:auto padding:0px z-index:7"
array="modules"
filter-query-value="5ff747727005da1c27274193"
filter-query-key="_id.$eq"
key="units"
render-query="[template]">
<cc-option
class="margin:0px padding:3px border-radius:4px"
template
value="{{units}}"
><span value="{{units}}"
>{{units}}</span
></cc-option
>
</ul>
</cocreate-select>
</div>
</div>
<div class="width:50% margin:0_5px">
<input
id="right"
class="floating-label z-index:0"
placeholder="right:"
attribute="classstyle"
attribute-property="right"
state_id="builder"
attribute-query="iframe; *"
array=""
object=""
crud="false"
save="false"
read="false"
active />
<div
class="position:relative width:40px top:-32px right:8px float:right cursor:pointer">
<cocreate-select
id="right-unit"
class="styleunit remove-none border:none padding:0 min-height:24px!important background:#eee"
state_id="builder"
array=""
object=""
crud="false"
save="false"
read="false"
attribute="attribute-unit"
attribute-query="#right">
<ul
class="options overflow:auto padding:0px z-index:7"
array="modules"
filter-query-value="5ff747727005da1c27274193"
filter-query-key="_id.$eq"
key="units"
render-query="[template]">
<cc-option
template
value="{{units}}"
><span value="{{units}}"
>{{units}}</span
></cc-option
>
</ul>
</cocreate-select>
</div>
</div>
</div>
</div>
<!--typography -->
<div
class="padding:5px background:gainsboro"
show=".typography"
hide=".typography">
<span class="typography" hidden
><i
class="height:16px"
src="/assets/svg/plus.svg"></i
></span>
<span class="typography"
><i
class="height:16px"
src="/assets/svg/minus.svg"></i
></span>
<span>Typography</span>
</div>
<div class="typography padding-bottom:20px">
<div class="margin:0_5px">
<cocreate-select
class="floating-label"
id="font-family"
placeholder="font-family:"
attribute="classstyle"
attribute-property="font-family"
state_id="builder"
attribute-query="iframe; *"
array=""
object=""
crud="false"
save="false"
read="false"
active>
<input
placeholder="Search"
search-query=".option" />
<ul class="options z-index:7">
<cc-option value="none"
><span>none</span></cc-option
>
<cc-option value="arial"
><span>Arial</span></cc-option
>
<cc-option value="arialblack"
><span>Arial Black</span></cc-option
>
<cc-option value="brushscriptmt"
><span>Brush Script MT</span></cc-option
>
<cc-option value="comicsansms"
><span>Comic Sans MS</span></cc-option
>
<cc-option value="couriernew"
><span>Courier New</span></cc-option
>
<cc-option value="georgia"
><span>Georgia</span></cc-option
>
<cc-option value="helvetica"
><span>Helvetica</span></cc-option
>
<cc-option value="lucidasansunicode"
><span
>Lucida Sans Unicode</span
></cc-option
>
<cc-option value="tahoma"
><span>Tahoma</span></cc-option
>
<cc-option value="trebuchetms"
><span>Trebuchet MS</span></cc-option
>
<cc-option value="impact"
><span>Impact</span></cc-option
>
<cc-option value="verdana"
><span>Verdana</span></cc-option
>
</ul>
</cocreate-select>
</div>
<div class="display:flex height:50px">
<div class="width:50% margin:0_5px">
<input
id="font-size"
class="floating-label z-index:0"
placeholder="font-size:"
attribute="classstyle"
attribute-property="font-size"
state_id="builder"
attribute-query="iframe; *"
array=""
object=""
crud="false"
save="false"
read="false"
active />
<div
class="position:relative width:40px top:-32px right:8px float:right cursor:pointer">
<cocreate-select
id="font-size-unit"
class="styleunit remove-none border:none padding:0 min-height:24px!important background:#eee"
state_id="builder"
array=""
object=""
crud="false"
save="false"
read="false"
attribute="attribute-unit"
attribute-query="#font-size">
<ul
class="options overflow:auto padding:0px z-index:7"
array="modules"
filter-query-value="5ff747727005da1c27274193"
filter-query-key="_id.$eq"
key="units"
render-query="[template]">
<cc-option
class="margin:0px padding:3px border-radius:4px"
template
value="{{units}}"
><span value="{{units}}"
>{{units}}</span
></cc-option
>
</ul>
</cocreate-select>
</div>
</div>
<div class="width:50% margin:0_5px">
<input
type="number"
id="font-weight"
class="floating-label z-index:0"
placeholder="font-weight:"
step="100"
attribute="classstyle"
attribute-property="font-weight"
state_id="builder"
attribute-query="iframe; *"
array=""
object=""
crud="false"
save="false"
read="false"
active />
</div>
</div>
<div class="margin:0_5px">
<div
class="floating-label"
placeholder="color"
active>
<div
id="color"
class="color-picker"
attribute="classstyle"
attribute-property="color"
state_id="builder"
array=""
object=""
crud="false"
save="false"
read="false"
key="color"></div>
</div>
</div>
<div class="margin:0_5px">
<cocreate-select
id="text-align"
class="floating-label"
placeholder="text-align:"
attribute="classstyle"
attribute-property="text-align"
state_id="builder"
attribute-query="iframe; *"
array=""
object=""
crud="false"
save="false"
read="false"
active>
<ul class="options z-index:7 margin-top:5px">
<cc-option value="left">
<i
class="height:16px"
src="/assets/svg/align-left.svg"></i>
</cc-option>
<cc-option value="center">
<i
class="height:16px"
src="/assets/svg/align-center.svg"></i>
</cc-option>
<cc-option value="right">
<i
class="height:16px"
src="/assets/svg/align-right.svg"></i>
</cc-option>
<cc-option value="justify">
<i
class="height:16px"
src="/assets/svg/align-justify.svg"></i>
</cc-option>
</ul>
</cocreate-select>
</div>
<div class="margin:0_5px">
<cocreate-select
id="text-decoration"
class="floating-label"
placeholder="text-decoration:"
attribute="classstyle"
attribute-property="text-decoration"
state_id="builder"
attribute-query="iframe; *"
array=""
object=""
crud="false"
save="false"
read="false"
active>
<ul class="options z-index:7 margin-top:5px">
<cc-option value="x">
<i
class="height:16px"
src="/assets/svg/times.svg"></i>
</cc-option>
<cc-option value="u">
<i
class="height:16px"
src="/assets/svg/underline.svg"></i>
</cc-option>
<cc-option value="s">
<i
class="height:16px"
src="/assets/svg/strikethrough.svg"></i>
</cc-option>
</ul>
</cocreate-select>
</div>
<div class="margin:0_5px">
<cocreate-select
class="remove-none floating-label"
placeholder="font-style:"
attribute="classstyle"
attribute-property="font-style"
state_id="builder"
attribute-query="iframe; *"
array=""
object=""
crud="false"
save="false"
read="false"
active>
<ul class="options z-index:7 margin-top:5px">
<cc-option value="a">
<i
class="height:16px"
src="/assets/svg/font.svg"></i>
</cc-option>
<cc-option value="em">
<i
class="height:16px"
src="/assets/svg/italic.svg"></i>
</cc-option>
</ul>
</cocreate-select>
</div>
</div>
<!--Border -->
<div
class="padding:5px background:gainsboro"
show=".border"
hide=".border">
<span class="border" hidden
><i
class="height:16px"
src="/assets/svg/plus.svg"></i
></span>
<span class="border"
><i
class="height:16px"
src="/assets/svg/minus.svg"></i
></span>
<span>Border</span>
</div>
<div class="border padding-bottom:20px">
<div class="display:flex height:50px">
<div class="width:50% margin:0_5px">
<input
id="border-width"
class="floating-label z-index:0"
placeholder="border-width:"
attribute="classstyle"
attribute-property="border-width"
state_id="builder"
attribute-query="iframe; *"
array=""
object=""
crud="false"
save="false"
read="false"
active />
<div
class="position:relative width:40px top:-32px right:8px float:right cursor:pointer">
<cocreate-select
id="border-width-unit"
class="styleunit remove-none border:none padding:0 min-height:24px!important background:#eee"
state_id="builder"
array=""
object=""
crud="false"
save="false"
read="false"
attribute="attribute-unit"
attribute-query="border-width">
<ul
class="options overflow:auto padding:0px z-index:7"
array="modules"
filter-query-value="5ff747727005da1c27274193"
filter-query-key="_id.$eq"
key="units"
render-query="[template]">
<cc-option
class="margin:0px padding:3px border-radius:4px"
template
value="{{units}}"
><span value="{{units}}"
>{{units}}</span
></cc-option
>
</ul>
</cocreate-select>
</div>
</div>
<div class="width:50% margin:0_5px">
<cocreate-select
class="floating-label"
id="border-style"
placeholder="border-style:"
attribute="classstyle"
attribute-property="border-style"
state_id="builder"
attribute-query="iframe; *"
array=""
object=""
crud="false"
save="false"
read="false"
active>
<ul
class="options z-index:7 margin-top:5px">
<cc-option value="none"
><span>none</span></cc-option
>
<cc-option value="solid"
><span>solid</span></cc-option
>
<cc-option value="dotted"
><span>dotted</span></cc-option
>
<cc-option value="dashed"
><span>dashed</span></cc-option
>
<cc-option value="double"
><span>double</span></cc-option
>
<cc-option value="groove"
><span>groove</span></cc-option
>
<cc-option value="ridge"
><span>ridge</span></cc-option
>
<cc-option value="inset"
><span>inset</span></cc-option
>
<cc-option value="outset"
><span>outset</span></cc-option
>
</ul>
</cocreate-select>
</div>
</div>
<div class="margin:0_5px">
<div
class="floating-label"
placeholder="border-color"
active>
<div
id="border-color"
class="color-picker"
attribute="classstyle"
attribute-property="border-color"
state_id="builder"
array=""
object=""
crud="false"
save="false"
read="false"
key="border-color"></div>
</div>
</div>
<div class="margin:0_5px">
<input
id="border-radius"
class="floating-label z-index:0"
placeholder="border-radius:"
step="100"
attribute="classstyle"
attribute-property="border-radius"
state_id="builder"
attribute-query="iframe; *"
array=""
object=""
crud="false"
save="false"
read="false"
active />
<div
class="position:relative width:40px top:-32px right:8px float:right cursor:pointer">
<cocreate-select
id="border-radius-unit"
class="styleunit remove-none border:none padding:0 min-height:24px!important background:#eee"
state_id="builder"
array=""
object=""
crud="false"
save="false"
read="false"
attribute="attribute-unit"
att