make category of proposal detail

Leandro Santos
1 parent 32d4936f
Showing 2 changed files with 28 additions and 6 deletions Show diff stats
index.html
sass/_proposal_detail.scss
@@ -53,7 +53,9 @@
         <div class='proposal-detail hide' id="proposal-item-{{id}}">
           <ul>
             {{#each categories}}
-              <li class='{{slug}}'>{{name}}</li>
+              <li class='{{slug}}'>
+                <a href="#"><span>{{name}}</span></a>
+              </li>
             {{/each}}
           </ul>
           <img src="{{../host}}{{image.thumb_url}}"/>
+  .proposal-detail {
+    ul{
+      padding: 0px;
+    }
 @each $category, $color in $categories {
-.proposal-detail {
-  .#{$category}{
-    background-color: $color;
-  }
-}
+    .#{$category}{
+      background-color: $color;
+      padding: { 
+        bottom: 20px;
+        top: 20px;
+      }
+      a {
+        background-image: url(./images/icons/#{$category}.png);
+        padding: 20px;
+        background: {
+          color: $color;
+          position: center left;
+          repeat: no-repeat;
+        }
+        span{
+          padding-left: 40px;
+        }
+      }
+    }
 }
+
+  }
...	...	@@ -53,7 +53,9 @@
53	53	<div class='proposal-detail hide' id="proposal-item-{{id}}">
54	54	<ul>
55	55	{{#each categories}}
56		- <li class='{{slug}}'>{{name}}</li>
	56	+ <li class='{{slug}}'>
	57	+ <a href="#"><span>{{name}}</span></a>
	58	+ </li>
57	59	{{/each}}
58	60	</ul>
59	61	<img src="{{../host}}{{image.thumb_url}}"/>
...	...
	1	+ .proposal-detail {
	2	+ ul{
	3	+ padding: 0px;
	4	+ }
1	5	@each $category, $color in $categories {
2		-.proposal-detail {
3		- .#{$category}{
4		- background-color: $color;
5		- }
6		-}
	6	+ .#{$category}{
	7	+ background-color: $color;
	8	+ padding: {
	9	+ bottom: 20px;
	10	+ top: 20px;
	11	+ }
	12	+ a {
	13	+ background-image: url(./images/icons/#{$category}.png);
	14	+ padding: 20px;
	15	+ background: {
	16	+ color: $color;
	17	+ position: center left;
	18	+ repeat: no-repeat;
	19	+ }
	20	+ span{
	21	+ padding-left: 40px;
	22	+ }
	23	+ }
	24	+ }
7	25	}
	26	+
	27	+ }
...	...