@trintel/zooy 1.0.1-beta.0

package/src/sass/split.scss

@@ -0,0 +1,131 @@
+:root {
+  --zoo_split-grabber-long: 80px;
+  --zoo_split-grabber-wide: 10px;
+}
+
+.zoo_split {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 0;
+  gap: 0;
+
+  &.zoo_split__ns {
+    flex-direction: column;
+    flex-wrap: nowrap;
+
+    > .zoo_nest__inner {
+      height: 0;
+    }
+  }
+
+  &.zoo_split__ew {
+    flex-direction: row;
+    flex-wrap: nowrap;
+
+    > .zoo_nest__inner {
+      width: 0;
+    }
+  }
+
+}
+
+.zoo_nest {
+  position: relative;
+  border-radius: 20px;
+  overflow: hidden;
+  overflow-y: auto;
+  flex-shrink: 0;
+
+  &.closed {
+    display: none;
+  }
+
+  &.zoo_nest__outer {
+    flex-basis: 50px;
+    flex-shrink: 0;
+
+    &.animated {
+      transition: flex-basis 200ms ease-in-out;
+    }
+  }
+
+  &.zoo_nest__inner {
+    flex-grow: 1;
+  }
+}
+
+.zoo_dragger {
+  display: flex;
+  align-content: center;
+  justify-content: center;
+  align-items: center;
+  overflow: visible;
+  flex-basis: 10px;
+  opacity: 0.7;
+  z-index: 2;
+  flex-shrink: 0;
+
+  &.locked {
+    visibility: hidden;
+  }
+
+  &.closed {
+    display: none;
+  }
+
+  &.collapsed {
+    transition: flex-basis 200ms ease-in-out;
+    flex-basis: 0;
+  }
+
+  &:hover, &:active {
+    opacity: 1;
+  }
+}
+
+.zoo_grabber {
+  position: absolute;
+  border-radius: 5px;
+  z-index: 5;
+
+  &:hover {
+  }
+}
+
+.zoo_split__ns > .zoo_dragger {
+  height: 0;
+  min-width: 0;
+
+  &:hover {
+    cursor: ns-resize;
+  }
+}
+
+.zoo_split__ns > .zoo_dragger > .zoo_grabber {
+  height: var(--zoo_split-grabber-wide);
+  width: var(--zoo_split-grabber-long);
+
+  &:hover {
+    cursor: ns-resize;
+  }
+}
+
+.zoo_split__ew > .zoo_dragger {
+  min-height: 0;
+  width: 0;
+
+  &:hover {
+    cursor: ew-resize;
+  }
+}
+
+.zoo_split__ew > .zoo_dragger > .zoo_grabber {
+  height: var(--zoo_split-grabber-long);
+  width: var(--zoo_split-grabber-wide);
+
+  &:hover {
+    cursor: ew-resize;
+  }
+}
+