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) { if (individual.alternate_emails !== undefined) {
individual.alternate_emails.forEach(alternateEmail => { individual.alternate_emails.forEach(alternateEmail => {
formContainers.push( 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) { function fetchIndividual(id) {
const urlGet = `/individuals/view/${id}` const urlGet = `/individuals/view/${id}?full=1`
const options = { const options = {
statusNode: $('.alternate-emails-container') 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([ echo $this->Bootstrap->Tabs([
'pills' => true, 'pills' => true,
'data' => $tabData, '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; use Cake\Utility\Inflector;
$default_template = [ $default_template = [
'inputContainer' => '<div class="row pb-1 multi-metafield-container">{{content}}</div>', 'inputContainer' => '<div class="row mb-1 multi-metafield-container">{{content}}</div>',
'inputContainerError' => '<div class="row pb-1 metafield-container has-error">{{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>', '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); $form->setTemplates($default_template);
@ -58,7 +58,7 @@ if (!empty($metaTemplateField) && !empty($multiple)) { // Add multiple field but
] ]
); );
$multiFieldButtonHtml = sprintf( $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( $this->element(
'genericElements/Form/multiFieldButton', '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 { .btn-check:focus + .btn.btn-xs, .btn.btn-xs:focus {
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); } 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; } position: relative; }
:not(.meta-template-container) > .multi-metafield-container > .multi-metafield-input-container::before { @media (min-width: 576px) {
transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px)); .multi-metafields-container::before {
content: none !important; } }
.multi-metafields-container::before {
border-style: solid; border-style: solid;
border-color: #6c757d; border-color: #6c757d;
border-width: 2px 0px 2px 2px;
border-radius: 3px 0px 0px 3px;
opacity: 0.5;
position: absolute; position: absolute;
content: ' '; content: ' ';
width: 0.5rem; width: 0.5rem;
height: 100%; height: calc(100% - 33px);
border-width: 0px 2px 0px 0px; } transform: translate(0px, 18px); }
:not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before { .multi-metafields-container > .multi-metafield-container {
border-width: 2px 0px 0px 2px; position: relative; }
border-top-left-radius: 3px; .multi-metafields-container > .multi-metafield-container > .multi-metafield-input-container::before {
transform: translate(calc(1.5rem * -.5), -20px); } content: ' '; }
@media (min-width: 576px) { @media (min-width: 576px) {
:not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before { .multi-metafields-container > .multi-metafield-container > .multi-metafield-input-container::before {
height: calc(100% - 10px); background-color: #6c757d;
transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 20px); opacity: 0.5;
border-top-left-radius: 0px; position: absolute;
border-top-right-radius: 3px; width: 0.25rem;
border-width: 2px 2px 0px 0px; } } transform: translateX(calc(1.5rem * -.5 + 5px));
:not(.meta-template-container) > .multi-metafield-container:last-child > .multi-metafield-input-container::before { height: calc(100% + 4px); } }
transform: translateX(calc(1.5rem * -.5)); .multi-metafields-container > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
border-bottom-left-radius: 3px; border-top-left-radius: 3px;
height: 50%; border-top-right-radius: 3px; }
border-width: 0px 0px 2px 2px; } .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 { .btn-check:focus + .btn.btn-xs, .btn.btn-xs:focus {
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); } 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; } position: relative; }
:not(.meta-template-container) > .multi-metafield-container > .multi-metafield-input-container::before { @media (min-width: 576px) {
transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px)); .multi-metafields-container::before {
content: none !important; } }
.multi-metafields-container::before {
border-style: solid; border-style: solid;
border-color: #444; border-color: #444;
border-width: 2px 0px 2px 2px;
border-radius: 3px 0px 0px 3px;
opacity: 0.5;
position: absolute; position: absolute;
content: ' '; content: ' ';
width: 0.5rem; width: 0.5rem;
height: 100%; height: calc(100% - 33px);
border-width: 0px 2px 0px 0px; } transform: translate(0px, 18px); }
:not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before { .multi-metafields-container > .multi-metafield-container {
border-width: 2px 0px 0px 2px; position: relative; }
border-top-left-radius: 3px; .multi-metafields-container > .multi-metafield-container > .multi-metafield-input-container::before {
transform: translate(calc(1.5rem * -.5), -20px); } content: ' '; }
@media (min-width: 576px) { @media (min-width: 576px) {
:not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before { .multi-metafields-container > .multi-metafield-container > .multi-metafield-input-container::before {
height: calc(100% - 10px); background-color: #444;
transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 20px); opacity: 0.5;
border-top-left-radius: 0px; position: absolute;
border-top-right-radius: 3px; width: 0.25rem;
border-width: 2px 2px 0px 0px; } } transform: translateX(calc(1.5rem * -.5 + 5px));
:not(.meta-template-container) > .multi-metafield-container:last-child > .multi-metafield-input-container::before { height: calc(100% + 4px); } }
transform: translateX(calc(1.5rem * -.5)); .multi-metafields-container > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
border-bottom-left-radius: 3px; border-top-left-radius: 3px;
height: 50%; border-top-right-radius: 3px; }
border-width: 0px 0px 2px 2px; } .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 */
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 { .btn-check:focus + .btn.btn-xs, .btn.btn-xs:focus {
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); } 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; } position: relative; }
:not(.meta-template-container) > .multi-metafield-container > .multi-metafield-input-container::before { @media (min-width: 576px) {
transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px)); .multi-metafields-container::before {
content: none !important; } }
.multi-metafields-container::before {
border-style: solid; border-style: solid;
border-color: #6c757d; border-color: #6c757d;
border-width: 2px 0px 2px 2px;
border-radius: 3px 0px 0px 3px;
opacity: 0.5;
position: absolute; position: absolute;
content: ' '; content: ' ';
width: 0.5rem; width: 0.5rem;
height: 100%; height: calc(100% - 33px);
border-width: 0px 2px 0px 0px; } transform: translate(0px, 18px); }
:not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before { .multi-metafields-container > .multi-metafield-container {
border-width: 2px 0px 0px 2px; position: relative; }
border-top-left-radius: 3px; .multi-metafields-container > .multi-metafield-container > .multi-metafield-input-container::before {
transform: translate(calc(1.5rem * -.5), -20px); } content: ' '; }
@media (min-width: 576px) { @media (min-width: 576px) {
:not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before { .multi-metafields-container > .multi-metafield-container > .multi-metafield-input-container::before {
height: calc(100% - 10px); background-color: #6c757d;
transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 20px); opacity: 0.5;
border-top-left-radius: 0px; position: absolute;
border-top-right-radius: 3px; width: 0.25rem;
border-width: 2px 2px 0px 0px; } } transform: translateX(calc(1.5rem * -.5 + 5px));
:not(.meta-template-container) > .multi-metafield-container:last-child > .multi-metafield-input-container::before { height: calc(100% + 4px); } }
transform: translateX(calc(1.5rem * -.5)); .multi-metafields-container > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
border-bottom-left-radius: 3px; border-top-left-radius: 3px;
height: 50%; border-top-right-radius: 3px; }
border-width: 0px 0px 2px 2px; } .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 */
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 { .btn-check:focus + .btn.btn-xs, .btn.btn-xs:focus {
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); } 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; } position: relative; }
:not(.meta-template-container) > .multi-metafield-container > .multi-metafield-input-container::before { @media (min-width: 576px) {
transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px)); .multi-metafields-container::before {
content: none !important; } }
.multi-metafields-container::before {
border-style: solid; border-style: solid;
border-color: #95a5a6; border-color: #95a5a6;
border-width: 2px 0px 2px 2px;
border-radius: 3px 0px 0px 3px;
opacity: 0.5;
position: absolute; position: absolute;
content: ' '; content: ' ';
width: 0.5rem; width: 0.5rem;
height: 100%; height: calc(100% - 33px);
border-width: 0px 2px 0px 0px; } transform: translate(0px, 18px); }
:not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before { .multi-metafields-container > .multi-metafield-container {
border-width: 2px 0px 0px 2px; position: relative; }
border-top-left-radius: 3px; .multi-metafields-container > .multi-metafield-container > .multi-metafield-input-container::before {
transform: translate(calc(1.5rem * -.5), -20px); } content: ' '; }
@media (min-width: 576px) { @media (min-width: 576px) {
:not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before { .multi-metafields-container > .multi-metafield-container > .multi-metafield-input-container::before {
height: calc(100% - 10px); background-color: #95a5a6;
transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 20px); opacity: 0.5;
border-top-left-radius: 0px; position: absolute;
border-top-right-radius: 3px; width: 0.25rem;
border-width: 2px 2px 0px 0px; } } transform: translateX(calc(1.5rem * -.5 + 5px));
:not(.meta-template-container) > .multi-metafield-container:last-child > .multi-metafield-input-container::before { height: calc(100% + 4px); } }
transform: translateX(calc(1.5rem * -.5)); .multi-metafields-container > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
border-bottom-left-radius: 3px; border-top-left-radius: 3px;
height: 50%; border-top-right-radius: 3px; }
border-width: 0px 0px 2px 2px; } .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 */
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 { .btn-check:focus + .btn.btn-xs, .btn.btn-xs:focus {
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); } 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; } position: relative; }
:not(.meta-template-container) > .multi-metafield-container > .multi-metafield-input-container::before { @media (min-width: 576px) {
transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px)); .multi-metafields-container::before {
content: none !important; } }
.multi-metafields-container::before {
border-style: solid; border-style: solid;
border-color: #95a5a6; border-color: #95a5a6;
border-width: 2px 0px 2px 2px;
border-radius: 3px 0px 0px 3px;
opacity: 0.5;
position: absolute; position: absolute;
content: ' '; content: ' ';
width: 0.5rem; width: 0.5rem;
height: 100%; height: calc(100% - 33px);
border-width: 0px 2px 0px 0px; } transform: translate(0px, 18px); }
:not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before { .multi-metafields-container > .multi-metafield-container {
border-width: 2px 0px 0px 2px; position: relative; }
border-top-left-radius: 3px; .multi-metafields-container > .multi-metafield-container > .multi-metafield-input-container::before {
transform: translate(calc(1.5rem * -.5), -20px); } content: ' '; }
@media (min-width: 576px) { @media (min-width: 576px) {
:not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before { .multi-metafields-container > .multi-metafield-container > .multi-metafield-input-container::before {
height: calc(100% - 10px); background-color: #95a5a6;
transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 20px); opacity: 0.5;
border-top-left-radius: 0px; position: absolute;
border-top-right-radius: 3px; width: 0.25rem;
border-width: 2px 2px 0px 0px; } } transform: translateX(calc(1.5rem * -.5 + 5px));
:not(.meta-template-container) > .multi-metafield-container:last-child > .multi-metafield-input-container::before { height: calc(100% + 4px); } }
transform: translateX(calc(1.5rem * -.5)); .multi-metafields-container > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
border-bottom-left-radius: 3px; border-top-left-radius: 3px;
height: 50%; border-top-right-radius: 3px; }
border-width: 0px 0px 2px 2px; } .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 */
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 { .btn-check:focus + .btn.btn-xs, .btn.btn-xs:focus {
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); } 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; } position: relative; }
:not(.meta-template-container) > .multi-metafield-container > .multi-metafield-input-container::before { @media (min-width: 576px) {
transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px)); .multi-metafields-container::before {
content: none !important; } }
.multi-metafields-container::before {
border-style: solid; border-style: solid;
border-color: rgba(255, 255, 255, 0.4); 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; position: absolute;
content: ' '; content: ' ';
width: 0.5rem; width: 0.5rem;
height: 100%; height: calc(100% - 33px);
border-width: 0px 2px 0px 0px; } transform: translate(0px, 18px); }
:not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before { .multi-metafields-container > .multi-metafield-container {
border-width: 2px 0px 0px 2px; position: relative; }
border-top-left-radius: 3px; .multi-metafields-container > .multi-metafield-container > .multi-metafield-input-container::before {
transform: translate(calc(1.5rem * -.5), -20px); } content: ' '; }
@media (min-width: 576px) { @media (min-width: 576px) {
:not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before { .multi-metafields-container > .multi-metafield-container > .multi-metafield-input-container::before {
height: calc(100% - 10px); background-color: rgba(255, 255, 255, 0.4);
transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 20px); opacity: 0.5;
border-top-left-radius: 0px; position: absolute;
border-top-right-radius: 3px; width: 0.25rem;
border-width: 2px 2px 0px 0px; } } transform: translateX(calc(1.5rem * -.5 + 5px));
:not(.meta-template-container) > .multi-metafield-container:last-child > .multi-metafield-input-container::before { height: calc(100% + 4px); } }
transform: translateX(calc(1.5rem * -.5)); .multi-metafields-container > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
border-bottom-left-radius: 3px; border-top-left-radius: 3px;
height: 50%; border-top-right-radius: 3px; }
border-width: 0px 0px 2px 2px; } .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 */
.panel { .panel {

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

@ -294,33 +294,41 @@
.btn-check:focus + .btn.btn-xs, .btn.btn-xs:focus { .btn-check:focus + .btn.btn-xs, .btn.btn-xs:focus {
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); } 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; } position: relative; }
:not(.meta-template-container) > .multi-metafield-container > .multi-metafield-input-container::before { @media (min-width: 576px) {
transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px)); .multi-metafields-container::before {
content: none !important; } }
.multi-metafields-container::before {
border-style: solid; border-style: solid;
border-color: #7a8288; border-color: #7a8288;
border-width: 2px 0px 2px 2px;
border-radius: 3px 0px 0px 3px;
opacity: 0.5;
position: absolute; position: absolute;
content: ' '; content: ' ';
width: 0.5rem; width: 0.5rem;
height: 100%; height: calc(100% - 33px);
border-width: 0px 2px 0px 0px; } transform: translate(0px, 18px); }
:not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before { .multi-metafields-container > .multi-metafield-container {
border-width: 2px 0px 0px 2px; position: relative; }
border-top-left-radius: 3px; .multi-metafields-container > .multi-metafield-container > .multi-metafield-input-container::before {
transform: translate(calc(1.5rem * -.5), -20px); } content: ' '; }
@media (min-width: 576px) { @media (min-width: 576px) {
:not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before { .multi-metafields-container > .multi-metafield-container > .multi-metafield-input-container::before {
height: calc(100% - 10px); background-color: #7a8288;
transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 20px); opacity: 0.5;
border-top-left-radius: 0px; position: absolute;
border-top-right-radius: 3px; width: 0.25rem;
border-width: 2px 2px 0px 0px; } } transform: translateX(calc(1.5rem * -.5 + 5px));
:not(.meta-template-container) > .multi-metafield-container:last-child > .multi-metafield-input-container::before { height: calc(100% + 4px); } }
transform: translateX(calc(1.5rem * -.5)); .multi-metafields-container > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
border-bottom-left-radius: 3px; border-top-left-radius: 3px;
height: 50%; border-top-right-radius: 3px; }
border-width: 0px 0px 2px 2px; } .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 */
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 { .btn-check:focus + .btn.btn-xs, .btn.btn-xs:focus {
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); } 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; } position: relative; }
:not(.meta-template-container) > .multi-metafield-container > .multi-metafield-input-container::before { @media (min-width: 576px) {
transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px)); .multi-metafields-container::before {
content: none !important; } }
.multi-metafields-container::before {
border-style: solid; border-style: solid;
border-color: #ea39b8; border-color: #ea39b8;
border-width: 2px 0px 2px 2px;
border-radius: 3px 0px 0px 3px;
opacity: 0.5;
position: absolute; position: absolute;
content: ' '; content: ' ';
width: 0.5rem; width: 0.5rem;
height: 100%; height: calc(100% - 33px);
border-width: 0px 2px 0px 0px; } transform: translate(0px, 18px); }
:not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before { .multi-metafields-container > .multi-metafield-container {
border-width: 2px 0px 0px 2px; position: relative; }
border-top-left-radius: 3px; .multi-metafields-container > .multi-metafield-container > .multi-metafield-input-container::before {
transform: translate(calc(1.5rem * -.5), -20px); } content: ' '; }
@media (min-width: 576px) { @media (min-width: 576px) {
:not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before { .multi-metafields-container > .multi-metafield-container > .multi-metafield-input-container::before {
height: calc(100% - 10px); background-color: #ea39b8;
transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 20px); opacity: 0.5;
border-top-left-radius: 0px; position: absolute;
border-top-right-radius: 3px; width: 0.25rem;
border-width: 2px 2px 0px 0px; } } transform: translateX(calc(1.5rem * -.5 + 5px));
:not(.meta-template-container) > .multi-metafield-container:last-child > .multi-metafield-input-container::before { height: calc(100% + 4px); } }
transform: translateX(calc(1.5rem * -.5)); .multi-metafields-container > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
border-bottom-left-radius: 3px; border-top-left-radius: 3px;
height: 50%; border-top-right-radius: 3px; }
border-width: 0px 0px 2px 2px; } .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 */
.panel { .panel {

85
webroot/scss/custom.scss
View File

@ -1,41 +1,72 @@
$secondary: #6c757d !default; $secondary: #6c757d !default;
$translateX: calc(1.5rem * -.5 + 5px);
$rectHeight: calc(100% + 4px);
$borderRadius: 3px;
:not(.meta-template-container) > .multi-metafield-container { .multi-metafields-container {
position: relative; position: relative;
& > .multi-metafield-input-container::before { @include media-breakpoint-up(sm) {
transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px)); &::before {
content: none !important;
}
}
&::before {
border-style: solid; border-style: solid;
border-color: $secondary; border-color: $secondary;
border-width: 2px 0px 2px 2px;
border-radius: 3px 0px 0px 3px;
opacity: 0.5;
position: absolute; position: absolute;
content: ' '; content: ' ';
width: 0.5rem; width: 0.5rem;
height: 100%; height: calc(100% - 33px);
border-width: 0px 2px 0px 0px; transform: translate(0px, 18px);
} }
&:first-child > .multi-metafield-input-container::before { // @include media-breakpoint-up(sm) {
border-width: 2px 0px 0px 2px; // &::before {
border-top-left-radius: 3px; // content: none !important;
transform: translate(calc(1.5rem * -.5), -20px); // }
} // }
@include media-breakpoint-up(sm) { // &::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 { &:first-child > .multi-metafield-input-container::before {
height: calc(100% - 10px); border-top-left-radius: $borderRadius;
transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 20px); border-top-right-radius: $borderRadius;
border-top-left-radius: 0px; }
border-top-right-radius: 3px;
border-width: 2px 2px 0px 0px; &: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;
}
} }