Add: image-box content style

Leonardo Merlin
1 parent 6c1585cc
Showing 1 changed file with 32 additions and 0 deletions Show diff stats
src/app/content.scss
@@ -0,0 +1,32 @@
+.image-box{
+	&.caption {
+		position: relative;
+		img {
+			width: 100%;
+		}
+		p {
+			position: absolute;
+			padding: 20px 40px 20px 20px;
+			margin: 0;
+			min-width: 50%;
+			max-width: 80%;
+			color: #fff;
+
+			&.caption--right-bottom {
+				bottom: 0;
+				right: 0;
+			}
+
+			&.caption--left-bottom {
+				bottom: 0;
+				left: 0;
+			}
+
+	        @each $category, $color in $categories {
+	            .#{$category} & {
+	                background-color: $color;
+	            }
+	        }
+		}
+	}
+}
 \ No newline at end of file
	@@ -0,0 +1,32 @@		@@ -0,0 +1,32 @@
		1	+.image-box{
		2	+ &.caption {
		3	+ position: relative;
		4	+ img {
		5	+ width: 100%;
		6	+ }
		7	+ p {
		8	+ position: absolute;
		9	+ padding: 20px 40px 20px 20px;
		10	+ margin: 0;
		11	+ min-width: 50%;
		12	+ max-width: 80%;
		13	+ color: #fff;
		14	+
		15	+ &.caption--right-bottom {
		16	+ bottom: 0;
		17	+ right: 0;
		18	+ }
		19	+
		20	+ &.caption--left-bottom {
		21	+ bottom: 0;
		22	+ left: 0;
		23	+ }
		24	+
		25	+ @each $category, $color in $categories {
		26	+ .#{$category} & {
		27	+ background-color: $color;
		28	+ }
		29	+ }
		30	+ }
		31	+ }
		32	+}
0	\ No newline at end of file	33	\ No newline at end of file