Commit e1708651a3931c1634909e0bd029722b014f21f8

Authored by Victor Costa
1 parent 1a988357

Added arrow in categories menu

index.html
... ... @@ -34,6 +34,7 @@
34 34 {{#each article.categories}}
35 35 <li id='proposal-category-{{slug}}' class="proposal-category">
36 36 {{#link name id}}{{/link}}
  37 + <div class="arrow-box" style="display: none"></div>
37 38 </li>
38 39 {{/each}}
39 40 {{#each article.categories}}
... ...
js/main.js
... ... @@ -70,6 +70,8 @@ $.getJSON(noosferoAPI)
70 70 $('.proposal-category-items').hide();
71 71 $('#' + item).show();
72 72 $(".proposal-item").dotdotdot();
  73 + $('.proposal-category .arrow-box').hide();
  74 + $(this).siblings('.arrow-box').show();
73 75 }
74 76 event.preventDefault();
75 77 });
... ...
sass/_proposal_categories.scss
... ... @@ -121,6 +121,10 @@
121 121 background-color: $color;
122 122 border-color: $color;
123 123 }
  124 + #proposal-category-#{$category} .arrow-box:after {
  125 + border-bottom-color: $color;
  126 + }
  127 +
124 128 .proposal-category-items-#{$category} ul.category li {
125 129 background-color: $color;
126 130 background-image: url(./images/icons/#{$category}.png);
... ... @@ -135,3 +139,23 @@
135 139 content: "#{$description}";
136 140 }
137 141 }
  142 +
  143 +.arrow-box {
  144 + position: relative;
  145 + background: #88b7d5;
  146 + top: 3px;
  147 + &:after {
  148 + bottom: 100%;
  149 + left: 50%;
  150 + border: solid transparent;
  151 + content: " ";
  152 + height: 0;
  153 + width: 0;
  154 + position: absolute;
  155 + pointer-events: none;
  156 + border-color: rgba(136, 183, 213, 0);
  157 + border-bottom-color: #88b7d5;
  158 + border-width: 8px;
  159 + margin-left: -8px;
  160 + }
  161 +}
... ...