From 5f12af7fb5f3e285b960637d82eda0287c0b0694 Mon Sep 17 00:00:00 2001 From: Thomas Templeton Date: Fri, 23 Feb 2024 22:07:31 +1100 Subject: [PATCH] Fix #851 --- CHANGELOG.md | 3 +++ src/assets/dist/neo-main.css | 2 +- src/assets/dist/neo-main.css.map | 2 +- src/assets/src/input/styles/input.scss | 2 +- 4 files changed, 6 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0e3b3506..831f96e6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,9 @@ ### Changed - When deleting a Craft element, queue jobs for deleting Neo blocks owned by the element will now be generated on a per-Neo-field basis, rather than a per-Neo-block basis (thanks @engram-design) +### Fixed +- Fixed a display bug with the contents of collapsed block previews on blocks that contain asset fields + ## 4.0.5 - 2024-02-14 ### Added diff --git a/src/assets/dist/neo-main.css b/src/assets/dist/neo-main.css index 2ebae76c..f63e2733 100644 --- a/src/assets/dist/neo-main.css +++ b/src/assets/dist/neo-main.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(1fe2bff6b4ce4e45d64d.svg)}.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(1fe2bff6b4ce4e45d64d.svg)}.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:4px;border:1px solid #e3e5e8;background-color:#f3f7fc;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:#ebf2fa;color:#8f98a3;padding:0 14px;border-radius:4px 4px 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{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{display:inline-block;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:#f3f7fc;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.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 .invisible{visibility:hidden;pointer-events:none}.ni_block_topbar_item>.checkbox{position:relative;display:block;height:100%;color:#29323d}.ni_block_topbar_item>.checkbox::before{position:absolute;top:50%;margin-top:-8px}.ni_block_topbar_item>.checkbox::after{display: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, #ebf2fa 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, #ebf2fa 0, rgba(235, 242, 250, 0) 40px, rgba(235, 242, 250, 0) 100%)}.ni_block.is-level-even{background-color:#fbfcfd}.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:#fbfcfd}.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:#ebf2fa}.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}.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(1fe2bff6b4ce4e45d64d.svg)}.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(1fe2bff6b4ce4e45d64d.svg)}.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:4px;border:1px solid #e3e5e8;background-color:#f3f7fc;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:#ebf2fa;color:#8f98a3;padding:0 14px;border-radius:4px 4px 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:#f3f7fc;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.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 .invisible{visibility:hidden;pointer-events:none}.ni_block_topbar_item>.checkbox{position:relative;display:block;height:100%;color:#29323d}.ni_block_topbar_item>.checkbox::before{position:absolute;top:50%;margin-top:-8px}.ni_block_topbar_item>.checkbox::after{display: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, #ebf2fa 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, #ebf2fa 0, rgba(235, 242, 250, 0) 40px, rgba(235, 242, 250, 0) 100%)}.ni_block.is-level-even{background-color:#fbfcfd}.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:#fbfcfd}.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:#ebf2fa}.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}.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=neo-main.css.map*/ \ No newline at end of file diff --git a/src/assets/dist/neo-main.css.map b/src/assets/dist/neo-main.css.map index e6591adf..713eeca9 100644 --- a/src/assets/dist/neo-main.css.map +++ b/src/assets/dist/neo-main.css.map @@ -1 +1 @@ -{"version":3,"file":"neo-main.css","mappings":"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","sources":["webpack://craft-neo/./src/assets/src/input/styles/input.scss"],"sourcesContent":["@use \"sass:math\";\n\n$preview-reduction: 80px;\n$topbar-background-color-level-odd: #ebf2fa;\n$topbar-background-color-level-even: #ebf2fa80;\n$topbar-background-color-transparent: #ebf2fa00;\n\n@mixin icon {\n width: 30px;\n height: 30px;\n\n &.defaulticon {\n background-image: url(../icons/default-new-block-icon.svg);\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: 4px;\n border: 1px solid #e3e5e8;\n background-color: #f3f7fc;\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: #8f98a3;\n padding: 0 14px;\n border-radius: 4px 4px 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 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 display: inline-block;\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: #f3f7fc;\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 &.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 .invisible {\n visibility: hidden;\n pointer-events: none;\n }\n\n > .checkbox {\n position: relative;\n display: block;\n height: 100%;\n color: #29323d;\n\n &::before {\n position: absolute;\n top: 50%;\n margin-top: -8px;\n }\n\n &::after {\n display: none;\n }\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: #fbfcfd;\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: #fbfcfd;\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}\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":"neo-main.css","mappings":"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","sources":["webpack://craft-neo/./src/assets/src/input/styles/input.scss"],"sourcesContent":["@use \"sass:math\";\n\n$preview-reduction: 80px;\n$topbar-background-color-level-odd: #ebf2fa;\n$topbar-background-color-level-even: #ebf2fa80;\n$topbar-background-color-transparent: #ebf2fa00;\n\n@mixin icon {\n width: 30px;\n height: 30px;\n\n &.defaulticon {\n background-image: url(../icons/default-new-block-icon.svg);\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: 4px;\n border: 1px solid #e3e5e8;\n background-color: #f3f7fc;\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: #8f98a3;\n padding: 0 14px;\n border-radius: 4px 4px 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: #f3f7fc;\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 &.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 .invisible {\n visibility: hidden;\n pointer-events: none;\n }\n\n > .checkbox {\n position: relative;\n display: block;\n height: 100%;\n color: #29323d;\n\n &::before {\n position: absolute;\n top: 50%;\n margin-top: -8px;\n }\n\n &::after {\n display: none;\n }\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: #fbfcfd;\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: #fbfcfd;\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}\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/assets/src/input/styles/input.scss b/src/assets/src/input/styles/input.scss index 7cfa1a4c..6a92a7e1 100644 --- a/src/assets/src/input/styles/input.scss +++ b/src/assets/src/input/styles/input.scss @@ -264,6 +264,7 @@ $topbar-background-color-transparent: #ebf2fa00; img, &_color { + display: inline-block; vertical-align: top; margin-top: 15px; transform: translateY(-50%); @@ -275,7 +276,6 @@ $topbar-background-color-transparent: #ebf2fa00; } &_color { - display: inline-block; width: 16px; height: 16px; border-radius: 50%;