154 lines
2.6 KiB
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;
|
|
}
|