diff --git a/src/open_inwoner/scss/components/Card/Card.scss b/src/open_inwoner/scss/components/Card/Card.scss index 478f666130..cbd162a6a9 100644 --- a/src/open_inwoner/scss/components/Card/Card.scss +++ b/src/open_inwoner/scss/components/Card/Card.scss @@ -1,7 +1,7 @@ .card { --card-color-background: white; - --card-color-border: var(--color-mute); - --card-size-border: var(--border-width); + --card-color-border: var(--color-gray); + --card-size-border: var(--border-width-thin); --card-size-dog-ear: var(--gutter-width); --card-spacing: var(--spacing-large); diff --git a/src/open_inwoner/scss/components/Faq/_Faq.scss b/src/open_inwoner/scss/components/Faq/_Faq.scss index 050eb2e323..6847c38d70 100644 --- a/src/open_inwoner/scss/components/Faq/_Faq.scss +++ b/src/open_inwoner/scss/components/Faq/_Faq.scss @@ -14,7 +14,8 @@ } &__list-item { - border: var(--border-width) solid var(--color-mute); + border: var(--border-width-thin) solid var(--color-gray); + border-radius: var(--border-radius); padding: var(--spacing-large); } diff --git a/src/open_inwoner/scss/components/File/File.scss b/src/open_inwoner/scss/components/File/File.scss index fb9226acec..302c22905f 100644 --- a/src/open_inwoner/scss/components/File/File.scss +++ b/src/open_inwoner/scss/components/File/File.scss @@ -1,7 +1,7 @@ .file { &__file { align-items: center; - border: 1px solid var(--color-mute); + border: var(--border-width-thin) solid var(--color-gray); border-radius: var(--border-radius); box-sizing: border-box; display: flex; diff --git a/src/open_inwoner/scss/components/Form/ButtonRadio.scss b/src/open_inwoner/scss/components/Form/ButtonRadio.scss index 98f183f694..433729a975 100644 --- a/src/open_inwoner/scss/components/Form/ButtonRadio.scss +++ b/src/open_inwoner/scss/components/Form/ButtonRadio.scss @@ -12,16 +12,38 @@ color: var(--color-primary); cursor: default; } + &#negative { + &:checked ~ .button-radio__button { + color: #cf1c08; + cursor: default; + } + } + &#positive { + &:checked ~ .button-radio__button { + color: var(--color-green-dark); + cursor: default; + } + } } &__button { - border: 1px solid #d2d2d2; + border: var(--border-width-thin) solid var(--color-gray-light); border-left: 0; background-color: var(--color-gray-lightest); color: var(--color-gray-lighter); display: inline-block; padding: 12px; cursor: pointer; + + &[for='negative'] { + border-top-right-radius: var(--border-radius); + border-bottom-right-radius: var(--border-radius); + } + + &[for='positive'] { + border-top-left-radius: var(--border-radius); + border-bottom-left-radius: var(--border-radius); + } } &:first-child { diff --git a/src/open_inwoner/scss/components/Questionnaire/Questionnaire.scss b/src/open_inwoner/scss/components/Questionnaire/Questionnaire.scss index 398fbcf037..fd50eac88a 100644 --- a/src/open_inwoner/scss/components/Questionnaire/Questionnaire.scss +++ b/src/open_inwoner/scss/components/Questionnaire/Questionnaire.scss @@ -13,12 +13,12 @@ } &__list-item { - border-bottom: var(--border-width) solid var(--color-mute); + border-bottom: var(--border-width-thin) solid var(--color-gray); padding: var(--spacing-large) var(--spacing-medium); } &__list-item:nth-child(1) { - border-top: var(--border-width) solid var(--color-mute); + border-top: var(--border-width-thin) solid var(--color-gray); } h2 { @@ -34,7 +34,7 @@ } &__list-item:nth-child(2) { - border-top: var(--border-width) solid var(--color-mute); + border-top: var(--border-width-thin) solid var(--color-gray); } &__list-item { diff --git a/src/open_inwoner/scss/views/App.scss b/src/open_inwoner/scss/views/App.scss index 1566a42b32..7e3449684a 100644 --- a/src/open_inwoner/scss/views/App.scss +++ b/src/open_inwoner/scss/views/App.scss @@ -13,6 +13,7 @@ var(--color-accent-lighter) ); --border-width: 2px; + --border-width-thin: 1px; --border-radius: 3px; // Color. @@ -148,7 +149,7 @@ --color-font-accent: var(--color-gray-dark); --color-body: var(--color-gray-dark); - // changed to #949494 to get the required 3:1 contrast ratio + // changed to #949494 to get the required 3:1 contrast ratio - in case of decorative border use var(--color-gray). --color-mute: #949494; /// Font.