cerebrate-project
/
cerebrate
mirror of https://github.com/cerebrate-project/cerebrate
1
0
Fork 0
Code Issues Releases Wiki Activity

chg: [app] More UI improvement for responsiveness

pull/93/head
Sami Mokaddem 2021-11-04 15:19:45 +01:00
parent 4f084e6beb
commit 9f7f39ec85
No known key found for this signature in database
GPG Key ID: 164C473F627A06FA
12 changed files with 297 additions and 201 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
templates/MailingLists/add_individual.php
View File

@ -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')
}

3
templates/element/genericElements/Form/metaTemplateScaffold.php
View File

@ -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']
]);

6
templates/element/genericElements/Form/multiFieldScaffold.php
View File

@ -3,8 +3,8 @@
use Cake\Utility\Inflector;
$default_template = [
'inputContainer' => '<div class="row pb-1 multi-metafield-container">{{content}}</div>',
'inputContainerError' => '<div class="row pb-1 metafield-container has-error">{{content}}</div>',
'inputContainer' => '<div class="row mb-1 multi-metafield-container">{{content}}</div>',
'inputContainerError' => '<div class="row mb-1 metafield-container has-error">{{content}}</div>',
'formGroup' => '<label class="col-sm-2 col-form-label form-label" {{attrs}}>{{label}}</label><div class="col-sm-10 multi-metafield-input-container">{{input}}{{error}}</div>',
];
$form->setTemplates($default_template);
@ -58,7 +58,7 @@ if (!empty($metaTemplateField) && !empty($multiple)) { // Add multiple field but
]
);
$multiFieldButtonHtml = sprintf(
'<div class="row pb-1 multi-metafield-container"><div class="col-sm-2 form-label"></div><div class="col-sm-10 multi-metafield-input-container">%s</div></div>',
'<div class="row mb-1 multi-metafield-container add-input-container"><div class="col-sm-2 form-label"></div><div class="col-sm-10 multi-metafield-input-container">%s</div></div>',
$this->element(
'genericElements/Form/multiFieldButton',
[

50
webroot/css/themes/additional/bootstrap-additional.css
View File

@ -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%; }

50
webroot/css/themes/theme-darkly.css
View File

@ -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 {

50
webroot/css/themes/theme-default.css
View File

@ -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 {

50
webroot/css/themes/theme-flatly.css
View File

@ -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 {

50
webroot/css/themes/theme-minty.css
View File

@ -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 {

50
webroot/css/themes/theme-quartz.css
View File

@ -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 {

50
webroot/css/themes/theme-slate.css
View File

@ -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 {

50
webroot/css/themes/theme-vapor.css
View File

@ -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 {

85
webroot/scss/custom.scss
View File

@ -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;
}
}