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

59 lines
1.1 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;
.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: $-light-brown;
border-radius: 50%;
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 {
2020-09-25 18:09:22 +02:00
visibility: visible;
}
2020-08-25 15:55:02 +02:00
}