fix #1328: color input should show different color for inner check sy…

…mbol on white ellipse (#1362)
tabler · Nov 11, 2022 · cb2821a · cb2821a
1 parent d8ad848
commit cb2821a
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 3 deletions.
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
@@ -761,7 +761,7 @@ $form-check-input-checked-bg-color: var(--#{$prefix}primary) !default;
 $form-check-input-checked-color: var(--#{$prefix}bg-forms) !default;
 $form-check-input-checked-bg-repeat: repeat !default;
 $form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='#{$white}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/></svg>") !default;
-$form-check-input-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='#{$white}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/></svg>") !default;
+$form-check-input-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='#{$body-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/></svg>") !default;
 $form-check-input-checked-border-color: $input-border-color-translucent !default;
 
 $form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle r='3' fill='#{$white}' cx='8' cy='8' /></svg>") !default;

diff --git a/src/scss/ui/forms/_form-colorinput.scss b/src/scss/ui/forms/_form-colorinput.scss
@@ -46,10 +46,9 @@ Color Input
     box-shadow: $input-btn-focus-box-shadow;
   }
 
-  .form-colorinput-light & {
+  @at-root .form-colorinput-light & {
     &:before {
       background-image: escape-svg($form-check-input-checked-bg-image-dark);
     }
   }
 }
-