Design improvements

department-of-veterans-affairs · Dec 20, 2024 · 8e48555 · 8e48555
1 parent 7131458
commit 8e48555
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 8 deletions.
diff --git a/packages/web-components/src/components/va-checkbox/va-checkbox.scss b/packages/web-components/src/components/va-checkbox/va-checkbox.scss
@@ -31,26 +31,41 @@
 }
 
 .va-checkbox__input {
-  height: 1.25rem;
-  width: 1.25rem;
-  min-width: 1.25rem;
+  height: 20px;
+  width: 20px;
+  min-width: 20px;
   background: white;
   border: 2px solid #1b1b1b;
-  border-radius: 5px;
+  border-radius: 2px;
+  box-sizing: content-box;
   appearance: none;
   -webkit-appearance: none;
   margin: 0.064rem 0.5rem 0 0;
   opacity: unset;
   position: initial;
 
   &:checked {
+    height: 24px;
+    width: 24px;
+    min-width: 24px;
     background: #005ea2;
     background-image: url("data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2265%22 height%3D%2250%22 viewBox%3D%220 0 65 50%22%3E%3Ctitle%3Ecorrect8%3C%2Ftitle%3E%3Cpath fill%3D%22%23FFF%22 fill-rule%3D%22evenodd%22 d%3D%22M63.268 7.063l-5.616-5.61C56.882.685 55.946.3 54.845.3s-2.038.385-2.808 1.155L24.951 28.552 12.81 16.385c-.77-.77-1.707-1.155-2.808-1.155-1.1 0-2.037.385-2.807 1.154l-5.616 5.61C.81 22.764.425 23.7.425 24.8s.385 2.035 1.155 2.805l14.947 14.93 5.616 5.61c.77.77 1.706 1.154 2.807 1.154s2.038-.384 2.808-1.154l5.616-5.61 29.894-29.86c.77-.77 1.157-1.707 1.157-2.805 0-1.101-.385-2.036-1.156-2.805l-.001-.002z%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(transparent, transparent);
     background-position: center center;
     background-size: 0.75rem auto;
     background-repeat: no-repeat;
     border: none;
-    box-shadow: 0 0 0 2px #005ea2;
+  }
+
+  &[data-indeterminate]:not([data-indeterminate=false]) {
+    height: 24px;
+    width: 24px;
+    min-width: 24px;
+    background: #005ea2;
+    background-image: url("data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 26.3.1%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg version%3D%221.1%22 id%3D%22Layer_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 viewBox%3D%220 0 64 64%22 style%3D%22enable-background%3Anew 0 0 64 64%3B%22 xml%3Aspace%3D%22preserve%22%3E%3Cstyle type%3D%22text%2Fcss%22%3E%09.st0%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Cpath class%3D%22st0%22 d%3D%22M2.9%2C35.9c0%2C1.1%2C0.4%2C2%2C1.2%2C2.8c0.8%2C0.8%2C1.7%2C1.2%2C2.8%2C1.2h7.9h42.3c1.1%2C0%2C2-0.4%2C2.8-1.2s1.2-1.7%2C1.2-2.8l0%2C0V28%09c0-1.1-0.4-2-1.2-2.8S58.2%2C24%2C57.1%2C24H6.9c-1.1%2C0-2%2C0.4-2.8%2C1.2S2.9%2C26.9%2C2.9%2C28V35.9z%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(transparent, transparent);
+    background-position: center center;
+    background-size: 0.75rem auto;
+    background-repeat: no-repeat;
+    border: none;
   }
 }
 

diff --git a/packages/web-components/src/components/va-radio-option/va-radio-option.scss b/packages/web-components/src/components/va-radio-option/va-radio-option.scss
@@ -28,6 +28,7 @@ input[type="radio"].va-radio-option__input {
   min-width: 20px;
   border: 2px solid #1b1b1b;
   border-radius: 50%;
+  box-sizing: content-box;
   appearance: none;
   -webkit-appearance: none;
   margin: 0.064rem 0.5rem 0 0;
@@ -39,6 +40,13 @@ input[type="radio"].va-radio-option__input:checked {
   background: #005ea2;
   border: none;
   box-shadow: 0 0 0 2px #005ea2, inset 0 0 0 2px white;
+  height: 24px;
+  width: 24px;
+  min-width: 24px;
+}
+
+input[type="radio"].va-radio-option__input:focus {
+  outline-offset: 4px;
 }
 
 .usa-radio__label {
@@ -55,11 +63,11 @@ input[type="radio"].va-radio-option__input:checked {
 }
 
 // Formation overrides
-input[type=radio] + label {
+input[type="radio"] + label {
   margin-bottom: 0;
 }
 
-input[type=radio] + label:before {
+input[type="radio"] + label:before {
   border-radius: 0;
   box-shadow: none;
   height: 0;
@@ -69,7 +77,11 @@ input[type=radio] + label:before {
   width: 0;
 }
 
-input[type=radio]:checked + label:before {
+input[type="radio"]:checked + label:before {
   outline: none;
   box-shadow: none;
 }
+
+input[type="radio"]:focus + label::before {
+  outline: none;
+}