pacem-less 0.60.3-navier → 0.60.3-orr

package/pacem/basic/swipe.less

@@ -5,12 +5,18 @@
     .Inert();
 }
 
-.@{PCSS}-swipe-lock {
-    //transition: transform 1s linear;
+.@{PCSS}-swipe {
+    /* Prevents the browser from handling scrolling, letting JS capture the swipe. */
+    touch-action: none;
+}
+
+/*.@{PCSS}-swipe-lock {
+    user-select: none;
 }
 .@{PCSS}-swipe-go {
-    
+    transition: transform .1s @easing_out_sine;    
 }
+
 .@{PCSS}-swipe-back {
     transition: transform .3s @easing_out_back;
-}
+}*/

package/pacem/pacem.less

@@ -396,6 +396,15 @@ each(range(12), {
 --@{PCSS}-color-balloon-emphasis: @color_contextmenu_hover_back;
 --@{PCSS}-balloon-tail-size: @balloon_pointer_size;
 --@{PCSS}-balloon-tail-inset: @balloon_pointer_inset;
+// animation
+--@{PCSS}-easing-in-sine: @easing_in_sine;
+--@{PCSS}-easing-out-sine: @easing_out_sine;
+--@{PCSS}-easing-in-out-sine: @easing_in_out_sine;
+--@{PCSS}-easing-in-out-extreme: @easing_in_out_extreme;
+--@{PCSS}-easing-in-back: @easing_in_back;
+--@{PCSS}-easing-out-back: @easing_out_back;
+--@{PCSS}-easing-out-back2: @easing_out_back_custom;
+--@{PCSS}-easing-out-bump: @easing_out_bump;
 /* #region deprecated */
 --color-background: @color_background;
 --color-root: @color_root_background;

package/pacem/ui/dark/bottom-sheet.less

@@ -0,0 +1,69 @@
+@import "../shared";
+
+@{P}-bottom-sheet-handle {
+    display: block;
+    cursor: pointer;
+    height: ~"var(--@{PCSS}-layout-footer-height)";
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    touch-action: none;
+
+    > * {
+        pointer-events: none;
+    }
+}
+
+@{P}-bottom-sheet {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    overflow: hidden;
+    display: flex;
+    z-index: @lightbox-z-index + 1;
+    align-items: start;
+    justify-content: stretch;
+    pointer-events: none;
+
+    > .bottom-sheet {
+        pointer-events: auto;
+        overflow: auto;
+        max-height: 100vh;
+        width: 100%;
+        outline: none;
+        -webkit-tap-highlight-color: transparent;
+        //transform: var(~"--@{PCSS}-bottom-sheet-transform", translate3d(0, calc(100% - ~"var(--@{PCSS}-bottom-sheet-handle-height)"), 0));
+        transform: translate3d(0, calc(100vh - ~"var(--@{PCSS}-layout-footer-height)"), 0);
+    }
+
+    &.bottom-sheet-open {
+        pointer-events: auto;
+        .Blur(6px);
+
+        > .bottom-sheet {
+            // transform: var(~"--@{PCSS}-bottom-sheet-transform", translate3d(0, max(calc(-100vh + ~"var(--@{PCSS}-layout-header-height)"), 0), 0));
+            transform: translate3d(0, max(~"var(--@{PCSS}-layout-header-height)", calc(100vh - 100%)), 0);
+        }
+    }
+}
+
+
+// animations
+.@{PCSS}-animations {
+
+    @{P}-bottom-sheet {
+        transition-property: backdrop-filter;
+        transition-duration: .175s;
+        transition-timing-function: linear;
+        transition-delay: 0s;
+
+        > .bottom-sheet {
+            transition-property: transform;
+            transition-timing-function: @easing_in_out_sine;
+            transition-duration: .3s;
+            transition-delay: 0s;
+        }
+    }
+}

package/pacem/ui/dark/index.less

@@ -78,4 +78,5 @@
 @import "sticky-header";
 @import "blade";
 @import "divider";
-@import "ticker";
+@import "ticker";
+@import "bottom-sheet";

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.60.3-navier",
+  "version": "0.60.3-orr",
   "name": "pacem-less",
   "homepage": "https://js.pacem.it",
   "repository": {