lostplaces-frontend/components/03_Organisms/imageGrid/_imageGrid.scss
2020-09-29 20:21:02 +02:00

59 lines
1.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;
}
}