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

154 lines
2.6 KiB
SCSS

@use "sass:math";
.LP-ImageGrid{
&__Container {
@include RV-Grid;
@include RV-Grid--fixedSize;
--fixedSize: var(--itemWidth);
--itemWidth: 290px;
--itemHeight: 200px;
list-style-type: none;
--gap: #{$-spacing-small};
}
&__Item {
position: relative;
.LP-Image {
height: 100%;
width: 100%;
object-fit: cover;
}
&--add {
.LP-Link {
width: 100%;
height: 100%;
position: relative;
display: block;
background: $-almost-white;
transition: background .3s;
.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: transparent;
border-radius: 50%;
transition: background .2s;
height: $-spacing-large;
width: $-spacing-large;
.LP-Link .LP-Icon{
height: #{$-spacing-small * 2};
width: #{$-spacing-small * 2};
position:relative;
left: #{math.div($-spacing-large - $-spacing-small, 3.2)};
top: #{math.div($-spacing-large - $-spacing-small, 3.2)};
}
}
&__Item>.LP-Link:hover + &__DeleteItem, &__DeleteItem:hover {
background-color: $-light-brown;
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;
img {
object-fit: contain;
}
&: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;
justify-self: center;
}
&__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;
}
}
.LP-Select {
display: block;
cursor: pointer;
transition: box-shadow .3s;
}
.LP-Select:checked, :checked + .LP-Select, .LP-Select--active {
box-shadow: 0 0 3px 3px #C09F80;
}