neff
/
192.168.0.2
forked from neff/neff-steindesign.de
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

hide lightbox template by default

This commit is contained in:
Patrick Neff 2019-06-27 15:40:41 +02:00
parent b82aa45181
commit f459d177a5
1 changed files with 110 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

216
themes/neff/src/scss/_lightbox.scss
View File

@ -1,107 +1,111 @@
.lightbox {
position: fixed;
width: 100vw;
height: 100vh;
margin: 0;
top: 0;
left: 0;
background-color: rgba(#000, 0.5);
z-index: 10000;
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
.lightbox-container {
flex: 0 0 0;
position: relative;
padding: $gutter-width;
margin: $gutter-width;
background-color: $background-color;
border-radius: $border-radius;
.lightbox-header {
flex: 0 0 0;
display: flex;
flex-direction: row;
justify-content: space-between;
h1 {
flex: 1 0 0;
font-size: 1.4rem;
}
}
.lightbox-image {
flex: 1 0 0;
text-align: center;
vertical-align: middle;
margin: 0;
padding: 0;
.image-container {
position: relative;
margin: 0;
padding: 0;
img {
margin: 0;
padding: 0;
max-height: calc(90vh - calc(8 * #{$gutter-width}));
max-width: calc(90vw - calc(4 * #{$gutter-width}));
}
}
}
.lightbox-footer {
flex: 0 0 0;
z-index: 100000;
max-width: 500px;
}
.lightbox-controls {
font-size: 1.6rem;
}
.lightbox-close {
position: absolute;
right: 0;
top: 0;
margin: $gutter-width;
z-index: 100000;
}
.lightbox-nav-prev,
.lightbox-nav-next {
cursor: pointer;
position: absolute;
top: 0;
width: 40%;
height: 100%;
margin: 0;
display: flex;
flex-direction: row;
align-items: center;
div {
background-color: #fff;
vertical-align: middle;
padding: $gutter-width;
}
}
.lightbox-nav-prev {
left: 0;
div {
border-radius: 0 $border-radius $border-radius 0;
}
}
.lightbox-nav-next {
right: 0;
div {
margin-left: auto;
border-radius: $border-radius 0 0 $border-radius;
}
}
}
#lightbox-template {
display: none;
}
.lightbox {
position: fixed;
width: 100vw;
height: 100vh;
margin: 0;
top: 0;
left: 0;
background-color: rgba(#000, 0.5);
z-index: 10000;
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
.lightbox-container {
flex: 0 0 0;
position: relative;
padding: $gutter-width;
margin: $gutter-width;
background-color: $background-color;
border-radius: $border-radius;
.lightbox-header {
flex: 0 0 0;
display: flex;
flex-direction: row;
justify-content: space-between;
h1 {
flex: 1 0 0;
font-size: 1.4rem;
}
}
.lightbox-image {
flex: 1 0 0;
text-align: center;
vertical-align: middle;
margin: 0;
padding: 0;
.image-container {
position: relative;
margin: 0;
padding: 0;
img {
margin: 0;
padding: 0;
max-height: calc(90vh - calc(8 * #{$gutter-width}));
max-width: calc(90vw - calc(4 * #{$gutter-width}));
}
}
}
.lightbox-footer {
flex: 0 0 0;
z-index: 100000;
max-width: 500px;
}
.lightbox-controls {
font-size: 1.6rem;
}
.lightbox-close {
position: absolute;
right: 0;
top: 0;
margin: $gutter-width;
z-index: 100000;
}
.lightbox-nav-prev,
.lightbox-nav-next {
cursor: pointer;
position: absolute;
top: 0;
width: 40%;
height: 100%;
margin: 0;
display: flex;
flex-direction: row;
align-items: center;
div {
background-color: #fff;
vertical-align: middle;
padding: $gutter-width;
}
}
.lightbox-nav-prev {
left: 0;
div {
border-radius: 0 $border-radius $border-radius 0;
}
}
.lightbox-nav-next {
right: 0;
div {
margin-left: auto;
border-radius: $border-radius 0 0 $border-radius;
}
}
}
}