<button class="c-btn c-btn--naked u-relative u-flex u-cursor-pointer u-items-center u-nowrap
u-label-04
" popovertarget="modal">
Apri
</button>
<div popover id="modal" class=" c-modal--popover u-border-1 u-border-divider u-border-solid u-fixed">
<div class="u-flex u-row-reverse">
<button class="c-btn c-btn--naked u-cursor-pointer" popovertargetaction="hide" popovertarget="modal">
<svg class="o-icon o-icon--sm o-icon--animated">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-x"></use>
</svg>
</button>
</div>
<div class="u-px-base u-pb-base">
<h2 class="u-heading-05 u-m-none u-color-base">Lorem ipsum</h2>
<p class="u-body-03 u-color-base">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quas.</p>
</div>
</div>
{% if modifier=='media' %}
<div class="u-mb-large u-relative">
<figure class="l-entry__media o-skeleton u-ratio-16-9">
<button class="c-btn c-btn--secondary c-modal--popover__btn u-cursor-pointer u-absolute u-bottom u-right u-z-base" popovertarget="{{id}}">
<svg class="o-icon o-icon--sm o-icon--animated">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-maximize-2"></use>
</svg>
</button>
<picture class="u-size-full">
<img decoding="async" referrerpolicy="no-referrer" class="u-size-full" src="{{media}}" alt="">
</picture>
</figure>
<figcaption class="u-caption-02 u-color-secondary u-pl-small u-pl-none@lg u-pt-medium u-pt-small@lg u-relative o-bg-base">{{description}}</figcaption>
</div>
{% else %}
{% render "@button--naked", {label:"Apri", modalid:"modal"}, true %}
{% endif %}
<div popover id="modal" class=" c-modal--popover u-border-1 u-border-divider u-border-solid u-fixed">
{% if modifier=='media' %}
<button class="c-btn c-btn--secondary u-flex u-cursor-pointer u-absolute u-bottom u-right" popovertargetaction="hide" popovertarget="{{id}}">
<svg class="o-icon o-icon--sm u-cursor-pointer o-icon--animated">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-minimize-2"></use>
</svg>
</button>
<figure>
<img decoding="async" referrerpolicy="no-referrer" class="c-modal__image" src="{{media}}" loading="lazy" alt="">
</figure>
{% else %}
<div class="u-flex u-row-reverse">
<button class="c-btn c-btn--naked u-cursor-pointer" popovertargetaction="hide" popovertarget="{{id}}">
<svg class="o-icon o-icon--sm o-icon--animated">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-x"></use>
</svg>
</button>
</div>
<div class="u-px-base u-pb-base">
<h2 class="u-heading-05 u-m-none u-color-base">{{title}}</h2>
<p class="u-body-03 u-color-base">{{description}}</p>
</div>
{% endif %}
</div>
{
"action": false,
"media": "https://unsplash.it/1200/800?random",
"title": "Lorem ipsum",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quas.",
"action_one": "Chiudi",
"action_two": "Richiedi info",
"modifier": "popover",
"id": "modal"
}
// 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`
//
// ========================================================================
@use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../assets/sass/settings/v7/global' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/tools/v7/mq' as *;
@use '../../../assets/sass/tools/v7/zindex' as *;
@use '../../../assets/sass/tools/v7/typography' as *;
$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 {
top: -50%;
transition: top .5s ease-in-out;
}
input {
&:checked {
~ .c-modal__dialog {
opacity: 1;
visibility: visible;
.c-modal__wrap {
top: 0;
}
}
}
}
&__media {
max-width: var(--modal-size);
margin: 0 auto;
@include bp(md) {
--modal-size: 70%;
}
&__close {
top: $modal-close-position;
right: $modal-close-position;
border: 2px solid $ui-01;
background: $ui-02;
@include z(high);
}
}
&__content {
background: $ui-01;
border-radius: 2px;
}
&__footer {
// background: $ui-01;
border-radius: 2px;
:first-child {
margin-right: auto;
}
}
&__textual {
max-width: var(--modal-size);
margin: 0 auto;
max-height: 80vh;
@include bp(md) {
--modal-size: 50%;
}
}
&__image {
max-height: 90svh;
}
&--orientation {
display: none;
height: 100vh;
height: 100vh;
width: 100vw;
@include z(cover);
@media (max-width: 768px) and (orientation: landscape) {
display: flex;
}
.o-icon {
animation: rotate 3s infinite ease-in-out;
}
}
}
.c-modal--popover {
top: 0;
@supports not selector(:popover-open) {
/* Questo blocco di codice verrà applicato se il browser NON supporta 'popover' */
display: none;
}
@include bp(sm){
height: fit-content;
}
&::backdrop{
backdrop-filter: blur(5px);
background-color: rgba($ui-02, .8);
transition: display var(--_duration) var(--ease-4);
touch-action: none;
}
&__body {
height: calc(100% - 2*$padding-small);
@include bp(sm){
height: auto;
}
}
&__btn {
@supports not selector(:popover-open) {
/* Questo blocco di codice verrà applicato se il browser NON supporta 'popover' */
display: none;
}
}
}
This component serves to show a modal of websites
Possible variations:
In order to display a modal component use following syntax:
{% render "@modal--default" %} {% render "@modal--media" %} {% render "@modal--global" %} {% render "@modal--orientation" %}