<div class="c-modal c-modal--orientation u-fixed u-top u-left o-bg-primary u-justify-center u-items-center u-p-base u-z-sky">
<div class="u-flex u-justify-center u-items-center u-column">
<svg class="c-brand
c-brand--resize-medium
c-brand--inverse
" viewBox="0 0 500 50" xmlns="http://www.w3.org/2000/svg">
<path d="M22.5 40.6l1.5 8.5h10.5L24.5.9H10L0 49.1h10.2l1.4-8.5h10.9zM278.3 0c11 0 17.7 6.6 17.7 25 0 18.3-6.6 25-17.7 25-11 0-17.7-6.5-17.7-25 0-18.3 6.6-25 17.7-25zM53.2 0c9.7 0 14.3 5.5 15.6 13.8l-9.6 2.6c-.7-3.7-2.2-6.8-6.4-6.8-4.6 0-6.8 4-6.8 14.5 0 11.9 2.5 16.3 7.8 16.3 4 0 5.8-2.2 6.3-4.3v-4.8h-7v-9.5h16.4V49h-9.2v-3h-.2a11 11 0 01-8.6 3.6c-8.3 0-15.9-5.7-15.9-25C35.6 6.2 42.6 0 53.2 0zm86.7 0c9.8 0 14.3 5.5 15.6 13.8l-9.6 2.6c-.7-3.7-2.2-6.8-6.3-6.8-4.7 0-7 4-7 14.5 0 11.9 2.6 16.3 8 16.3 3.9 0 5.7-2.2 6.3-4.3v-4.8h-7v-9.5h16.3V49h-9.1v-3h-.2a11 11 0 01-8.6 3.6c-8.4 0-16-5.7-16-25 0-18.6 7-24.7 17.6-24.7zM89.1.9c9.5 0 14.4 6.5 14.4 15.9 0 5.9-2.2 10.5-6.5 12.7l7.6 19.6H93.3l-6-17.4-1.4.1h-1.4v17.3h-10V.9zm29.1 0v48.2h-10V.9h10zm69.3 0v9.6h-16.3v9.3h12.2V29h-12.2v10.4H188V49h-26.7V.9h26.3zm15.2 0l12.9 28h.2V.9h9.6v48.2h-10.2l-12.9-27h-.2v27h-9.6V.9h10.2zm56.2 0v9.6h-9.8V49h-10V10.5h-9.8V.9h29.6zm19.4 8.7c-5 0-7.4 3.6-7.4 15.3 0 11.9 2.4 15.5 7.4 15.5s7.4-3.5 7.4-15.3c0-12-2.5-15.5-7.4-15.5zm-261.1.8l1.5 9 2.1 12h-7.5l2.1-12.1 1.5-8.9h.3zm71.2 0h-4v13h4.2c2.9 0 4.8-2 4.8-6.5 0-4-1.7-6.5-5-6.5z" class="c-brand__edition"></path>
<path d="M356.8 0c11 0 17.8 6.6 17.8 25 0 18.3-6.6 25-17.8 25-11 0-17.8-6.5-17.8-25 0-18.3 6.7-25 17.8-25zm-44.6.9l13 28h.1V.9h9.6v48.2h-10.2l-12.9-27h-.2v27H302V.9h10.2zm93.8 0v9.6h-10V49h-10V10.5h-9.9V.9H406zm14 0v48.2h-10.1V.9h10zm33 0V11l-13.4 22.2-3.7 6 .1.3h17.2v9.6h-28.7v-9.7L438.8 16l3.3-5.4-.1-.2h-17V.9h28zm14.9 0v48.2h-10.1V.9h10zm31.8 0v9.6h-16.4v9.3h12.2V29h-12.2v10.4H500V49h-26.8V.9h26.5zM356.8 9.6c-5 0-7.4 3.6-7.4 15.3 0 11.9 2.4 15.5 7.4 15.5s7.4-3.5 7.4-15.3c0-12-2.5-15.5-7.4-15.5z" class="c-brand__network"></path>
</svg>
<h2 class="u-label-01 u-color-inverse u-text-center u-my-medium">Ruota il tuo telefono per tornare a leggere</h2>
<svg class="o-icon o-icon--fill o-icon--inverse">
<use xlink:href="#icon-rotate-mobile"></use>
</svg>
</div>
</div>
<div class="c-modal c-modal--orientation u-fixed u-top u-left o-bg-primary u-justify-center u-items-center u-p-base u-z-sky">
<div class="u-flex u-justify-center u-items-center u-column">
{% render "@brand--default",{inverse:true},true %}
<h2 class="u-label-01 u-color-inverse u-text-center u-my-medium">Ruota il tuo telefono per tornare a leggere</h2>
<svg class="o-icon o-icon--fill o-icon--inverse"><use xlink:href="#icon-rotate-mobile"></use></svg>
</div>
</div>
{
"action": false,
"media": "https://unsplash.it/600/338?random",
"title": "Allagamento fosso Bel Poggio 1 (foto Reporter Montesacro) 2",
"description": "Straripamento torrente Bel Poggio (foto Reporter Montesacro)",
"action_one": "Chiudi",
"action_two": "Richiedi info"
}
// Name: Modal
// Description: Modal of website
//
// Component: `c-modal`
//
// Dependencies: `settings/v7/colors.tokens`
// `settings/v7/colors.themes`
// `settings/v7/colors.mode`
// `settings/v7/global`
// `settings/v7/spacing.tokens`
//
// ========================================================================
$modal-close-position: -12px;
.c-modal {
--modal-size: 90%;
&__dialog {
opacity: 0;
visibility: hidden;
background: rgba($ui-02, .5);
transition: opacity .25s ease;
@include z(clouds);
}
&__close {
top: 1rem;
right: 1rem;
fill: $ui-02;
@include z(high);
}
&__wrap {
transition: top .5s ease-in-out;
top: -50%;
}
input {
&:checked {
~ .c-modal__dialog {
opacity: 1;
visibility: visible;
.c-modal__wrap {
top: 0;
}
}
}
}
&__media {
&__close {
top: $modal-close-position;
right: $modal-close-position;
border: 2px solid $ui-01;
background: $ui-02;
@include z(high);
}
max-width: var(--modal-size);
margin: 0 auto;
@include bp(md) {
--modal-size: 70%;
}
}
&__content {
background: $ui-01;
border-radius: 2px;
}
&__footer {
:first-child {
margin-right: auto;
}
// background: $ui-01;
border-radius: 2px;
}
&__textual {
max-width: var(--modal-size);
margin: 0 auto;
max-height: 80vh;
@include bp(md) {
--modal-size: 50%;
}
}
&__image {
max-height: 90vh;
}
&--orientation {
display: none;
height: 100vh;
@include z(cover);
@media (max-width: 768px) and (orientation: landscape) {
display: flex;
}
height: 100vh;
width: 100vw;
.o-icon {
animation: rotate 3s infinite ease-in-out;
}
}
}
No notes defined.