diff --git a/opentech/static_src/src/sass/apply/components/_reviews-sidebar.scss b/opentech/static_src/src/sass/apply/components/_reviews-sidebar.scss index 47fc232fecd3598d52557b35f826e720c0628c69..3d72caaa0127efc09540359371ae478b0d2ed8a3 100644 --- a/opentech/static_src/src/sass/apply/components/_reviews-sidebar.scss +++ b/opentech/static_src/src/sass/apply/components/_reviews-sidebar.scss @@ -1,64 +1,67 @@ +// also used within the React app in /components/ReviewBlock .reviews-sidebar { $root: &; margin-bottom: 20px; font-weight: $weight--bold; - tbody { - tr { - border: 0; + &__decision { + position: relative; + font-size: 14px; + border-top: 1px solid $color--mid-grey; + border-bottom: 1px solid $color--mid-grey; + margin-bottom: 20px; + padding-top: 10px; + } - &:hover { - box-shadow: none; - } + &__item { + display: flex; + justify-content: space-between; + margin-bottom: 20px; - @include media-query(tablet-portrait) { - border-bottom: 0; - } + @supports(display: grid) { + display: grid; + grid-template-columns: 50% 25% 25%; + grid-gap: 5px; + } - > th { - font-size: inherit; - font-weight: $weight--bold; - } + &--decision { + margin-bottom: 10px; + font-weight: $weight--semibold; - > td { - display: table-cell; - height: auto; - } + &:first-child { - th, - td, - td:last-child, - td:first-child { - padding: 10px; - } + #{$root}__outcome { + &::before, + &::after { + position: absolute; + top: -23px; + left: 5px; + } - &:only-child { - > td { - padding: 0; + &::after { + @include triangle(top, $color--white, 8px); + top: -21px; + } + + &::before { + @include triangle(top, $color--mid-grey, 8px); + } } } + } - &.no-response { - color: $color--black-20; - } + &--header { + background-color: $color--light-grey; + padding: 10px; + align-items: center; } - } - &__author { - span { - position: relative; - z-index: 1; - display: block; - overflow: hidden; - text-overflow: ellipsis; - background: $color--white; + &.is-hidden { + display: none; } - &:hover { - span { - display: inline; - overflow: visible; - } + &.no-response { + color: $color--black-20; } } @@ -69,4 +72,39 @@ &__no-reviews { color: $color--mid-grey; } + + &__name { + position: relative; + z-index: 1; + display: flex; + align-items: center; + overflow: hidden; + text-overflow: ellipsis; + background: $color--white; + + &:hover { + display: inline-flex; + overflow: visible; + } + + img { + margin-left: 7px; + } + } + + &__outcome { + position: relative; + + &.agree { + color: $color--green; + } + + &.disagree { + color: $color--tomato; + } + } + + &__split { + margin-bottom: 20px; + } }