chg: [app] Various layout improvements for responsiveness
parent
c55088aa85
commit
4f084e6beb
|
@ -779,7 +779,7 @@ class BoostrapListTable extends BootstrapGeneric {
|
|||
$rowValue = $this->genCell($field);
|
||||
$rowKey = $this->genNode('th', [
|
||||
'class' => [
|
||||
'col-sm-2'
|
||||
'col-4 col-sm-2'
|
||||
],
|
||||
'scope' => 'row'
|
||||
], h($field['key']));
|
||||
|
@ -808,7 +808,7 @@ class BoostrapListTable extends BootstrapGeneric {
|
|||
}
|
||||
return $this->genNode('td', [
|
||||
'class' => [
|
||||
'col-sm-10',
|
||||
'col-8 col-sm-10',
|
||||
!empty($row['_cellVariant']) ? "bg-{$row['_cellVariant']}" : ''
|
||||
]
|
||||
], $cellContent);
|
||||
|
|
|
@ -9,12 +9,12 @@
|
|||
<?= $data['description'] ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<div class="panel col-8">
|
||||
<div class="panel col-lg-8">
|
||||
<?= $fieldsString ?>
|
||||
</div>
|
||||
|
||||
<?php if (!empty($metaTemplateString)) : ?>
|
||||
<div class="col-10">
|
||||
<div class="col-lg-10">
|
||||
<?=
|
||||
$this->Bootstrap->accordion(
|
||||
[
|
||||
|
|
|
@ -37,7 +37,7 @@
|
|||
'select' => '<select name="{{name}}" {{attrs}}>{{content}}</select>',
|
||||
'checkbox' => '<input type="checkbox" name="{{name}}" value="{{value}}"{{attrs}}>',
|
||||
'checkboxFormGroup' => '{{label}}',
|
||||
'formGroup' => '<div class="col-sm-2 form-label" {{attrs}}>{{label}}</div><div class="col-sm-10">{{input}}{{error}}</div>',
|
||||
'formGroup' => '<label class="col-sm-2 col-form-label form-label" {{attrs}}>{{label}}</label><div class="col-sm-10">{{input}}{{error}}</div>',
|
||||
'nestingLabel' => '{{hidden}}<div class="col-sm-2 form-label">{{text}}</div><div class="col-sm-10">{{input}}</div>',
|
||||
'option' => '<option value="{{value}}"{{attrs}}>{{text}}</option>',
|
||||
'optgroup' => '<optgroup label="{{label}}"{{attrs}}>{{content}}</optgroup>',
|
||||
|
|
|
@ -5,7 +5,7 @@ use Cake\Utility\Inflector;
|
|||
$default_template = [
|
||||
'inputContainer' => '<div class="row mb-3 metafield-container">{{content}}</div>',
|
||||
'inputContainerError' => '<div class="row mb-3 metafield-container has-error">{{content}}</div>',
|
||||
'formGroup' => '<div class="col-sm-2 form-label" {{attrs}}>{{label}}</div><div class="col-sm-10">{{input}}{{error}}</div>',
|
||||
'formGroup' => '<label class="col-sm-2 col-form-label form-label" {{attrs}}>{{label}}</label><div class="col-sm-10">{{input}}{{error}}</div>',
|
||||
];
|
||||
$this->Form->setTemplates($default_template);
|
||||
$backupTemplates = $this->Form->getTemplates();
|
||||
|
@ -38,8 +38,9 @@ foreach ($metaTemplatesData as $i => $metaTemplate) {
|
|||
$metaField = reset($metaTemplateField->metaFields);
|
||||
$fieldData = [
|
||||
'field' => sprintf('MetaTemplates.%s.meta_template_fields.%s.metaFields.%s.value', $metaField->meta_template_id, $metaField->meta_template_field_id, $metaField->id),
|
||||
'label' => $metaTemplateField->field,
|
||||
'label' => $metaTemplateField->label,
|
||||
];
|
||||
$this->Form->setTemplates($backupTemplates);
|
||||
$fieldsHtml .= $this->element(
|
||||
'genericElements/Form/fieldScaffold',
|
||||
[
|
||||
|
@ -60,12 +61,11 @@ foreach ($metaTemplatesData as $i => $metaTemplate) {
|
|||
'form' => $this->Form,
|
||||
]
|
||||
);
|
||||
$this->Form->setTemplates($backupTemplates);
|
||||
} else {
|
||||
$this->Form->setTemplates($backupTemplates);
|
||||
$fieldData = [
|
||||
'field' => sprintf('MetaTemplates.%s.meta_template_fields.%s.metaFields.new.0', $metaTemplateField->meta_template_id, $metaTemplateField->id),
|
||||
'label' => $metaTemplateField->field,
|
||||
'label' => $metaTemplateField->label,
|
||||
];
|
||||
$fieldsHtml .= $this->element(
|
||||
'genericElements/Form/fieldScaffold',
|
||||
|
@ -79,6 +79,7 @@ foreach ($metaTemplatesData as $i => $metaTemplate) {
|
|||
}
|
||||
$tabData['content'][$i] = $fieldsHtml;
|
||||
}
|
||||
$this->Form->setTemplates($backupTemplates);
|
||||
echo $this->Bootstrap->Tabs([
|
||||
'pills' => true,
|
||||
'data' => $tabData,
|
||||
|
|
|
@ -1,8 +1,11 @@
|
|||
<?php
|
||||
|
||||
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>',
|
||||
'formGroup' => '<div class="col-sm-2 form-label" {{attrs}}>{{label}}</div><div class="col-sm-10">{{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);
|
||||
|
||||
|
@ -10,8 +13,9 @@ $fieldsHtml = '';
|
|||
$labelPrintedOnce = false;
|
||||
if (!empty($metaFieldsEntities)) {
|
||||
foreach ($metaFieldsEntities as $i => $metaFieldsEntity) {
|
||||
$metaFieldsEntity->label = Inflector::humanize($metaFieldsEntity->field);
|
||||
$fieldData = [
|
||||
'label' => $metaFieldsEntity->field,
|
||||
'label' => $metaFieldsEntity->label,
|
||||
'field' => sprintf('MetaTemplates.%s.meta_template_fields.%s.metaFields.%s.value', $metaFieldsEntity->meta_template_id, $metaFieldsEntity->meta_template_field_id, $metaFieldsEntity->id),
|
||||
];
|
||||
if ($labelPrintedOnce) { // Only the first input can have a label
|
||||
|
@ -28,13 +32,14 @@ if (!empty($metaFieldsEntities)) {
|
|||
}
|
||||
}
|
||||
if (!empty($metaTemplateField) && !empty($multiple)) { // Add multiple field button
|
||||
$metaTemplateField->label = Inflector::humanize($metaTemplateField->field);
|
||||
$emptyMetaFieldInput = '';
|
||||
if (empty($metaFieldsEntities)) {
|
||||
$emptyMetaFieldInput = $this->element(
|
||||
'genericElements/Form/fieldScaffold',
|
||||
[
|
||||
'fieldData' => [
|
||||
'label' => $metaTemplateField->field,
|
||||
'label' => $metaTemplateField->label,
|
||||
'field' => sprintf('MetaTemplates.%s.meta_template_fields.%s.metaFields.new.0', $metaTemplateField->meta_template_id, $metaTemplateField->id),
|
||||
'class' => 'new-metafield',
|
||||
],
|
||||
|
@ -53,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">%s</div></div>',
|
||||
'<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>',
|
||||
$this->element(
|
||||
'genericElements/Form/multiFieldButton',
|
||||
[
|
||||
|
|
|
@ -78,11 +78,11 @@
|
|||
__('{0} view', \Cake\Utility\Inflector::singularize(\Cake\Utility\Inflector::humanize($this->request->getParam('controller')))) :
|
||||
$title;
|
||||
echo sprintf(
|
||||
"<div id=\"single-view-table-container-%s\">
|
||||
"<div id=\"single-view-table-container-%s\">
|
||||
<h2 class=\"fw-light\">%s</h2>
|
||||
%s%s
|
||||
<div>%s</div>
|
||||
<div id=\"metafieldsPanel\" class=\"col-lg-8 px-0\">%s</div>
|
||||
<div class=\"col-xl-10 col-xxl-8 px-0\">%s</div>
|
||||
<div id=\"metafieldsPanel\" class=\"col-xl-12 col-xxl-10 px-0\">%s</div>
|
||||
<div id=\"accordion\">%s</div>
|
||||
</div>",
|
||||
$tableRandomValue,
|
||||
|
|
|
@ -300,7 +300,7 @@
|
|||
|
||||
:not(.meta-template-container) > .multi-metafield-container {
|
||||
position: relative; }
|
||||
:not(.meta-template-container) > .multi-metafield-container > .col-sm-10::before {
|
||||
:not(.meta-template-container) > .multi-metafield-container > .multi-metafield-input-container::before {
|
||||
transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px));
|
||||
border-style: solid;
|
||||
border-color: #6c757d;
|
||||
|
@ -309,11 +309,18 @@
|
|||
width: 0.5rem;
|
||||
height: 100%;
|
||||
border-width: 0px 2px 0px 0px; }
|
||||
:not(.meta-template-container) > .multi-metafield-container:first-child > .col-sm-10::before {
|
||||
transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 12px);
|
||||
border-top-right-radius: 3px;
|
||||
border-width: 2px 2px 0px 0px; }
|
||||
:not(.meta-template-container) > .multi-metafield-container:last-child > .col-sm-10::before {
|
||||
: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%;
|
||||
|
|
|
@ -300,7 +300,7 @@
|
|||
|
||||
:not(.meta-template-container) > .multi-metafield-container {
|
||||
position: relative; }
|
||||
:not(.meta-template-container) > .multi-metafield-container > .col-sm-10::before {
|
||||
:not(.meta-template-container) > .multi-metafield-container > .multi-metafield-input-container::before {
|
||||
transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px));
|
||||
border-style: solid;
|
||||
border-color: #444;
|
||||
|
@ -309,11 +309,18 @@
|
|||
width: 0.5rem;
|
||||
height: 100%;
|
||||
border-width: 0px 2px 0px 0px; }
|
||||
:not(.meta-template-container) > .multi-metafield-container:first-child > .col-sm-10::before {
|
||||
transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 12px);
|
||||
border-top-right-radius: 3px;
|
||||
border-width: 2px 2px 0px 0px; }
|
||||
:not(.meta-template-container) > .multi-metafield-container:last-child > .col-sm-10::before {
|
||||
: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%;
|
||||
|
|
|
@ -300,7 +300,7 @@
|
|||
|
||||
:not(.meta-template-container) > .multi-metafield-container {
|
||||
position: relative; }
|
||||
:not(.meta-template-container) > .multi-metafield-container > .col-sm-10::before {
|
||||
:not(.meta-template-container) > .multi-metafield-container > .multi-metafield-input-container::before {
|
||||
transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px));
|
||||
border-style: solid;
|
||||
border-color: #6c757d;
|
||||
|
@ -309,11 +309,18 @@
|
|||
width: 0.5rem;
|
||||
height: 100%;
|
||||
border-width: 0px 2px 0px 0px; }
|
||||
:not(.meta-template-container) > .multi-metafield-container:first-child > .col-sm-10::before {
|
||||
transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 12px);
|
||||
border-top-right-radius: 3px;
|
||||
border-width: 2px 2px 0px 0px; }
|
||||
:not(.meta-template-container) > .multi-metafield-container:last-child > .col-sm-10::before {
|
||||
: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%;
|
||||
|
|
|
@ -300,7 +300,7 @@
|
|||
|
||||
:not(.meta-template-container) > .multi-metafield-container {
|
||||
position: relative; }
|
||||
:not(.meta-template-container) > .multi-metafield-container > .col-sm-10::before {
|
||||
:not(.meta-template-container) > .multi-metafield-container > .multi-metafield-input-container::before {
|
||||
transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px));
|
||||
border-style: solid;
|
||||
border-color: #95a5a6;
|
||||
|
@ -309,11 +309,18 @@
|
|||
width: 0.5rem;
|
||||
height: 100%;
|
||||
border-width: 0px 2px 0px 0px; }
|
||||
:not(.meta-template-container) > .multi-metafield-container:first-child > .col-sm-10::before {
|
||||
transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 12px);
|
||||
border-top-right-radius: 3px;
|
||||
border-width: 2px 2px 0px 0px; }
|
||||
:not(.meta-template-container) > .multi-metafield-container:last-child > .col-sm-10::before {
|
||||
: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%;
|
||||
|
|
|
@ -300,7 +300,7 @@
|
|||
|
||||
:not(.meta-template-container) > .multi-metafield-container {
|
||||
position: relative; }
|
||||
:not(.meta-template-container) > .multi-metafield-container > .col-sm-10::before {
|
||||
:not(.meta-template-container) > .multi-metafield-container > .multi-metafield-input-container::before {
|
||||
transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px));
|
||||
border-style: solid;
|
||||
border-color: #95a5a6;
|
||||
|
@ -309,11 +309,18 @@
|
|||
width: 0.5rem;
|
||||
height: 100%;
|
||||
border-width: 0px 2px 0px 0px; }
|
||||
:not(.meta-template-container) > .multi-metafield-container:first-child > .col-sm-10::before {
|
||||
transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 12px);
|
||||
border-top-right-radius: 3px;
|
||||
border-width: 2px 2px 0px 0px; }
|
||||
:not(.meta-template-container) > .multi-metafield-container:last-child > .col-sm-10::before {
|
||||
: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%;
|
||||
|
|
|
@ -300,7 +300,7 @@
|
|||
|
||||
:not(.meta-template-container) > .multi-metafield-container {
|
||||
position: relative; }
|
||||
:not(.meta-template-container) > .multi-metafield-container > .col-sm-10::before {
|
||||
:not(.meta-template-container) > .multi-metafield-container > .multi-metafield-input-container::before {
|
||||
transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px));
|
||||
border-style: solid;
|
||||
border-color: rgba(255, 255, 255, 0.4);
|
||||
|
@ -309,11 +309,18 @@
|
|||
width: 0.5rem;
|
||||
height: 100%;
|
||||
border-width: 0px 2px 0px 0px; }
|
||||
:not(.meta-template-container) > .multi-metafield-container:first-child > .col-sm-10::before {
|
||||
transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 12px);
|
||||
border-top-right-radius: 3px;
|
||||
border-width: 2px 2px 0px 0px; }
|
||||
:not(.meta-template-container) > .multi-metafield-container:last-child > .col-sm-10::before {
|
||||
: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%;
|
||||
|
|
|
@ -296,7 +296,7 @@
|
|||
|
||||
:not(.meta-template-container) > .multi-metafield-container {
|
||||
position: relative; }
|
||||
:not(.meta-template-container) > .multi-metafield-container > .col-sm-10::before {
|
||||
:not(.meta-template-container) > .multi-metafield-container > .multi-metafield-input-container::before {
|
||||
transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px));
|
||||
border-style: solid;
|
||||
border-color: #7a8288;
|
||||
|
@ -305,11 +305,18 @@
|
|||
width: 0.5rem;
|
||||
height: 100%;
|
||||
border-width: 0px 2px 0px 0px; }
|
||||
:not(.meta-template-container) > .multi-metafield-container:first-child > .col-sm-10::before {
|
||||
transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 12px);
|
||||
border-top-right-radius: 3px;
|
||||
border-width: 2px 2px 0px 0px; }
|
||||
:not(.meta-template-container) > .multi-metafield-container:last-child > .col-sm-10::before {
|
||||
: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%;
|
||||
|
|
|
@ -300,7 +300,7 @@
|
|||
|
||||
:not(.meta-template-container) > .multi-metafield-container {
|
||||
position: relative; }
|
||||
:not(.meta-template-container) > .multi-metafield-container > .col-sm-10::before {
|
||||
:not(.meta-template-container) > .multi-metafield-container > .multi-metafield-input-container::before {
|
||||
transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px));
|
||||
border-style: solid;
|
||||
border-color: #ea39b8;
|
||||
|
@ -309,11 +309,18 @@
|
|||
width: 0.5rem;
|
||||
height: 100%;
|
||||
border-width: 0px 2px 0px 0px; }
|
||||
:not(.meta-template-container) > .multi-metafield-container:first-child > .col-sm-10::before {
|
||||
transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 12px);
|
||||
border-top-right-radius: 3px;
|
||||
border-width: 2px 2px 0px 0px; }
|
||||
:not(.meta-template-container) > .multi-metafield-container:last-child > .col-sm-10::before {
|
||||
: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%;
|
||||
|
|
|
@ -1,48 +1,9 @@
|
|||
$secondary: #6c757d !default;
|
||||
|
||||
// .multi-metafield-container {
|
||||
// position: relative;
|
||||
// }
|
||||
|
||||
// .multi-metafield-container .col-sm-10::before {
|
||||
// transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px));
|
||||
// border-style: solid;
|
||||
// border-color: $secondary;
|
||||
// }
|
||||
|
||||
// .multi-metafield-container:first-child .col-sm-10::before {
|
||||
// transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 12px);
|
||||
// border-top-right-radius: 3px;
|
||||
// position: absolute;
|
||||
// content: ' ';
|
||||
// width: 0.5rem;
|
||||
// border-width: 2px 2px 0px 0px;
|
||||
// }
|
||||
|
||||
// .multi-metafield-container .col-sm-10::before {
|
||||
// position: absolute;
|
||||
// content: ' ';
|
||||
// width: 0.5rem;
|
||||
// height: 100%;
|
||||
// border-width: 0px 2px 0px 0px;
|
||||
// }
|
||||
|
||||
// .multi-metafield-container:last-child .col-sm-10::before {
|
||||
// transform: translateX(calc(1.5rem * -.5));
|
||||
// border-bottom-left-radius: 3px;
|
||||
// position: absolute;
|
||||
// content: ' ';
|
||||
// width: 0.5rem;
|
||||
// height: 50%;
|
||||
// border-width: 0px 0px 2px 2px;
|
||||
// }
|
||||
|
||||
// :not(.meta-template-container) .multi-metafield-container {
|
||||
// .multi-metafield-container :not(.meta-template-container) {
|
||||
:not(.meta-template-container) > .multi-metafield-container {
|
||||
position: relative;
|
||||
|
||||
& > .col-sm-10::before {
|
||||
& > .multi-metafield-input-container::before {
|
||||
transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px));
|
||||
border-style: solid;
|
||||
border-color: $secondary;
|
||||
|
@ -53,13 +14,22 @@ $secondary: #6c757d !default;
|
|||
border-width: 0px 2px 0px 0px;
|
||||
}
|
||||
|
||||
&:first-child > .col-sm-10::before {
|
||||
transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 12px);
|
||||
border-top-right-radius: 3px;
|
||||
border-width: 2px 2px 0px 0px;
|
||||
&: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) {
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child > .col-sm-10::before {
|
||||
&:last-child > .multi-metafield-input-container::before {
|
||||
transform: translateX(calc(1.5rem * -.5));
|
||||
border-bottom-left-radius: 3px;
|
||||
height: 50%;
|
||||
|
|
Loading…
Reference in New Issue