diff --git a/formwidgets/blocks/assets/css/blocks.css b/formwidgets/blocks/assets/css/blocks.css index d6cfa05..69ac2b8 100644 --- a/formwidgets/blocks/assets/css/blocks.css +++ b/formwidgets/blocks/assets/css/blocks.css @@ -1 +1 @@ -.field-blocks{padding-top:5px}.field-blocks .field-repeater-items{counter-reset:repeater-index-counter}.field-blocks li.field-repeater-item,.field-blocks ul.field-repeater-items{list-style:none;margin:0;padding:0}.field-blocks ul.field-repeater-items>li.dragged{background-color:#f9f9f9;border:1px dashed #dbdee0;opacity:.7;padding-right:15px;padding-top:15px;position:absolute;z-index:2000}.field-blocks ul.field-repeater-items>li.dragged .repeater-item-remove{opacity:0}.field-blocks ul.field-repeater-items>li.dragged .repeater-item-collapsed-title{top:5px}.field-blocks ul.field-repeater-items>li.placeholder{display:block;height:25px;margin-bottom:5px;position:relative}.field-blocks ul.field-repeater-items>li.placeholder:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:#d35714;content:"\f054";display:block;font-family:Font Awesome\ 6 Free;font-style:normal;font-variant:normal;font-weight:900;left:-10px;position:absolute;text-rendering:auto;top:8px;z-index:2000}.field-blocks li.field-repeater-item{background:#f9f9f9;border:1px solid #d1d6d9;border-radius:3px;margin:0 0 1em!important;min-height:30px;padding:3.5em 1.25em 0!important;position:relative}.field-blocks li.field-repeater-item.collapsed,.field-blocks li.field-repeater-item.empty{padding:0!important}.field-blocks li.field-repeater-item.collapsed .field-repeater-form,.field-blocks li.field-repeater-item.empty .field-repeater-form{display:none}.field-blocks li.field-repeater-item.collapsed .repeater-item-collapse .repeater-item-collapse-one,.field-blocks li.field-repeater-item.empty .repeater-item-collapse .repeater-item-collapse-one{transform:rotate(180deg)}.field-blocks li.field-repeater-item.collapsed .repeater-item-title,.field-blocks li.field-repeater-item.empty .repeater-item-title{border-bottom:none;border-bottom-left-radius:3px;border-bottom-right-radius:0;display:inline-block;height:100%}.field-blocks li.field-repeater-item.collapsed>.repeater-item-collapse,.field-blocks li.field-repeater-item.collapsed>.repeater-item-remove,.field-blocks li.field-repeater-item.empty>.repeater-item-collapse,.field-blocks li.field-repeater-item.empty>.repeater-item-remove{opacity:1}.field-blocks li.field-repeater-item .repeater-item-collapse{opacity:0;position:absolute;right:30px;top:5px;transition:opacity .5s;z-index:90}.field-blocks li.field-repeater-item .repeater-item-collapse a,.field-blocks li.field-repeater-item .repeater-item-collapse button{color:#bdc3c7;display:block;font-size:12px;line-height:20px;transition:transform .3s}.field-blocks li.field-repeater-item .repeater-item-collapse a:focus,.field-blocks li.field-repeater-item .repeater-item-collapse a:hover,.field-blocks li.field-repeater-item .repeater-item-collapse button:focus,.field-blocks li.field-repeater-item .repeater-item-collapse button:hover{color:#999;text-decoration:none}.field-blocks li.field-repeater-item .repeater-item-remove{opacity:0;position:absolute;right:5px;top:4px;transition:opacity .5s;z-index:90}.field-blocks li.field-repeater-item .repeater-item-remove.disabled{display:none}.field-blocks li.field-repeater-item .repeater-item-remove.disabled+.repeater-item-collapse{right:7px}.field-blocks li.field-repeater-item .repeater-item-remove .close{display:inline-block;float:none}.field-blocks li.field-repeater-item .block-config{color:#bdc3c7;display:block;font-size:12px;line-height:20px;opacity:0;position:absolute;right:60px;top:4px;transition:opacity .5s;z-index:90}.field-blocks li.field-repeater-item .block-config.inspector-open,.field-blocks li.field-repeater-item .block-config:focus,.field-blocks li.field-repeater-item .block-config:hover{color:#999;text-decoration:none}.field-blocks li.field-repeater-item .repeater-item-collapse,.field-blocks li.field-repeater-item .repeater-item-remove{height:20px;text-align:center;width:20px}.field-blocks li.field-repeater-item .repeater-item-collapse>a,.field-blocks li.field-repeater-item .repeater-item-collapse>button,.field-blocks li.field-repeater-item .repeater-item-remove>a,.field-blocks li.field-repeater-item .repeater-item-remove>button{outline:none}.field-blocks li.field-repeater-item .repeater-item-title{background:#fff;border-bottom:1px solid #d1d6d9;border-bottom-right-radius:3px;border-right:1px solid #d1d6d9;border-top-left-radius:3px;color:rgba(56,84,135,.5);font-size:13px;left:0;padding:4px 8px;position:absolute;top:0}.field-blocks li.field-repeater-item .repeater-item-title>.icon{margin-right:4px}.field-blocks li.field-repeater-item .repeater-item-handle{cursor:move}.field-blocks li.field-repeater-item.hover{border:1px solid #999}.field-blocks li.field-repeater-item.hover>.repeater-item-title{border-color:#999;color:#999}.field-blocks li.field-repeater-item.focus{border:1px solid #4ea5e0!important}.field-blocks li.field-repeater-item.focus>.repeater-item-title{border-color:#4ea5e0!important;color:#4ea5e0!important}.field-blocks li.field-repeater-item.focus>.block-config,.field-blocks li.field-repeater-item.focus>.repeater-item-collapse,.field-blocks li.field-repeater-item.focus>.repeater-item-handle,.field-blocks li.field-repeater-item.focus>.repeater-item-remove,.field-blocks li.field-repeater-item.hover>.block-config,.field-blocks li.field-repeater-item.hover>.repeater-item-collapse,.field-blocks li.field-repeater-item.hover>.repeater-item-handle,.field-blocks li.field-repeater-item.hover>.repeater-item-remove{opacity:1}@media (hover:none){.field-blocks li.field-repeater-item>.block-config,.field-blocks li.field-repeater-item>.repeater-item-collapse,.field-blocks li.field-repeater-item>.repeater-item-handle,.field-blocks li.field-repeater-item>.repeater-item-remove{opacity:1!important}}.field-blocks li.field-repeater-item .field-repeater-form{position:relative;top:-7px}.field-blocks li.field-repeater-item .field-repeater-form:after,.field-blocks li.field-repeater-item .field-repeater-form:before{content:" ";display:table}.field-blocks li.field-repeater-item .field-repeater-form:after{clear:both}.field-blocks li.field-repeater-item .field-repeater-form .form-group.span-left,.field-blocks li.field-repeater-item .field-repeater-form .form-group.span-right{width:49.5%}.field-blocks .field-repeater-add-item{margin-top:10px;position:relative}.field-blocks .field-repeater-add-item>a{border:1px dashed #bdc3c7;border-radius:5px;color:#bdc3c7;display:block;font-size:12px;font-weight:600;outline:none;padding:13px 15px;text-align:center;text-decoration:none;text-transform:uppercase;transition:border-color .5s,color .5s}.field-blocks .field-repeater-add-item>a:focus,.field-blocks .field-repeater-add-item>a:hover{border-color:#4ea5e0;color:#4ea5e0}.field-blocks .field-repeater-add-item>a:active{border-color:#3498db;color:#3498db}.field-blocks .field-repeater-add-item.in-progress>a{background:transparent!important;border-color:#e0e0e0!important}.field-blocks[data-mode=grid]{container-type:inline-size}.field-blocks[data-mode=grid] ul.field-repeater-items{display:grid;gap:20px}.field-blocks[data-mode=grid] ul.field-repeater-items .field-repeater-item{margin-bottom:0!important}.field-blocks[data-mode=grid] ul.field-repeater-items .field-repeater-add-item{margin-top:0}.field-blocks[data-mode=grid] ul.field-repeater-items .field-repeater-add-item a{display:flex;flex-direction:column;height:100%;justify-content:center}.field-blocks[data-mode=grid] ul.field-repeater-items .field-repeater-add-item:before{display:none}.field-blocks[data-mode=grid] ul.field-repeater-items .block-config{right:30px}.field-blocks[data-mode=grid][data-columns="2"] ul.field-repeater-items{grid-template-columns:repeat(2,1fr)}.field-blocks[data-mode=grid][data-columns="3"] ul.field-repeater-items{grid-template-columns:repeat(3,1fr)}.field-blocks[data-mode=grid][data-columns="4"] ul.field-repeater-items{grid-template-columns:repeat(4,1fr)}@media (max-width:1600px){.field-blocks[data-mode=grid][data-columns="4"] ul.field-repeater-items{grid-template-columns:repeat(3,1fr)}}.field-blocks[data-mode=grid][data-columns="5"] ul.field-repeater-items{grid-template-columns:repeat(5,1fr)}@media (max-width:1600px){.field-blocks[data-mode=grid][data-columns="5"] ul.field-repeater-items{grid-template-columns:repeat(4,1fr)}}.field-blocks[data-mode=grid][data-columns="6"] ul.field-repeater-items{grid-template-columns:repeat(6,1fr)}@media (max-width:1600px){.field-blocks[data-mode=grid][data-columns="6"] ul.field-repeater-items{grid-template-columns:repeat(4,1fr)}}@media (min-width:768px) and (max-width:1199px){.field-blocks[data-mode=grid][data-columns="3"] ul.field-repeater-items,.field-blocks[data-mode=grid][data-columns="4"] ul.field-repeater-items,.field-blocks[data-mode=grid][data-columns="5"] ul.field-repeater-items,.field-blocks[data-mode=grid][data-columns="6"] ul.field-repeater-items{grid-template-columns:repeat(2,1fr)}}@media (max-width:767px){.field-blocks[data-mode=grid] ul.field-repeater-items{grid-template-columns:1fr!important}.field-blocks[data-mode=grid] ul.field-repeater-items .field-repeater-add-item,.field-blocks[data-mode=grid] ul.field-repeater-items .field-repeater-item{min-height:0!important}.field-blocks[data-mode=grid] ul.field-repeater-items .field-repeater-add-item{margin-top:10px}.field-blocks[data-mode=grid] ul.field-repeater-items .field-repeater-add-item:before{display:block}}@container (width < 800px){[data-columns="2"] ul.field-repeater-items,[data-columns="3"] ul.field-repeater-items,[data-columns="4"] ul.field-repeater-items,[data-columns="5"] ul.field-repeater-items,[data-columns="6"] ul.field-repeater-items{grid-template-columns:1fr!important}}@container (width > 800px) and (width < 1200px){[data-columns="3"] ul.field-repeater-items,[data-columns="4"] ul.field-repeater-items,[data-columns="5"] ul.field-repeater-items,[data-columns="6"] ul.field-repeater-items{grid-template-columns:repeat(2,1fr)!important}}@container (width >= 1200px) and (width < 1600px){[data-columns="4"] ul.field-repeater-items,[data-columns="5"] ul.field-repeater-items,[data-columns="6"] ul.field-repeater-items{grid-template-columns:repeat(3,1fr)!important}} +.field-blocks{padding-top:5px}.field-blocks .field-repeater-items{counter-reset:repeater-index-counter}.field-blocks li.field-repeater-item,.field-blocks ul.field-repeater-items{list-style:none;margin:0;padding:0}.field-blocks ul.field-repeater-items>li.dragged{background-color:#f9f9f9;border:1px dashed #dbdee0;opacity:.7;padding-right:15px;padding-top:15px;position:absolute;z-index:2000}.field-blocks ul.field-repeater-items>li.dragged .repeater-item-remove{opacity:0}.field-blocks ul.field-repeater-items>li.dragged .repeater-item-collapsed-title{top:5px}.field-blocks ul.field-repeater-items>li.placeholder{display:block;height:25px;margin-bottom:5px;position:relative}.field-blocks ul.field-repeater-items>li.placeholder:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:#d35714;content:"\f054";display:block;font-family:Font Awesome\ 6 Free;font-style:normal;font-variant:normal;font-weight:900;left:-10px;position:absolute;text-rendering:auto;top:8px;z-index:2000}.field-blocks li.field-repeater-item{background:#f9f9f9;border:1px solid #d1d6d9;border-radius:3px;margin:0 0 1em!important;min-height:30px;padding:3.5em 1.25em 0!important;position:relative}.field-blocks li.field-repeater-item.collapsed,.field-blocks li.field-repeater-item.empty{padding:0!important}.field-blocks li.field-repeater-item.collapsed .field-repeater-form,.field-blocks li.field-repeater-item.empty .field-repeater-form{display:none}.field-blocks li.field-repeater-item.collapsed .repeater-item-collapse .repeater-item-collapse-one,.field-blocks li.field-repeater-item.empty .repeater-item-collapse .repeater-item-collapse-one{transform:rotate(180deg)}.field-blocks li.field-repeater-item.collapsed .repeater-item-title,.field-blocks li.field-repeater-item.empty .repeater-item-title{border-bottom:none;border-bottom-left-radius:3px;border-bottom-right-radius:0;display:inline-block;height:100%}.field-blocks li.field-repeater-item.collapsed>.repeater-item-collapse,.field-blocks li.field-repeater-item.collapsed>.repeater-item-remove,.field-blocks li.field-repeater-item.empty>.repeater-item-collapse,.field-blocks li.field-repeater-item.empty>.repeater-item-remove{opacity:1}.field-blocks li.field-repeater-item .repeater-item-collapse{opacity:0;position:absolute;right:30px;top:5px;transition:opacity .5s;z-index:90}.field-blocks li.field-repeater-item .repeater-item-collapse a,.field-blocks li.field-repeater-item .repeater-item-collapse button{color:#bdc3c7;display:block;font-size:12px;line-height:20px;transition:transform .3s}.field-blocks li.field-repeater-item .repeater-item-collapse a:focus,.field-blocks li.field-repeater-item .repeater-item-collapse a:hover,.field-blocks li.field-repeater-item .repeater-item-collapse button:focus,.field-blocks li.field-repeater-item .repeater-item-collapse button:hover{color:#999;text-decoration:none}.field-blocks li.field-repeater-item .repeater-item-remove{opacity:0;position:absolute;right:5px;top:4px;transition:opacity .5s;z-index:90}.field-blocks li.field-repeater-item .repeater-item-remove.disabled{display:none}.field-blocks li.field-repeater-item .repeater-item-remove.disabled+.repeater-item-collapse{right:7px}.field-blocks li.field-repeater-item .repeater-item-remove .close{display:inline-block;float:none}.field-blocks li.field-repeater-item .block-config{color:#bdc3c7;display:block;font-size:12px;line-height:20px;opacity:0;position:absolute;right:60px;top:4px;transition:opacity .5s;z-index:90}.field-blocks li.field-repeater-item .block-config.inspector-open,.field-blocks li.field-repeater-item .block-config:focus,.field-blocks li.field-repeater-item .block-config:hover{color:#999;text-decoration:none}.field-blocks li.field-repeater-item .repeater-item-collapse,.field-blocks li.field-repeater-item .repeater-item-remove{height:20px;text-align:center;width:20px}.field-blocks li.field-repeater-item .repeater-item-collapse>a,.field-blocks li.field-repeater-item .repeater-item-collapse>button,.field-blocks li.field-repeater-item .repeater-item-remove>a,.field-blocks li.field-repeater-item .repeater-item-remove>button{outline:none}.field-blocks li.field-repeater-item .repeater-item-collapsed-handle{position:absolute;top:0;inset-inline:0}.field-blocks li.field-repeater-item .repeater-item-title{background:#fff;border-bottom:1px solid #d1d6d9;border-bottom-right-radius:3px;border-right:1px solid #d1d6d9;border-top-left-radius:3px;color:rgba(56,84,135,.5);font-size:13px;left:0;padding:4px 8px;position:absolute;top:0}.field-blocks li.field-repeater-item .repeater-item-title>.icon{margin-right:4px}.field-blocks li.field-repeater-item .repeater-item-handle{cursor:move}.field-blocks li.field-repeater-item.hover{border:1px solid #999}.field-blocks li.field-repeater-item.hover>.repeater-item-title{border-color:#999;color:#999}.field-blocks li.field-repeater-item.focus{border:1px solid #4ea5e0!important}.field-blocks li.field-repeater-item.focus>.repeater-item-title{border-color:#4ea5e0!important;color:#4ea5e0!important}.field-blocks li.field-repeater-item.focus>.block-config,.field-blocks li.field-repeater-item.focus>.repeater-item-collapse,.field-blocks li.field-repeater-item.focus>.repeater-item-handle,.field-blocks li.field-repeater-item.focus>.repeater-item-remove,.field-blocks li.field-repeater-item.hover>.block-config,.field-blocks li.field-repeater-item.hover>.repeater-item-collapse,.field-blocks li.field-repeater-item.hover>.repeater-item-handle,.field-blocks li.field-repeater-item.hover>.repeater-item-remove{opacity:1}@media (hover:none){.field-blocks li.field-repeater-item>.block-config,.field-blocks li.field-repeater-item>.repeater-item-collapse,.field-blocks li.field-repeater-item>.repeater-item-handle,.field-blocks li.field-repeater-item>.repeater-item-remove{opacity:1!important}}.field-blocks li.field-repeater-item .field-repeater-form{position:relative;top:-7px}.field-blocks li.field-repeater-item .field-repeater-form:after,.field-blocks li.field-repeater-item .field-repeater-form:before{content:" ";display:table}.field-blocks li.field-repeater-item .field-repeater-form:after{clear:both}.field-blocks li.field-repeater-item .field-repeater-form .form-group.span-left,.field-blocks li.field-repeater-item .field-repeater-form .form-group.span-right{width:49.5%}.field-blocks .field-repeater-add-item{margin-top:10px;position:relative}.field-blocks .field-repeater-add-item>a{border:1px dashed #bdc3c7;border-radius:5px;color:#bdc3c7;display:block;font-size:12px;font-weight:600;outline:none;padding:13px 15px;text-align:center;text-decoration:none;text-transform:uppercase;transition:border-color .5s,color .5s}.field-blocks .field-repeater-add-item>a:focus,.field-blocks .field-repeater-add-item>a:hover{border-color:#4ea5e0;color:#4ea5e0}.field-blocks .field-repeater-add-item>a:active{border-color:#3498db;color:#3498db}.field-blocks .field-repeater-add-item.in-progress>a{background:transparent!important;border-color:#e0e0e0!important}.field-blocks[data-mode=grid]{container-type:inline-size}.field-blocks[data-mode=grid] ul.field-repeater-items{display:grid;gap:20px}.field-blocks[data-mode=grid] ul.field-repeater-items .field-repeater-item{margin-bottom:0!important}.field-blocks[data-mode=grid] ul.field-repeater-items .field-repeater-add-item{margin-top:0}.field-blocks[data-mode=grid] ul.field-repeater-items .field-repeater-add-item a{display:flex;flex-direction:column;height:100%;justify-content:center}.field-blocks[data-mode=grid] ul.field-repeater-items .field-repeater-add-item:before{display:none}.field-blocks[data-mode=grid] ul.field-repeater-items .block-config{right:30px}.field-blocks[data-mode=grid][data-columns="2"] ul.field-repeater-items{grid-template-columns:repeat(2,1fr)}.field-blocks[data-mode=grid][data-columns="3"] ul.field-repeater-items{grid-template-columns:repeat(3,1fr)}.field-blocks[data-mode=grid][data-columns="4"] ul.field-repeater-items{grid-template-columns:repeat(4,1fr)}@media (max-width:1600px){.field-blocks[data-mode=grid][data-columns="4"] ul.field-repeater-items{grid-template-columns:repeat(3,1fr)}}.field-blocks[data-mode=grid][data-columns="5"] ul.field-repeater-items{grid-template-columns:repeat(5,1fr)}@media (max-width:1600px){.field-blocks[data-mode=grid][data-columns="5"] ul.field-repeater-items{grid-template-columns:repeat(4,1fr)}}.field-blocks[data-mode=grid][data-columns="6"] ul.field-repeater-items{grid-template-columns:repeat(6,1fr)}@media (max-width:1600px){.field-blocks[data-mode=grid][data-columns="6"] ul.field-repeater-items{grid-template-columns:repeat(4,1fr)}}@media (min-width:768px) and (max-width:1199px){.field-blocks[data-mode=grid][data-columns="3"] ul.field-repeater-items,.field-blocks[data-mode=grid][data-columns="4"] ul.field-repeater-items,.field-blocks[data-mode=grid][data-columns="5"] ul.field-repeater-items,.field-blocks[data-mode=grid][data-columns="6"] ul.field-repeater-items{grid-template-columns:repeat(2,1fr)}}@media (max-width:767px){.field-blocks[data-mode=grid] ul.field-repeater-items{grid-template-columns:1fr!important}.field-blocks[data-mode=grid] ul.field-repeater-items .field-repeater-add-item,.field-blocks[data-mode=grid] ul.field-repeater-items .field-repeater-item{min-height:0!important}.field-blocks[data-mode=grid] ul.field-repeater-items .field-repeater-add-item{margin-top:10px}.field-blocks[data-mode=grid] ul.field-repeater-items .field-repeater-add-item:before{display:block}}@container (width < 800px){[data-columns="2"] ul.field-repeater-items,[data-columns="3"] ul.field-repeater-items,[data-columns="4"] ul.field-repeater-items,[data-columns="5"] ul.field-repeater-items,[data-columns="6"] ul.field-repeater-items{grid-template-columns:1fr!important}}@container (width > 800px) and (width < 1200px){[data-columns="3"] ul.field-repeater-items,[data-columns="4"] ul.field-repeater-items,[data-columns="5"] ul.field-repeater-items,[data-columns="6"] ul.field-repeater-items{grid-template-columns:repeat(2,1fr)!important}}@container (width >= 1200px) and (width < 1600px){[data-columns="4"] ul.field-repeater-items,[data-columns="5"] ul.field-repeater-items,[data-columns="6"] ul.field-repeater-items{grid-template-columns:repeat(3,1fr)!important}} diff --git a/formwidgets/blocks/assets/less/blocks.less b/formwidgets/blocks/assets/less/blocks.less index 3a94044..d2358dd 100644 --- a/formwidgets/blocks/assets/less/blocks.less +++ b/formwidgets/blocks/assets/less/blocks.less @@ -167,6 +167,12 @@ } } + .repeater-item-collapsed-handle { + position: absolute; + top: 0; + inset-inline: 0; + } + .repeater-item-title { position: absolute; font-size: 13px;