/* Poptrox */
.poptrox-popup {
@include vendor('box-sizing', 'content-box'); background: #fff; padding-bottom: 3em; .loader { width: 48px; height: 48px; background: url('images/loader.gif'); position: absolute; top: 50%; left: 50%; margin: -24px 0 0 -24px; } .caption { position: absolute; bottom: 0; left: 0; background: #fff; width: 100%; height: 3em; line-height: 3em; text-align: center; cursor: default; z-index: 1; } .nav-next, .nav-previous { @include vendor('transition', 'opacity 0.5s ease-in-out'); position: absolute; top: 0; width: 50%; height: 100%; opacity: 0; cursor: pointer; background: rgba(0, 0, 0, 0.01); -webkit-tap-highlight-color: rgba(255, 255, 255, 0); &:before { content: ''; position: absolute; width: 96px; height: 64px; background: url('images/poptrox-nav.svg'); top: calc(50% - 1.5em); margin: -32px 0 0 0; } } &:hover { .nav-next, .nav-previous { opacity: 0.5; &:hover { opacity: 1.0; } } } .nav-next { right: 0; &:before { right: 0; } } .nav-previous { left: 0; &:before { @include vendor('transform', 'scaleX(-1)'); left: 0; -ms-filter: "FlipH"; filter: FlipH; } } .closer { @include vendor('transition', 'opacity 0.5s ease-in-out'); position: absolute; top: 0; right: 0; width: 64px; height: 64px; text-indent: -9999px; z-index: 2; opacity: 0; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); &:before { @include vendor('transition', 'background-color 0.5s ease-in-out'); content: ''; display: block; position: absolute; right: 16px; top: 16px; width: 40px; height: 40px; border-radius: 100%; box-shadow: inset 0 0 0 1px #fff; background: rgba(255, 255, 255, 0.1) url('images/poptrox-closer.svg') center center; color: #fff !important; } } &:hover { .closer { opacity: 0.5; &:hover { opacity: 1.0; } } }
}