diff --git a/styles/atat.scss b/styles/atat.scss index bb29e97f..735e9278 100644 --- a/styles/atat.scss +++ b/styles/atat.scss @@ -38,3 +38,4 @@ @import 'sections/projects_list'; @import 'sections/project_edit'; @import 'sections/member_edit'; +@import 'sections/funding'; diff --git a/styles/sections/_funding.scss b/styles/sections/_funding.scss new file mode 100644 index 00000000..2e43170d --- /dev/null +++ b/styles/sections/_funding.scss @@ -0,0 +1,62 @@ +.funding-summary-row { + @include media($medium-screen) { + @include grid-row; + + .funding-summary-row__col { + @include grid-pad; + flex-grow: 1; + + .panel { + padding: $gap * 2; + + &.spend-summary { + .row { + justify-content: space-between; + } + + .spend-summary__heading { + @include h3; + margin: 0 $gap 0 0; + } + + .spend-summary__budget { + margin: 0 0 0 $gap; + + > div { + text-align: right; + margin: 0 0 ($gap / 2) 0; + + dd, dt { + display: inline; + } + + dt { + color: $color-gray; + margin-right: $gap; + font-weight: normal; + } + + dd { + font-weight: bold; + } + } + } + + meter { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + width: 100%; + height: 3rem; + display: block; + background: $color-gray-lightest; + } + + meter::-webkit-meter-bar { + background: $color-primary; + } + } + } + } + } +}