diff --git a/opentech/apply/funds/templates/funds/includes/feed-item.html b/opentech/apply/funds/templates/funds/includes/feed-item.html index b228c4b3c5d7381dfdf4421068aba8fc8b1f703c..d1f41792e1a669b72e5c50d144d9481628eaf010 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 348fc9985404c8638ec5ecddf26169c91c77f272..a31b3a5a95df07d34f24ccb7ec5b96b1e0f94037 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;