<div class="popup"><!-- ==== La clase fractal es para la previsualización en Fractal. NO INTEGRAR ==== -->
<button class="popup__trigger" type="button">
<svg class="icon icon- ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#"></use>
</svg>
</button>
<div class="popup__window
">
</div>
</div>
<div class="popup{{#if isFractal}} fractal{{/if}}"><!-- ==== La clase fractal es para la previsualización en Fractal. NO INTEGRAR ==== -->
<button class="popup__trigger" type="button">
{{> @icon icon }} {{ trigger.text }}
</button>
{{#if info}}
<div class="popup__window
{{#if onTheRight}}
popup__window_right
{{/if}}" style="padding:0;">
<div class="popup__info">
<ul class="popup__info-list">
{{#each info}}
{{#if this.isHead}}
<div class="popup__info-head">
<div class="popup__info-head-title">
{{ this.text }} <b class="popup__info-head-title-accent"> {{
this.textAccent }} </b>
</div>
<div class="popup__info-head-schedule">
{{ this.desc }}
</div>
</div>
{{else}}
<ul class="popup__info-contacts">
<div class="popup__info-contacts-phone">
{{ this.phone }}
<p class="popup__info-contacts-phone-desc">
{{ this.desc }}
</p>
</div>
</ul>
{{/if}}
{{/each}}
</ul>
</div>
</div>
{{else}}
<div class="popup__window
{{#if onTheRight}}
popup__window_right
{{/if}}">
{{#if language}}
<div class="popup__lang">
<ul class="popup__lang-list">
{{#each language}}
<li class="popup__lang-item">
<a class="popup__lang-link
popup__link
{{#if this.isActive}}
popup__lang-link_active
{{/if}}" href="{{ this.href }}">
{{ this.text }}
</a>
</li>
{{/each}}
</ul>
</div>
{{/if}}
{{#if contact-item}}
<div class="popup__contact">
<ul class="popup__contact-list">
{{#each contact-item}}
<li class="popup__contact-item">
{{#if this.lightbox}}
<div class="popup__lightbox">
{{> @lightbox this.lightbox }}
</div>
{{/if}}
{{#if this.link}}
<div class="popup__contact-link popup__link">
{{> @link this.link }}
</div>
{{/if}}
{{#if this.info}}
<div class="popup__contact-info">
{{> @bodycopy-s this.info }}
</div>
{{/if}}
</li>
{{/each}}
</ul>
</div>
{{/if}}
</div>
{{/if}}
</div>
/* No context defined. */
.popup {
&__trigger {
font-family: 'Jornada Sans Book';
font-size: 11px;
font-weight: normal;
line-height: 16px;
letter-spacing: 0;
color: var(--color-text);
transition: all 0.3s;
@media (--viewport-ms-max) {
font-size: 13px;
line-height: 18px;
}
&:hover,
&:focus,
&.active {
color: var(--color-accent-dark);
+.popup__window {
@media (--viewport-sm-min) {
left: 50%;
}
&_right {
@media (--viewport-sm-min) {
right: 0;
left: auto;
}
}
}
}
&::after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
width: 100%;
height: 40px;
content: '';
}
}
.icon{
width: 16px; height: 16px; margin-right: 4px; top: 4px; position: relative;
}
&.fractal{ /* Esta clase es para la previsualización en Fractal */
.popup__window {
position: relative; top:auto; left: 0 !important;
}
}
&__window {
position: absolute;
z-index: 11;
top: calc(100% + 14px);
left: -9999px;
transform: translate(-50%, 0);
padding: 20px 30px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
background-color: var(--color-primary);
&:hover,
&:focus {
left: 50%;
}
&::before {
position: absolute;
top: -30px;
left: 50%;
transform: translate(-50%, 0);
width: 80px;
height: 30px;
content: '';
cursor: pointer;
}
&::after {
position: absolute;
top: -4px;
left: 50%;
transform: translate(-50%, 0);
width: 0;
height: 0;
border-right: 4px solid transparent;
border-bottom: 4px solid var(--color-primary);
border-left: 4px solid transparent;
content: '';
}
&_right {
right: -9999px;
left: auto;
transform: none;
&:hover,
&:focus {
right: 0;
left: auto;
}
&::before {
right: 0;
left: auto;
transform: none;
width: 100%;
}
&::after {
right: 20px;
left: auto;
transform: none;
}
}
}
&__lang {
&-list {
display: flex;
}
&-item {
margin-right: 20px;
&:last-child {
margin-right: 0;
}
}
&-link {
position: relative;
font-family: 'Jornada Sans Book';
font-size: 13px;
font-weight: normal;
line-height: 23px;
letter-spacing: 0;
color: var(--color-secondary-light);
transition: all 0.3s;
&::after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
width: 40px;
height: 30px;
content: '';
}
&:hover,
&:focus {
color: var(--color-accent);
}
&_active {
color: var(--color-text);
}
}
}
&__contact {
@media (--viewport-sm-min) {
min-width: 220px;
}
&-item {
margin-bottom: 10px;
@media (--viewport-ms-max) {
margin-bottom: 20px;
}
&:first-child {
@media (--viewport-ms-only) {
margin-bottom: 30px;
}
@media (--viewport-sm-min) {
margin-bottom: 25px;
}
}
&:last-child {
margin-bottom: 0;
@media (--viewport-sm-min) {
margin-top: 25px;
}
}
}
&-info {
padding-left: 23px;
margin-top: 5px;
}
}
&__info {
display: flex;
width: max-content;
&-list {
flex-direction: column;
}
&:hover,
&:focus {
right: 0;
left: auto;
}
&-head {
margin-bottom: 10px;
margin-top: 10px;
border-bottom: 1px solid hsl(0deg 0% 51% / 25%);
&-title {
display: block;
text-align: left;
color: #00635B;
font-size: 18px;
margin-right: 10px;
margin-left: 11px;
&-accent {
color: var(--color-accent);
}
}
&-schedule {
display: block;
text-align: left;
color: #8B8B8B;
;
font-size: 13px;
font-weight: lighter;
margin-right: 10px;
margin-left: 11px;
margin-bottom: 5px;
}
}
&-contacts {
margin-bottom: 15px;
&-phone{
display: block;
text-align: left;
color: var(--color-text);
font-size:18px;
margin-right: 10px;
margin-left: 11px;
&-desc{
color: var(--unnamed-color-191919);
font-size:13px;
font-weight: lighter;
margin-bottom: 10px;
}
}
}
}
}
No notes defined.