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