From 8e4855578a642add895489141e9dadc2233933db Mon Sep 17 00:00:00 2001 From: Andrew Steele Date: Fri, 20 Dec 2024 16:13:14 -0500 Subject: [PATCH] Design improvements --- .../components/va-checkbox/va-checkbox.scss | 25 +++++++++++++++---- .../va-radio-option/va-radio-option.scss | 18 ++++++++++--- 2 files changed, 35 insertions(+), 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 index 8d38336dc..cd92be177 100644 --- a/packages/web-components/src/components/va-checkbox/va-checkbox.scss +++ b/packages/web-components/src/components/va-checkbox/va-checkbox.scss @@ -31,12 +31,13 @@ } .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; @@ -44,13 +45,27 @@ 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 index 65705140f..5addff294 100644 --- 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; +} \ No newline at end of file