From a71c31b685c9db63dac1550107011658562874c1 Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Fri, 12 Nov 2021 11:32:50 -0800
Subject: [PATCH] =?UTF-8?q?style:=20=F0=9F=92=84=20make=20style=20consiste?=
 =?UTF-8?q?nt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rose/components/dropdown/_item.scss       | 46 ++++++-------------
 .../rose/components/form/_checkbox.scss       |  2 +
 2 files changed, 17 insertions(+), 31 deletions(-)

diff --git a/addons/rose/addon/styles/rose/components/dropdown/_item.scss b/addons/rose/addon/styles/rose/components/dropdown/_item.scss
index 6ecf6ff4e..022c3b683 100644
--- a/addons/rose/addon/styles/rose/components/dropdown/_item.scss
+++ b/addons/rose/addon/styles/rose/components/dropdown/_item.scss
@@ -73,7 +73,7 @@ $checkmark: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563
   .rose-form-checkbox {
     color: currentColor;
     margin-bottom: 0;
-    .rose-form-checkbox-label{
+    .rose-form-checkbox-label {
       display: block;
       margin: -#{$paddingY} -#{$paddingX};
       padding-top: sizing.rems(xs) + sizing.rems(xxxxs);
@@ -102,53 +102,37 @@ $checkmark: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563
         width: sizing.rems(m);
         height: sizing.rems(m);
         pointer-events: none;
-        content: " ";
+        content: ' ';
         border: none;
       }
     }
+
     .rose-form-checkbox-field {
-      &:not(:disabled) {
-        &:hover {
-          ~ .rose-form-checkbox-label {
-            &::after {
-              border-color:  var(--ui-gray);
-            }
-          }
-        }
-      }
-      &:disabled {
+      &:hover {
         ~ .rose-form-checkbox-label {
           &::after {
-            border-color: var(--ui-gray-subtler-2);
-            background-color: var(--ui-gray-subtler-4);
-          }
-        }
-  
-        &:checked {
-          ~ .rose-form-checkbox-label {
-            &::after {
-              background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 8 8'><path fill='%23bac1cc' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>");
-            }
-          }
-        }
-      }
-      &:not(:checked) {
-        ~ .rose-form-radio-label {
-          &::after {
-            opacity: 0.25;
+            border-color: var(--ui-gray);
           }
         }
       }
+
       &:checked {
-        ~ .rose-form-radio-label {
+        ~ .rose-form-checkbox-label {
           color: var(--action);
           background-color: var(--action-subtler-1h);
         }
       }
 
       &:disabled {
-        ~ .rose-form-radio-label {
+        ~ .rose-form-checkbox-label {
           opacity: 0.5;
+          &::after {
+            border-color: var(--ui-gray-subtler-2);
+            background-color: var(--ui-gray-subtler-4);
+          }
+          &::before {
+            background: none;
+          }
         }
       }
     }
diff --git a/addons/rose/addon/styles/rose/components/form/_checkbox.scss b/addons/rose/addon/styles/rose/components/form/_checkbox.scss
index b173d3131..6dd2c6802 100644
--- a/addons/rose/addon/styles/rose/components/form/_checkbox.scss
+++ b/addons/rose/addon/styles/rose/components/form/_checkbox.scss
@@ -44,6 +44,8 @@
       height: sizing.rems(m);
       pointer-events: none;
       content: ' ';
+      border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2);
+      border-radius: sizing.rems(xxxs);
     }
 
     &::after {