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