N°2847 - Alert: Fix layout when either title or body is empty

This commit is contained in:
Molkobain
2020-12-23 14:38:34 +01:00
parent 1f64e4eda4
commit 65639517ff
2 changed files with 13 additions and 7 deletions

View File

@@ -24,11 +24,11 @@ $ibo-alert--padding-x: 20px !default;
$ibo-alert--min-height: 30px !default;
$ibo-alert--border-radius: $ibo-border-radius-300 !default;
$ibo-alert--title--padding-bottom: 4px !default;
$ibo-alert--title--highlight--width: 4px !default;
$ibo-alert--title--highlight--height: 100% !default;
$ibo-alert--body--margin-top: 4px !default;
$ibo-alert-minimized--padding-y: 5px !default;
$ibo-alert-minimized--title--padding-bottom: 0px !default;
@@ -91,7 +91,6 @@ $ibo-alert-colors: (
}
.ibo-alert--title {
padding-bottom: $ibo-alert--title--padding-bottom;
cursor: pointer;
@extend %ibo-font-ral-bol-150;
@@ -123,6 +122,9 @@ $ibo-alert-colors: (
}
}
.ibo-alert--title + .ibo-alert--body {
margin-top: $ibo-alert--body--margin-top;
}
/* Spacing between alert blocks */
.ibo-alert + .ibo-alert {

View File

@@ -13,8 +13,12 @@
<i class="fas fa-times"></i>
</div>
{% endif %}
<div class="ibo-alert--title"
{% if oUIBlock.IsCollapsible() %}data-role="ibo-alert--collapse-toggler"{% endif %}
>{{ oUIBlock.GetTitle() }}</div>
<div class="ibo-alert--body">{{ oUIBlock.GetContent()|raw }}</div>
{% if oUIBlock.GetTitle() is not empty %}
<div class="ibo-alert--title"
{% if oUIBlock.IsCollapsible() %}data-role="ibo-alert--collapse-toggler"{% endif %}
>{{ oUIBlock.GetTitle() }}</div>
{% endif %}
{% if oUIBlock.GetContent() is not empty %}
<div class="ibo-alert--body">{{ oUIBlock.GetContent()|raw }}</div>
{% endif %}
</div>