papers-list.component.scss (947B)
1 .grid { 2 display: flex; 3 flex-direction: column; 4 flex-wrap: wrap; 5 padding: 2.500em; 6 7 // Without a set height, the effect can't be achieved. 8 height: 250%; // Percent 9 } 10 11 .grid>* { 12 margin: .5em; 13 position: relative; 14 } 15 16 /* Made by https://codepen.io/gschier/pen/HCoqh */ 17 18 .lightbox { 19 /** Default lightbox to hidden */ 20 display: none; 21 22 /** Position and style */ 23 position: fixed; 24 z-index: 999; 25 width: 100%; 26 height: 100%; 27 text-align: center; 28 top: 0; 29 left: 0; 30 background: rgba(0,0,0,0.8); 31 } 32 33 .lightbox > .img-wrapper { 34 width: 50%; 35 height: 50%; 36 overflow: auto; 37 margin: auto; 38 position: absolute; 39 top: 0; 40 left: 0; 41 bottom: 0; 42 right: 0; 43 } 44 45 .lightbox > .img-wrapper img { 46 /** Pad the lightbox image */ 47 max-width: 90%; 48 max-height: 80%; 49 //margin-top: 2%; 50 position: relative; 51 } 52 53 .lightbox:target { 54 /** Remove default browser outline */ 55 outline: none; 56 57 /** Unhide lightbox **/ 58 display: block; 59 }