12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697 |
- #imageview {
- position: fixed;
- display: none;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-color: rgba(10, 10, 10, .98);
- transition: background-color .3s;
- /* Modes ------------------------------------------------*/
- &.view { background-color: inherit; }
- &.full { background-color: black(1); }
- /* ImageView ------------------------------------------------*/
- #image {
- position: absolute;
- top: 60px;
- right: 30px;
- bottom: 30px;
- left: 30px;
- background-repeat: no-repeat;
- background-position: 50% 50%;
- background-size: contain;
- transition: top .3s, right .3s, bottom .3s, left .3s, margin-top .3s, opacity .2s, transform .3s $timingBounce;
- animation-name: zoomIn;
- animation-duration: .3s;
- animation-timing-function: $timingBounce;
- will-change: transform;
- &.small {
- top: 50%;
- right: auto;
- bottom: auto;
- left: 50%;
- }
- &.full {
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- }
- }
- /* Previous/Next Buttons ------------------------------------------------*/
- .arrow_wrapper {
- position: fixed;
- width: 15%;
- height: calc(100% - 60px);
- top: 60px;
- &--previous { left: 0; }
- &--next { right: 0; }
- a {
- position: fixed;
- top: 50%;
- margin: -19px 0 0;
- padding: 8px 12px;
- width: 16px;
- height: 22px;
- // The background-image will be styled dynamically via JS
- // background-image: linear-gradient(to bottom, rgba(0, 0, 0, .4), rgba(0, 0, 0, .4)), url('');
- background-size: 100% 100%;
- border: 1px solid white(.8);
- opacity: .6;
- z-index: 2;
- transition: transform .2s ease-out, opacity .2s ease-out;
- will-change: transform;
- &#previous {
- left: -1px;
- transform: translateX(-100%);
- }
- &#next {
- right: -1px;
- transform: translateX(100%);
- }
- }
- &:hover a#previous,
- &:hover a#next { transform: translateX(0); }
- a:hover { opacity: 1; }
- .iconic {
- fill: white(.8);
- filter: drop-shadow(0 1px 0 black(.4));
- }
- }
- }
|