Information bar componentAvailable since EcoComposer 2.2
Classical information bar examples :
The default values are :
info-bar--block--padding : 1rem * theming.$font-size .5rem * theming.$font-size,
info-bar--background-image : 'info-bar--background-image',
info-bar--box-shadow : 'info-bar--box-shadow',
info-bar--primary--color : 'info-bar--primary--color',
info-bar--primary--text-shadow : 'info-bar--primary--text-shadow',
info-bar--error--background-color : 'info-bar--error--background-color',
info-bar--block--border-color : 'info-bar--block--border-color',
info-bar--block--color : 'info-bar--block--color',
info-bar--block--background-color : 'info-bar--block--background-color',
print : false,
suffix : '',
themes : (
light : (
default--info-bar--background-image : linear-gradient(45deg, hsl(170deg 100% 50%), hsl(190deg 100% 50%)),
default--info-bar--box-shadow : 0 0 30px 0 #ccc inset,
default--info-bar--primary--color : #333,
default--info-bar--primary--text-shadow : 0 0 3px #ccc,
default--info-bar--error--background-color : #fff,
default--info-bar--block--border-color : #bbb,
default--info-bar--block--color : #333,
default--info-bar--block--background-color : transparent
),
dark : (
default--info-bar--background-image : linear-gradient(45deg, hsl(170deg 100% 27%), hsl(190deg 100% 27%)),
default--info-bar--box-shadow : 0 0 30px 0 #555 inset,
default--info-bar--primary--color : #eee,
default--info-bar--primary--text-shadow : 0 0 3px #ccc,
default--info-bar--error--background-color : #fff,
default--info-bar--block--border-color : #ccc,
default--info-bar--block--color : #eee,
default--info-bar--block--background-color : transparent
)
) We can implement it that way :
@include informationBar.init();
@include informationBar.create();
@include informationBar.create(
(
info-bar--block--padding : 2rem 1rem,
suffix : '-2'
)
); We can implement it that way :
<div class="suffix info-bar info-bar--top">
<button type=button class="suffix info-bar--help-cursor info-bar--block" title="First block tooltip">First block</button>
<div class="suffix info-bar--block--container">
<p class="suffix info-bar--block--container--element">
First information
</p>
<p class="suffix info-bar--block--container--element">
Second information
</p>
</div>
<button type=button class="suffix info-bar--help-cursor info-bar--block" title="Second block tooltip">Second block</button>
<div class="suffix info-bar--block--container">
<p class="suffix info-bar--block--container--element">
First information
</p>
<p class="suffix info-bar--block--container--element">
Second information
</p>
<p class="suffix info-bar--block--container--element">
Third information
</p>
</div>
</div>