Deleting and adding Image
This commit is contained in:
parent
af100b940b
commit
8e4ae2d9be
@ -6,6 +6,26 @@
|
||||
&__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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__DeleteItem {
|
||||
@ -20,17 +40,15 @@
|
||||
height: $-spacing-large;
|
||||
width: $-spacing-large;
|
||||
|
||||
line-height: $-spacing-large;
|
||||
vertical-align: middle;
|
||||
|
||||
.LP-Icon{
|
||||
height: $-spacing-medium;
|
||||
width: $-spacing-medium;
|
||||
.LP-Link .LP-Icon{
|
||||
height: #{$-spacing-small * 2};
|
||||
width: #{$-spacing-small * 2};
|
||||
position:relative;
|
||||
top: calc(50% - 18.75px);
|
||||
left: #{($-spacing-large - $-spacing-small) / 3};
|
||||
top: #{($-spacing-large - $-spacing-small) / 3};
|
||||
}
|
||||
}
|
||||
&__Item:hover &__DeleteItem {
|
||||
&__Item>.LP-Link:hover + &__DeleteItem, &__DeleteItem:hover {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
@ -3,8 +3,20 @@
|
||||
<ul class="LP-ImageGrid__Container">
|
||||
{{#each images}}
|
||||
<li class="LP-ImageGrid__Item">
|
||||
<a href="#" class="LP-Link"><img class="LP-Image" src="{{this}}"></a>
|
||||
<a href="#" class="LP-Link">
|
||||
<img class="LP-Image" src="{{this}}">
|
||||
</a>
|
||||
<span class="LP-ImageGrid__DeleteItem" title="Bild löschen">
|
||||
<a href="#" class="LP-Link">
|
||||
<img class="LP-Icon" src="/icons/cancel.svg"/>
|
||||
</a>
|
||||
</span>
|
||||
</li>
|
||||
{{/each}}
|
||||
<li class="LP-ImageGrid__Item LP-ImageGrid__Item--add" title="Bild hinzufügen">
|
||||
<a class="LP-Link" href="#">
|
||||
<img class="LP-Icon" src="/icons/plus.svg"/>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
@ -1588,23 +1588,56 @@ body {
|
||||
border: none; }
|
||||
.LP-ImageGrid__Container {
|
||||
gap: 10px; }
|
||||
.LP-ImageGrid .LP-ImageGrid__Item, .LP-ImageGrid .LP-ImageGrid__Item * {
|
||||
overflow: hidden;
|
||||
word-break: break-all; }
|
||||
.LP-ImageGrid .LP-ImageGrid__Item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover; }
|
||||
.LP-ImageGrid .LP-ImageGrid__Item--left img {
|
||||
object-position: left; }
|
||||
.LP-ImageGrid .LP-ImageGrid__Item--center img {
|
||||
object-position: center; }
|
||||
.LP-ImageGrid .LP-ImageGrid__Item--top img {
|
||||
object-position: top; }
|
||||
.LP-ImageGrid .LP-ImageGrid__Item--bottom img {
|
||||
object-position: botom; }
|
||||
.LP-ImageGrid .LP-ImageGrid__Item--center img {
|
||||
object-position: center; }
|
||||
.LP-ImageGrid__Item {
|
||||
position: relative; }
|
||||
.LP-ImageGrid__Item, .LP-ImageGrid__Item * {
|
||||
overflow: hidden;
|
||||
word-break: break-all; }
|
||||
.LP-ImageGrid__Item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover; }
|
||||
.LP-ImageGrid__Item--left img {
|
||||
object-position: left; }
|
||||
.LP-ImageGrid__Item--center img {
|
||||
object-position: center; }
|
||||
.LP-ImageGrid__Item--top img {
|
||||
object-position: top; }
|
||||
.LP-ImageGrid__Item--bottom img {
|
||||
object-position: botom; }
|
||||
.LP-ImageGrid__Item--center img {
|
||||
object-position: center; }
|
||||
.LP-ImageGrid__Item--add .LP-Link {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: block;
|
||||
background: #f9f9f9; }
|
||||
.LP-ImageGrid__Item--add .LP-Link .LP-Icon {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%); }
|
||||
.LP-ImageGrid__DeleteItem {
|
||||
opacity: 0.7;
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background-color: #C09F80;
|
||||
border-radius: 50%;
|
||||
height: 35px;
|
||||
width: 35px; }
|
||||
.LP-ImageGrid__DeleteItem .LP-Link .LP-Icon {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
position: relative;
|
||||
left: 8.33333px;
|
||||
top: 8.33333px; }
|
||||
.LP-ImageGrid__Item > .LP-Link:hover + .LP-ImageGrid__DeleteItem, .LP-ImageGrid__DeleteItem:hover {
|
||||
visibility: visible; }
|
||||
|
||||
.LP-MainContainer {
|
||||
margin: 0 auto;
|
||||
|
Loading…
Reference in New Issue
Block a user