reverend/scss-library
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Using overlaybutton for 'delete' function

Browse Source
This commit is contained in:
reverend
2021-01-07 00:17:01 +01:00
parent 2350a84dc2
commit 4991dd276b
2 changed files with 30 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/05_Components/imageGrid/_imageGrid.styl
View File

@@ -8,6 +8,12 @@ RV-ImageGrid()
&__Item
RV-ContentCrop()
RV-ContentCrop--center()
RV-OverlayButton__Item()
&__Button
RV-OverlayButton__Button()
RV-OverlayButton__Button--topRight()
RV-OverlayButton__Button--medium()
.RV-ImageGrid
RV-ImageGrid()

28
components/05_Components/imageGrid/imageGrid.hbs
View File

@@ -1,8 +1,28 @@
<div class="RV-ImageGrid">
<ul class="RV-ImageGrid__Container">
<li class="RV-ImageGrid__Item"><div class="RV-Image"><img src="{{path '/images/hasi01.png'}}" alt=""></div></li>
<li class="RV-ImageGrid__Item"><div class="RV-Image"><img src="{{path '/images/hasi02.jpeg'}}" alt=""></div></li>
<li class="RV-ImageGrid__Item"><div class="RV-Image"><img src="{{path '/images/hasi03.jpeg'}}" alt=""></div></li>
<li class="RV-ImageGrid__Item"><div class="RV-Image"><img src="{{path '/images/hasi04.png'}}" alt=""></div></li>
<li class="RV-ImageGrid__Item">
<a href="#" class="RV-ImageGrid__Button RV-ImageGrid__Button--circle">&#215;</a>
<div class="RV-Image">
<img src="{{path '/images/hasi01.png'}}" alt="">
</div>
</li>
<li class="RV-ImageGrid__Item">
<a href="#" class="RV-ImageGrid__Button RV-ImageGrid__Button--circle">&#215;</a>
<div class="RV-Image">
<img src="{{path '/images/hasi02.jpeg'}}" alt="">
</div>
</li>
<li class="RV-ImageGrid__Item">
<a href="#" class="RV-ImageGrid__Button RV-ImageGrid__Button--circle">&#215;</a>
<div class="RV-Image">
<img src="{{path '/images/hasi03.jpeg'}}" alt="">
</div>
</li>
<li class="RV-ImageGrid__Item">
<a href="#" class="RV-ImageGrid__Button RV-ImageGrid__Button--circle">&#215;</a>
<div class="RV-Image">
<img src="{{path '/images/hasi04.png'}}" alt="">
</div>
</li>
</ul>
</div>