Molcule for buttons on (z-axis) containers

components/04_Molecules/_molecules.styl

@@ -1 +1,2 @@
 @import 'elementList/_elementList'
+@import 'overlayButton/_overlayButton'

components/04_Molecules/overlayButton/_overlayButton.styl

@@ -0,0 +1,100 @@
+
+RV-OverlayButton__Item()
+	position relative
+	&:hover > *
+		opacity 1
+
+RV-OverlayButton__Button--circle()
+	border-radius 50%
+	
+RV-OverlayButton__Button--topRight()
+	right 0
+	top 0
+
+RV-OverlayButton__Button--bottomLeft()
+	bottom 0
+	left 0
+
+RV-OverlayButton__Button--bottomRight()
+	bottom 0
+	right 0
+
+RV-OverlayButton__Button--small()
+	width 3*spacing-small
+	height 3*spacing-small
+	font-size 1.5*spacing-small
+	line-height 1.5*spacing-small
+	
+RV-OverlayButton__Button--medium()
+	width 2*spacing-medium
+	height 2*spacing-medium
+	font-size spacing-medium
+	line-height spacing-medium
+	
+RV-OverlayButton__Button--large()
+	width 2*spacing-large
+	height 2*spacing-large
+	font-size spacing-large
+	line-height spacing-large
+
+RV-OverlayButton__Row()
+	RV-Alignment--center()
+	RV-Spacing__Inner--medium()
+	RV-FlexRow__Container()
+	
+	position absolute
+	bottom 0
+	height 4em
+	opacity .2
+	width 100%
+	justify-content center
+	background-color alpha(white, .5)
+	padding-left 0
+	padding-right 0
+	
+	*
+		position initial
+		opacity initial
+		margin 0
+		padding 0
+
+RV-OverlayButton__Button()
+	text-align center
+	display inline-block
+	position absolute
+	background-color beige
+	margin spacing-small
+	opacity .2
+	border-radius spacing-small
+	text-decoration none
+	
+	RV-Alignment--center()
+	
+	RV-OverlayButton__Button--medium()
+	
+	&--circle
+		RV-OverlayButton__Button--circle()
+		
+	&--topRight
+		RV-OverlayButton__Button--topRight()
+		
+	&--small
+		RV-OverlayButton__Button--small()
+
+	&--medium
+		RV-OverlayButton__Button--medium()
+		
+	&--large
+		RV-OverlayButton__Button--large()
+RV-OverlayButton()
+	&__Item
+		RV-OverlayButton__Item()
+		
+	&__Button
+		RV-OverlayButton__Button()
+		
+	&__Row
+		RV-OverlayButton__Row()
+		
+.RV-OverlayButton
+	RV-OverlayButton()

components/04_Molecules/overlayButton/overlayButton.config.json

@@ -0,0 +1 @@
+{}

components/04_Molecules/overlayButton/overlayButton.hbs

@@ -0,0 +1,12 @@
+<div class="red square RV-OverlayButton__Item">
+	<a href="#" class="RV-OverlayButton__Button RV-OverlayButton__Button--topRight">X</a>
+	<a href="#" class="RV-OverlayButton__Button RV-OverlayButton__Button--circle">X</a>
+	
+	<div class="RV-OverlayButton__Row">
+		<a href="#" class="RV-OverlayButton__Button RV-OverlayButton__Button--circle">X</a>
+		<a href="#" class="RV-OverlayButton__Button RV-OverlayButton__Button--topRight">X</a>
+		<a href="#" class="RV-OverlayButton__Button RV-OverlayButton__Button--topRight">X</a>
+	</div>
+	
+	<p>some content</p>
+</div>