enlarge handle click area (add invisible handle)

luncheon · Sep 15, 2022 · 3edfce7 · 3edfce7
1 parent 2a4bfd4
commit 3edfce7
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/styles.css b/styles.css
@@ -8,6 +8,7 @@
   box-sizing: border-box;
 }
 :where(:is([data-flex-splitter-horizontal], [data-flex-splitter-vertical]) > [role="separator"]) {
+  position: relative;
   touch-action: none;
   display: flex;
   align-items: center;
@@ -24,6 +25,12 @@
   box-sizing: border-box;
   border: 4px rgba(160, 160, 160, 0.8);
 }
+:where(:is([data-flex-splitter-horizontal], [data-flex-splitter-vertical]) > [role="separator"])::after {
+  content: "";
+  position: absolute;
+  width: 24px;
+  height: 24px;
+}
 :where([data-flex-splitter-horizontal] > [role="separator"]) {
   cursor: ew-resize;
   width: 4px;

diff --git a/styles.min.css b/styles.min.css