lostplaces-frontend/components/03_Organisms/imageGrid/_imageGrid.scss

122 lines
2.1 KiB
SCSS

.LP-ImageGrid{
@include RV-FlexGrid(290px, 200px);
@include RV-ElementList;
@include RV-Spacing__Inner--small;
&__Item {
position: relative;
@include RV-ContentCrop;
&--add {
.LP-Link {
width: 100%;
height: 100%;
position: relative;
display: block;
background: $-almost-white;
.LP-Icon {
width: $-spacing-large;
height: $-spacing-large;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
&:hover .LP-Link{
background-color: $-beige;
}
}
}
&__DeleteItem {
opacity: 0.7;
visibility: hidden;
position: absolute;
top: $-spacing-small;
right: $-spacing-small;
background-color: $-light-brown;
border-radius: 50%;
height: $-spacing-large;
width: $-spacing-large;
.LP-Link .LP-Icon{
height: #{$-spacing-small * 2};
width: #{$-spacing-small * 2};
position:relative;
left: #{($-spacing-large - $-spacing-small) / 3.2};
top: #{($-spacing-large - $-spacing-small) / 3.2};
}
}
&__Item>.LP-Link:hover + &__DeleteItem, &__DeleteItem:hover {
visibility: visible;
}
&__LightBox {
visibility: hidden;
display: none;
position: fixed;
pointer-events: none;
flex-direction: row;
justify-content: center;
align-items: center;
background-color: rgba($-grey, .9);
padding: 2rem;
padding-bottom: 0;
width: 100vw;
height: 100vh;
z-index: 30;
top: 0;
left: 0;
box-sizing: border-box;
&:target {
visibility: visible;
display: grid;
grid-template-areas: 'picture picture' 'previous next';
grid-template-rows: 1fr 4rem;
grid-template-columns: 1fr 1fr;
pointer-events: initial;
}
}
&__FullSizeImage {
grid-area: picture;
}
&__Previous{
grid-area: previous;
align-self: center;
justify-self: end;
}
&__Next {
grid-area: next;
align-self: center;
justify-self: start;
}
&__Previous, &__Next {
padding: 25px;
color: $-beige;
text-decoration: none;
font-family: $-primary-sans-serif-font;
font-weight: bold;
font-size: 20px;
}
&__Close{
position: fixed;
right: 1rem;
top: 1rem;
left: unset;
visibility: visible;
opacity: 1;
}
}