Commit 61d7aee3 authored by Thomas Frobieter's avatar Thomas Frobieter
Browse files

Issue #3298541: Layout (Paragraphs) Edit UI: Differentiate style of regions and contents

parent 34e384fa

css/admin/drowl_layouts.layout_paragraphs_ui.min.css

+1 −1
Original line number Diff line number Diff line 
.js-lpb-component,.js-lpb-region{outline:1px solid var(--drowl-info-light)}.js-lpb-component.lpb-layout+.js-lpb-component.lpb-layout{margin-top:.5rem}.js-lpb-component:not(.lpb-layout){padding:.5rem;margin-bottom:.5rem!important}.js-lpb-component:not(.lpb-layout):last-child,.js-lpb-component:not(.lpb-layout):last-of-type{margin-bottom:0!important}.js-lpb-component.fancy-background-image{position:relative!important}.js-lpb-region{padding:.5rem;min-height:80px!important}.lpb-controls-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--drowl-text-color);max-width:170px}.lpb-controls.is-layout .lpb-controls-label{color:#fff}.layout>.grid-x:not(:last-child),.layout>.js-lpb-region:not(:last-child){margin-top:0!important;margin-bottom:.5rem!important}.lpb-dialog{width:90%!important;max-width:960px!important}.lpb-dialog *{box-sizing:border-box}.lpb-dialog .ui-dialog-content{padding:1rem!important}.lpb-dialog .lpb-component-list__search{margin:0 -1rem;padding:0 1rem 1rem 1rem;border-bottom:1px solid var(--drowl-gray-light,#eee)}.lpb-dialog .lpb-component-list__search .lpb-component-list-search-input{padding:.5rem;width:100%;border-radius:var(--drowl-border-radius-small);border:1px solid var(--drowl-gray-medium,#ccc)}.lpb-dialog .lpb-component-list__group>[class*=lpb-component-list__group]{width:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.5rem;margin:0 -1rem!important;padding:1rem 1rem 1rem}.lpb-dialog .lpb-component-list__group>[class*=lpb-component-list__group]+[class*=lpb-component-list__group]{border-top:1px solid var(--drowl-gray-light,#eee)}.lpb-dialog .lpb-component-list__item a{margin:0;height:100%;padding:.5rem .25rem;flex-direction:column;justify-content:center;line-height:1.1;text-align:center;border:1px solid var(--drowl-gray-light);color:var(--drowl-text-color)}.lpb-dialog .lpb-component-list__item a img{margin:0 0 .35rem 0;max-width:95px;transform:scale(.9);transition-duration:.1s;transition-timing-function:linear;transition-property:transform;box-shadow:0 0 5px rgba(0,0,0,.15)}.lpb-dialog .lpb-component-list__item a:focus-within,.lpb-dialog .lpb-component-list__item a:hover{border-color:var(--drowl-green)}.lpb-dialog .lpb-component-list__item a:focus-within img,.lpb-dialog .lpb-component-list__item a:hover img{transform:scale(1)}.layout-paragraphs-component-form #layout-paragraphs-element>fieldset:first-child{margin-top:0}.layout-paragraphs-component-form #layout-paragraphs-element>fieldset[data-drupal-selector=edit-layout-paragraphs-layout]>.fieldset__legend{display:none}.layout-paragraphs-component-form .layout-select{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}.layout-paragraphs-component-form .layout-select__item{margin:0!important;height:100%}.layout-paragraphs-component-form .layout-select__item .form-item__label.option{align-items:center;height:100%;margin:0}.layout-paragraphs-component-form .layout-select__item input:checked+label,.layout-paragraphs-component-form .layout-select__item:hover input+label{outline-color:var(--drowl-green)}.layout-paragraphs-component-form .layout-select .layout-icon[class*=drowl] .layout-icon__region{fill:#fff!important;stroke:var(--drowl-green)!important}
 
 No newline at end of file
 
.js-lpb-component{outline:1px solid var(--drowl-info-light)}.js-lpb-region{outline:2px dashed var(--drowl-info-light)!important}.js-lpb-component:hover .js-lpb-region:hover{outline:2px dashed var(--drowl-info)!important}.js-lpb-region.drag-target{outline:2px dashed var(--drowl-success)!important}.js-lpb-component.lpb-layout+.js-lpb-component.lpb-layout{margin-top:.5rem}.js-lpb-component:not(.lpb-layout){padding:.5rem;margin-bottom:.5rem!important}.js-lpb-component:not(.lpb-layout):last-child,.js-lpb-component:not(.lpb-layout):last-of-type{margin-bottom:0!important}.js-lpb-component.fancy-background-image{position:relative!important}.js-lpb-region{padding:.5rem;min-height:80px!important}.lpb-controls-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--drowl-text-color);max-width:170px}.lpb-controls.is-layout .lpb-controls-label{color:#fff}.layout>.grid-x:not(:last-child),.layout>.js-lpb-region:not(:last-child){margin-top:0!important;margin-bottom:.5rem!important}.lpb-dialog{width:90%!important;max-width:960px!important}.lpb-dialog *{box-sizing:border-box}.lpb-dialog .ui-dialog-content{padding:1rem!important}.lpb-dialog .lpb-component-list__search{margin:0 -1rem;padding:0 1rem 1rem 1rem;border-bottom:1px solid var(--drowl-gray-light,#eee)}.lpb-dialog .lpb-component-list__search .lpb-component-list-search-input{padding:.5rem;width:100%;border-radius:var(--drowl-border-radius-small);border:1px solid var(--drowl-gray-medium,#ccc)}.lpb-dialog .lpb-component-list__group>[class*=lpb-component-list__group]{width:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.5rem;margin:0 -1rem!important;padding:1rem 1rem 1rem}.lpb-dialog .lpb-component-list__group>[class*=lpb-component-list__group]+[class*=lpb-component-list__group]{border-top:1px solid var(--drowl-gray-light,#eee)}.lpb-dialog .lpb-component-list__item a{margin:0;height:100%;padding:.5rem .25rem;flex-direction:column;justify-content:center;line-height:1.1;text-align:center;border:1px solid var(--drowl-gray-light);color:var(--drowl-text-color)}.lpb-dialog .lpb-component-list__item a img{margin:0 0 .35rem 0;max-width:95px;transform:scale(.9);transition-duration:.1s;transition-timing-function:linear;transition-property:transform;box-shadow:0 0 5px rgba(0,0,0,.15)}.lpb-dialog .lpb-component-list__item a:focus-within,.lpb-dialog .lpb-component-list__item a:hover{border-color:var(--drowl-green)}.lpb-dialog .lpb-component-list__item a:focus-within img,.lpb-dialog .lpb-component-list__item a:hover img{transform:scale(1)}.layout-paragraphs-component-form #layout-paragraphs-element>fieldset:first-child{margin-top:0}.layout-paragraphs-component-form #layout-paragraphs-element>fieldset[data-drupal-selector=edit-layout-paragraphs-layout]>.fieldset__legend{display:none}.layout-paragraphs-component-form .layout-select{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}.layout-paragraphs-component-form .layout-select__item{margin:0!important;height:100%}.layout-paragraphs-component-form .layout-select__item .form-item__label.option{align-items:center;height:100%;margin:0}.layout-paragraphs-component-form .layout-select__item input:checked+label,.layout-paragraphs-component-form .layout-select__item:hover input+label{outline-color:var(--drowl-green)}.layout-paragraphs-component-form .layout-select .layout-icon[class*=drowl] .layout-icon__region{fill:#fff!important;stroke:var(--drowl-green)!important}
 
 No newline at end of file

css/admin/drowl_layouts.preview_styles.min.css

+1 −1

File changed.

Preview size limit exceeded, changes collapsed.

scss/admin/drowl_layouts.layout_paragraphs_ui.scss

+12 −1
Original line number Diff line number Diff line
@@ -8,10 +8,21 @@ 
// ============================================================================



// Show decent borders also if the user dont hovers the section

.js-lpb-region,

.js-lpb-component {

  outline: 1px solid var(--drowl-info-light);

}

.js-lpb-region {

  outline: 2px dashed var(--drowl-info-light) !important;

  .js-lpb-component:hover & {

    &:hover {

      outline: 2px dashed var(--drowl-info) !important;

    }

  }

  &.drag-target {

    outline: 2px dashed var(--drowl-success) !important;

  }

}



.js-lpb-component {

  &.lpb-layout {

    // Layout Paragraphs