<div class="c-slim-alert c-slim-alert--generic c-slim-alert--mid-size-text">
<div class="c-slim-alert__inner">
<div class="c-slim-alert__content">
<div class="c-slim-alert__label">
<img src="../../images/svgs/stk_operaio_dark.svg" alt="Alt text sample" aria-hidden="true" width="24">
</div>
<div class="c-slim-alert__text">
<a href="#">Lavori infrastrutturali</a>
</div>
<div class="c-slim-alert__notifications">
<div class="c-notifications ">
<button type="button" class="c-notifications__button has-indicator js-toggleNotificationsBtn" aria-expanded="false" aria-label="Notifiche" aria-controls="aria-notifications">
<svg class="c-icon c-icon--24">
<use xlink:href="#ic_notifications_active_black_24px"></use>
</svg>
<p class="c-notifications__indicator" aria-hidden="true">2</p>
</button>
<div class="c-notifications__box is-narrow has-indicator js-notificationsBox" aria-live="polite" id="aria-notifications">
<div class="c-notifications__head">
<div class="c-notifications__title">
Centro notifiche
</div>
<button type="button" class="c-notifications__closeBtn js-toggleNotificationsBtn" aria-expanded="false" aria-label="Chiudi" aria-controls="aria-notifications">
Chiudi <svg class="c-icon c-icon--16">
<use xlink:href="#ic_close_black_24px"></use>
</svg>
</button>
</div>
<ul class="c-notifications__list">
<li class="important not-read">
<span class="c-notifications__title">Lorem ipsum dolor sit amet</span>
<p><strong>Prevista forte nevicata il 5 Dicembre</strong> dalle ore 10:00 alle ore 17:00. Parti prima e arriva per tempo in aeroporto.</p>
<a class="c-notifications__link" href="#">></a>
</li>
<li class="not-read">
<span class="c-notifications__title"></span>
<p><strong>Prevista forte nevicata il 5 Dicembre</strong> dalle ore 10:00 alle ore 17:00. Parti prima e arriva per tempo in aeroporto.</p>
<a class="c-notifications__link" href="#">></a>
</li>
<li class="">
<span class="c-notifications__title"></span>
<p><strong>Prevista forte nevicata il 5 Dicembre</strong> dalle ore 10:00 alle ore 17:00. Parti prima e arriva per tempo in aeroporto.</p>
<p>Prevista forte nevicata il 5 Dicembre dalle ore 10:00 alle ore 17:00. Parti prima e arriva per tempo in aeroporto.</p>
<a class="c-notifications__link" href="#">></a>
</li>
<li class="">
<span class="c-notifications__title"></span>
<p><strong>Prevista forte nevicata il 5 Dicembre</strong> dalle ore 10:00 alle ore 17:00. Parti prima e arriva per tempo in aeroporto.</p>
<a class="c-notifications__link" href="#">></a>
</li>
<li class="">
<span class="c-notifications__title"></span>
<p><strong>Prevista forte nevicata il 5 Dicembre</strong> dalle ore 10:00 alle ore 17:00. Parti prima e arriva per tempo in aeroporto.</p>
<a class="c-notifications__link" href="#">></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="c-slim-alert c-slim-alert--generic{{#if modifier}} {{ modifier }}{{/if}}">
<div class="c-slim-alert__inner">
<div class="c-slim-alert__content">
{{#if img}}
<div class="c-slim-alert__label">
<img src="{{ path img.src }}" alt="{{ img.alt }}" aria-hidden="true" width="24">
</div>
{{/if}}
{{#each items}}
<div class="c-slim-alert__text">
{{#if anchor-text}}
<a href="#">{{ this.text }}</a>
{{else}}
<p>{{{ this.text }}}</p>
{{/if}}
</div>
{{/each}}
<div class="c-slim-alert__notifications">
{{ render "@notifications" }}
</div>
</div>
</div>
</div>
{
"modifier": "c-slim-alert--mid-size-text",
"img": {
"src": "/images/svgs/stk_operaio_dark.svg",
"alt": "Alt text sample"
},
"items": [
{
"anchor-text": true,
"text": "Lavori infrastrutturali"
}
]
}
.c-slim-alert {
position: relative;
z-index: $zIndex-slim-alert;
}
.c-slim-alert__inner {
position: relative;
max-width: remify(1360px);
margin: 0 auto;
}
.c-slim-alert__content {
text-align: left;
width: 100%;
background-color: primary(sun, 40);
padding: remify(8px) remify(16px);
display: flex;
justify-content: flex-start;
align-items: center;
@include min-screen(bp(tablet-p)) {
border-radius: 0px 0px remify(16px) remify(16px);
position: absolute;
top: 0;
// right: 0;
z-index: $z-Index-slim-alert;
width: auto;
}
}
.c-slim-alert__content > div {
display: inline-block;
@include font-scale(level-1);
color: secondary(text,100);
margin-right: remify(8px);
// &:not([class]) {
// overflow: hidden;
// white-space: nowrap;
// text-overflow: ellipsis;
// }
&:last-child {
margin-right: 0;
}
& > *,
a {
color: primary(night,100);
}
a {
font-weight: fw(bold);
}
&.c-slim-alert__label {
// flex: 1 0 auto;
@include min-screen(bp(tablet-p)) {
display: inline-block;
margin-right: remify(12px);
}
img {
display: none;
@include min-screen(bp(phablet)) {
display: inline-block;
}
}
}
&.c-slim-alert__notifications {
margin-right: 0;
margin-left: auto;
display: block;
@include min-screen(bp(tablet-p)) {
display: none;
}
}
}
/*------------------------------------*
Modifier: notifications
*------------------------------------*/
.c-slim-alert--notifications {
@include min-screen(bp(tablet-p)) {
display: none;
}
}
/*------------------------------------*
Modifier: generic
*------------------------------------*/
.c-slim-alert--generic {
.c-slim-alert__label {
display: none;
@include min-screen(bp(tablet)) {
display: inline-block;
}
}
.c-slim-alert__text {
@include font-scale(level-1);
}
}
/*------------------------------------*
Modifier: mid-size
*------------------------------------*/
.c-slim-alert--mid-size-text {
.c-slim-alert__content > div {
@include font-scale(level-1-5);
}
}
No notes defined.