127 lines
1.8 KiB
SCSS
127 lines
1.8 KiB
SCSS
.hotspots-interaction {
|
|
display: flex;
|
|
margin: 1em 0;
|
|
width: 100%;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.hotspots-placeholder {
|
|
padding: 1em;
|
|
position: relative;
|
|
.event-hover & {
|
|
pointer-events: none;
|
|
}
|
|
& > div {
|
|
display: none;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
&.visible {
|
|
animation-name: fadeIn;
|
|
animation-duration: 500ms;
|
|
display: block;
|
|
position: static;
|
|
}
|
|
}
|
|
}
|
|
|
|
.hotspots-image-container {
|
|
background: #efefef;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
img {
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
display: block;
|
|
height: auto;
|
|
margin: 0 auto;
|
|
max-width: 100%;
|
|
padding: 0 !important;
|
|
}
|
|
.hotspots-map-container {
|
|
left: 0;
|
|
margin: auto;
|
|
max-width: 100%;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
.layout-left {
|
|
.hotspots-interaction {
|
|
flex-direction: column-reverse;
|
|
@include bp(small) {
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
}
|
|
|
|
.layout-right {
|
|
.hotspots-interaction {
|
|
flex-direction: column-reverse;
|
|
@include bp(small) {
|
|
flex-direction: row-reverse;
|
|
}
|
|
}
|
|
}
|
|
|
|
.layout-left,
|
|
.layout-right {
|
|
.hotspots-placeholder {
|
|
@include bp(small) {
|
|
flex: 0 0 34%;
|
|
max-width: 34%;
|
|
}
|
|
@include bp(medium) {
|
|
flex: 0 0 25%;
|
|
max-width: 25%;
|
|
}
|
|
}
|
|
.hotspots-image-container {
|
|
@include bp(small) {
|
|
flex: 0 0 66%;
|
|
}
|
|
@include bp(medium) {
|
|
flex: 0 0 75%;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Make image full width if there are only URL hotspots
|
|
|
|
.layout-left.links-only,
|
|
.layout-right.links-only {
|
|
.hotspots-image-container {
|
|
@include bp(small) {
|
|
flex: 0 0 100%;
|
|
}
|
|
@include bp(medium) {
|
|
flex: 0 0 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.layout-bottom {
|
|
.hotspots-interaction {
|
|
flex-direction: column-reverse;
|
|
}
|
|
}
|
|
|
|
.layout-top {
|
|
.hotspots-interaction {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
.layout-tooltip .leaflet-container {
|
|
overflow: visible;
|
|
}
|