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 @@
	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	33	\ No newline at end of file
...	...