From 5bb4cfc853e93cd41eb973ca835fd5082d12c2e9 Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Fri, 12 Nov 2021 13:43:44 -0800
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20updates=20to=20checkbox-?=
 =?UTF-8?q?=20border=20color,=20size?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rose/addon/components/rose/dropdown/index.stories.mdx  | 2 --
 .../rose/addon/styles/rose/components/dropdown/_item.scss  | 7 ++++++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/addons/rose/addon/components/rose/dropdown/index.stories.mdx b/addons/rose/addon/components/rose/dropdown/index.stories.mdx
index f500a672e..1ee5d754a 100644
--- a/addons/rose/addon/components/rose/dropdown/index.stories.mdx
+++ b/addons/rose/addon/components/rose/dropdown/index.stories.mdx
@@ -175,7 +175,6 @@ form fields.
    <Rose::Dropdown   @ignoreClickInside={{true}} @text="Items" as |dropdown|>
     <Rose::Form::Checkbox::Group
       @name={{name}}
-      @inline={{inline}}
       @disabled={{disabled}}
       @items={{items}}
       @selectedItems={{selectedItems}}
@@ -193,7 +192,6 @@ form fields.
     </Rose::Form>
   `,
   context: {
-    inline: boolean('inline', false),
     disabled: boolean('disabled', false),
     items: object('items', [
       { id: 1, name: 'Foo' },
diff --git a/addons/rose/addon/styles/rose/components/dropdown/_item.scss b/addons/rose/addon/styles/rose/components/dropdown/_item.scss
index 022c3b683..162350165 100644
--- a/addons/rose/addon/styles/rose/components/dropdown/_item.scss
+++ b/addons/rose/addon/styles/rose/components/dropdown/_item.scss
@@ -90,8 +90,9 @@ $checkmark: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563
         top: sizing.rems(xxs) + sizing.rems(xxxs);
         right: sizing.rems(xs);
         left: auto;
-        border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2);
+        border: sizing.rems(xxxs) solid var(--ui-gray-subtler-2);
         border-radius: sizing.rems(xxxs);
+        transform: scale(0.66);
       }
 
       &::before {
@@ -120,6 +121,10 @@ $checkmark: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563
         ~ .rose-form-checkbox-label {
           color: var(--action);
           background-color: var(--action-subtler-1h);
+          &::after {
+            border-color: var(--action);
+            background-size: sizing.rems(m);
+          }
         }
       }