From 9f7f39ec85c4c401004bcbaf2f8f0a2edabe564d Mon Sep 17 00:00:00 2001 From: Sami Mokaddem Date: Thu, 4 Nov 2021 15:19:45 +0100 Subject: [PATCH] chg: [app] More UI improvement for responsiveness --- templates/MailingLists/add_individual.php | 4 +- .../Form/metaTemplateScaffold.php | 3 +- .../Form/multiFieldScaffold.php | 6 +- .../additional/bootstrap-additional.css | 50 ++++++----- webroot/css/themes/theme-darkly.css | 50 ++++++----- webroot/css/themes/theme-default.css | 50 ++++++----- webroot/css/themes/theme-flatly.css | 50 ++++++----- webroot/css/themes/theme-minty.css | 50 ++++++----- webroot/css/themes/theme-quartz.css | 50 ++++++----- webroot/css/themes/theme-slate.css | 50 ++++++----- webroot/css/themes/theme-vapor.css | 50 ++++++----- webroot/scss/custom.scss | 85 +++++++++++++------ 12 files changed, 297 insertions(+), 201 deletions(-) diff --git a/templates/MailingLists/add_individual.php b/templates/MailingLists/add_individual.php index 7ac22a2..0455d22 100644 --- a/templates/MailingLists/add_individual.php +++ b/templates/MailingLists/add_individual.php @@ -48,7 +48,7 @@ echo $this->element('genericElements/Form/genericForm', [ if (individual.alternate_emails !== undefined) { individual.alternate_emails.forEach(alternateEmail => { formContainers.push( - genForContainer(alternateEmail.id, alternateEmail.value, `${alternateEmail.metaTemplate.namespace} :: ${alternateEmail.metaTemplate.name}`, false) + genForContainer(alternateEmail.id, alternateEmail.value, `${alternateEmail.meta_template_field.meta_template.namespace} :: ${alternateEmail.field}`, false) ) }) } @@ -99,7 +99,7 @@ echo $this->element('genericElements/Form/genericForm', [ } function fetchIndividual(id) { - const urlGet = `/individuals/view/${id}` + const urlGet = `/individuals/view/${id}?full=1` const options = { statusNode: $('.alternate-emails-container') } diff --git a/templates/element/genericElements/Form/metaTemplateScaffold.php b/templates/element/genericElements/Form/metaTemplateScaffold.php index 6f20048..92d3fca 100644 --- a/templates/element/genericElements/Form/metaTemplateScaffold.php +++ b/templates/element/genericElements/Form/metaTemplateScaffold.php @@ -83,5 +83,6 @@ $this->Form->setTemplates($backupTemplates); echo $this->Bootstrap->Tabs([ 'pills' => true, 'data' => $tabData, - 'nav-class' => ['mb-3'] + 'nav-class' => ['shadow mb-3 p-2 rounded'], + 'content-class' => ['pt-2 px-3'] ]); diff --git a/templates/element/genericElements/Form/multiFieldScaffold.php b/templates/element/genericElements/Form/multiFieldScaffold.php index 90584e4..ce3c830 100644 --- a/templates/element/genericElements/Form/multiFieldScaffold.php +++ b/templates/element/genericElements/Form/multiFieldScaffold.php @@ -3,8 +3,8 @@ use Cake\Utility\Inflector; $default_template = [ - 'inputContainer' => '
{{content}}
', - 'inputContainerError' => '
{{content}}
', + 'inputContainer' => '
{{content}}
', + 'inputContainerError' => '
{{content}}
', 'formGroup' => '
{{input}}{{error}}
', ]; $form->setTemplates($default_template); @@ -58,7 +58,7 @@ if (!empty($metaTemplateField) && !empty($multiple)) { // Add multiple field but ] ); $multiFieldButtonHtml = sprintf( - '
%s
', + '
%s
', $this->element( 'genericElements/Form/multiFieldButton', [ diff --git a/webroot/css/themes/additional/bootstrap-additional.css b/webroot/css/themes/additional/bootstrap-additional.css index 1f0e021..efab752 100644 --- a/webroot/css/themes/additional/bootstrap-additional.css +++ b/webroot/css/themes/additional/bootstrap-additional.css @@ -298,30 +298,38 @@ .btn-check:focus + .btn.btn-xs, .btn.btn-xs:focus { box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); } -:not(.meta-template-container) > .multi-metafield-container { +.multi-metafields-container { position: relative; } - :not(.meta-template-container) > .multi-metafield-container > .multi-metafield-input-container::before { - transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px)); + @media (min-width: 576px) { + .multi-metafields-container::before { + content: none !important; } } + .multi-metafields-container::before { border-style: solid; border-color: #6c757d; + border-width: 2px 0px 2px 2px; + border-radius: 3px 0px 0px 3px; + opacity: 0.5; position: absolute; content: ' '; width: 0.5rem; - height: 100%; - border-width: 0px 2px 0px 0px; } - :not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before { - border-width: 2px 0px 0px 2px; - border-top-left-radius: 3px; - transform: translate(calc(1.5rem * -.5), -20px); } - @media (min-width: 576px) { - :not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before { - height: calc(100% - 10px); - transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 20px); - border-top-left-radius: 0px; - border-top-right-radius: 3px; - border-width: 2px 2px 0px 0px; } } - :not(.meta-template-container) > .multi-metafield-container:last-child > .multi-metafield-input-container::before { - transform: translateX(calc(1.5rem * -.5)); - border-bottom-left-radius: 3px; - height: 50%; - border-width: 0px 0px 2px 2px; } + height: calc(100% - 33px); + transform: translate(0px, 18px); } + .multi-metafields-container > .multi-metafield-container { + position: relative; } + .multi-metafields-container > .multi-metafield-container > .multi-metafield-input-container::before { + content: ' '; } + @media (min-width: 576px) { + .multi-metafields-container > .multi-metafield-container > .multi-metafield-input-container::before { + background-color: #6c757d; + opacity: 0.5; + position: absolute; + width: 0.25rem; + transform: translateX(calc(1.5rem * -.5 + 5px)); + height: calc(100% + 4px); } } + .multi-metafields-container > .multi-metafield-container:first-child > .multi-metafield-input-container::before { + border-top-left-radius: 3px; + border-top-right-radius: 3px; } + .multi-metafields-container > .multi-metafield-container:last-child > .multi-metafield-input-container::before { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + height: 100%; } diff --git a/webroot/css/themes/theme-darkly.css b/webroot/css/themes/theme-darkly.css index 393d869..b8e9bd0 100644 --- a/webroot/css/themes/theme-darkly.css +++ b/webroot/css/themes/theme-darkly.css @@ -298,33 +298,41 @@ .btn-check:focus + .btn.btn-xs, .btn.btn-xs:focus { box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); } -:not(.meta-template-container) > .multi-metafield-container { +.multi-metafields-container { position: relative; } - :not(.meta-template-container) > .multi-metafield-container > .multi-metafield-input-container::before { - transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px)); + @media (min-width: 576px) { + .multi-metafields-container::before { + content: none !important; } } + .multi-metafields-container::before { border-style: solid; border-color: #444; + border-width: 2px 0px 2px 2px; + border-radius: 3px 0px 0px 3px; + opacity: 0.5; position: absolute; content: ' '; width: 0.5rem; - height: 100%; - border-width: 0px 2px 0px 0px; } - :not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before { - border-width: 2px 0px 0px 2px; - border-top-left-radius: 3px; - transform: translate(calc(1.5rem * -.5), -20px); } - @media (min-width: 576px) { - :not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before { - height: calc(100% - 10px); - transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 20px); - border-top-left-radius: 0px; - border-top-right-radius: 3px; - border-width: 2px 2px 0px 0px; } } - :not(.meta-template-container) > .multi-metafield-container:last-child > .multi-metafield-input-container::before { - transform: translateX(calc(1.5rem * -.5)); - border-bottom-left-radius: 3px; - height: 50%; - border-width: 0px 0px 2px 2px; } + height: calc(100% - 33px); + transform: translate(0px, 18px); } + .multi-metafields-container > .multi-metafield-container { + position: relative; } + .multi-metafields-container > .multi-metafield-container > .multi-metafield-input-container::before { + content: ' '; } + @media (min-width: 576px) { + .multi-metafields-container > .multi-metafield-container > .multi-metafield-input-container::before { + background-color: #444; + opacity: 0.5; + position: absolute; + width: 0.25rem; + transform: translateX(calc(1.5rem * -.5 + 5px)); + height: calc(100% + 4px); } } + .multi-metafields-container > .multi-metafield-container:first-child > .multi-metafield-input-container::before { + border-top-left-radius: 3px; + border-top-right-radius: 3px; } + .multi-metafields-container > .multi-metafield-container:last-child > .multi-metafield-input-container::before { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + height: 100%; } /* Body */ body { diff --git a/webroot/css/themes/theme-default.css b/webroot/css/themes/theme-default.css index 05b8f97..18f7f2b 100644 --- a/webroot/css/themes/theme-default.css +++ b/webroot/css/themes/theme-default.css @@ -298,33 +298,41 @@ .btn-check:focus + .btn.btn-xs, .btn.btn-xs:focus { box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); } -:not(.meta-template-container) > .multi-metafield-container { +.multi-metafields-container { position: relative; } - :not(.meta-template-container) > .multi-metafield-container > .multi-metafield-input-container::before { - transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px)); + @media (min-width: 576px) { + .multi-metafields-container::before { + content: none !important; } } + .multi-metafields-container::before { border-style: solid; border-color: #6c757d; + border-width: 2px 0px 2px 2px; + border-radius: 3px 0px 0px 3px; + opacity: 0.5; position: absolute; content: ' '; width: 0.5rem; - height: 100%; - border-width: 0px 2px 0px 0px; } - :not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before { - border-width: 2px 0px 0px 2px; - border-top-left-radius: 3px; - transform: translate(calc(1.5rem * -.5), -20px); } - @media (min-width: 576px) { - :not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before { - height: calc(100% - 10px); - transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 20px); - border-top-left-radius: 0px; - border-top-right-radius: 3px; - border-width: 2px 2px 0px 0px; } } - :not(.meta-template-container) > .multi-metafield-container:last-child > .multi-metafield-input-container::before { - transform: translateX(calc(1.5rem * -.5)); - border-bottom-left-radius: 3px; - height: 50%; - border-width: 0px 0px 2px 2px; } + height: calc(100% - 33px); + transform: translate(0px, 18px); } + .multi-metafields-container > .multi-metafield-container { + position: relative; } + .multi-metafields-container > .multi-metafield-container > .multi-metafield-input-container::before { + content: ' '; } + @media (min-width: 576px) { + .multi-metafields-container > .multi-metafield-container > .multi-metafield-input-container::before { + background-color: #6c757d; + opacity: 0.5; + position: absolute; + width: 0.25rem; + transform: translateX(calc(1.5rem * -.5 + 5px)); + height: calc(100% + 4px); } } + .multi-metafields-container > .multi-metafield-container:first-child > .multi-metafield-input-container::before { + border-top-left-radius: 3px; + border-top-right-radius: 3px; } + .multi-metafields-container > .multi-metafield-container:last-child > .multi-metafield-input-container::before { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + height: 100%; } /* Body */ body { diff --git a/webroot/css/themes/theme-flatly.css b/webroot/css/themes/theme-flatly.css index e6002cf..7129d84 100644 --- a/webroot/css/themes/theme-flatly.css +++ b/webroot/css/themes/theme-flatly.css @@ -298,33 +298,41 @@ .btn-check:focus + .btn.btn-xs, .btn.btn-xs:focus { box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); } -:not(.meta-template-container) > .multi-metafield-container { +.multi-metafields-container { position: relative; } - :not(.meta-template-container) > .multi-metafield-container > .multi-metafield-input-container::before { - transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px)); + @media (min-width: 576px) { + .multi-metafields-container::before { + content: none !important; } } + .multi-metafields-container::before { border-style: solid; border-color: #95a5a6; + border-width: 2px 0px 2px 2px; + border-radius: 3px 0px 0px 3px; + opacity: 0.5; position: absolute; content: ' '; width: 0.5rem; - height: 100%; - border-width: 0px 2px 0px 0px; } - :not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before { - border-width: 2px 0px 0px 2px; - border-top-left-radius: 3px; - transform: translate(calc(1.5rem * -.5), -20px); } - @media (min-width: 576px) { - :not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before { - height: calc(100% - 10px); - transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 20px); - border-top-left-radius: 0px; - border-top-right-radius: 3px; - border-width: 2px 2px 0px 0px; } } - :not(.meta-template-container) > .multi-metafield-container:last-child > .multi-metafield-input-container::before { - transform: translateX(calc(1.5rem * -.5)); - border-bottom-left-radius: 3px; - height: 50%; - border-width: 0px 0px 2px 2px; } + height: calc(100% - 33px); + transform: translate(0px, 18px); } + .multi-metafields-container > .multi-metafield-container { + position: relative; } + .multi-metafields-container > .multi-metafield-container > .multi-metafield-input-container::before { + content: ' '; } + @media (min-width: 576px) { + .multi-metafields-container > .multi-metafield-container > .multi-metafield-input-container::before { + background-color: #95a5a6; + opacity: 0.5; + position: absolute; + width: 0.25rem; + transform: translateX(calc(1.5rem * -.5 + 5px)); + height: calc(100% + 4px); } } + .multi-metafields-container > .multi-metafield-container:first-child > .multi-metafield-input-container::before { + border-top-left-radius: 3px; + border-top-right-radius: 3px; } + .multi-metafields-container > .multi-metafield-container:last-child > .multi-metafield-input-container::before { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + height: 100%; } /* Body */ body { diff --git a/webroot/css/themes/theme-minty.css b/webroot/css/themes/theme-minty.css index 643a74a..635279a 100644 --- a/webroot/css/themes/theme-minty.css +++ b/webroot/css/themes/theme-minty.css @@ -298,33 +298,41 @@ .btn-check:focus + .btn.btn-xs, .btn.btn-xs:focus { box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); } -:not(.meta-template-container) > .multi-metafield-container { +.multi-metafields-container { position: relative; } - :not(.meta-template-container) > .multi-metafield-container > .multi-metafield-input-container::before { - transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px)); + @media (min-width: 576px) { + .multi-metafields-container::before { + content: none !important; } } + .multi-metafields-container::before { border-style: solid; border-color: #95a5a6; + border-width: 2px 0px 2px 2px; + border-radius: 3px 0px 0px 3px; + opacity: 0.5; position: absolute; content: ' '; width: 0.5rem; - height: 100%; - border-width: 0px 2px 0px 0px; } - :not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before { - border-width: 2px 0px 0px 2px; - border-top-left-radius: 3px; - transform: translate(calc(1.5rem * -.5), -20px); } - @media (min-width: 576px) { - :not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before { - height: calc(100% - 10px); - transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 20px); - border-top-left-radius: 0px; - border-top-right-radius: 3px; - border-width: 2px 2px 0px 0px; } } - :not(.meta-template-container) > .multi-metafield-container:last-child > .multi-metafield-input-container::before { - transform: translateX(calc(1.5rem * -.5)); - border-bottom-left-radius: 3px; - height: 50%; - border-width: 0px 0px 2px 2px; } + height: calc(100% - 33px); + transform: translate(0px, 18px); } + .multi-metafields-container > .multi-metafield-container { + position: relative; } + .multi-metafields-container > .multi-metafield-container > .multi-metafield-input-container::before { + content: ' '; } + @media (min-width: 576px) { + .multi-metafields-container > .multi-metafield-container > .multi-metafield-input-container::before { + background-color: #95a5a6; + opacity: 0.5; + position: absolute; + width: 0.25rem; + transform: translateX(calc(1.5rem * -.5 + 5px)); + height: calc(100% + 4px); } } + .multi-metafields-container > .multi-metafield-container:first-child > .multi-metafield-input-container::before { + border-top-left-radius: 3px; + border-top-right-radius: 3px; } + .multi-metafields-container > .multi-metafield-container:last-child > .multi-metafield-input-container::before { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + height: 100%; } /* Body */ body { diff --git a/webroot/css/themes/theme-quartz.css b/webroot/css/themes/theme-quartz.css index 075d9b8..29c4396 100644 --- a/webroot/css/themes/theme-quartz.css +++ b/webroot/css/themes/theme-quartz.css @@ -298,33 +298,41 @@ .btn-check:focus + .btn.btn-xs, .btn.btn-xs:focus { box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); } -:not(.meta-template-container) > .multi-metafield-container { +.multi-metafields-container { position: relative; } - :not(.meta-template-container) > .multi-metafield-container > .multi-metafield-input-container::before { - transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px)); + @media (min-width: 576px) { + .multi-metafields-container::before { + content: none !important; } } + .multi-metafields-container::before { border-style: solid; border-color: rgba(255, 255, 255, 0.4); + border-width: 2px 0px 2px 2px; + border-radius: 3px 0px 0px 3px; + opacity: 0.5; position: absolute; content: ' '; width: 0.5rem; - height: 100%; - border-width: 0px 2px 0px 0px; } - :not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before { - border-width: 2px 0px 0px 2px; - border-top-left-radius: 3px; - transform: translate(calc(1.5rem * -.5), -20px); } - @media (min-width: 576px) { - :not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before { - height: calc(100% - 10px); - transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 20px); - border-top-left-radius: 0px; - border-top-right-radius: 3px; - border-width: 2px 2px 0px 0px; } } - :not(.meta-template-container) > .multi-metafield-container:last-child > .multi-metafield-input-container::before { - transform: translateX(calc(1.5rem * -.5)); - border-bottom-left-radius: 3px; - height: 50%; - border-width: 0px 0px 2px 2px; } + height: calc(100% - 33px); + transform: translate(0px, 18px); } + .multi-metafields-container > .multi-metafield-container { + position: relative; } + .multi-metafields-container > .multi-metafield-container > .multi-metafield-input-container::before { + content: ' '; } + @media (min-width: 576px) { + .multi-metafields-container > .multi-metafield-container > .multi-metafield-input-container::before { + background-color: rgba(255, 255, 255, 0.4); + opacity: 0.5; + position: absolute; + width: 0.25rem; + transform: translateX(calc(1.5rem * -.5 + 5px)); + height: calc(100% + 4px); } } + .multi-metafields-container > .multi-metafield-container:first-child > .multi-metafield-input-container::before { + border-top-left-radius: 3px; + border-top-right-radius: 3px; } + .multi-metafields-container > .multi-metafield-container:last-child > .multi-metafield-input-container::before { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + height: 100%; } /* Body */ .panel { diff --git a/webroot/css/themes/theme-slate.css b/webroot/css/themes/theme-slate.css index f94c3f9..5609005 100644 --- a/webroot/css/themes/theme-slate.css +++ b/webroot/css/themes/theme-slate.css @@ -294,33 +294,41 @@ .btn-check:focus + .btn.btn-xs, .btn.btn-xs:focus { box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); } -:not(.meta-template-container) > .multi-metafield-container { +.multi-metafields-container { position: relative; } - :not(.meta-template-container) > .multi-metafield-container > .multi-metafield-input-container::before { - transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px)); + @media (min-width: 576px) { + .multi-metafields-container::before { + content: none !important; } } + .multi-metafields-container::before { border-style: solid; border-color: #7a8288; + border-width: 2px 0px 2px 2px; + border-radius: 3px 0px 0px 3px; + opacity: 0.5; position: absolute; content: ' '; width: 0.5rem; - height: 100%; - border-width: 0px 2px 0px 0px; } - :not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before { - border-width: 2px 0px 0px 2px; - border-top-left-radius: 3px; - transform: translate(calc(1.5rem * -.5), -20px); } - @media (min-width: 576px) { - :not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before { - height: calc(100% - 10px); - transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 20px); - border-top-left-radius: 0px; - border-top-right-radius: 3px; - border-width: 2px 2px 0px 0px; } } - :not(.meta-template-container) > .multi-metafield-container:last-child > .multi-metafield-input-container::before { - transform: translateX(calc(1.5rem * -.5)); - border-bottom-left-radius: 3px; - height: 50%; - border-width: 0px 0px 2px 2px; } + height: calc(100% - 33px); + transform: translate(0px, 18px); } + .multi-metafields-container > .multi-metafield-container { + position: relative; } + .multi-metafields-container > .multi-metafield-container > .multi-metafield-input-container::before { + content: ' '; } + @media (min-width: 576px) { + .multi-metafields-container > .multi-metafield-container > .multi-metafield-input-container::before { + background-color: #7a8288; + opacity: 0.5; + position: absolute; + width: 0.25rem; + transform: translateX(calc(1.5rem * -.5 + 5px)); + height: calc(100% + 4px); } } + .multi-metafields-container > .multi-metafield-container:first-child > .multi-metafield-input-container::before { + border-top-left-radius: 3px; + border-top-right-radius: 3px; } + .multi-metafields-container > .multi-metafield-container:last-child > .multi-metafield-input-container::before { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + height: 100%; } /* Body */ body { diff --git a/webroot/css/themes/theme-vapor.css b/webroot/css/themes/theme-vapor.css index 8015474..f517138 100644 --- a/webroot/css/themes/theme-vapor.css +++ b/webroot/css/themes/theme-vapor.css @@ -298,33 +298,41 @@ .btn-check:focus + .btn.btn-xs, .btn.btn-xs:focus { box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); } -:not(.meta-template-container) > .multi-metafield-container { +.multi-metafields-container { position: relative; } - :not(.meta-template-container) > .multi-metafield-container > .multi-metafield-input-container::before { - transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px)); + @media (min-width: 576px) { + .multi-metafields-container::before { + content: none !important; } } + .multi-metafields-container::before { border-style: solid; border-color: #ea39b8; + border-width: 2px 0px 2px 2px; + border-radius: 3px 0px 0px 3px; + opacity: 0.5; position: absolute; content: ' '; width: 0.5rem; - height: 100%; - border-width: 0px 2px 0px 0px; } - :not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before { - border-width: 2px 0px 0px 2px; - border-top-left-radius: 3px; - transform: translate(calc(1.5rem * -.5), -20px); } - @media (min-width: 576px) { - :not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before { - height: calc(100% - 10px); - transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 20px); - border-top-left-radius: 0px; - border-top-right-radius: 3px; - border-width: 2px 2px 0px 0px; } } - :not(.meta-template-container) > .multi-metafield-container:last-child > .multi-metafield-input-container::before { - transform: translateX(calc(1.5rem * -.5)); - border-bottom-left-radius: 3px; - height: 50%; - border-width: 0px 0px 2px 2px; } + height: calc(100% - 33px); + transform: translate(0px, 18px); } + .multi-metafields-container > .multi-metafield-container { + position: relative; } + .multi-metafields-container > .multi-metafield-container > .multi-metafield-input-container::before { + content: ' '; } + @media (min-width: 576px) { + .multi-metafields-container > .multi-metafield-container > .multi-metafield-input-container::before { + background-color: #ea39b8; + opacity: 0.5; + position: absolute; + width: 0.25rem; + transform: translateX(calc(1.5rem * -.5 + 5px)); + height: calc(100% + 4px); } } + .multi-metafields-container > .multi-metafield-container:first-child > .multi-metafield-input-container::before { + border-top-left-radius: 3px; + border-top-right-radius: 3px; } + .multi-metafields-container > .multi-metafield-container:last-child > .multi-metafield-input-container::before { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + height: 100%; } /* Body */ .panel { diff --git a/webroot/scss/custom.scss b/webroot/scss/custom.scss index 3738b86..ac45ee4 100644 --- a/webroot/scss/custom.scss +++ b/webroot/scss/custom.scss @@ -1,41 +1,72 @@ $secondary: #6c757d !default; +$translateX: calc(1.5rem * -.5 + 5px); +$rectHeight: calc(100% + 4px); +$borderRadius: 3px; -:not(.meta-template-container) > .multi-metafield-container { - position: relative; +.multi-metafields-container { + position: relative; - & > .multi-metafield-input-container::before { - transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px)); + @include media-breakpoint-up(sm) { + &::before { + content: none !important; + } + } + &::before { border-style: solid; border-color: $secondary; + border-width: 2px 0px 2px 2px; + border-radius: 3px 0px 0px 3px; + opacity: 0.5; position: absolute; content: ' '; width: 0.5rem; - height: 100%; - border-width: 0px 2px 0px 0px; + height: calc(100% - 33px); + transform: translate(0px, 18px); } - &:first-child > .multi-metafield-input-container::before { - border-width: 2px 0px 0px 2px; - border-top-left-radius: 3px; - transform: translate(calc(1.5rem * -.5), -20px); - } - @include media-breakpoint-up(sm) { + // @include media-breakpoint-up(sm) { + // &::before { + // content: none !important; + // } + // } + // &::before { + // content: ' '; + // background-color: $secondary; + // opacity: 0.5; + // position: absolute; + // width: 0.25rem; + // transform: translate(5px, 10px); + // height: calc(100% - 17px); + // border-radius: $borderRadius; + // } + + & > .multi-metafield-container { + position: relative; + + & > .multi-metafield-input-container::before { + content: ' '; + } + + @include media-breakpoint-up(sm) { + & > .multi-metafield-input-container::before { + background-color: $secondary; + opacity: 0.5; + position: absolute; + width: 0.25rem; + transform: translateX($translateX); + height: $rectHeight; + } + } + &:first-child > .multi-metafield-input-container::before { - height: calc(100% - 10px); - transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 20px); - border-top-left-radius: 0px; - border-top-right-radius: 3px; - border-width: 2px 2px 0px 0px; + border-top-left-radius: $borderRadius; + border-top-right-radius: $borderRadius; + } + + &:last-child > .multi-metafield-input-container::before { + border-bottom-left-radius: $borderRadius; + border-bottom-right-radius: $borderRadius; + height: 100%; } } - - &:last-child > .multi-metafield-input-container::before { - transform: translateX(calc(1.5rem * -.5)); - border-bottom-left-radius: 3px; - height: 50%; - border-width: 0px 0px 2px 2px; - } } - - -