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

139 lines
2.4 KiB
SCSS
Raw Normal View History

2020-08-09 23:43:40 +02:00
.LP-ImageGrid{
2020-08-25 15:55:02 +02:00
@include RV-FlexGrid(290px, 200px);
@include RV-ElementList;
@include RV-Spacing__Inner--small;
2020-08-09 23:43:40 +02:00
2020-09-25 18:09:22 +02:00
&__Item {
position: relative;
2020-08-25 15:55:02 +02:00
@include RV-ContentCrop;
2020-09-25 21:42:18 +02:00
&--add {
.LP-Link {
width: 100%;
height: 100%;
position: relative;
display: block;
background: $-almost-white;
transition: background .3s;
2020-09-25 21:42:18 +02:00
.LP-Icon {
width: $-spacing-large;
height: $-spacing-large;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
2020-09-27 15:18:04 +02:00
&:hover .LP-Link{
background-color: $-beige;
}
2020-09-25 21:42:18 +02:00
}
2020-09-25 18:09:22 +02:00
}
2020-09-25 18:46:26 +02:00
2020-09-25 18:09:22 +02:00
&__DeleteItem {
opacity: 0.7;
visibility: hidden;
position: absolute;
top: $-spacing-small;
right: $-spacing-small;
background-color: transparent;
2020-09-25 18:09:22 +02:00
border-radius: 50%;
transition: background .2s;
2020-09-25 18:09:22 +02:00
height: $-spacing-large;
width: $-spacing-large;
2020-09-25 21:42:18 +02:00
.LP-Link .LP-Icon{
height: #{$-spacing-small * 2};
width: #{$-spacing-small * 2};
2020-09-25 18:09:22 +02:00
position:relative;
2020-09-27 17:06:21 +02:00
left: #{($-spacing-large - $-spacing-small) / 3.2};
top: #{($-spacing-large - $-spacing-small) / 3.2};
2020-09-25 18:09:22 +02:00
}
}
2020-09-29 20:21:02 +02:00
2020-09-27 17:06:21 +02:00
&__Item>.LP-Link:hover + &__DeleteItem, &__DeleteItem:hover {
background-color: $-light-brown;
2020-09-25 18:09:22 +02:00
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;
2021-10-02 09:04:40 +02:00
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;
}
&__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;
}
2021-10-02 07:19:34 +02:00
}
.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;
}