diff --git a/CHANGELOG.md b/CHANGELOG.md index 2308bf4d..ddc29d1f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,10 @@ # Changelog +## Unreleased + +### Changed +- Neo input blocks will now show their icon on the top bar, if their block type has an icon set + ## 5.0.0-beta.10 - 2024-05-02 ### Fixed diff --git a/src/templates/block.twig b/src/templates/block.twig index b5a82656..2838aa1d 100644 --- a/src/templates/block.twig +++ b/src/templates/block.twig @@ -252,6 +252,25 @@ }, } %}
+ {% if neoSettings.blockTypeIconSelectMode == 'sources' and type.icon %} + {{ tag('div', { + class: [ + 'ni_block_topbar_item', + 'cp-icon', + type.color.value ?? null, + ]|filter, + html: iconSvg(type.icon.contents), + }) }} + {% elseif neoSettings.blockTypeIconSelectMode == 'path' and type.iconPath %} + {{ tag('div', { + class: [ + 'ni_block_topbar_item', + 'cp-icon', + type.color.value ?? null, + ]|filter, + html: iconSvg(type.iconPath), + }) }} + {% endif %}
{{ typeName }}{# #}{% if block.hasErrors() %}{% endif %} diff --git a/src/web/assets/input/dist/styles/input.css b/src/web/assets/input/dist/styles/input.css index 49529b9c..ee428f69 100644 --- a/src/web/assets/input/dist/styles/input.css +++ b/src/web/assets/input/dist/styles/input.css @@ -1,3 +1,3 @@ -.neo-input.is-static .ni_block .block-checkbox,.neo-input.is-static .ni_block .block-settings,.neo-input.is-static .ni_block .block-reorder,.neo-input.is-static .ni_buttons{display:none}.neo-input.is-static .ni_block:last-child{margin-bottom:0}.ni_buttons{position:relative;height:30px}.ni_buttons>.btngroup,.ni_buttons>.menubtn{position:absolute;top:0}body.ltr .ni_buttons>.btngroup,body.ltr .ni_buttons>.menubtn{left:0}body.rtl .ni_buttons>.btngroup,body.rtl .ni_buttons>.menubtn{right:0}.ni_newblockgrid{width:500px;max-width:calc(100vw - 98px) !important}.ni_newblockgrid ul{display:flex;flex-flow:wrap;width:100%}.ni_newblockgrid ul:not(:last-child){border-bottom:1px solid #e3e5e8}.ni_newblockgrid ul>li{display:flex;flex-direction:column;padding:10px 14px;width:118px}.ni_newblockgrid ul>li>a{flex-grow:1;padding:10px 14px !important;text-align:center !important;white-space:normal}.ni_newblockgrid_icon{width:30px;height:30px;margin:0 auto 10px}.ni_newblockgrid_icon.defaulticon{background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;stroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Epaginate-filter-picture%3C/title%3E%3Crect class=%27a%27 x=%273.75%27 y=%270.746%27 width=%2719.5%27 height=%2719.5%27 rx=%271.5%27 ry=%271.5%27/%3E%3Cpath class=%27a%27 d=%27M20.25,23.246h-18a1.5,1.5,0,0,1-1.5-1.5v-18%27/%3E%3Cline class=%27a%27 x1=%278.624%27 y1=%276.746%27 x2=%278.624%27 y2=%276.746%27/%3E%3Cpath class=%27a%27 d=%27M8.624,6.746A.375.375,0,1,0,9,7.121a.375.375,0,0,0-.375-.375%27/%3E%3Cpath class=%27a%27 d=%27M20.25,15.746,16.38,9.91A.749.749,0,0,0,15.142,9.9l-1.995,2.85-1.237-.989a.75.75,0,0,0-1.092.17L8.272,15.746Z%27/%3E%3C/svg%3E")}.ni_newblocklist h6{margin-bottom:14px}.ni_newblocklist ul{width:100%}.ni_newblocklist ul:not(:last-child){padding-bottom:14px;border-bottom:1px solid #e3e5e8}.ni_newblocklist ul>li>a{padding:8px 24px !important;text-align:center !important;white-space:normal}.ni_newblocklist_icon{width:30px;height:30px}.ni_newblocklist_icon.defaulticon{background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;stroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Epaginate-filter-picture%3C/title%3E%3Crect class=%27a%27 x=%273.75%27 y=%270.746%27 width=%2719.5%27 height=%2719.5%27 rx=%271.5%27 ry=%271.5%27/%3E%3Cpath class=%27a%27 d=%27M20.25,23.246h-18a1.5,1.5,0,0,1-1.5-1.5v-18%27/%3E%3Cline class=%27a%27 x1=%278.624%27 y1=%276.746%27 x2=%278.624%27 y2=%276.746%27/%3E%3Cpath class=%27a%27 d=%27M8.624,6.746A.375.375,0,1,0,9,7.121a.375.375,0,0,0-.375-.375%27/%3E%3Cpath class=%27a%27 d=%27M20.25,15.746,16.38,9.91A.749.749,0,0,0,15.142,9.9l-1.995,2.85-1.237-.989a.75.75,0,0,0-1.092.17L8.272,15.746Z%27/%3E%3C/svg%3E")}.ni_blocks>.ni_buttons{margin-bottom:10px}.ni_spinner{margin-bottom:10px;text-align:center}.ni_block{box-sizing:border-box;width:100%;margin-bottom:10px;border-radius:var(--large-border-radius);border:2px solid var(--gray-100);background-color:var(--white);padding:0}.ni_block:focus{outline:0}.ni_block.has-errors{border:1px solid var(--error-color)}.ni_block_topbar{position:relative;height:30px;line-height:30px;background-color:var(--gray-050);color:var(--custom-text-color, var(--light-text-color));padding:0 14px;border-radius:var(--large-border-radius) var(--large-border-radius) 0 0}@media screen and (prefers-reduced-motion: no-preference){.ni_block_topbar{transition:background-color .5s}}.ni_block_topbar_left,.ni_block_topbar_right{display:flex;position:absolute;top:0;bottom:0}body.ltr .ni_block_topbar_left{left:14px}body.rtl .ni_block_topbar_left{right:14px}.ni_block_topbar_right{min-width:100px}body.ltr .ni_block_topbar_right{right:14px}body.rtl .ni_block_topbar_right{left:14px}.ni_block_topbar_item{cursor:default;padding:0 8px;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}body.ltr .ni_block_topbar_item:not(:first-child),body.rtl .ni_block_topbar_item:not(:last-child){padding-left:0}.ni_block_topbar_item:first-child{padding-left:0}.ni_block_topbar_item:last-child{padding-right:0}.ni_block_topbar_item.size-full{flex-grow:1}.ni_block_topbar_item.clip-text{overflow:hidden;text-overflow:ellipsis}.ni_block_topbar_item.title .blocktype{padding:8px 0}.ni_block_topbar_item.title .blocktype.has-errors{color:var(--error-color)}.ni_block_topbar_item.title .blocktype.has-errors+span{margin-left:var(--xs);color:var(--error-color)}.ni_block_topbar_item.handle{display:flex;transform:translateY(3px);line-height:1.42}.ni_block_topbar_item.preview-container .preview{pointer-events:none;position:absolute;width:calc(100% - 80px);height:30px;overflow:hidden;color:#b9bfc6}@media screen and (prefers-reduced-motion: no-preference){.ni_block_topbar_item.preview-container .preview{transition:opacity .2s}}body.ltr .ni_block_topbar_item.preview-container .preview{margin-left:8px}body.rtl .ni_block_topbar_item.preview-container .preview{margin-right:8px}.ni_block_topbar_item.preview-container .preview:empty{display:none}.ni_block_topbar_item.preview-container .preview_section{display:inline-block;padding:0 8px;height:30px;line-height:30px}body.ltr .ni_block_topbar_item.preview-container .preview_section{border-left:1px solid #e3e5e8}body.rtl .ni_block_topbar_item.preview-container .preview_section{border-right:1px solid #e3e5e8}.ni_block_topbar_item.preview-container .preview img,.ni_block_topbar_item.preview-container .preview_color{display:inline-block;vertical-align:top;margin-top:15px;transform:translateY(-50%)}.ni_block_topbar_item.preview-container .preview img{max-width:30px;max-height:30px}.ni_block_topbar_item.preview-container .preview_color{width:16px;height:16px;border-radius:50%}body.ltr .ni_block_topbar_item.preview-container .preview .status{margin-right:6px}body.rtl .ni_block_topbar_item.preview-container .preview .status{margin-left:6px}.ni_block_topbar_item.tabs{position:relative}@media screen and (prefers-reduced-motion: no-preference){.ni_block_topbar_item.tabs{transition:opacity .2s}}.ni_block_topbar_item.tabs .tabs_inner{white-space:nowrap}body.ltr .ni_block_topbar_item.tabs .tabs_inner{right:0;direction:ltr}body.rtl .ni_block_topbar_item.tabs .tabs_inner{left:0;direction:rtl}.ni_block_topbar_item.tabs .tabs_btn{position:absolute;top:0;display:inline-flex;cursor:pointer;height:30px;padding:0 9px;border:1px solid #e3e5e8;border-top:0;border-bottom-color:#fbfcfd;margin-bottom:-1px;background-color:#fbfcfd;color:#576575}body.ltr .ni_block_topbar_item.tabs .tabs_btn{right:8px}body.rtl .ni_block_topbar_item.tabs .tabs_btn{left:8px}.ni_block_topbar_item.tabs .tabs_btn.has-errors{color:var(--error-color)}.ni_block_topbar_item.tabs .tab{display:inline-block;height:30px;padding:0 10px;border-bottom-color:#fafafa;color:rgba(41,50,61,.5)}.ni_block_topbar_item.tabs .tab:hover{color:#0d78f2}.ni_block_topbar_item.tabs .tab.is-selected{cursor:default;padding:0 9px;border-left:1px solid #e3e5e8;border-right:1px solid #e3e5e8;border-bottom-width:1px;border-bottom-style:solid;margin-bottom:-1px;background-color:var(--white);color:#576575}.ni_block_topbar_item.tabs .tab.is-selected.is-blank{border-bottom-color:#f1f5f8;background-color:rgba(0,0,0,0)}@media screen and (prefers-reduced-motion: no-preference){.ni_block_topbar_item.tabs .tab.is-selected.is-blank{transition:border-bottom-color .5s}}.ni_block_topbar_item.tabs .tab.has-errors{color:var(--error-color)}.ni_block_topbar_item.actions{display:flex;align-items:center;gap:var(--xs);min-height:calc(var(--lh) + 10px);cursor:default}.ni_block_topbar_item .block-checkbox{transform:translateY(2px)}.ni_block_topbar_item .block-settings .settings{padding:0 8px;height:20px}.ni_block_topbar_item .block-settings .settings:not(:hover):not(:active){background-color:rgba(0,0,0,0)}.ni_block_topbar_item .block-settings .settings::before{margin-right:0 !important}.ni_block_topbar_item .block-settings .menu{line-height:20px}.ni_block_topbar_item .block-reorder{transform:translateY(-2px)}.ni_block_topbar_item .invisible{visibility:hidden;pointer-events:none}.ni_block_topbar_item>.status{margin:10px 5px 0 0}.ni_block_topbar_item>a{color:rgba(41,50,61,.25)}.ni_block_topbar_item>a:hover{color:#0d78f2}.ni_block_body>*{padding-left:14px;padding-right:14px}.ni_block_body>*:last-child{padding-bottom:14px}.ni_block_content:empty{display:none}.ni_block_content:not(.is-tab-unselected)>[data-layout-tab]{padding-top:14px}.ni_block_content:not(.is-tab-unselected)>[data-layout-tab].is-blank{padding-top:0;border-top:0}.ni_block_content:not(.is-tab-unselected)>[data-layout-tab]>.field{margin:15px 0 0 0}.ni_block_content:not(.is-tab-unselected)>[data-layout-tab].flex-fields{--row-gap: var(--m) !important}.ni_block_content:not(.is-tab-unselected)>[data-layout-tab].flex-fields>.field::before{display:none}.lp-editor .ni_block_content:not(.is-tab-unselected)>[data-layout-tab].flex-fields>.field .status-badge{left:calc(var(--m)*-1)}.ni_block_children{padding-top:14px;padding-bottom:18px !important}@media screen and (prefers-reduced-motion: no-preference){.ni_block_children{transition:background-color .5s}}.ni_block_body>.ni_block_children:not(:first-child){margin-top:14px;border-top:1px solid #e3e5e8}.ni_block_collapsed-children{overflow:hidden}.ni_block_collapsed-children_child{height:2px;border-top:1px solid #e3e5e8;background-color:#fbfcfd;margin-top:-3px}@media screen and (prefers-reduced-motion: no-preference){.ni_block_collapsed-children_child{transition:margin-top .2s}}body.ltr .ni_block.is-level-odd .ni_block_topbar_left::before{background-image:linear-gradient(-90deg, var(--gray-050) 0, rgba(235, 242, 250, 0) 40px, rgba(235, 242, 250, 0) 100%)}body.rtl .ni_block.is-level-odd .ni_block_topbar_left::before{background-image:linear-gradient(90deg, var(--gray-050) 0, rgba(235, 242, 250, 0) 40px, rgba(235, 242, 250, 0) 100%)}.ni_block.is-level-even{background-color:var(--gray-050)}.ni_block.is-level-even>.ni_block_topbar{background-color:rgba(235,242,250,.5019607843)}body.ltr .ni_block.is-level-even>.ni_block_topbar>.ni_block_topbar_left::before{background-image:linear-gradient(-90deg, rgba(235, 242, 250, 0.5019607843) 0, rgba(235, 242, 250, 0) 40px, rgba(235, 242, 250, 0) 100%)}body.rtl .ni_block.is-level-even>.ni_block_topbar>.ni_block_topbar_left::before{background-image:linear-gradient(90deg, rgba(235, 242, 250, 0.5019607843) 0, rgba(235, 242, 250, 0) 40px, rgba(235, 242, 250, 0) 100%)}.ni_block.is-level-even>.ni_block_topbar>.ni_block_topbar_right>.ni_block_topbar_item.tabs .tab.is-blank{border-bottom-color:#fff}.ni_block.is-level-even>.ni_block_topbar>.ni_block_topbar_right>.ni_block_topbar_item.tabs .tab.is-selected{background-color:var(--gray-050)}.ni_block.is-expanded>.ni_block_topbar .title>.preview{opacity:0}.ni_block.is-collapsed{padding-bottom:0}.ni_block.is-collapsed>.ni_block_topbar .ni_block_topbar_left{overflow:hidden}.ni_block.is-collapsed>.ni_block_topbar .ni_block_topbar_left::before{content:"";pointer-events:none;position:absolute;top:0;bottom:0;left:0;right:0;z-index:1}body.ltr .ni_block.is-collapsed>.ni_block_topbar .ni_block_topbar_left{right:80px}body.rtl .ni_block.is-collapsed>.ni_block_topbar .ni_block_topbar_left{left:80px}.ni_block.is-collapsed>.ni_block_topbar .ni_block_topbar_right{pointer-events:none}.ni_block.is-collapsed>.ni_block_topbar .ni_block_topbar_right>.tabs{opacity:0}.ni_block.is-collapsed>.ni_block_topbar .ni_block_topbar_right>:not(.tabs){pointer-events:auto}.ni_block.is-collapsed>.ni_block_collapsed-children .ni_block_collapsed-children_child{margin-top:0}.ni_block.is-collapsed .ni_block_body{pointer-events:none}.ni_block.is-disabled-for-user{pointer-events:none;opacity:.5;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ni_block.is-disabled-for-user .ni_block_topbar_item.title .preview{opacity:0}.ni_block.is-empty{padding:6px 0}.ni_block.is-empty.is-level-odd{background-color:var(--gray-050)}.ni_block.is-empty.is-level-even{background-color:rgba(235,242,250,.5019607843)}.ni_child-blocks-ui-element>.ni_block_children{padding:0}.ni_child-blocks-ui-element+.ni_block_errors>.errors{margin-top:0}.ni_child-blocks-ui-element:last-child>*:last-child{padding-bottom:0 !important}.neo_block_tabs-menu a.is-selected{cursor:default;pointer-events:none;opacity:.25}.neo_block_tabs-menu a.has-errors{color:#da5a47}.ni_block .matrixblock,.neo-matrixblock{border-color:#ccc;background-color:#fff;box-shadow:0 1px 5px -1px rgba(0,0,0,.1)}.ni_block .matrixblock>.titlebar,.neo-matrixblock>.titlebar{border-bottom-color:#eee;background-color:#fbfcfd} +.neo-input.is-static .ni_block .block-checkbox,.neo-input.is-static .ni_block .block-settings,.neo-input.is-static .ni_block .block-reorder,.neo-input.is-static .ni_buttons{display:none}.neo-input.is-static .ni_block:last-child{margin-bottom:0}.ni_buttons{position:relative;height:30px}.ni_buttons>.btngroup,.ni_buttons>.menubtn{position:absolute;top:0}body.ltr .ni_buttons>.btngroup,body.ltr .ni_buttons>.menubtn{left:0}body.rtl .ni_buttons>.btngroup,body.rtl .ni_buttons>.menubtn{right:0}.ni_newblockgrid{width:500px;max-width:calc(100vw - 98px) !important}.ni_newblockgrid ul{display:flex;flex-flow:wrap;width:100%}.ni_newblockgrid ul:not(:last-child){border-bottom:1px solid #e3e5e8}.ni_newblockgrid ul>li{display:flex;flex-direction:column;padding:10px 14px;width:118px}.ni_newblockgrid ul>li>a{flex-grow:1;padding:10px 14px !important;text-align:center !important;white-space:normal}.ni_newblockgrid_icon{width:30px;height:30px;margin:0 auto 10px}.ni_newblockgrid_icon.defaulticon{background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;stroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Epaginate-filter-picture%3C/title%3E%3Crect class=%27a%27 x=%273.75%27 y=%270.746%27 width=%2719.5%27 height=%2719.5%27 rx=%271.5%27 ry=%271.5%27/%3E%3Cpath class=%27a%27 d=%27M20.25,23.246h-18a1.5,1.5,0,0,1-1.5-1.5v-18%27/%3E%3Cline class=%27a%27 x1=%278.624%27 y1=%276.746%27 x2=%278.624%27 y2=%276.746%27/%3E%3Cpath class=%27a%27 d=%27M8.624,6.746A.375.375,0,1,0,9,7.121a.375.375,0,0,0-.375-.375%27/%3E%3Cpath class=%27a%27 d=%27M20.25,15.746,16.38,9.91A.749.749,0,0,0,15.142,9.9l-1.995,2.85-1.237-.989a.75.75,0,0,0-1.092.17L8.272,15.746Z%27/%3E%3C/svg%3E")}.ni_newblocklist h6{margin-bottom:14px}.ni_newblocklist ul{width:100%}.ni_newblocklist ul:not(:last-child){padding-bottom:14px;border-bottom:1px solid #e3e5e8}.ni_newblocklist ul>li>a{padding:8px 24px !important;text-align:center !important;white-space:normal}.ni_newblocklist_icon{width:30px;height:30px}.ni_newblocklist_icon.defaulticon{background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;stroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Epaginate-filter-picture%3C/title%3E%3Crect class=%27a%27 x=%273.75%27 y=%270.746%27 width=%2719.5%27 height=%2719.5%27 rx=%271.5%27 ry=%271.5%27/%3E%3Cpath class=%27a%27 d=%27M20.25,23.246h-18a1.5,1.5,0,0,1-1.5-1.5v-18%27/%3E%3Cline class=%27a%27 x1=%278.624%27 y1=%276.746%27 x2=%278.624%27 y2=%276.746%27/%3E%3Cpath class=%27a%27 d=%27M8.624,6.746A.375.375,0,1,0,9,7.121a.375.375,0,0,0-.375-.375%27/%3E%3Cpath class=%27a%27 d=%27M20.25,15.746,16.38,9.91A.749.749,0,0,0,15.142,9.9l-1.995,2.85-1.237-.989a.75.75,0,0,0-1.092.17L8.272,15.746Z%27/%3E%3C/svg%3E")}.ni_blocks>.ni_buttons{margin-bottom:10px}.ni_spinner{margin-bottom:10px;text-align:center}.ni_block{box-sizing:border-box;width:100%;margin-bottom:10px;border-radius:var(--large-border-radius);border:2px solid var(--gray-100);background-color:var(--white);padding:0}.ni_block:focus{outline:0}.ni_block.has-errors{border:1px solid var(--error-color)}.ni_block_topbar{position:relative;height:30px;line-height:30px;background-color:var(--gray-050);color:var(--custom-text-color, var(--light-text-color));padding:0 14px;border-radius:var(--large-border-radius) var(--large-border-radius) 0 0}@media screen and (prefers-reduced-motion: no-preference){.ni_block_topbar{transition:background-color .5s}}.ni_block_topbar_left,.ni_block_topbar_right{display:flex;align-items:center;gap:8px;position:absolute;top:0;bottom:0}body.ltr .ni_block_topbar_left{left:14px}body.rtl .ni_block_topbar_left{right:14px}.ni_block_topbar_right{min-width:100px}body.ltr .ni_block_topbar_right{right:14px}body.rtl .ni_block_topbar_right{left:14px}.ni_block_topbar_item{cursor:default;padding:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}body.ltr .ni_block_topbar_item:not(:first-child),body.rtl .ni_block_topbar_item:not(:last-child){padding-left:0}.ni_block_topbar_item:first-child{padding-left:0}.ni_block_topbar_item:last-child{padding-right:0}.ni_block_topbar_item.size-full{flex-grow:1}.ni_block_topbar_item.clip-text{overflow:hidden;text-overflow:ellipsis}.ni_block_topbar_item.title .blocktype{padding:8px 0}.ni_block_topbar_item.title .blocktype.has-errors{color:var(--error-color)}.ni_block_topbar_item.title .blocktype.has-errors+span{margin-left:var(--xs);color:var(--error-color)}.ni_block_topbar_item.handle{display:flex;transform:translateY(-1px);line-height:1.42}.ni_block_topbar_item.preview-container .preview{pointer-events:none;position:absolute;width:calc(100% - 80px);height:30px;overflow:hidden;color:#b9bfc6}@media screen and (prefers-reduced-motion: no-preference){.ni_block_topbar_item.preview-container .preview{transition:opacity .2s}}body.ltr .ni_block_topbar_item.preview-container .preview{margin-left:8px}body.rtl .ni_block_topbar_item.preview-container .preview{margin-right:8px}.ni_block_topbar_item.preview-container .preview:empty{display:none}.ni_block_topbar_item.preview-container .preview_section{display:inline-block;padding:0 8px;height:30px;line-height:30px}body.ltr .ni_block_topbar_item.preview-container .preview_section{border-left:1px solid #e3e5e8}body.rtl .ni_block_topbar_item.preview-container .preview_section{border-right:1px solid #e3e5e8}.ni_block_topbar_item.preview-container .preview img,.ni_block_topbar_item.preview-container .preview_color{display:inline-block;vertical-align:top;margin-top:15px;transform:translateY(-50%)}.ni_block_topbar_item.preview-container .preview img{max-width:30px;max-height:30px}.ni_block_topbar_item.preview-container .preview_color{width:16px;height:16px;border-radius:50%}body.ltr .ni_block_topbar_item.preview-container .preview .status{margin-right:6px}body.rtl .ni_block_topbar_item.preview-container .preview .status{margin-left:6px}.ni_block_topbar_item.tabs{position:relative}@media screen and (prefers-reduced-motion: no-preference){.ni_block_topbar_item.tabs{transition:opacity .2s}}.ni_block_topbar_item.tabs .tabs_inner{white-space:nowrap}body.ltr .ni_block_topbar_item.tabs .tabs_inner{right:0;direction:ltr}body.rtl .ni_block_topbar_item.tabs .tabs_inner{left:0;direction:rtl}.ni_block_topbar_item.tabs .tabs_btn{position:absolute;top:0;display:inline-flex;cursor:pointer;height:30px;padding:0 9px;border:1px solid #e3e5e8;border-top:0;border-bottom-color:#fbfcfd;margin-bottom:-1px;background-color:#fbfcfd;color:#576575}body.ltr .ni_block_topbar_item.tabs .tabs_btn{right:8px}body.rtl .ni_block_topbar_item.tabs .tabs_btn{left:8px}.ni_block_topbar_item.tabs .tabs_btn.has-errors{color:var(--error-color)}.ni_block_topbar_item.tabs .tab{display:inline-block;height:30px;padding:0 10px;border-bottom-color:#fafafa;color:rgba(41,50,61,.5)}.ni_block_topbar_item.tabs .tab:hover{color:#0d78f2}.ni_block_topbar_item.tabs .tab.is-selected{cursor:default;padding:0 9px;border-left:1px solid #e3e5e8;border-right:1px solid #e3e5e8;border-bottom-width:1px;border-bottom-style:solid;margin-bottom:-1px;background-color:var(--white);color:#576575}.ni_block_topbar_item.tabs .tab.is-selected.is-blank{border-bottom-color:#f1f5f8;background-color:rgba(0,0,0,0)}@media screen and (prefers-reduced-motion: no-preference){.ni_block_topbar_item.tabs .tab.is-selected.is-blank{transition:border-bottom-color .5s}}.ni_block_topbar_item.tabs .tab.has-errors{color:var(--error-color)}.ni_block_topbar_item.actions{display:flex;align-items:center;gap:var(--xs);min-height:calc(var(--lh) + 10px);cursor:default}.ni_block_topbar_item .block-checkbox{transform:translateY(2px)}.ni_block_topbar_item .block-settings .settings{padding:0 8px;height:20px}.ni_block_topbar_item .block-settings .settings:not(:hover):not(:active){background-color:rgba(0,0,0,0)}.ni_block_topbar_item .block-settings .settings::before{margin-right:0 !important}.ni_block_topbar_item .block-settings .menu{line-height:20px}.ni_block_topbar_item .block-reorder{transform:translateY(-2px)}.ni_block_topbar_item .invisible{visibility:hidden;pointer-events:none}.ni_block_topbar_item>.status{margin:10px 5px 0 0}.ni_block_topbar_item>a{color:rgba(41,50,61,.25)}.ni_block_topbar_item>a:hover{color:#0d78f2}.ni_block_topbar_icon{display:block}.ni_block_body>*{padding-left:14px;padding-right:14px}.ni_block_body>*:last-child{padding-bottom:14px}.ni_block_content:empty{display:none}.ni_block_content:not(.is-tab-unselected)>[data-layout-tab]{padding-top:14px}.ni_block_content:not(.is-tab-unselected)>[data-layout-tab].is-blank{padding-top:0;border-top:0}.ni_block_content:not(.is-tab-unselected)>[data-layout-tab]>.field{margin:15px 0 0 0}.ni_block_content:not(.is-tab-unselected)>[data-layout-tab].flex-fields{--row-gap: var(--m) !important}.ni_block_content:not(.is-tab-unselected)>[data-layout-tab].flex-fields>.field::before{display:none}.lp-editor .ni_block_content:not(.is-tab-unselected)>[data-layout-tab].flex-fields>.field .status-badge{left:calc(var(--m)*-1)}.ni_block_children{padding-top:14px;padding-bottom:18px !important}@media screen and (prefers-reduced-motion: no-preference){.ni_block_children{transition:background-color .5s}}.ni_block_body>.ni_block_children:not(:first-child){margin-top:14px;border-top:1px solid #e3e5e8}.ni_block_collapsed-children{overflow:hidden}.ni_block_collapsed-children_child{height:2px;border-top:1px solid #e3e5e8;background-color:#fbfcfd;margin-top:-3px}@media screen and (prefers-reduced-motion: no-preference){.ni_block_collapsed-children_child{transition:margin-top .2s}}body.ltr .ni_block.is-level-odd .ni_block_topbar_left::before{background-image:linear-gradient(-90deg, var(--gray-050) 0, rgba(235, 242, 250, 0) 40px, rgba(235, 242, 250, 0) 100%)}body.rtl .ni_block.is-level-odd .ni_block_topbar_left::before{background-image:linear-gradient(90deg, var(--gray-050) 0, rgba(235, 242, 250, 0) 40px, rgba(235, 242, 250, 0) 100%)}.ni_block.is-level-even{background-color:var(--gray-050)}.ni_block.is-level-even>.ni_block_topbar{background-color:rgba(235,242,250,.5019607843)}body.ltr .ni_block.is-level-even>.ni_block_topbar>.ni_block_topbar_left::before{background-image:linear-gradient(-90deg, rgba(235, 242, 250, 0.5019607843) 0, rgba(235, 242, 250, 0) 40px, rgba(235, 242, 250, 0) 100%)}body.rtl .ni_block.is-level-even>.ni_block_topbar>.ni_block_topbar_left::before{background-image:linear-gradient(90deg, rgba(235, 242, 250, 0.5019607843) 0, rgba(235, 242, 250, 0) 40px, rgba(235, 242, 250, 0) 100%)}.ni_block.is-level-even>.ni_block_topbar>.ni_block_topbar_right>.ni_block_topbar_item.tabs .tab.is-blank{border-bottom-color:#fff}.ni_block.is-level-even>.ni_block_topbar>.ni_block_topbar_right>.ni_block_topbar_item.tabs .tab.is-selected{background-color:var(--gray-050)}.ni_block.is-expanded>.ni_block_topbar .title>.preview{opacity:0}.ni_block.is-collapsed{padding-bottom:0}.ni_block.is-collapsed>.ni_block_topbar .ni_block_topbar_left{overflow:hidden}.ni_block.is-collapsed>.ni_block_topbar .ni_block_topbar_left::before{content:"";pointer-events:none;position:absolute;top:0;bottom:0;left:0;right:0;z-index:1}body.ltr .ni_block.is-collapsed>.ni_block_topbar .ni_block_topbar_left{right:80px}body.rtl .ni_block.is-collapsed>.ni_block_topbar .ni_block_topbar_left{left:80px}.ni_block.is-collapsed>.ni_block_topbar .ni_block_topbar_right{pointer-events:none}.ni_block.is-collapsed>.ni_block_topbar .ni_block_topbar_right>.tabs{opacity:0}.ni_block.is-collapsed>.ni_block_topbar .ni_block_topbar_right>:not(.tabs){pointer-events:auto}.ni_block.is-collapsed>.ni_block_collapsed-children .ni_block_collapsed-children_child{margin-top:0}.ni_block.is-collapsed .ni_block_body{pointer-events:none}.ni_block.is-disabled-for-user{pointer-events:none;opacity:.5;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ni_block.is-disabled-for-user .ni_block_topbar_item.title .preview{opacity:0}.ni_block.is-empty{padding:6px 0}.ni_block.is-empty.is-level-odd{background-color:var(--gray-050)}.ni_block.is-empty.is-level-even{background-color:rgba(235,242,250,.5019607843)}.ni_child-blocks-ui-element>.ni_block_children{padding:0}.ni_child-blocks-ui-element+.ni_block_errors>.errors{margin-top:0}.ni_child-blocks-ui-element:last-child>*:last-child{padding-bottom:0 !important}.neo_block_tabs-menu a.is-selected{cursor:default;pointer-events:none;opacity:.25}.neo_block_tabs-menu a.has-errors{color:#da5a47}.ni_block .matrixblock,.neo-matrixblock{border-color:#ccc;background-color:#fff;box-shadow:0 1px 5px -1px rgba(0,0,0,.1)}.ni_block .matrixblock>.titlebar,.neo-matrixblock>.titlebar{border-bottom-color:#eee;background-color:#fbfcfd} /*# sourceMappingURL=input.css.map*/ \ No newline at end of file diff --git a/src/web/assets/input/dist/styles/input.css.map b/src/web/assets/input/dist/styles/input.css.map index 44f1ae55..a945d2c5 100644 --- a/src/web/assets/input/dist/styles/input.css.map +++ b/src/web/assets/input/dist/styles/input.css.map @@ -1 +1 @@ -{"version":3,"file":"input/dist/styles/input.css","mappings":"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","sources":["webpack://craft-neo/./src/web/assets/input/src/styles/main.scss"],"sourcesContent":["@use \"sass:math\";\n\n$preview-reduction: 80px;\n$topbar-background-color-level-odd: var(--gray-050);\n$topbar-background-color-level-even: #ebf2fa80;\n$topbar-background-color-transparent: #ebf2fa00;\n$block-background-color-level-odd: var(--white);\n$block-background-color-level-even: var(--gray-050);\n\n@mixin icon {\n width: 30px;\n height: 30px;\n\n &.defaulticon {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;stroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Epaginate-filter-picture%3C/title%3E%3Crect class='a' x='3.75' y='0.746' width='19.5' height='19.5' rx='1.5' ry='1.5'/%3E%3Cpath class='a' d='M20.25,23.246h-18a1.5,1.5,0,0,1-1.5-1.5v-18'/%3E%3Cline class='a' x1='8.624' y1='6.746' x2='8.624' y2='6.746'/%3E%3Cpath class='a' d='M8.624,6.746A.375.375,0,1,0,9,7.121a.375.375,0,0,0-.375-.375'/%3E%3Cpath class='a' d='M20.25,15.746,16.38,9.91A.749.749,0,0,0,15.142,9.9l-1.995,2.85-1.237-.989a.75.75,0,0,0-1.092.17L8.272,15.746Z'/%3E%3C/svg%3E\");\n }\n}\n\n.neo-input {\n\n &.is-static {\n\n .ni_block .block-checkbox,\n .ni_block .block-settings,\n .ni_block .block-reorder,\n .ni_buttons {\n display: none;\n }\n\n .ni_block:last-child {\n margin-bottom: 0;\n }\n }\n}\n\n.ni {\n\n &_buttons {\n position: relative;\n height: 30px;\n\n > .btngroup,\n > .menubtn {\n position: absolute;\n top: 0;\n\n body.ltr & { left: 0; }\n body.rtl & { right: 0; }\n }\n }\n\n &_newblockgrid {\n width: 500px;\n max-width: calc(100vw - 98px) !important;\n\n ul {\n display: flex;\n flex-flow: wrap;\n width: 100%;\n\n &:not(:last-child) {\n border-bottom: 1px solid #e3e5e8;\n }\n\n > li {\n display: flex;\n flex-direction: column;\n padding: 10px 14px;\n width: 118px;\n\n > a {\n flex-grow: 1;\n padding: 10px 14px !important;\n text-align: center !important;\n white-space: normal;\n }\n }\n }\n\n &_icon {\n @include icon;\n margin: 0 auto 10px;\n }\n }\n\n &_newblocklist {\n h6 {\n margin-bottom: 14px;\n }\n\n ul {\n width: 100%;\n\n &:not(:last-child) {\n padding-bottom: 14px;\n border-bottom: 1px solid #e3e5e8;\n }\n\n > li > a {\n padding: 8px 24px !important;\n text-align: center !important;\n white-space: normal;\n }\n }\n\n &_icon {\n @include icon;\n }\n }\n\n &_blocks {\n\n > .ni_buttons {\n margin-bottom: 10px;\n }\n }\n\n &_spinner {\n margin-bottom: 10px;\n text-align: center;\n }\n\n &_block {\n box-sizing: border-box;\n width: 100%;\n margin-bottom: 10px;\n border-radius: var(--large-border-radius);\n border: 2px solid var(--gray-100);\n background-color: $block-background-color-level-odd;\n padding: 0;\n\n &:focus {\n outline: 0;\n }\n\n &.has-errors {\n border: 1px solid var(--error-color);\n }\n\n &_topbar {\n position: relative;\n height: 30px;\n line-height: 30px;\n background-color: $topbar-background-color-level-odd;\n color: var(--custom-text-color,var(--light-text-color));\n padding: 0 14px;\n border-radius: var(--large-border-radius) var(--large-border-radius) 0 0;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n transition: background-color 0.5s;\n }\n\n &_left,\n &_right {\n display: flex;\n position: absolute;\n top: 0; bottom: 0;\n }\n\n &_left {\n\n body.ltr & {\n left: 14px;\n }\n\n body.rtl & {\n right: 14px;\n }\n }\n\n &_right {\n min-width: 100px;\n\n body.ltr & {\n right: 14px;\n }\n\n body.rtl & {\n left: 14px;\n }\n }\n\n &_item {\n cursor: default;\n padding: 0 8px;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n white-space: nowrap;\n\n body.ltr &:not(:first-child),\n body.rtl &:not(:last-child) {\n padding-left: 0;\n }\n\n &:first-child {\n padding-left: 0;\n }\n\n &:last-child {\n padding-right: 0;\n }\n\n &.size-full {\n flex-grow: 1;\n }\n\n &.clip-text {\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n &.title {\n\n .blocktype {\n // Add vertical padding so there's more hit area for the checkbox\n padding: 8px 0;\n\n &.has-errors {\n color: var(--error-color);\n\n + span {\n margin-left: var(--xs);\n color: var(--error-color);\n }\n }\n }\n }\n\n &.handle {\n display: flex;\n transform: translateY(3px);\n line-height: 1.42;\n }\n\n &.preview-container {\n .preview {\n pointer-events: none; // Allow the double-click expand/collapse work it's magic\n position: absolute;\n width: calc(100% - #{$preview-reduction});\n height: 30px;\n overflow: hidden;\n color: #b9bfc6;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n transition: opacity 0.2s;\n }\n\n body.ltr & { margin-left: 8px; }\n body.rtl & { margin-right: 8px; }\n\n &:empty {\n // Fixes bug where the blocktype can get clipped prematurely\n display: none;\n }\n\n &_section {\n display: inline-block;\n padding: 0 8px;\n height: 30px;\n line-height: 30px;\n\n body.ltr & { border-left: 1px solid #e3e5e8; }\n body.rtl & { border-right: 1px solid #e3e5e8; }\n }\n\n img,\n &_color {\n display: inline-block;\n vertical-align: top;\n margin-top: 15px;\n transform: translateY(-50%);\n }\n\n img {\n max-width: 30px;\n max-height: 30px;\n }\n\n &_color {\n width: 16px;\n height: 16px;\n border-radius: 50%;\n }\n\n .status {\n\n body.ltr & { margin-right: 6px; }\n body.rtl & { margin-left: 6px; }\n }\n }\n }\n\n &.tabs {\n position: relative;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n transition: opacity 0.2s;\n }\n\n .tabs_inner {\n white-space: nowrap;\n\n body.ltr & { right: 0; direction: ltr; }\n body.rtl & { left: 0; direction: rtl; }\n }\n\n .tabs_btn {\n position: absolute;\n top: 0;\n display: inline-flex;\n cursor: pointer;\n height: 30px;\n padding: 0 9px;\n border: 1px solid #e3e5e8;\n border-top: 0;\n border-bottom-color: #fbfcfd;\n margin-bottom: -1px;\n background-color: #fbfcfd;\n color: #576575;\n\n body.ltr & { right: 8px; }\n body.rtl & { left: 8px; }\n\n &.has-errors {\n color: var(--error-color);\n }\n }\n\n .tab {\n display: inline-block;\n height: 30px;\n padding: 0 10px;\n border-bottom-color: #fafafa;\n color: rgba(#29323d, 0.5);\n\n &:hover {\n color: #0d78f2;\n }\n\n &.is-selected {\n cursor: default;\n padding: 0 9px;\n border-left: 1px solid #e3e5e8;\n border-right: 1px solid #e3e5e8;\n border-bottom-width: 1px;\n border-bottom-style: solid;\n margin-bottom: -1px;\n background-color: $block-background-color-level-odd;\n color: #576575;\n\n &.is-blank {\n border-bottom-color: #f1f5f8;\n background-color: transparent;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n transition: border-bottom-color 0.5s;\n }\n }\n }\n\n &.has-errors {\n color: var(--error-color);\n }\n }\n }\n\n &.actions {\n display: flex;\n align-items: center;\n gap: var(--xs);\n min-height: calc(var(--lh) + 10px);\n cursor: default;\n }\n\n .block-checkbox {\n transform: translateY(2px);\n }\n\n .block-settings {\n .settings {\n padding: 0 8px;\n height: 20px;\n\n &:not(:hover):not(:active) {\n background-color: transparent;\n }\n\n &::before {\n margin-right: 0 !important;\n }\n }\n\n .menu {\n line-height: 20px;\n }\n }\n\n .block-reorder {\n transform: translateY(-2px);\n\n }\n\n .invisible {\n visibility: hidden;\n pointer-events: none;\n }\n\n > .status {\n margin: 10px 5px 0 0;\n }\n\n > a {\n color: rgba(#29323d, 0.25);\n\n &:hover {\n color: #0d78f2;\n }\n }\n }\n }\n\n &_body > * {\n padding-left: 14px;\n padding-right: 14px;\n\n &:last-child {\n padding-bottom: 14px;\n }\n }\n\n &_content {\n &:empty {\n display: none;\n }\n\n &:not(.is-tab-unselected) > [data-layout-tab] {\n padding-top: 14px;\n\n &.is-blank {\n padding-top: 0;\n border-top: 0;\n }\n\n > .field {\n margin: 15px 0 0 0;\n }\n\n &.flex-fields {\n --row-gap: var(--m) !important;\n\n > .field {\n &::before {\n display: none;\n }\n\n .lp-editor & .status-badge {\n left: calc(var(--m) * -1);\n }\n }\n }\n }\n }\n\n &_children {\n padding-top: 14px;\n padding-bottom: 18px !important;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n transition: background-color 0.5s;\n }\n\n .ni_block_body > &:not(:first-child) {\n margin-top: 14px;\n border-top: 1px solid #e3e5e8;\n }\n }\n\n &_collapsed-children {\n overflow: hidden;\n\n &_child {\n height: 2px;\n border-top: 1px solid #e3e5e8;\n background-color: #fbfcfd;\n margin-top: -3px;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n transition: margin-top 0.2s; // 200ms to match jQuery transition duration\n }\n }\n }\n\n &.is-level-odd {\n .ni_block_topbar_left::before {\n body.ltr & {\n background-image: linear-gradient(-90deg, $topbar-background-color-level-odd 0, $topbar-background-color-transparent 40px, $topbar-background-color-transparent 100%);\n }\n\n body.rtl & {\n background-image: linear-gradient(90deg, $topbar-background-color-level-odd 0, $topbar-background-color-transparent 40px, $topbar-background-color-transparent 100%);\n }\n }\n }\n\n &.is-level-even {\n background-color: $block-background-color-level-even;\n\n > .ni_block_topbar {\n background-color: $topbar-background-color-level-even;\n\n > .ni_block_topbar_left::before {\n body.ltr & {\n background-image: linear-gradient(-90deg, $topbar-background-color-level-even 0, $topbar-background-color-transparent 40px, $topbar-background-color-transparent 100%);\n }\n\n body.rtl & {\n background-image: linear-gradient(90deg, $topbar-background-color-level-even 0, $topbar-background-color-transparent 40px, $topbar-background-color-transparent 100%);\n }\n }\n\n > .ni_block_topbar_right > .ni_block_topbar_item.tabs .tab {\n &.is-blank {\n border-bottom-color: white;\n }\n\n &.is-selected {\n background-color: $block-background-color-level-even;\n }\n }\n }\n }\n\n &.is-expanded {\n\n > .ni_block_topbar {\n\n .title > .preview {\n opacity: 0;\n }\n }\n }\n\n &.is-collapsed {\n padding-bottom: 0;\n\n > .ni_block_topbar {\n\n .ni_block_topbar_left {\n\n overflow: hidden;\n\n &::before {\n content: '';\n pointer-events: none;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 1;\n }\n\n body.ltr & {\n right: $preview-reduction;\n }\n\n body.rtl & {\n left: $preview-reduction;\n }\n }\n\n .ni_block_topbar_right {\n pointer-events: none;\n\n > .tabs {\n opacity: 0;\n }\n\n > :not(.tabs) {\n pointer-events: auto;\n }\n }\n }\n\n > .ni_block_collapsed-children {\n\n .ni_block_collapsed-children_child {\n margin-top: 0;\n }\n }\n\n .ni_block_body {\n pointer-events: none;\n }\n }\n\n &.is-disabled-for-user {\n pointer-events: none;\n opacity: 0.5;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n\n .ni_block_topbar_item {\n\n &.title .preview {\n opacity: 0;\n }\n }\n }\n\n &.is-empty {\n padding: 6px 0; // Add some vertical size to blocks without fields or children so they stand out more\n\n &.is-level-odd {\n background-color: $topbar-background-color-level-odd;\n }\n\n &.is-level-even {\n background-color: $topbar-background-color-level-even;\n }\n }\n }\n\n &_child-blocks-ui-element {\n > .ni_block_children {\n padding: 0;\n }\n\n + .ni_block_errors > .errors {\n margin-top: 0;\n }\n\n &:last-child > *:last-child {\n padding-bottom: 0 !important;\n }\n }\n}\n\n.neo_block_tabs-menu {\n\n a.is-selected {\n cursor: default;\n pointer-events: none;\n opacity: 0.25;\n }\n\n a.has-errors {\n color: #da5a47;\n }\n}\n\n// Tweak the styles of nested Matrix fields so it doesn't look so confusing\n.ni_block .matrixblock,\n.neo-matrixblock {\n border-color: #ccc;\n background-color: white;\n box-shadow: 0 1px 5px -1px rgba(black, 0.1);\n\n > .titlebar {\n border-bottom-color: #eee;\n background-color: #fbfcfd;\n }\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"input/dist/styles/input.css","mappings":"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","sources":["webpack://craft-neo/./src/web/assets/input/src/styles/main.scss"],"sourcesContent":["@use \"sass:math\";\n\n$preview-reduction: 80px;\n$topbar-background-color-level-odd: var(--gray-050);\n$topbar-background-color-level-even: #ebf2fa80;\n$topbar-background-color-transparent: #ebf2fa00;\n$block-background-color-level-odd: var(--white);\n$block-background-color-level-even: var(--gray-050);\n\n@mixin icon {\n width: 30px;\n height: 30px;\n\n &.defaulticon {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;stroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Epaginate-filter-picture%3C/title%3E%3Crect class='a' x='3.75' y='0.746' width='19.5' height='19.5' rx='1.5' ry='1.5'/%3E%3Cpath class='a' d='M20.25,23.246h-18a1.5,1.5,0,0,1-1.5-1.5v-18'/%3E%3Cline class='a' x1='8.624' y1='6.746' x2='8.624' y2='6.746'/%3E%3Cpath class='a' d='M8.624,6.746A.375.375,0,1,0,9,7.121a.375.375,0,0,0-.375-.375'/%3E%3Cpath class='a' d='M20.25,15.746,16.38,9.91A.749.749,0,0,0,15.142,9.9l-1.995,2.85-1.237-.989a.75.75,0,0,0-1.092.17L8.272,15.746Z'/%3E%3C/svg%3E\");\n }\n}\n\n.neo-input {\n\n &.is-static {\n\n .ni_block .block-checkbox,\n .ni_block .block-settings,\n .ni_block .block-reorder,\n .ni_buttons {\n display: none;\n }\n\n .ni_block:last-child {\n margin-bottom: 0;\n }\n }\n}\n\n.ni {\n\n &_buttons {\n position: relative;\n height: 30px;\n\n > .btngroup,\n > .menubtn {\n position: absolute;\n top: 0;\n\n body.ltr & { left: 0; }\n body.rtl & { right: 0; }\n }\n }\n\n &_newblockgrid {\n width: 500px;\n max-width: calc(100vw - 98px) !important;\n\n ul {\n display: flex;\n flex-flow: wrap;\n width: 100%;\n\n &:not(:last-child) {\n border-bottom: 1px solid #e3e5e8;\n }\n\n > li {\n display: flex;\n flex-direction: column;\n padding: 10px 14px;\n width: 118px;\n\n > a {\n flex-grow: 1;\n padding: 10px 14px !important;\n text-align: center !important;\n white-space: normal;\n }\n }\n }\n\n &_icon {\n @include icon;\n margin: 0 auto 10px;\n }\n }\n\n &_newblocklist {\n h6 {\n margin-bottom: 14px;\n }\n\n ul {\n width: 100%;\n\n &:not(:last-child) {\n padding-bottom: 14px;\n border-bottom: 1px solid #e3e5e8;\n }\n\n > li > a {\n padding: 8px 24px !important;\n text-align: center !important;\n white-space: normal;\n }\n }\n\n &_icon {\n @include icon;\n }\n }\n\n &_blocks {\n\n > .ni_buttons {\n margin-bottom: 10px;\n }\n }\n\n &_spinner {\n margin-bottom: 10px;\n text-align: center;\n }\n\n &_block {\n box-sizing: border-box;\n width: 100%;\n margin-bottom: 10px;\n border-radius: var(--large-border-radius);\n border: 2px solid var(--gray-100);\n background-color: $block-background-color-level-odd;\n padding: 0;\n\n &:focus {\n outline: 0;\n }\n\n &.has-errors {\n border: 1px solid var(--error-color);\n }\n\n &_topbar {\n position: relative;\n height: 30px;\n line-height: 30px;\n background-color: $topbar-background-color-level-odd;\n color: var(--custom-text-color,var(--light-text-color));\n padding: 0 14px;\n border-radius: var(--large-border-radius) var(--large-border-radius) 0 0;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n transition: background-color 0.5s;\n }\n\n &_left,\n &_right {\n display: flex;\n align-items: center;\n gap: 8px;\n position: absolute;\n top: 0; bottom: 0;\n }\n\n &_left {\n\n body.ltr & {\n left: 14px;\n }\n\n body.rtl & {\n right: 14px;\n }\n }\n\n &_right {\n min-width: 100px;\n\n body.ltr & {\n right: 14px;\n }\n\n body.rtl & {\n left: 14px;\n }\n }\n\n &_item {\n cursor: default;\n padding: 0;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n white-space: nowrap;\n\n body.ltr &:not(:first-child),\n body.rtl &:not(:last-child) {\n padding-left: 0;\n }\n\n &:first-child {\n padding-left: 0;\n }\n\n &:last-child {\n padding-right: 0;\n }\n\n &.size-full {\n flex-grow: 1;\n }\n\n &.clip-text {\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n &.title {\n\n .blocktype {\n // Add vertical padding so there's more hit area for the checkbox\n padding: 8px 0;\n\n &.has-errors {\n color: var(--error-color);\n\n + span {\n margin-left: var(--xs);\n color: var(--error-color);\n }\n }\n }\n }\n\n &.handle {\n display: flex;\n transform: translateY(-1px);\n line-height: 1.42;\n }\n\n &.preview-container {\n .preview {\n pointer-events: none; // Allow the double-click expand/collapse work it's magic\n position: absolute;\n width: calc(100% - #{$preview-reduction});\n height: 30px;\n overflow: hidden;\n color: #b9bfc6;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n transition: opacity 0.2s;\n }\n\n body.ltr & { margin-left: 8px; }\n body.rtl & { margin-right: 8px; }\n\n &:empty {\n // Fixes bug where the blocktype can get clipped prematurely\n display: none;\n }\n\n &_section {\n display: inline-block;\n padding: 0 8px;\n height: 30px;\n line-height: 30px;\n\n body.ltr & { border-left: 1px solid #e3e5e8; }\n body.rtl & { border-right: 1px solid #e3e5e8; }\n }\n\n img,\n &_color {\n display: inline-block;\n vertical-align: top;\n margin-top: 15px;\n transform: translateY(-50%);\n }\n\n img {\n max-width: 30px;\n max-height: 30px;\n }\n\n &_color {\n width: 16px;\n height: 16px;\n border-radius: 50%;\n }\n\n .status {\n\n body.ltr & { margin-right: 6px; }\n body.rtl & { margin-left: 6px; }\n }\n }\n }\n\n &.tabs {\n position: relative;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n transition: opacity 0.2s;\n }\n\n .tabs_inner {\n white-space: nowrap;\n\n body.ltr & { right: 0; direction: ltr; }\n body.rtl & { left: 0; direction: rtl; }\n }\n\n .tabs_btn {\n position: absolute;\n top: 0;\n display: inline-flex;\n cursor: pointer;\n height: 30px;\n padding: 0 9px;\n border: 1px solid #e3e5e8;\n border-top: 0;\n border-bottom-color: #fbfcfd;\n margin-bottom: -1px;\n background-color: #fbfcfd;\n color: #576575;\n\n body.ltr & { right: 8px; }\n body.rtl & { left: 8px; }\n\n &.has-errors {\n color: var(--error-color);\n }\n }\n\n .tab {\n display: inline-block;\n height: 30px;\n padding: 0 10px;\n border-bottom-color: #fafafa;\n color: rgba(#29323d, 0.5);\n\n &:hover {\n color: #0d78f2;\n }\n\n &.is-selected {\n cursor: default;\n padding: 0 9px;\n border-left: 1px solid #e3e5e8;\n border-right: 1px solid #e3e5e8;\n border-bottom-width: 1px;\n border-bottom-style: solid;\n margin-bottom: -1px;\n background-color: $block-background-color-level-odd;\n color: #576575;\n\n &.is-blank {\n border-bottom-color: #f1f5f8;\n background-color: transparent;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n transition: border-bottom-color 0.5s;\n }\n }\n }\n\n &.has-errors {\n color: var(--error-color);\n }\n }\n }\n\n &.actions {\n display: flex;\n align-items: center;\n gap: var(--xs);\n min-height: calc(var(--lh) + 10px);\n cursor: default;\n }\n\n .block-checkbox {\n transform: translateY(2px);\n }\n\n .block-settings {\n .settings {\n padding: 0 8px;\n height: 20px;\n\n &:not(:hover):not(:active) {\n background-color: transparent;\n }\n\n &::before {\n margin-right: 0 !important;\n }\n }\n\n .menu {\n line-height: 20px;\n }\n }\n\n .block-reorder {\n transform: translateY(-2px);\n\n }\n\n .invisible {\n visibility: hidden;\n pointer-events: none;\n }\n\n > .status {\n margin: 10px 5px 0 0;\n }\n\n > a {\n color: rgba(#29323d, 0.25);\n\n &:hover {\n color: #0d78f2;\n }\n }\n }\n\n &_icon {\n display: block;\n }\n }\n\n &_body > * {\n padding-left: 14px;\n padding-right: 14px;\n\n &:last-child {\n padding-bottom: 14px;\n }\n }\n\n &_content {\n &:empty {\n display: none;\n }\n\n &:not(.is-tab-unselected) > [data-layout-tab] {\n padding-top: 14px;\n\n &.is-blank {\n padding-top: 0;\n border-top: 0;\n }\n\n > .field {\n margin: 15px 0 0 0;\n }\n\n &.flex-fields {\n --row-gap: var(--m) !important;\n\n > .field {\n &::before {\n display: none;\n }\n\n .lp-editor & .status-badge {\n left: calc(var(--m) * -1);\n }\n }\n }\n }\n }\n\n &_children {\n padding-top: 14px;\n padding-bottom: 18px !important;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n transition: background-color 0.5s;\n }\n\n .ni_block_body > &:not(:first-child) {\n margin-top: 14px;\n border-top: 1px solid #e3e5e8;\n }\n }\n\n &_collapsed-children {\n overflow: hidden;\n\n &_child {\n height: 2px;\n border-top: 1px solid #e3e5e8;\n background-color: #fbfcfd;\n margin-top: -3px;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n transition: margin-top 0.2s; // 200ms to match jQuery transition duration\n }\n }\n }\n\n &.is-level-odd {\n .ni_block_topbar_left::before {\n body.ltr & {\n background-image: linear-gradient(-90deg, $topbar-background-color-level-odd 0, $topbar-background-color-transparent 40px, $topbar-background-color-transparent 100%);\n }\n\n body.rtl & {\n background-image: linear-gradient(90deg, $topbar-background-color-level-odd 0, $topbar-background-color-transparent 40px, $topbar-background-color-transparent 100%);\n }\n }\n }\n\n &.is-level-even {\n background-color: $block-background-color-level-even;\n\n > .ni_block_topbar {\n background-color: $topbar-background-color-level-even;\n\n > .ni_block_topbar_left::before {\n body.ltr & {\n background-image: linear-gradient(-90deg, $topbar-background-color-level-even 0, $topbar-background-color-transparent 40px, $topbar-background-color-transparent 100%);\n }\n\n body.rtl & {\n background-image: linear-gradient(90deg, $topbar-background-color-level-even 0, $topbar-background-color-transparent 40px, $topbar-background-color-transparent 100%);\n }\n }\n\n > .ni_block_topbar_right > .ni_block_topbar_item.tabs .tab {\n &.is-blank {\n border-bottom-color: white;\n }\n\n &.is-selected {\n background-color: $block-background-color-level-even;\n }\n }\n }\n }\n\n &.is-expanded {\n\n > .ni_block_topbar {\n\n .title > .preview {\n opacity: 0;\n }\n }\n }\n\n &.is-collapsed {\n padding-bottom: 0;\n\n > .ni_block_topbar {\n\n .ni_block_topbar_left {\n\n overflow: hidden;\n\n &::before {\n content: '';\n pointer-events: none;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 1;\n }\n\n body.ltr & {\n right: $preview-reduction;\n }\n\n body.rtl & {\n left: $preview-reduction;\n }\n }\n\n .ni_block_topbar_right {\n pointer-events: none;\n\n > .tabs {\n opacity: 0;\n }\n\n > :not(.tabs) {\n pointer-events: auto;\n }\n }\n }\n\n > .ni_block_collapsed-children {\n\n .ni_block_collapsed-children_child {\n margin-top: 0;\n }\n }\n\n .ni_block_body {\n pointer-events: none;\n }\n }\n\n &.is-disabled-for-user {\n pointer-events: none;\n opacity: 0.5;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n\n .ni_block_topbar_item {\n\n &.title .preview {\n opacity: 0;\n }\n }\n }\n\n &.is-empty {\n padding: 6px 0; // Add some vertical size to blocks without fields or children so they stand out more\n\n &.is-level-odd {\n background-color: $topbar-background-color-level-odd;\n }\n\n &.is-level-even {\n background-color: $topbar-background-color-level-even;\n }\n }\n }\n\n &_child-blocks-ui-element {\n > .ni_block_children {\n padding: 0;\n }\n\n + .ni_block_errors > .errors {\n margin-top: 0;\n }\n\n &:last-child > *:last-child {\n padding-bottom: 0 !important;\n }\n }\n}\n\n.neo_block_tabs-menu {\n\n a.is-selected {\n cursor: default;\n pointer-events: none;\n opacity: 0.25;\n }\n\n a.has-errors {\n color: #da5a47;\n }\n}\n\n// Tweak the styles of nested Matrix fields so it doesn't look so confusing\n.ni_block .matrixblock,\n.neo-matrixblock {\n border-color: #ccc;\n background-color: white;\n box-shadow: 0 1px 5px -1px rgba(black, 0.1);\n\n > .titlebar {\n border-bottom-color: #eee;\n background-color: #fbfcfd;\n }\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/src/web/assets/input/src/styles/main.scss b/src/web/assets/input/src/styles/main.scss index 13ca6f57..5751f9d6 100644 --- a/src/web/assets/input/src/styles/main.scss +++ b/src/web/assets/input/src/styles/main.scss @@ -153,6 +153,8 @@ $block-background-color-level-even: var(--gray-050); &_left, &_right { display: flex; + align-items: center; + gap: 8px; position: absolute; top: 0; bottom: 0; } @@ -182,7 +184,7 @@ $block-background-color-level-even: var(--gray-050); &_item { cursor: default; - padding: 0 8px; + padding: 0; -webkit-user-select: none; -moz-user-select: none; user-select: none; @@ -229,7 +231,7 @@ $block-background-color-level-even: var(--gray-050); &.handle { display: flex; - transform: translateY(3px); + transform: translateY(-1px); line-height: 1.42; }