fix: fixed twitching borders for the Dropzone component (#2855)

openedx · Nov 27, 2023 · 879449f · 879449f
1 parent eddfced
commit 879449f
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/src/Dropzone/_variables.scss b/src/Dropzone/_variables.scss
@@ -1,9 +1,9 @@
 $dropzone-padding:                          1.5rem !default;
 $dropzone-border-default:                   1px dashed $gray-500 !default;
-$dropzone-border-hover:                     2px solid $info-300 !default;
-$dropzone-border-focus:                     2px solid $info-300 !default;
-$dropzone-border-active:                    2px solid $primary-500 !default;
-$dropzone-border-error:                     2px solid $danger-300 !default;
+$dropzone-box-shadow-hover:                 inset 0 0 0 2px $info-300 !default;
+$dropzone-box-shadow-focus:                 inset 0 0 0 2px $info-300 !default;
+$dropzone-box-shadow-active:                inset 0 0 0 2px $primary-500 !default;
+$dropzone-box-shadow-error:                 inset 0 0 0 2px $danger-300 !default;
 $dropzone-error-wrapper-color:              $danger-500 !default;
 $dropzone-restriction-msg-font-size:        $x-small-font-size !default;
 $dropzone-restriction-msg-color:            $gray-500 !default;
diff --git a/src/Dropzone/index.scss b/src/Dropzone/index.scss
@@ -10,20 +10,27 @@
   box-sizing: border-box;
   cursor: pointer;
 
+  &:hover,
+  &:focus,
+  &.pgn__dropzone-validation-error,
+  &.pgn__dropzone-active {
+    border-color: transparent;
+  }
+
   &:hover {
-    border: $dropzone-border-hover;
+    box-shadow: $dropzone-box-shadow-hover;
   }
 
   &:focus {
-    border: $dropzone-border-focus;
+    box-shadow: $dropzone-box-shadow-focus;
   }
 
   &.pgn__dropzone-validation-error {
-    border: $dropzone-border-error;
+    box-shadow: $dropzone-box-shadow-error;
   }
 
   &.pgn__dropzone-active {
-    border: $dropzone-border-active;
+    box-shadow: $dropzone-box-shadow-active;
   }
 }