/*------------------------------------*\ MATERIAL PHOTO GALLERY \*------------------------------------*/ $gallery-width: 100%; $transition-duration: 0.5s; .m-p-g { max-width: $gallery-width; margin: 0 auto; &__thumbs { &-img { margin: 0; float: left; vertical-align: bottom; cursor: pointer; z-index: 1; position: relative; opacity: 0; filter: brightness(100%); -webkit-tap-highlight-color: rgba(black, 0); will-change: opacity, transform; transition: all $transition-duration cubic-bezier(0.23, 1, 0.32, 1); &.active { z-index: 50; } &.layout-completed { opacity: 1; } &.hide { opacity: 0; } &:hover { filter: brightness(110%); } } } &__fullscreen { position: fixed; z-index: 10; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100vh; background: rgba(black, 0); visibility: hidden; transition: background .25s ease-out, visibility .01s $transition-duration linear; will-change: background, visibility; backface-visibility: hidden; &.active { transition: background .25s ease-out, visibility .01s 0s linear; visibility: visible; background: rgba(black, 0.95); } &-img { pointer-events: none; position: absolute; transform-origin: left top; top: 50%; left: 50%; max-height: 100vh; max-width: 100%; visibility: hidden; will-change: visibility; transition: opacity $transition-duration ease-out; &.active { visibility: visible; opacity: 1 !important; transition: transform $transition-duration cubic-bezier(0.23, 1, 0.32, 1), opacity $transition-duration ease-out; } &.almost-active { opacity: 0; transform: translate3d(0,0,0) !important; } } } &__controls { position: fixed; top: 0; left: 0; width: 100%; z-index: 200; height: 20vh; background: linear-gradient(to top, transparent 0%, rgba(black, 0.55) 100%); opacity: 0; visibility: hidden; transition: all $transition-duration cubic-bezier(0.23, 1, 0.32, 1); &.active { opacity: 1; visibility: visible; } &-close, &-arrow { appearance: none; border: none; background: none; &:focus { outline: none; } } &-arrow { position: absolute; z-index: 1; top: 0; width: 20%; height: 100vh; display: flex; align-items: center; cursor: pointer; -webkit-tap-highlight-color: rgba(black, 0); opacity: 0; &:hover { opacity: 1; } &--prev { left: 0; padding-left: 3vw; justify-content: flex-start; } &--next { right: 0; padding-right: 3vw; justify-content: flex-end; } } &-close { position: absolute; top: 3vh; left: 3vw; z-index: 5; cursor: pointer; -webkit-tap-highlight-color: rgba(black, 0); } } &__btn { $size: 50px; display: inline-flex; align-items: center; justify-content: center; width: $size; height: $size; border-radius: 50%; background: rgba(white, 0.07); transition: all .25s ease-out; &:hover { background: rgba(white, 0.15); } } &__alertBox { position: fixed; z-index: 999; max-width: 700px; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 25px; border-radius: 3px; text-align: center; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.23), 0 10px 40px rgba(0, 0, 0, 0.19); color: grey; h2 { color: red; } } } /* DEMO */ body { background: #fefefe; color: white; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; font-family: 'Roboto Mono'; } h2 { font-weight: 300; margin: 4vh 4vw; letter-spacing: 3px; color: grey; text-transform: uppercase; } .demo-btn { display: inline-block; margin: 0 2.5px 4vh 2.5px; text-decoration: none; color: grey; padding: 15px; line-height: 1; min-width: 140px; background: rgba(0,0,0, 0.07); border-radius: 6px; } .demo-btn:hover { background: rgba(0,0,0,0.12); } @media (max-width: 640px) { .demo-btn { min-width: 0; font-size: 14px; } }