composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-04-23 18:48:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

N°2847 - Fieldset: Fix alignement/positionning with siblings, parent (also some renaming and variables extraction)

Browse Source
This commit is contained in:
Molkobain
2020-10-05 17:03:17 +02:00
parent 8551322cd7
commit 8994f82e0f
5 changed files with 27 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
css/backoffice/components/_field.scss
View File

@@ -3,20 +3,21 @@
* license http://opensource.org/licenses/AGPL-3.0
*/
$ibo-field-value--color: $ibo-color-grey-700 !default;
$ibo-field--sibling-spacing: 16px !default;
$ibo-field--value--color: $ibo-color-grey-700 !default;
.ibo-field {
@extend %ibo-font-ral-nor-150;
& ~ .ibo-field {
margin-top: 10px;
margin-top: $ibo-field--sibling-spacing;
}
}
.ibo-field-large {
display: inherit;
.ibo-field-label {
.ibo-field--label {
display: inherit;
}
}
@@ -25,21 +26,21 @@ $ibo-field-value--color: $ibo-color-grey-700 !default;
display: table;
width: 100%;
.ibo-field-label {
.ibo-field--label {
display: table-cell;
vertical-align: top;
}
}
.ibo-field-label {
.ibo-field--label {
min-width: 100px;
max-width: 145px;
width: 30%;
padding-right: 10px;
}
.ibo-field-value {
.ibo-field--value {
display: table;
width: 100%;
color: $ibo-field-value--color;
color: $ibo-field--value--color;
}

24
css/backoffice/components/_fieldset.scss
View File

@@ -3,19 +3,25 @@
* license http://opensource.org/licenses/AGPL-3.0
*/
.ibo-fieldset {
$ibo-fieldset--sibling-spacing: 48px !default;
$ibo-fieldset--legend--width: 100% !default;
$ibo-fieldset--legend--margin-bottom: 16px !default;
$ibo-fieldset--legend--padding-bottom: 4px !default;
$ibo-fieldset--legend--border-bottom-size: 2px !default;
$ibo-fieldset--legend--border-bottom-color: $ibo-color-grey-500 !default;
$ibo-fieldset--legend--border-bottom-style: solid !default;
.ibo-fieldset {
& ~ .ibo-fieldset {
margin-top: 20px;
margin-top: $ibo-fieldset--sibling-spacing;
}
}
.ibo-fieldset-legend {
width: $ibo-fieldset--legend--width;
margin-bottom: $ibo-fieldset--legend--margin-bottom;
padding-bottom: $ibo-fieldset--legend--padding-bottom;
border-bottom: $ibo-fieldset--legend--border-bottom-size $ibo-fieldset--legend--border-bottom-style $ibo-fieldset--legend--border-bottom-color;
@extend %ibo-font-ral-med-250;
}
.ibo-fieldset-legend-separator {
height: 2px;
background: $ibo-color-grey-500;
}

4
css/backoffice/layout/multi-column/_column.scss
View File

@@ -7,7 +7,7 @@ $ibo-column--min-width: 300px !default;
$ibo-column--padding-x: abs($ibo-multi-column--margin-x) !default;
$ibo-column--padding-y: 0 !default;
$ibo-column--margin-bottom--is-last-element: 20px !default;
$ibo-column--margin-bottom--is-last-element: 48px !default;
.ibo-column {
min-width: $ibo-column--min-width;
@@ -16,7 +16,7 @@ $ibo-column--margin-bottom--is-last-element: 20px !default;
padding: $ibo-column--padding-y $ibo-column--padding-x;
flex-basis: 10%;
:not(:last-child){
&:not(:last-child){
margin-bottom: $ibo-column--margin-bottom--is-last-element;
}
}

4
templates/components/field/layout.html.twig
View File

@@ -1,5 +1,5 @@
{% set aParams = oUIBlock.GetParams() %}
<div class="ibo-field ibo-field-{{ aParams.layout }}">
<div class="ibo-field-label">{{ aParams.label|raw }}</div>
<div class="ibo-field-value">{{ aParams.value|raw }}</div>
<div class="ibo-field--label">{{ aParams.label|raw }}</div>
<div class="ibo-field--value">{{ aParams.value|raw }}</div>
</div>

1
templates/components/fieldset/layout.html.twig
View File

@@ -1,7 +1,6 @@
{% if oUIBlock.GetSubBlocks() %}
<fieldset class="ibo-fieldset">
<legend class="ibo-fieldset-legend">{{ oUIBlock.GetLegend() }}</legend>
<hr class="ibo-fieldset-legend-separator">
{% for oSubBlock in oUIBlock.GetSubBlocks() %}
{{ render_block(oSubBlock, {aPage: aPage}) }}
{% endfor %}