From 6903408c8e776e7640a2a09a9e3b71189509a169 Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Wed, 28 Feb 2018 12:57:28 +0000
Subject: [PATCH] adding feed item modifier and some basic styles for feed
items that are actions
---
.../templates/funds/includes/feed-item.html | 2 +-
.../src/sass/apply/components/_feed.scss | 38 +++++++++++++++++--
2 files changed, 35 insertions(+), 5 deletions(-)
diff --git a/opentech/apply/funds/templates/funds/includes/feed-item.html b/opentech/apply/funds/templates/funds/includes/feed-item.html
index b228c4b3c..d1f41792e 100644
--- a/opentech/apply/funds/templates/funds/includes/feed-item.html
+++ b/opentech/apply/funds/templates/funds/includes/feed-item.html
@@ -1,7 +1,7 @@
{# 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__item feed__item--{{type}}">
<div class="feed__pre-content">
<p class="feed__label feed__label--{{type}}">{{type|capfirst}}</p>
</div>
diff --git a/opentech/static_src/src/sass/apply/components/_feed.scss b/opentech/static_src/src/sass/apply/components/_feed.scss
index 348fc9985..a31b3a5a9 100644
--- a/opentech/static_src/src/sass/apply/components/_feed.scss
+++ b/opentech/static_src/src/sass/apply/components/_feed.scss
@@ -8,6 +8,14 @@
&:last-child {
border-bottom: 0;
}
+
+ &--action {
+ padding-bottom: 10px;
+
+ @include media-query(small-tablet) {
+ padding-bottom: 25px;
+ }
+ }
}
&__label {
@@ -70,19 +78,27 @@
@include media-query(small-tablet) {
margin-bottom: 10px;
}
+
+ .feed__item--action & {
+ margin: 0;
+ }
}
&__meta-item {
margin: 0 10px 0 0;
@include media-query(small-tablet) {
- margin: 0 20px 0 0;
+ margin: 0 15px 0 0;
+ }
+
+ .feed__item--action & {
+ font-size: map-get($font-sizes, zeta);
}
&--progress {
width: 100%;
margin: 5px 0 0;
- font-size: 12px;
+ font-size: map-get($font-sizes, milli);;
color: $color--black-50;
@include media-query(small-tablet) {
@@ -90,6 +106,14 @@
margin: 0 20px 0 0;
}
+ .feed__item--action & {
+ width: 100%;
+ margin: 5px 0 0;
+ font-size: 16px;
+ font-weight: $weight--bold;
+ color: $color--default;
+ }
+
span {
&:first-child {
&::after {
@@ -114,8 +138,8 @@
&__heading-status {
padding: 3px 10px;
- font-size: 12px;
- font-weight: 700;
+ font-size: map-get($font-sizes, milli);
+ font-weight: $weight--bold;
color: $color--marine;
text-align: center;
text-transform: uppercase;
@@ -140,6 +164,12 @@
color: $color--black-50;
}
+ .feed__item--action & {
+ font-size: map-get($font-sizes, epsilon);
+ font-weight: $weight--normal;
+ color: $color--black-50;
+ }
+
@include media-query(small-tablet) {
width: auto;
margin: 0 10px 0 0;
--
GitLab