adding feed item partial plus styles

opentech/apply/funds/templates/funds/includes/feed-item.html

+{# feed__label can be feed__label--note, feed__label--determination, feed__label--message or feed__label--action #}
+{# feed__item will have feed__item--opened once the item is opened/read #}
+
+<div class="feed__item">
+    <div class="feed__pre-content">
+        <p class="feed__label feed__label--{{type}}">{{type|capfirst}}</p>
+    </div>
+
+    <div class="feed__content">
+        <div class="feed__meta">
+            <p class="feed__label feed__label--{{type}} feed__label--mobile">{{type|capfirst}}</p>
+            <p class="feed__meta-item">mm.dd.yy</p>
+            <p class="feed__meta-item">4:47pm</p>
+            <p class="feed__meta-item">cet</p>
+            <p class="feed__meta-item feed__meta-item--progress"><span>(In discussion</span> <span>Proposal requested)</span></p>
+        </div>
+
+        <div class="feed__heading">
+            <h4 class="feed__name">Sandra Ordonez <span class="feed__company">(OTF)</span></h4>
+            <p class="feed__heading-status">Posted</p>
+            <h6>for</h6>
+            <h6><a href="#">Submission Title</a></h6>
+        </div>
+
+        {% if type == 'note' or type == 'determination' or type == 'message' %}
+            <p class="feed__teaser">Team review call:  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit</p>
+        {% endif %}
+    </div>
+</div>
+
+
+

opentech/static_src/src/sass/apply/components/_feed.scss

+.feed {
+    &__item {
+        display: flex;
+        padding-bottom: 20px;
+        margin-bottom: 25px;
+        border-bottom: 1px solid $color--mid-grey;
+
+        &:last-child {
+            border-bottom: 0;
+        }
+    }
+
+    &__label {
+        padding: 5px 10px;
+        margin: 0;
+        font-size: 12px;
+        font-weight: $weight--bold;
+        color: $color--white;
+        text-align: center;
+
+        &--note {
+            background-color: $color--error;
+        }
+
+        &--determination {
+            background-color: $color--ocean;
+        }
+
+        &--message {
+            background-color: $color--grass;
+        }
+
+        &--action {
+            background-color: $color--mint;
+        }
+
+        &--mobile {
+            display: block;
+            margin-right: 10px;
+
+            @include media-query(small-tablet) {
+                display: none;
+            }
+        }
+    }
+
+    &__pre-content {
+        display: none;
+        width: 110px;
+
+        @include media-query(small-tablet) {
+            display: block;
+        }
+    }
+
+    &__content {
+        @include media-query(small-tablet) {
+            width: 70%;
+            padding-left: 20px;
+        }
+    }
+
+    &__meta {
+        @include responsive-font-sizes(12px, 16px);
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        text-transform: uppercase;
+
+        @include media-query(small-tablet) {
+            margin-bottom: 10px;
+        }
+    }
+
+    &__meta-item {
+        margin: 0 10px 0 0;
+
+        @include media-query(small-tablet) {
+            margin: 0 20px 0 0;
+        }
+
+        &--progress {
+            width: 100%;
+            margin: 5px 0 0;
+            font-size: 12px;
+            color: $color--black-50;
+
+            @include media-query(small-tablet) {
+                width: auto;
+                margin: 0 20px 0 0;
+            }
+
+            span {
+                &:first-child {
+                    &::after {
+                        @include triangle(right, $color--black-50, 4px);
+                        display: inline-block;
+                        margin: 0 5px 0 10px;
+                    }
+                }
+            }
+        }
+    }
+
+    &__heading {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+
+        > * {
+            margin: 0 10px 0 0;
+        }
+    }
+
+    &__heading-status {
+        padding: 3px 10px;
+        font-size: 12px;
+        font-weight: 700;
+        color: $color--marine;
+        text-align: center;
+        text-transform: uppercase;
+        background-color: $color--sky-blue;
+    }
+
+    &__teaser {
+        display: none;
+        margin: 10px 0 0;
+        color: $color--black-50;
+
+        @include media-query(small-tablet) {
+            display: block;
+        }
+    }
+
+    &__name {
+        width: 100%;
+        margin: 5px 0 10px;
+
+        .feed__item--opened & {
+            color: $color--black-50;
+        }
+
+        @include media-query(small-tablet) {
+            width: auto;
+            margin: 0 10px 0 0;
+        }
+    }
+
+    &__company {
+        @extend %h6;
+    }
+}

opentech/static_src/src/sass/apply/main.scss

@@ -13,6 +13,7 @@
 // Components
 @import 'components/activity-feed';
 @import 'components/button';
+@import 'components/feed';
 @import 'components/grid';
 @import 'components/heading';
 @import 'components/icon';