fix(input): make active checkbox/radio disable state more visible (#495)

globalbrain · Mar 11, 2024 · ad21b8c · ad21b8c
1 parent 5164fa8
commit ad21b8c
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 4 deletions.
diff --git a/lib/components/SInputCheckbox.vue b/lib/components/SInputCheckbox.vue
@@ -163,14 +163,25 @@ function onClick() {
 }
 
 .SInputCheckbox.disabled {
-  .box {
+  .input {
+    cursor: not-allowed;
+  }
+
+  .input .box {
     border-color: var(--input-disabled-border-color);
     background-color: var(--input-disabled-bg-color);
 
     &:hover                     { border-color: var(--input-disabled-border-color); }
     &:focus:not(:focus-visible) { border-color: var(--input-disabled-border-color); }
   }
 
-  .input { cursor: not-allowed; }
+  .input.on .box {
+    border-color: var(--c-border-info-1);
+    background-color: var(--c-blue-8);
+  }
+
+  .check-icon {
+    color: var(--c-white-a3);
+  }
 }
 </style>
diff --git a/lib/components/SInputRadio.vue b/lib/components/SInputRadio.vue
@@ -141,14 +141,24 @@ function onClick() {
 }
 
 .SInputRadio.disabled {
-  .box {
+  .input {
+    cursor: not-allowed;
+  }
+
+  .input .box {
     border-color: var(--input-disabled-border-color);
     background-color: var(--input-disabled-bg-color);
 
     &:hover                     { border-color: var(--input-disabled-border-color); }
     &:focus:not(:focus-visible) { border-color: var(--input-disabled-border-color); }
   }
 
-  .input { cursor: not-allowed; }
+  .input.on .box {
+    border-color: var(--c-border-info-1);
+  }
+
+  .check {
+    background-color: var(--c-blue-9);
+  }
 }
 </style>