diff --git a/src/open_inwoner/components/templates/components/Card/RenderCard.html b/src/open_inwoner/components/templates/components/Card/RenderCard.html index f1d9b9bc7b..e1f54d06ea 100644 --- a/src/open_inwoner/components/templates/components/Card/RenderCard.html +++ b/src/open_inwoner/components/templates/components/Card/RenderCard.html @@ -10,7 +10,7 @@ {% endif %} -
{{ title }} diff --git a/src/open_inwoner/scss/components/Card/Card.scss b/src/open_inwoner/scss/components/Card/Card.scss index b469e7f43c..dc4434387b 100644 --- a/src/open_inwoner/scss/components/Card/Card.scss +++ b/src/open_inwoner/scss/components/Card/Card.scss @@ -4,6 +4,8 @@ --card-size-border: var(--border-width-thin); --card-size-dog-ear: var(--gutter-width); --card-spacing: var(--spacing-large); + --card-spacing-vertical: var(--spacing-giant); + --card-spacing-horizontal: var(--spacing-extra-large); background-color: var(--card-color-background); border: var(--card-size-border) solid var(--card-color-border); @@ -98,8 +100,26 @@ object-fit: contain; } + &__caption { + color: var(--color-gray-dark-900); + margin: 0; + } + + &__text--small { + font-size: var(--font-size-body-small); + } + + &__text--dark { + color: var(--font-color-body); + padding-left: var(--spacing-medium); + } + &__body { - padding: var(--card-spacing); + padding: var(--card-spacing-vertical) var(--card-spacing-horizontal); + + &--compact { + padding: var(--card-spacing); + } &--tabled { display: flex; @@ -223,6 +243,14 @@ font-size: var(--font-size-heading-card); } + &__heading { + color: var(--color-black); + font-family: var(--font-family-heading); + font-size: var(--font-size-heading-card); + line-height: var(--font-line-height-body-medium); + margin: 0; + } + &--product { padding: 20px; align-items: end; @@ -255,7 +283,7 @@ span.button:last-child { bottom: 0; right: 0; - padding-bottom: var(--card-spacing); + padding-bottom: var(--card-spacing-vertical); position: absolute; } @@ -283,7 +311,7 @@ &--stretch .list + .link:first-of-type:last-of-type, &--stretch .profile-card__button { - bottom: var(--card-spacing); + bottom: var(--card-spacing-vertical); position: static; @media (min-width: 768px) { diff --git a/src/open_inwoner/scss/components/Cases/CaseDetail.scss b/src/open_inwoner/scss/components/Cases/CaseDetail.scss index bd6a787ade..37528115e6 100644 --- a/src/open_inwoner/scss/components/Cases/CaseDetail.scss +++ b/src/open_inwoner/scss/components/Cases/CaseDetail.scss @@ -39,7 +39,7 @@ @extend .button--disabled; background-color: var(--color-gray); border-color: var(--color-gray); - color: var(--color-gray-90); + color: var(--color-gray-dark-900); cursor: default; font-weight: bold; justify-content: center; @@ -52,7 +52,7 @@ @extend .button--disabled; background-color: var(--color-gray); border-color: var(--color-gray); - color: var(--color-gray-90); + color: var(--color-gray-dark-900); cursor: default; font-weight: bold; justify-content: center; diff --git a/src/open_inwoner/scss/components/Dashboard/Dashboard.scss b/src/open_inwoner/scss/components/Dashboard/Dashboard.scss index 3e3ee2c441..7f8ebde4b7 100644 --- a/src/open_inwoner/scss/components/Dashboard/Dashboard.scss +++ b/src/open_inwoner/scss/components/Dashboard/Dashboard.scss @@ -49,7 +49,7 @@ } &__item-label { - color: var(--color-gray-90); + color: var(--color-gray-dark-900); } .h4 { diff --git a/src/open_inwoner/scss/components/Form/FileInput.scss b/src/open_inwoner/scss/components/Form/FileInput.scss index b1062ea71b..48be1a8528 100644 --- a/src/open_inwoner/scss/components/Form/FileInput.scss +++ b/src/open_inwoner/scss/components/Form/FileInput.scss @@ -88,7 +88,7 @@ border-color: var(--color-red-notification); .p { - color: var(--color-gray-90); + color: var(--color-gray-dark-900); } [class*='icon'] { diff --git a/src/open_inwoner/scss/components/List/_ListItem.scss b/src/open_inwoner/scss/components/List/_ListItem.scss index 4e5a34ea77..ab7959d343 100644 --- a/src/open_inwoner/scss/components/List/_ListItem.scss +++ b/src/open_inwoner/scss/components/List/_ListItem.scss @@ -21,7 +21,8 @@ } & &__caption { - color: var(--color-gray-lighter); + color: var(--color-gray-dark-900); + font-size: var(--font-size-body-small); margin-top: 0; } diff --git a/src/open_inwoner/scss/components/Status/_StatusList.scss b/src/open_inwoner/scss/components/Status/_StatusList.scss index c145424a8a..7fdd096563 100644 --- a/src/open_inwoner/scss/components/Status/_StatusList.scss +++ b/src/open_inwoner/scss/components/Status/_StatusList.scss @@ -51,7 +51,7 @@ } .link-future { - color: var(--color-gray-90); + color: var(--color-gray-dark-900); } .p-date { diff --git a/src/open_inwoner/scss/components/Table/Tabled.scss b/src/open_inwoner/scss/components/Table/Tabled.scss index c1ea145f7a..1c1213f299 100644 --- a/src/open_inwoner/scss/components/Table/Tabled.scss +++ b/src/open_inwoner/scss/components/Table/Tabled.scss @@ -3,7 +3,7 @@ flex-direction: column; &__key { - color: var(--color-gray-90); + color: var(--color-gray-dark-900); @media (max-width: 500px) { min-width: 150px; } diff --git a/src/open_inwoner/scss/components/UserFeed/UserFeed.scss b/src/open_inwoner/scss/components/UserFeed/UserFeed.scss index 7c36e463f7..72a6f8da0b 100644 --- a/src/open_inwoner/scss/components/UserFeed/UserFeed.scss +++ b/src/open_inwoner/scss/components/UserFeed/UserFeed.scss @@ -71,7 +71,8 @@ .card__body { background-color: #fff; - padding-right: var(--row-height); + border-radius: var(--border-radius); + padding: var(--card-spacing); .tabled__value { color: var(--color-gray-dark); @@ -81,7 +82,7 @@ } span.button:last-child { - bottom: 20px; + bottom: var(--spacing-medium); } } } diff --git a/src/open_inwoner/scss/views/App.scss b/src/open_inwoner/scss/views/App.scss index c4f4b23af4..9e734fc18e 100644 --- a/src/open_inwoner/scss/views/App.scss +++ b/src/open_inwoner/scss/views/App.scss @@ -25,8 +25,8 @@ --color-black: #000; --color-blue: #1261a3; --color-gray: #d2d2d2; - --color-gray-90: #676767; - --color-gray-dark: #4b4b4b; + --color-gray-dark: rgba(75, 75, 75, 1); + --color-gray-dark-900: rgba(75, 75, 75, 0.9); --color-gray-lighter: #7a7a7a; --color-gray-light: #d2d2d2; --color-gray-lightest: #f3f3f3; diff --git a/src/open_inwoner/templates/pages/cases/list_inner.html b/src/open_inwoner/templates/pages/cases/list_inner.html index 6d453b9647..492303c639 100644 --- a/src/open_inwoner/templates/pages/cases/list_inner.html +++ b/src/open_inwoner/templates/pages/cases/list_inner.html @@ -16,38 +16,42 @@
{{ case.naam }}
+ +{{ case.description }}
+