Merge pull request #463 from maykinmedia/fix/1084-Check-borders-after…

…-accessibility-changes ♿ #1084 Check borders after accessibility changes
maykinmedia · Feb 14, 2023 · 33d9f36 · 33d9f36
2 parents ab6e71b + 6726dd3
commit 33d9f36
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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.