diff --git a/src/open_inwoner/scss/components/Button/Button.scss b/src/open_inwoner/scss/components/Button/Button.scss index a796c54ce2..f172e19c48 100644 --- a/src/open_inwoner/scss/components/Button/Button.scss +++ b/src/open_inwoner/scss/components/Button/Button.scss @@ -141,11 +141,11 @@ position: relative; color: var(--color-primary); filter: saturate(50%); - border-radius: 100px; // This is big to make sure the corners are rounded properly. + border-radius: var(--border-radius-rounded); &:before { content: ' '; - border-radius: 100px; // This is big to make sure the corners are rounded properly. + border-radius: var(--border-radius-rounded); position: absolute; top: 0; bottom: 0; diff --git a/src/open_inwoner/scss/components/Form/ChoiceList.scss b/src/open_inwoner/scss/components/Form/ChoiceList.scss index 559ce509f4..a1699d0754 100644 --- a/src/open_inwoner/scss/components/Form/ChoiceList.scss +++ b/src/open_inwoner/scss/components/Form/ChoiceList.scss @@ -114,7 +114,7 @@ width: var(--font-line-height-body-small); height: var(--font-line-height-body-small); border: var(--border-width) solid var(--color-gray-dark); - border-radius: 100%; + border-radius: var(--border-radius-rounded); background-color: var(--color-white); } diff --git a/src/open_inwoner/scss/components/Form/Radio.scss b/src/open_inwoner/scss/components/Form/Radio.scss index f2245d7f1a..6d2baab974 100644 --- a/src/open_inwoner/scss/components/Form/Radio.scss +++ b/src/open_inwoner/scss/components/Form/Radio.scss @@ -32,7 +32,7 @@ width: var(--font-line-height-body-small); height: var(--font-line-height-body-small); border: var(--border-width) solid var(--color-gray-dark); - border-radius: 100%; + border-radius: var(--border-radius-rounded); background-color: var(--color-white); } } diff --git a/src/open_inwoner/scss/components/Header/Header.scss b/src/open_inwoner/scss/components/Header/Header.scss index b33cccffd0..b8ec669bdc 100644 --- a/src/open_inwoner/scss/components/Header/Header.scss +++ b/src/open_inwoner/scss/components/Header/Header.scss @@ -51,7 +51,7 @@ $vm: var(--spacing-large); width: 6px; display: inline-block; border: 2px solid white; - border-radius: 100px; // This is big to make sure the corners are rounded properly. + border-radius: var(--border-radius-rounded); } } diff --git a/src/open_inwoner/scss/components/SearchResults/SearchResults.scss b/src/open_inwoner/scss/components/SearchResults/SearchResults.scss index f90a39a28f..99cf5902e8 100644 --- a/src/open_inwoner/scss/components/SearchResults/SearchResults.scss +++ b/src/open_inwoner/scss/components/SearchResults/SearchResults.scss @@ -3,6 +3,10 @@ display: flex; flex-direction: column; gap: var(--spacing-large); + + .grid { + gap: var(--spacing-large); + } } &__title-small { @@ -12,7 +16,7 @@ letter-spacing: 0; line-height: var(--font-line-height-body); font-weight: normal; - margin: var(--spacing-extra-large) 0 var(--row-height-giant) 0; + margin: var(--spacing-extra-large) 0 var(--row-height) 0; } &__item { @@ -36,21 +40,28 @@ padding-top: var(--card-spacing); } - &--none { + &--no-results { display: flex; + flex-direction: column; border-radius: var(--border-radius); background-color: var(--color-info-lighter); color: var(--color-info-darker); - margin-top: var(--row-height); &-column { - padding: var(--spacing-extra-large) 0 var(--spacing-extra-large) + padding: var(--spacing-extra-large) var(--spacing-extra-large) 0 var(--spacing-extra-large); .search-results__title { color: var(--color-info-darker); margin: 0; } + + .ul { + margin-block-start: var(--spacing-giant); + margin-inline-start: 11px; + padding-inline-start: 0; + } + .utrecht-paragraph, .ul .li { color: var(--color-info-darker); @@ -59,6 +70,24 @@ *[class*='icons'] { margin-top: var(--spacing-small); } + + &:first-child { + @media (min-width: 768px) { + padding: var(--spacing-extra-large) 0 var(--spacing-extra-large) + var(--spacing-extra-large); + } + } + + &:last-child { + padding-top: var(--spacing-medium); + @media (min-width: 768px) { + padding-top: var(--spacing-extra-large); + } + } + } + + @media (min-width: 768px) { + flex-direction: row; } } } diff --git a/src/open_inwoner/scss/components/Status/_StatusList.scss b/src/open_inwoner/scss/components/Status/_StatusList.scss index b6f2ead7ad..8daa8d0cfa 100644 --- a/src/open_inwoner/scss/components/Status/_StatusList.scss +++ b/src/open_inwoner/scss/components/Status/_StatusList.scss @@ -86,7 +86,7 @@ &::before { content: ''; background-color: var(--color-white); - border-radius: 50%; + border-radius: var(--border-radius-rounded); top: 2px; left: 2px; height: 20px; diff --git a/src/open_inwoner/scss/components/Step/_StepIndicator.scss b/src/open_inwoner/scss/components/Step/_StepIndicator.scss index 63ef28f468..d8c84acc9d 100644 --- a/src/open_inwoner/scss/components/Step/_StepIndicator.scss +++ b/src/open_inwoner/scss/components/Step/_StepIndicator.scss @@ -39,7 +39,7 @@ &__list-item:before { align-items: center; border: var(--border-width) solid var(--color-gray-dark); - border-radius: 100%; + border-radius: var(--border-radius-rounded); content: counter(step-indicator-list-counter); display: flex; flex-shrink: 0; diff --git a/src/open_inwoner/scss/components/Tags/Tag.scss b/src/open_inwoner/scss/components/Tags/Tag.scss index d0b37522b8..76031ffd12 100644 --- a/src/open_inwoner/scss/components/Tags/Tag.scss +++ b/src/open_inwoner/scss/components/Tags/Tag.scss @@ -1,5 +1,5 @@ .tag { - border-radius: 100px; // This is big to make sure the corners are rounded properly. + border-radius: var(--border-radius-rounded); background-color: var(--color-info-lightest); color: var(--color-info-darker); font-family: var(--font-family-body); diff --git a/src/open_inwoner/scss/views/App.scss b/src/open_inwoner/scss/views/App.scss index 709d3c3d9c..353c2f59cf 100644 --- a/src/open_inwoner/scss/views/App.scss +++ b/src/open_inwoner/scss/views/App.scss @@ -22,6 +22,7 @@ --border-width-thin: 1px; --border-radius: 3px; --border-radius-large: 8px; + --border-radius-rounded: 999px; // Color. diff --git a/src/open_inwoner/templates/pages/search.html b/src/open_inwoner/templates/pages/search.html index b5c61589fa..69e4178e89 100644 --- a/src/open_inwoner/templates/pages/search.html +++ b/src/open_inwoner/templates/pages/search.html @@ -34,25 +34,22 @@

{% trans "Zoekfilters" %}

{% if paginator.count %}
- - {# end card grid#}
@@ -90,10 +87,10 @@

{% trans "Feedback" %}

{% else %} {% render_grid %} - {% render_column start=0 span=10 %} -
-
{% icon icon="info" icon_position="before" extra_classes="icon--info" outlined=True %}
-
+ {% render_column start=0 span=8 %} +
+
{% icon icon="info" icon_position="before" extra_classes="icon--info" outlined=True %}
+

{% trans "We konden geen zoekresultaten vinden" %}