Commit 21013983 authored by David Steeb's avatar David Steeb
Browse files

[TASK] Optimize backend page header info text/collapsible

Related: T3DEMO-269
parent 6642eb1f
Pipeline #10157 passed with stage
in 2 minutes and 9 seconds
......@@ -6,16 +6,17 @@
<div class="b_notes">
<input type="checkbox" id="notes_detail" class="b_pseudo" />
<label class="b_notes__header-label" for="notes_detail">
<h3 class="b_notes__header">{data.infotext_header}</h3>
<f:if condition="{data.infotext}">
<span class="b_notes__indicator b_notes__indicator--expand">
<core:icon identifier="actions-view-list-expand" size="default"/>
</span>
<span class="b_notes__indicator b_notes__indicator--collapse">
<core:icon identifier="actions-view-list-collapse" size="default"/>
</span>
</f:if>
<label class="b_notes__header-label {f:if(condition: data.infotext, then: 'b_notes__header-label--expandable')}" for="notes_detail">
<h3 class="b_notes__header">
<f:if condition="{data.infotext}">
<span class="b_notes__indicator b_notes__indicator--expand">
<core:icon identifier="actions-add" size="small"/>
</span>
<span class="b_notes__indicator b_notes__indicator--collapse">
<core:icon identifier="actions-remove" size="small"/>
</span>
</f:if>
{data.infotext_header}</h3>
</label>
<f:if condition="{data.infotext}">
<div class="b_notes__detailcontainer">
......
......@@ -128,19 +128,24 @@
}
&__header-label {
cursor: pointer;
position: relative;
width: 100%;
&--expandable {
cursor: pointer;
}
}
&__indicator {
position: absolute;
right: 0;
top: 2px;
position: relative;
bottom: 2px;
.icon-size-small {
}
&--collapse {
display: none;
#notes_detail:checked ~ .b_notes__header-label & {
display: block;
display: inline;
}
}
#notes_detail:checked ~ .b_notes__header-label &--expand {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment