@simonbackx/vue-app-navigation 1.21.0 → 1.22.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/main.css +3 -3
  2. package/dist/main.css.map +1 -1
  3. package/package.json +1 -1
package/dist/main.css CHANGED
@@ -1,6 +1,6 @@
1
- .navigation-controller{overflow:visible;position:relative}.navigation-controller>.modal-push-enter,.navigation-controller>.modal-push-enter-active{position:relative;top:100vh;transition:top .3s;z-index:100}.navigation-controller>.modal-push-enter>div,.navigation-controller>.modal-push-enter-active>div{min-height:100vh;min-height:calc(var(--vh, 1vh) * 100);background:#fff;background:var(--color-white, white)}.navigation-controller>.modal-push-leave,.navigation-controller>.modal-push-leave-active{position:absolute;top:0px;left:0px;right:0px;bottom:0px}.navigation-controller>.modal-push-leave>div,.navigation-controller>.modal-push-leave-active>div{width:100%;height:100%}.navigation-controller>.modal-push-enter-to{top:0}.navigation-controller>.modal-pop-leave-active>div{transition:transform .25s}.navigation-controller>.modal-pop-leave,.navigation-controller>.modal-pop-leave-active{position:absolute;z-index:10000;top:0px;left:0px;right:0px;bottom:0px}.navigation-controller>.modal-pop-leave>div,.navigation-controller>.modal-pop-leave-active>div{background:#fff;background:var(--color-white, white);width:100%;height:100%}.navigation-controller>.modal-pop-enter,.navigation-controller>.modal-pop-enter-active{position:relative}.navigation-controller>.modal-pop-leave-to>div{transform:translateY(100vh)}.navigation-controller>.push-enter-active,.navigation-controller>.push-leave-active{user-select:none;transition:opacity .3s}.navigation-controller>.push-enter-active>div,.navigation-controller>.push-leave-active>div{transition:transform .3s}.navigation-controller>.push-enter,.navigation-controller>.push-enter-active{position:relative}.navigation-controller>.push-leave,.navigation-controller>.push-leave-active{position:absolute;top:0px;left:0px;right:0px;bottom:0px}.navigation-controller>.push-leave>div,.navigation-controller>.push-leave-active>div{width:100%;height:100%}.navigation-controller>.push-enter,.navigation-controller>.push-leave-to{opacity:0}.navigation-controller>.push-enter>div{transform:translateX(100%);transform:translateX(calc(100% * var(--direction-scale-x, 1)))}.navigation-controller>.push-leave-to>div{transform:translateX(-100%);transform:translateX(calc(-100% * var(--direction-scale-x, 1)))}.navigation-controller>.pop-enter-active,.navigation-controller>.pop-leave-active{user-select:none;transition:opacity .25s}.navigation-controller>.pop-enter-active>div,.navigation-controller>.pop-leave-active>div{transition:transform .25s}.navigation-controller>.pop-enter,.navigation-controller>.pop-enter-active{position:relative}.navigation-controller>.pop-leave,.navigation-controller>.pop-leave-active{position:absolute;top:0px;left:0px;right:0px;bottom:0px}.navigation-controller>.pop-leave>div,.navigation-controller>.pop-leave-active>div{width:100%;height:100%}.navigation-controller>.pop-enter,.navigation-controller>.pop-leave-to{opacity:0}.navigation-controller>.pop-enter>div{transform:translateX(-100%);transform:translateX(calc(-100% * var(--direction-scale-x, 1)))}.navigation-controller>.pop-leave-to>div{transform:translateX(100%);transform:translateX(calc(100% * var(--direction-scale-x, 1)))}
2
- .popup{position:fixed;left:0;top:0;bottom:0;right:0;display:flex;align-items:center;justify-content:center;z-index:10000;contain:size layout style paint}.popup:after{background:rgba(0,0,0,.7);content:"";position:absolute;left:0;top:0;bottom:0;right:0;opacity:1;contain:size layout style paint;will-change:opacity;transition:opacity .3s;z-index:0}.popup~.popup:after{display:none}.popup>div{max-width:800px;flex-basis:100%;background:#fff;background:var(--color-white, white);border-radius:5px;overflow:hidden;max-height:100vh;max-height:calc(var(--vh, 1vh) * 100);height:calc(var(--vh, 1vh) * 100 - 80px);-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;box-sizing:border-box;contain:size layout style paint;will-change:transform,opacity;--saved-vh: var(--vh, 1vh);transform:translate3d(0, 0, 0);transform-origin:50% 0%;visibility:visible;transition:transform .3s,opacity .3s,visibility step-start .3s;z-index:1;position:relative}.popup>div>.scrollable-container{overflow:hidden;overflow-y:auto;--vh: calc(var(--saved-vh, 1vh) - 0.8px);height:100%}.popup>div:after{background:rgba(0,0,0,.4);content:"";position:absolute;left:0;top:0;bottom:0;right:0;opacity:0;contain:size layout style paint;will-change:opacity,visibility;visibility:hidden;z-index:20000;transition:opacity .3s,visibility step-end .3s}.popup.push-down-full>div{transition:transform .3s,opacity .3s,visibility step-end .3s;visibility:hidden;opacity:0;transform:scale(0.9, 0.9) translate3d(0, -15px, 0)}.popup.push-down-full>div:after{opacity:1;visibility:visible;transition:opacity .3s,visibility step-start .3s}.popup.push-down>div{transform:scale(0.95, 0.95) translate3d(0, -10px, 0)}.popup.push-down>div:after{opacity:1;visibility:visible;transition:opacity .3s,visibility step-start .3s}.popup.sticky{align-items:flex-end}.popup.sticky>div{max-height:100vh;height:calc(100vh - 80px);border-bottom-left-radius:0;border-bottom-right-radius:0}.popup.sticky>div>*{--vh: calc(1vh - 0.8px)}.popup.fade-enter-active:after,.popup.fade-leave-active:after{transition:opacity .3s}.popup.fade-enter-active>div,.popup.fade-leave-active>div{transition:transform .3s,opacity .3s}.popup.fade-enter:after,.popup.fade-leave-to:after{opacity:0}.popup.fade-enter>div,.popup.fade-leave-to>div{transform:translate(0, 50vh);opacity:0}
3
- .sheet{position:fixed;left:0;top:0;bottom:0;right:0;display:flex;align-items:center;justify-content:center;z-index:10000;padding:20px;contain:size layout style paint}.sheet .navigation-controller{transition:height .25s;will-change:height}.sheet:after{background:rgba(0,0,0,.7);content:"";position:absolute;left:0;top:0;bottom:0;right:0;opacity:1;contain:size layout style paint;will-change:opacity;transition:opacity .3s;z-index:0}.sheet~.sheet:after{display:none}.sheet>div{max-width:800px;background:#fff;background:var(--color-white, white);border-radius:5px;overflow:hidden;max-height:100vh;max-height:calc(100vh - 80px);max-height:calc(var(--vh, 1vh) * 100 - 80px);overflow:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;box-sizing:border-box;--saved-vh: var(--vh, 1vh);transform:translate3d(0, 0, 0);transform-origin:50% 50%;z-index:1}.sheet>div>*{--vh: calc(var(--saved-vh, 1vh) - 0.8px)}.sheet.fade-enter-active:after,.sheet.fade-leave-active:after{transition:opacity .3s}.sheet.fade-enter-active>div,.sheet.fade-leave-active>div{transition:transform .3s,opacity .3s}.sheet.fade-enter:after,.sheet.fade-leave-to:after{opacity:0}.sheet.fade-enter>div,.sheet.fade-leave-to>div{transform:translate(0, 20vh);opacity:0}
1
+ .navigation-controller{overflow:visible;position:relative}.navigation-controller>*>div{will-change:transform}.navigation-controller>.modal-push-enter,.navigation-controller>.modal-push-enter-active{position:relative;top:100vh;transition:top .3s cubic-bezier(0, 0, 0.2, 1);z-index:100;will-change:top}.navigation-controller>.modal-push-enter>div,.navigation-controller>.modal-push-enter-active>div{min-height:100vh;min-height:calc(var(--vh, 1vh) * 100);background:#fff;background:var(--color-white, white)}.navigation-controller>.modal-push-leave,.navigation-controller>.modal-push-leave-active{position:absolute;top:0px;left:0px;right:0px;bottom:0px;contain:strict;transition:filter .3s}.navigation-controller>.modal-push-leave>div,.navigation-controller>.modal-push-leave-active>div{width:100%;height:100%}.navigation-controller>.modal-push-enter-to{top:0}.navigation-controller>.modal-push-leave-to{filter:brightness(80%)}.navigation-controller>.modal-pop-leave-active>div{transition:transform .25s cubic-bezier(0.4, 0, 1, 1)}.navigation-controller>.modal-pop-leave,.navigation-controller>.modal-pop-leave-active{position:absolute;z-index:10000;top:0px;left:0px;right:0px;bottom:0px}.navigation-controller>.modal-pop-leave>div,.navigation-controller>.modal-pop-leave-active>div{background:#fff;background:var(--color-white, white);width:100%;height:100%}.navigation-controller>.modal-pop-enter,.navigation-controller>.modal-pop-enter-active{position:relative}.navigation-controller>.modal-pop-leave-to>div{transform:translateY(100vh)}.navigation-controller>.push-enter-active{user-select:none}.navigation-controller>.push-enter-active>div{transition:transform .3s}.navigation-controller>.push-leave-active{user-select:none;transition:filter .3s}.navigation-controller>.push-leave-active>div{transition:transform .3s}.navigation-controller>.push-enter,.navigation-controller>.push-enter-active{position:relative;z-index:100}.navigation-controller>.push-leave,.navigation-controller>.push-leave-active{position:absolute;top:0px;left:0px;right:0px;bottom:0px}.navigation-controller>.push-leave>div,.navigation-controller>.push-leave-active>div{width:100%;height:100%}.navigation-controller>.push-leave-to{filter:brightness(80%)}.navigation-controller>.push-enter>div{transform:translateX(100%);transform:translateX(calc(100% * var(--direction-scale-x, 1)))}.navigation-controller>.push-leave-to>div{transform:translateX(-40%);transform:translateX(calc(-40% * var(--direction-scale-x, 1)))}.navigation-controller>.pop-enter-active{user-select:none;transition:filter .25s}.navigation-controller>.pop-enter-active>div{transition:transform .25s}.navigation-controller>.pop-leave-active{user-select:none}.navigation-controller>.pop-leave-active>div{transition:transform .25s}.navigation-controller>.pop-enter,.navigation-controller>.pop-enter-active{position:relative;z-index:-100}.navigation-controller>.pop-leave,.navigation-controller>.pop-leave-active{position:absolute;top:0px;left:0px;right:0px;bottom:0px;z-index:100}.navigation-controller>.pop-leave>div,.navigation-controller>.pop-leave-active>div{width:100%;height:100%}.navigation-controller>.pop-enter{filter:brightness(80%)}.navigation-controller>.pop-enter>div{transform:translateX(-40%);transform:translateX(calc(-40% * var(--direction-scale-x, 1)))}.navigation-controller>.pop-leave-to>div{transform:translateX(100%);transform:translateX(calc(100% * var(--direction-scale-x, 1)))}
2
+ .popup{position:fixed;left:0;top:0;bottom:0;right:0;display:flex;align-items:center;justify-content:center;z-index:10000;contain:size layout style paint}.popup:after{background:rgba(0,0,0,.7);content:"";position:absolute;left:0;top:0;bottom:0;right:0;opacity:1;contain:size layout style paint;will-change:opacity;transition:opacity .3s;z-index:0}.popup~.popup:after{display:none}.popup>div{max-width:800px;flex-basis:100%;background:#fff;background:var(--color-white, white);border-radius:5px;overflow:hidden;max-height:100vh;max-height:calc(var(--vh, 1vh) * 100);height:calc(var(--vh, 1vh) * 100 - 80px);-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;box-sizing:border-box;contain:size layout style paint;will-change:transform,opacity;--saved-vh: var(--vh, 1vh);transform:translate3d(0, 0, 0);transform-origin:50% 0%;visibility:visible;transition:transform .3s,opacity .3s,visibility step-start .3s;z-index:1;position:relative}.popup>div>.scrollable-container{overflow:hidden;overflow-y:auto;--vh: calc(var(--saved-vh, 1vh) - 0.8px);height:100%;will-change:scroll-position}.popup>div:after{background:rgba(0,0,0,.4);content:"";position:absolute;left:0;top:0;bottom:0;right:0;opacity:0;contain:size layout style paint;will-change:opacity,visibility;visibility:hidden;z-index:20000;transition:opacity .3s,visibility step-end .3s}.popup.push-down-full>div{transition:transform .3s,opacity .3s,visibility step-end .3s;visibility:hidden;opacity:0;transform:scale(0.9, 0.9) translate3d(0, -15px, 0)}.popup.push-down-full>div:after{opacity:1;visibility:visible;transition:opacity .3s,visibility step-start .3s}.popup.push-down>div{transform:scale(0.95, 0.95) translate3d(0, -10px, 0)}.popup.push-down>div:after{opacity:1;visibility:visible;transition:opacity .3s,visibility step-start .3s}.popup.sticky{align-items:flex-end}.popup.sticky>div{max-height:100vh;height:calc(100vh - 80px);border-bottom-left-radius:0;border-bottom-right-radius:0}.popup.sticky>div>*{--vh: calc(1vh - 0.8px)}.popup.fade-enter-active:after{transition:opacity .3s}.popup.fade-enter-active>div{transition:transform .3s cubic-bezier(0, 0, 0.2, 1),opacity .3s}.popup.fade-leave-active:after{transition:opacity .3s}.popup.fade-leave-active>div{transition:transform .3s cubic-bezier(0.4, 0, 1, 1),opacity .3s}.popup.fade-enter:after,.popup.fade-leave-to:after{opacity:0}.popup.fade-enter>div,.popup.fade-leave-to>div{transform:translate(0, 50vh);opacity:0}
3
+ .sheet{position:fixed;left:0;top:0;bottom:0;right:0;display:flex;align-items:center;justify-content:center;z-index:10000;padding:20px;contain:size layout style paint}.sheet .navigation-controller{transition:height .25s cubic-bezier(0.4, 0, 0.2, 1);will-change:height}.sheet:after{background:rgba(0,0,0,.7);content:"";position:absolute;left:0;top:0;bottom:0;right:0;opacity:1;contain:size layout style paint;will-change:opacity;transition:opacity .3s;z-index:0}.sheet~.sheet:after{display:none}.sheet>div{max-width:800px;background:#fff;background:var(--color-white, white);border-radius:5px;overflow:hidden;max-height:100vh;max-height:calc(100vh - 80px);max-height:calc(var(--vh, 1vh) * 100 - 80px);overflow:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;box-sizing:border-box;--saved-vh: var(--vh, 1vh);transform:translate3d(0, 0, 0);transform-origin:50% 50%;z-index:1;contain:layout style paint;will-change:transform,opacity,scroll-position}.sheet>div>*{--vh: calc(var(--saved-vh, 1vh) - 0.8px)}.sheet.fade-enter-active:after{transition:opacity .3s}.sheet.fade-enter-active>div{transition:transform .3s cubic-bezier(0, 0, 0.2, 1),opacity .3s}.sheet.fade-leave-active:after{transition:opacity .3s}.sheet.fade-leave-active>div{transition:transform .3s cubic-bezier(0.4, 0, 1, 1),opacity .3s}.sheet.fade-enter:after,.sheet.fade-leave-to:after{opacity:0}.sheet.fade-enter>div,.sheet.fade-leave-to>div{transform:translate(0, 30vh);opacity:0}
4
4
  .side-view{background:rgba(0,0,0,.7);position:fixed;left:0;top:0;bottom:0;right:0;z-index:10000;visibility:visible;opacity:1;transition:background-color .3s,opacity .3s,visibility step-start .3s}.side-view~.side-view{background-color:rgba(0,0,0,.4)}.side-view>div{position:fixed;right:0;top:0;bottom:0;width:100%;max-width:800px;background:#fff;background:var(--color-white, white);border-radius:0px;overflow:hidden;height:100%;overflow:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;box-sizing:border-box;transform:translate3d(0, 0, 0);transition:transform .3s,border-radius .3s;transform-origin:0% 50%}.side-view.push-down-full{transition:background-color .3s,opacity .3s,visibility step-end .3s;visibility:hidden;opacity:0;background-color:rgba(0,0,0,.6)}.side-view.push-down-full>div{transform:scale(0.9, 0.9) translate3d(-15px, 0, 0);border-radius:5px}.side-view.push-down{background-color:rgba(0,0,0,.6)}.side-view.push-down>div{transform:scale(0.95, 0.95) translate3d(-10px, 0, 0);border-radius:5px}.side-view.fade-enter-active,.side-view.fade-leave-active,.side-view[data-extended-enter=true]{position:fixed}.side-view.fade-enter-active>div,.side-view.fade-leave-active>div,.side-view[data-extended-enter=true]>div{transition:transform .3s}.side-view.fade-enter,.side-view.fade-leave-to{background-color:rgba(0,0,0,0)}.side-view.fade-enter>div,.side-view.fade-leave-to>div{transform:translate(100%, 0)}.side-view.fade-enter-active,.side-view.fade-leave-active{z-index:10000}
5
5
  .split-view-controller{position:relative;width:100%;box-sizing:border-box;min-height:100vh;min-height:calc(var(--vh, 1vh) * 100)}.split-view-controller>.master{flex-shrink:0;flex-grow:0;position:sticky;left:0;top:0;height:100vh;height:calc(var(--vh, 1vh) * 100);overflow:hidden;overflow-y:scroll;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}.split-view-controller>.master:last-child{position:relative;overflow:visible;width:100%;height:auto}.split-view-controller[data-has-detail=true]{display:grid;grid-template-columns:320px 1fr;grid-template-columns:var(--split-view-width, 320px) 1fr}.split-view-controller[data-has-detail=true]>.master{min-width:0}.split-view-controller[data-has-detail=true]>.detail{min-width:0;min-height:100vh;min-height:calc(var(--vh, 1vh) * 100)}
6
6
 
package/dist/main.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["webpack://@simonbackx/vue-app-navigation/./src/NavigationController.vue","webpack://@simonbackx/vue-app-navigation/./src/Popup.vue","webpack://@simonbackx/vue-app-navigation/./src/Sheet.vue","webpack://@simonbackx/vue-app-navigation/./src/SideView.vue","webpack://@simonbackx/vue-app-navigation/./src/SplitViewController.vue"],"names":[],"mappings":"AAqlBA,uBAEI,iBACA,kBAIQ,yFAGI,kBACA,UACA,mBACA,YAEA,iGACI,iBACA,sCACA,gBACA,qCAIR,yFAEI,kBAKA,QACA,SACA,UACA,WAEA,iGAEI,WACA,YAIR,4CACI,MAMA,mDACI,0BAIR,uFAEI,kBACA,cAKA,QACA,SACA,UACA,WACA,+FAEI,gBACA,qCACA,WACA,YAIR,uFAEI,kBAIA,+CACI,4BAOZ,oFAEI,iBACA,uBAEA,4FACI,yBAIR,6EAEI,kBAGJ,6EAEI,kBAKA,QACA,SACA,UACA,WAIA,qFAEI,WACA,YAIR,yEACI,UAIA,uCACI,2BAGA,+DAKJ,0CACI,4BAGA,gEAMR,kFAEI,iBACA,wBAEA,0FACI,0BAIR,2EAEI,kBAGJ,2EAEI,kBAEA,QACA,SACA,UACA,WAEA,mFAEI,WACA,YAIR,uEACI,UAIA,sCACI,4BAGA,gEAKJ,yCACI,2BAGA,+D;AC1pBhB,OAGI,eACA,OACA,MACA,SACA,QACA,aACA,mBACA,uBACA,cACA,gCAEA,aACI,0BACA,WACA,kBACA,OACA,MACA,SACA,QACA,UACA,gCACA,oBACA,uBACA,UAGJ,oBACI,aAKJ,WACI,gBACA,gBACA,gBACA,qCACA,kBAGA,gBAEA,iBACA,sCACA,yCAEA,iCACA,8BAEA,sBAEA,gCACA,8BAEA,2BAGA,+BACA,wBAEA,mBACA,+DACA,UACA,kBAEA,iCACI,gBACA,gBAEA,yCACA,YAGJ,iBACI,0BACA,WACA,kBACA,OACA,MACA,SACA,QACA,UACA,gCACA,+BACA,kBACA,cACA,+CAKJ,0BACI,6DACA,kBACA,UACA,mDAEA,gCACI,UACA,mBACA,iDAMR,qBACI,qDAEA,2BACI,UACA,mBACA,iDAKZ,cACI,qBAEA,kBACI,iBACA,0BACA,4BACA,6BAEA,oBAEI,wBAMR,8DACI,uBAGJ,0DACI,qCAKJ,mDACI,UAGJ,+CACI,6BACA,U;AC/LZ,OAGI,eACA,OACA,MACA,SACA,QACA,aACA,mBACA,uBACA,cACA,aACA,gCAEA,8BACI,uBACA,mBAGJ,aACI,0BACA,WACA,kBACA,OACA,MACA,SACA,QACA,UACA,gCACA,oBACA,uBACA,UAGJ,oBACI,aAKJ,WACI,gBACA,gBACA,qCACA,kBAGA,gBAEA,iBACA,8BACA,6CAEA,gBACA,gBACA,iCACA,8BAEA,sBAEA,2BAGA,+BACA,yBACA,UAEA,aACI,yCAKJ,8DACI,uBAGJ,0DACI,qCAKJ,mDACI,UAGJ,+CACI,6BACA,U;AC9DZ,WAEI,0BACA,eACA,OACA,MACA,SACA,QACA,cACA,mBACA,UACA,sEAEA,sBACI,gCAKJ,eACI,eACA,QACA,MACA,SACA,WACA,gBACA,gBACA,qCACA,kBAGA,gBAEA,YAEA,gBACA,gBACA,iCACA,8BAEA,sBAGA,+BAGA,2CACA,wBAGJ,0BACI,oEACA,kBACA,UACA,gCAEA,8BACI,mDACA,kBAIR,qBACI,gCAEA,yBACI,qDACA,kBAIR,+FAGI,eAEA,2GACI,yBAGR,+CACI,+BAEA,uDACI,6BAIR,0DAEI,c;ACRR,uBAEI,kBACA,WACA,sBAwCA,iBACA,sCAvCA,+BACI,cACA,YACA,gBACA,OACA,MACA,aACA,kCAEA,gBACA,kBACA,iCAIA,8BAEA,0CACI,kBACA,iBACA,WACA,YAoBR,6CACI,aACA,gCACA,yDAEA,qDACI,YAGJ,qDACI,YACA,iBACA,sC","file":"main.css","sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.navigation-controller {\n // Scrolling should happen inside the children!\n overflow: visible;\n position: relative;\n\n > .modal {\n &-push {\n &-enter,\n &-enter-active {\n // We animate on the containing div, because animation on the inner div causes issues with position: sticky in webkit\n position: relative;\n top: 100vh; // need to animate on top, since transform causes issues on webkit / safari\n transition: top 0.30s;\n z-index: 100;\n\n & > div {\n min-height: 100vh;\n min-height: calc(var(--vh, 1vh) * 100);\n background: white;\n background: var(--color-white, white);\n }\n }\n\n &-leave,\n &-leave-active {\n position: absolute;\n\n // During leave animation, the div inside this container will transition to the left, causing scroll offsets\n // We'll need to ignore these\n //overflow: hidden !important;\n top: 0px;\n left: 0px;\n right: 0px;\n bottom: 0px;\n\n & > div {\n //overflow: hidden !important;\n width: 100%;\n height: 100%;\n }\n }\n\n &-enter-to {\n top: 0;\n }\n }\n\n &-pop {\n &-leave-active {\n & > div {\n transition: transform 0.25s;\n }\n }\n\n &-leave,\n &-leave-active {\n position: absolute;\n z-index: 10000;\n\n // During leave animation, the div inside this container will transition to the left, causing scroll offsets\n // We'll need to ignore these\n //overflow: hidden !important;\n top: 0px;\n left: 0px;\n right: 0px;\n bottom: 0px;\n & > div {\n //overflow: hidden !important;\n background: white;\n background: var(--color-white, white);\n width: 100%;\n height: 100%;\n }\n }\n\n &-enter,\n &-enter-active {\n position: relative;\n }\n\n &-leave-to {\n & > div {\n transform: translateY(100vh);\n }\n }\n }\n }\n\n > .push {\n &-enter-active,\n &-leave-active {\n user-select: none;\n transition: opacity 0.30s;\n\n & > div {\n transition: transform 0.30s;\n }\n }\n\n &-enter,\n &-enter-active {\n position: relative;\n }\n\n &-leave,\n &-leave-active {\n position: absolute;\n\n // During leave animation, the div inside this container will transition to the left, causing scroll offsets\n // We'll need to ignore these\n //overflow: hidden !important;\n top: 0px;\n left: 0px;\n right: 0px;\n bottom: 0px;\n\n // Top, left and bottom will get adjusted\n\n & > div {\n //overflow: hidden !important;\n width: 100%;\n height: 100%;\n }\n }\n\n &-enter, &-leave-to /* .fade-leave-active below version 2.1.8 */ {\n opacity: 0;\n }\n\n &-enter {\n & > div {\n transform: translateX(100%);\n\n // RTL support\n transform: translateX(calc(100% * var(--direction-scale-x, 1)));\n }\n }\n\n &-leave-to {\n & > div {\n transform: translateX(-100%);\n\n // RTL support\n transform: translateX(calc(-100% * var(--direction-scale-x, 1)));\n }\n }\n }\n\n > .pop {\n &-enter-active,\n &-leave-active {\n user-select: none;\n transition: opacity 0.25s;\n\n & > div {\n transition: transform 0.25s;\n }\n }\n\n &-enter,\n &-enter-active {\n position: relative;\n }\n\n &-leave,\n &-leave-active {\n position: absolute;\n //overflow: hidden !important;\n top: 0px;\n left: 0px;\n right: 0px;\n bottom: 0px;\n\n & > div {\n //overflow: hidden !important;\n width: 100%;\n height: 100%;\n }\n }\n\n &-enter, &-leave-to /* .fade-leave-active below version 2.1.8 */ {\n opacity: 0;\n }\n\n &-enter {\n & > div {\n transform: translateX(-100%);\n\n // RTL support\n transform: translateX(calc(-100% * var(--direction-scale-x, 1)));\n }\n }\n\n &-leave-to {\n & > div {\n transform: translateX(100%);\n\n // RTL support\n transform: translateX(calc(100% * var(--direction-scale-x, 1)));\n }\n }\n }\n}\n","\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.popup {\n // DO NOT ADD MAX HEIGHT HERE! Always add it to the children of the navigation controllers!\n //background: rgba(black, 0.7);\n position: fixed;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10000;\n contain: size layout style paint;\n\n &:after {\n background: rgba(black, 0.7);\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n opacity: 1;\n contain: size layout style paint;\n will-change: opacity;\n transition: opacity 0.3s;\n z-index: 0;\n }\n\n ~.popup:after {\n display: none;\n }\n\n // Improve performance\n\n & > div {\n max-width: 800px;\n flex-basis: 100%;\n background: white;\n background: var(--color-white, white);\n border-radius: 5px;\n\n // Rounded corners need overflow hidden on scroll\n overflow: hidden;\n\n max-height: 100vh;\n max-height: calc(var(--vh, 1vh) * 100);\n height: calc(var(--vh, 1vh) * 100 - 80px);\n\n -webkit-overflow-scrolling: touch;\n overscroll-behavior-y: contain;\n\n box-sizing: border-box;\n\n contain: size layout style paint;\n will-change: transform, opacity;\n\n --saved-vh: var(--vh, 1vh);\n\n // Fix chrome bug that scrollbars are not visible anymore\n transform: translate3d(0, 0, 0);\n transform-origin: 50% 0%;\n\n visibility: visible;\n transition: transform 0.3s, opacity 0.3s, visibility step-start 0.3s;\n z-index: 1;\n position: relative;\n\n > .scrollable-container {\n overflow: hidden;\n overflow-y: auto;\n // Pass updated vh to children\n --vh: calc(var(--saved-vh, 1vh) - 0.8px);\n height: 100%;\n }\n\n &:after {\n background: rgba(black, 0.4);\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n opacity: 0;\n contain: size layout style paint;\n will-change: opacity, visibility;\n visibility: hidden;\n z-index: 20000;\n transition: opacity 0.3s, visibility step-end 0.3s;\n }\n }\n\n &.push-down-full {\n & > div {\n transition: transform 0.3s, opacity 0.3s, visibility step-end 0.3s;\n visibility: hidden;\n opacity: 0;\n transform: scale(0.9, 0.9) translate3d(0, -15px, 0);\n\n &:after {\n opacity: 1;\n visibility: visible;\n transition: opacity 0.3s, visibility step-start 0.3s;\n }\n }\n }\n\n &.push-down {\n & > div {\n transform: scale(0.95, 0.95) translate3d(0, -10px, 0);\n\n &:after {\n opacity: 1;\n visibility: visible;\n transition: opacity 0.3s, visibility step-start 0.3s;\n }\n }\n }\n\n &.sticky {\n align-items: flex-end;\n\n > div {\n max-height: 100vh;\n height: calc(100vh - 80px);\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n\n > * {\n // Pass updated vh to children\n --vh: calc(1vh - 0.8px);\n }\n }\n }\n\n &.fade-enter-active, &.fade-leave-active {\n &:after {\n transition: opacity 0.3s;\n }\n\n & > div {\n transition: transform 0.3s, opacity 0.3s;\n }\n }\n\n &.fade-enter, &.fade-leave-to {\n &:after {\n opacity: 0;\n }\n\n & > div {\n transform: translate(0, 50vh);\n opacity: 0;\n }\n }\n}\n","\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.sheet {\n // DO NOT ADD MAX HEIGHT HERE! Always add it to the children of the navigation controllers!\n // background: rgba(black, 0.7);\n position: fixed;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10000;\n padding: 20px;\n contain: size layout style paint;\n\n .navigation-controller {\n transition: height 0.25s;\n will-change: height;\n }\n\n &:after {\n background: rgba(black, 0.7);\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n opacity: 1;\n contain: size layout style paint;\n will-change: opacity;\n transition: opacity 0.3s;\n z-index: 0;\n }\n\n ~.sheet:after {\n display: none;\n }\n\n // Improve performance\n\n & > div {\n max-width: 800px;\n background: white;\n background: var(--color-white, white);\n border-radius: 5px;\n\n // Rounded corners need overflow hidden on scroll\n overflow: hidden;\n\n max-height: 100vh;\n max-height: calc(100vh - 80px);\n max-height: calc(var(--vh, 1vh) * 100 - 80px);\n\n overflow: hidden;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n overscroll-behavior-y: contain;\n\n box-sizing: border-box;\n\n --saved-vh: var(--vh, 1vh);\n\n // Fix chrome bug that scrollbars are not visible anymore\n transform: translate3d(0, 0, 0);\n transform-origin: 50% 50%;\n z-index: 1;\n\n > * {\n --vh: calc(var(--saved-vh, 1vh) - 0.8px);\n }\n }\n\n &.fade-enter-active, &.fade-leave-active {\n &:after {\n transition: opacity 0.3s;\n }\n\n & > div {\n transition: transform 0.3s, opacity 0.3s;\n }\n }\n\n &.fade-enter, &.fade-leave-to {\n &:after {\n opacity: 0;\n }\n\n & > div {\n transform: translate(0, 20vh);\n opacity: 0;\n }\n }\n}\n","\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.side-view {\n // DO NOT ADD MAX HEIGHT HERE! Always add it to the children of the navigation controllers!\n background: rgba(black, 0.7);\n position: fixed;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n z-index: 10000;\n visibility: visible;\n opacity: 1;\n transition: background-color 0.3s, opacity 0.3s, visibility step-start 0.3s;\n\n ~.side-view {\n background-color: rgba(black, 0.4);\n }\n\n // Improve performance\n\n & > div {\n position: fixed;\n right: 0;\n top: 0;\n bottom: 0;\n width: 100%;\n max-width: 800px;\n background: white;\n background: var(--color-white, white);\n border-radius: 0px;\n\n // Rounded corners need overflow hidden on scroll\n overflow: hidden;\n\n height: 100%;\n\n overflow: hidden;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n overscroll-behavior-y: contain;\n\n box-sizing: border-box;\n\n // Fix chrome bug that scrollbars are not visible anymore\n transform: translate3d(0, 0, 0);\n\n // Push down\n transition: transform 0.3s, border-radius 0.3s;\n transform-origin: 0% 50%;\n }\n\n &.push-down-full {\n transition: background-color 0.3s, opacity 0.3s, visibility step-end 0.3s;\n visibility: hidden;\n opacity: 0;\n background-color: rgba(black, 0.6);\n\n & > div {\n transform: scale(0.9, 0.9) translate3d(-15px, 0, 0);\n border-radius: 5px;\n }\n }\n\n &.push-down {\n background-color: rgba(black, 0.6);\n\n & > div {\n transform: scale(0.95, 0.95) translate3d(-10px, 0, 0);\n border-radius: 5px;\n }\n }\n\n &.fade-enter-active,\n &.fade-leave-active,\n &[data-extended-enter=\"true\"] {\n position: fixed;\n\n & > div {\n transition: transform 0.3s;\n }\n }\n &.fade-enter, &.fade-leave-to /* .fade-leave-active below version 2.1.8 */ {\n background-color: rgba(black, 0);\n\n & > div {\n transform: translate(100%, 0);\n }\n }\n\n &.fade-enter-active,\n &.fade-leave-active {\n z-index: 10000;\n }\n}\n","\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.split-view-controller {\n //background: $color-white-shade;\n position: relative;\n width: 100%;\n box-sizing: border-box;\n\n & > .master {\n flex-shrink: 0;\n flex-grow: 0;\n position: sticky;\n left: 0;\n top: 0;\n height: 100vh;\n height: calc(var(--vh, 1vh) * 100);\n\n overflow: hidden;\n overflow-y: scroll;\n -webkit-overflow-scrolling: touch;\n\n // do not start scrolling parents if we reached the edge of this view\n // we'll need to add a polyfill for Safari in JS to disable overscroll (currently not available)\n overscroll-behavior-y: contain;\n\n &:last-child {\n position: relative;\n overflow: visible;\n width: 100%;\n height: auto;\n }\n }\n\n & > .detail {\n /*background: $color-white;\n border-top-left-radius: $border-radius;\n border-bottom-left-radius: $border-radius;*/\n\n // Clip contents (during animations)\n // Sometimes not working on iOS (need to fix)\n // clip-path: inset(0px 0px);\n\n // @extend .style-side-view-shadow;\n }\n\n // Make sure our background color etc fills the whole view\n min-height: 100vh;\n min-height: calc(var(--vh, 1vh) * 100);\n\n &[data-has-detail=\"true\"] {\n display: grid;\n grid-template-columns: 320px 1fr;\n grid-template-columns: var(--split-view-width, 320px) 1fr;\n\n & > .master {\n min-width: 0;\n }\n\n & > .detail {\n min-width: 0;\n min-height: 100vh;\n min-height: calc(var(--vh, 1vh) * 100);\n }\n }\n}\n"],"sourceRoot":""}
1
+ {"version":3,"sources":["webpack://@simonbackx/vue-app-navigation/./src/NavigationController.vue","webpack://@simonbackx/vue-app-navigation/./src/Popup.vue","webpack://@simonbackx/vue-app-navigation/./src/Sheet.vue","webpack://@simonbackx/vue-app-navigation/./src/SideView.vue","webpack://@simonbackx/vue-app-navigation/./src/SplitViewController.vue"],"names":[],"mappings":"AAqlBA,uBAEI,iBACA,kBAEA,6BACI,sBAKI,yFAGI,kBACA,UACA,8CACA,YACA,gBAEA,iGACI,iBACA,sCACA,gBACA,qCAIR,yFAEI,kBAKA,QACA,SACA,UACA,WACA,eAGA,sBAEA,iGAEI,WACA,YAIR,4CACI,MAGJ,4CACI,uBAMA,mDACI,qDAIR,uFAEI,kBACA,cAKA,QACA,SACA,UACA,WAEA,+FAEI,gBACA,qCACA,WACA,YAIR,uFAEI,kBAIA,+CACI,4BAOZ,0CACI,iBAEA,8CACI,yBAIR,0CACI,iBAGA,sBAEA,8CACI,yBAIR,6EAEI,kBACA,YAGJ,6EAEI,kBAKA,QACA,SACA,UACA,WAIA,qFAEI,WACA,YAIR,sCACI,uBAQA,uCACI,2BAGA,+DAKJ,0CACI,2BAGA,+DAMP,yCACG,iBAGA,uBAEA,6CACI,0BAIR,yCACI,iBAEA,6CACI,0BAIR,2EAEI,kBACA,aAGJ,2EAEI,kBAEA,QACA,SACA,UACA,WACA,YAEA,mFAEI,WACA,YAIR,kCACI,uBAIA,sCACI,2BAGA,+DAKJ,yCACI,2BAGA,+D;ACjsBhB,OAGI,eACA,OACA,MACA,SACA,QACA,aACA,mBACA,uBACA,cACA,gCAEA,aACI,0BACA,WACA,kBACA,OACA,MACA,SACA,QACA,UACA,gCACA,oBACA,uBACA,UAGJ,oBACI,aAKJ,WACI,gBACA,gBACA,gBACA,qCACA,kBAGA,gBAEA,iBACA,sCACA,yCAEA,iCACA,8BAEA,sBAEA,gCACA,8BAEA,2BAGA,+BACA,wBAEA,mBACA,+DACA,UACA,kBAEA,iCACI,gBACA,gBAEA,yCACA,YACA,4BAGJ,iBACI,0BACA,WACA,kBACA,OACA,MACA,SACA,QACA,UACA,gCACA,+BACA,kBACA,cACA,+CAKJ,0BACI,6DACA,kBACA,UACA,mDAEA,gCACI,UACA,mBACA,iDAMR,qBACI,qDAEA,2BACI,UACA,mBACA,iDAKZ,cACI,qBAEA,kBACI,iBACA,0BACA,4BACA,6BAEA,oBAEI,wBAMR,+BACI,uBAGJ,6BAEI,gEAKJ,+BACI,uBAGJ,6BAEI,gEAKJ,mDACI,UAGJ,+CACI,6BACA,U;AC5MZ,OAGI,eACA,OACA,MACA,SACA,QACA,aACA,mBACA,uBACA,cACA,aACA,gCAEA,8BACI,oDACA,mBAGJ,aACI,0BACA,WACA,kBACA,OACA,MACA,SACA,QACA,UACA,gCACA,oBACA,uBACA,UAGJ,oBACI,aAKJ,WACI,gBACA,gBACA,qCACA,kBAGA,gBAEA,iBACA,8BACA,6CAEA,gBACA,gBACA,iCACA,8BAEA,sBAEA,2BAGA,+BACA,yBACA,UACA,2BACA,8CAEA,aACI,yCAKJ,+BACI,uBAGJ,6BAEI,gEAKJ,+BACI,uBAGJ,6BAEI,gEAKJ,mDACI,UAGJ,+CACI,6BACA,U;AC5EZ,WAEI,0BACA,eACA,OACA,MACA,SACA,QACA,cACA,mBACA,UACA,sEAEA,sBACI,gCAKJ,eACI,eACA,QACA,MACA,SACA,WACA,gBACA,gBACA,qCACA,kBAGA,gBAEA,YAEA,gBACA,gBACA,iCACA,8BAEA,sBAGA,+BAGA,2CACA,wBAGJ,0BACI,oEACA,kBACA,UACA,gCAEA,8BACI,mDACA,kBAIR,qBACI,gCAEA,yBACI,qDACA,kBAIR,+FAGI,eAEA,2GACI,yBAGR,+CACI,+BAEA,uDACI,6BAIR,0DAEI,c;ACRR,uBAEI,kBACA,WACA,sBAwCA,iBACA,sCAvCA,+BACI,cACA,YACA,gBACA,OACA,MACA,aACA,kCAEA,gBACA,kBACA,iCAIA,8BAEA,0CACI,kBACA,iBACA,WACA,YAoBR,6CACI,aACA,gCACA,yDAEA,qDACI,YAGJ,qDACI,YACA,iBACA,sC","file":"main.css","sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.navigation-controller {\n // Scrolling should happen inside the children!\n overflow: visible;\n position: relative;\n\n > * > div {\n will-change: transform;\n }\n\n > .modal {\n &-push {\n &-enter,\n &-enter-active {\n // We animate on the containing div, because animation on the inner div causes issues with position: sticky in webkit\n position: relative;\n top: 100vh; // need to animate on top, since transform causes issues on webkit / safari\n transition: top 0.30s cubic-bezier(0.0, 0.0, 0.2, 1);\n z-index: 100;\n will-change: top;\n \n & > div {\n min-height: 100vh;\n min-height: calc(var(--vh, 1vh) * 100);\n background: white;\n background: var(--color-white, white);\n }\n }\n\n &-leave,\n &-leave-active {\n position: absolute;\n\n // During leave animation, the div inside this container will transition to the left, causing scroll offsets\n // We'll need to ignore these\n //overflow: hidden !important;\n top: 0px;\n left: 0px;\n right: 0px;\n bottom: 0px;\n contain: strict;\n\n // Darkness in sync with enter animation\n transition: filter 0.30s;\n\n & > div {\n //overflow: hidden !important;\n width: 100%;\n height: 100%;\n }\n }\n\n &-enter-to {\n top: 0;\n }\n\n &-leave-to {\n filter: brightness(80%);\n }\n }\n\n &-pop {\n &-leave-active {\n & > div {\n transition: transform 0.25s cubic-bezier(0.4, 0.0, 1, 1);\n }\n }\n\n &-leave,\n &-leave-active {\n position: absolute;\n z-index: 10000;\n\n // During leave animation, the div inside this container will transition to the left, causing scroll offsets\n // We'll need to ignore these\n //overflow: hidden !important;\n top: 0px;\n left: 0px;\n right: 0px;\n bottom: 0px;\n\n & > div {\n //overflow: hidden !important;\n background: white;\n background: var(--color-white, white);\n width: 100%;\n height: 100%;\n }\n }\n\n &-enter,\n &-enter-active {\n position: relative;\n }\n\n &-leave-to {\n & > div {\n transform: translateY(100vh);\n }\n }\n }\n }\n\n > .push {\n &-enter-active {\n user-select: none;\n\n & > div {\n transition: transform 0.30s;\n }\n }\n\n &-leave-active {\n user-select: none;\n\n // Darkness in sync with enter animation\n transition: filter 0.30s;\n\n & > div {\n transition: transform 0.30s;\n }\n }\n\n &-enter,\n &-enter-active {\n position: relative;\n z-index: 100;\n }\n\n &-leave,\n &-leave-active {\n position: absolute;\n\n // During leave animation, the div inside this container will transition to the left, causing scroll offsets\n // We'll need to ignore these\n //overflow: hidden !important;\n top: 0px;\n left: 0px;\n right: 0px;\n bottom: 0px;\n\n // Top, left and bottom will get adjusted\n\n & > div {\n //overflow: hidden !important;\n width: 100%;\n height: 100%;\n }\n }\n\n &-leave-to /* .fade-leave-active below version 2.1.8 */ {\n filter: brightness(80%);\n }\n\n /*&-enter, &-leave-to {\n opacity: 0;\n }*/\n\n &-enter {\n & > div {\n transform: translateX(100%);\n\n // RTL support\n transform: translateX(calc(100% * var(--direction-scale-x, 1)));\n }\n }\n\n &-leave-to {\n & > div {\n transform: translateX(-40%);\n\n // RTL support\n transform: translateX(calc(-40% * var(--direction-scale-x, 1)));\n }\n }\n }\n\n > .pop {\n &-enter-active {\n user-select: none;\n\n // Opacity in sync with leave\n transition: filter 0.25s;\n\n & > div {\n transition: transform 0.25s;\n }\n }\n\n &-leave-active {\n user-select: none;\n\n & > div {\n transition: transform 0.25s;\n }\n }\n\n &-enter,\n &-enter-active {\n position: relative;\n z-index: -100;\n }\n\n &-leave,\n &-leave-active {\n position: absolute;\n //overflow: hidden !important;\n top: 0px;\n left: 0px;\n right: 0px;\n bottom: 0px;\n z-index: 100;\n\n & > div {\n //overflow: hidden !important;\n width: 100%;\n height: 100%;\n }\n }\n\n &-enter/*, &-leave-to *//* .fade-leave-active below version 2.1.8 */ {\n filter: brightness(80%);\n }\n\n &-enter {\n & > div {\n transform: translateX(-40%);\n\n // RTL support\n transform: translateX(calc(-40% * var(--direction-scale-x, 1)));\n }\n }\n\n &-leave-to {\n & > div {\n transform: translateX(100%);\n\n // RTL support\n transform: translateX(calc(100% * var(--direction-scale-x, 1)));\n }\n }\n }\n}\n","\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.popup {\n // DO NOT ADD MAX HEIGHT HERE! Always add it to the children of the navigation controllers!\n //background: rgba(black, 0.7);\n position: fixed;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10000;\n contain: size layout style paint;\n\n &:after {\n background: rgba(black, 0.7);\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n opacity: 1;\n contain: size layout style paint;\n will-change: opacity;\n transition: opacity 0.3s;\n z-index: 0;\n }\n\n ~.popup:after {\n display: none;\n }\n\n // Improve performance\n\n & > div {\n max-width: 800px;\n flex-basis: 100%;\n background: white;\n background: var(--color-white, white);\n border-radius: 5px;\n\n // Rounded corners need overflow hidden on scroll\n overflow: hidden;\n\n max-height: 100vh;\n max-height: calc(var(--vh, 1vh) * 100);\n height: calc(var(--vh, 1vh) * 100 - 80px);\n\n -webkit-overflow-scrolling: touch;\n overscroll-behavior-y: contain;\n\n box-sizing: border-box;\n\n contain: size layout style paint;\n will-change: transform, opacity;\n\n --saved-vh: var(--vh, 1vh);\n\n // Fix chrome bug that scrollbars are not visible anymore\n transform: translate3d(0, 0, 0);\n transform-origin: 50% 0%;\n\n visibility: visible;\n transition: transform 0.3s, opacity 0.3s, visibility step-start 0.3s;\n z-index: 1;\n position: relative;\n\n > .scrollable-container {\n overflow: hidden;\n overflow-y: auto;\n // Pass updated vh to children\n --vh: calc(var(--saved-vh, 1vh) - 0.8px);\n height: 100%;\n will-change: scroll-position;\n }\n\n &:after {\n background: rgba(black, 0.4);\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n opacity: 0;\n contain: size layout style paint;\n will-change: opacity, visibility;\n visibility: hidden;\n z-index: 20000;\n transition: opacity 0.3s, visibility step-end 0.3s;\n }\n }\n\n &.push-down-full {\n & > div {\n transition: transform 0.3s, opacity 0.3s, visibility step-end 0.3s;\n visibility: hidden;\n opacity: 0;\n transform: scale(0.9, 0.9) translate3d(0, -15px, 0);\n\n &:after {\n opacity: 1;\n visibility: visible;\n transition: opacity 0.3s, visibility step-start 0.3s;\n }\n }\n }\n\n &.push-down {\n & > div {\n transform: scale(0.95, 0.95) translate3d(0, -10px, 0);\n\n &:after {\n opacity: 1;\n visibility: visible;\n transition: opacity 0.3s, visibility step-start 0.3s;\n }\n }\n }\n\n &.sticky {\n align-items: flex-end;\n\n > div {\n max-height: 100vh;\n height: calc(100vh - 80px);\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n\n > * {\n // Pass updated vh to children\n --vh: calc(1vh - 0.8px);\n }\n }\n }\n\n &.fade-enter-active {\n &:after {\n transition: opacity 0.3s;\n }\n\n & > div {\n // Decelerated easing\n transition: transform 0.3s cubic-bezier(0.0, 0.0, 0.2, 1), opacity 0.3s;\n }\n }\n\n &.fade-leave-active {\n &:after {\n transition: opacity 0.3s;\n }\n\n & > div {\n // Accelerated easing\n transition: transform 0.3s cubic-bezier(0.4, 0.0, 1, 1), opacity 0.3s;\n }\n }\n\n &.fade-enter, &.fade-leave-to {\n &:after {\n opacity: 0;\n }\n\n & > div {\n transform: translate(0, 50vh);\n opacity: 0;\n }\n }\n}\n","\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.sheet {\n // DO NOT ADD MAX HEIGHT HERE! Always add it to the children of the navigation controllers!\n // background: rgba(black, 0.7);\n position: fixed;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10000;\n padding: 20px;\n contain: size layout style paint;\n\n .navigation-controller {\n transition: height 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);\n will-change: height;\n }\n\n &:after {\n background: rgba(black, 0.7);\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n opacity: 1;\n contain: size layout style paint;\n will-change: opacity;\n transition: opacity 0.3s;\n z-index: 0;\n }\n\n ~.sheet:after {\n display: none;\n }\n\n // Improve performance\n\n & > div {\n max-width: 800px;\n background: white;\n background: var(--color-white, white);\n border-radius: 5px;\n\n // Rounded corners need overflow hidden on scroll\n overflow: hidden;\n\n max-height: 100vh;\n max-height: calc(100vh - 80px);\n max-height: calc(var(--vh, 1vh) * 100 - 80px);\n\n overflow: hidden;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n overscroll-behavior-y: contain;\n\n box-sizing: border-box;\n\n --saved-vh: var(--vh, 1vh);\n\n // Fix chrome bug that scrollbars are not visible anymore\n transform: translate3d(0, 0, 0);\n transform-origin: 50% 50%;\n z-index: 1;\n contain: layout style paint;\n will-change: transform, opacity, scroll-position;\n\n > * {\n --vh: calc(var(--saved-vh, 1vh) - 0.8px);\n }\n }\n\n &.fade-enter-active {\n &:after {\n transition: opacity 0.3s;\n }\n\n & > div {\n // Decelerated easing\n transition: transform 0.3s cubic-bezier(0.0, 0.0, 0.2, 1), opacity 0.3s;\n }\n }\n\n &.fade-leave-active {\n &:after {\n transition: opacity 0.3s;\n }\n\n & > div {\n // Accelerated easing\n transition: transform 0.3s cubic-bezier(0.4, 0.0, 1, 1), opacity 0.3s;\n }\n }\n\n &.fade-enter, &.fade-leave-to {\n &:after {\n opacity: 0;\n }\n\n & > div {\n transform: translate(0, 30vh);\n opacity: 0;\n }\n }\n}\n","\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.side-view {\n // DO NOT ADD MAX HEIGHT HERE! Always add it to the children of the navigation controllers!\n background: rgba(black, 0.7);\n position: fixed;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n z-index: 10000;\n visibility: visible;\n opacity: 1;\n transition: background-color 0.3s, opacity 0.3s, visibility step-start 0.3s;\n\n ~.side-view {\n background-color: rgba(black, 0.4);\n }\n\n // Improve performance\n\n & > div {\n position: fixed;\n right: 0;\n top: 0;\n bottom: 0;\n width: 100%;\n max-width: 800px;\n background: white;\n background: var(--color-white, white);\n border-radius: 0px;\n\n // Rounded corners need overflow hidden on scroll\n overflow: hidden;\n\n height: 100%;\n\n overflow: hidden;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n overscroll-behavior-y: contain;\n\n box-sizing: border-box;\n\n // Fix chrome bug that scrollbars are not visible anymore\n transform: translate3d(0, 0, 0);\n\n // Push down\n transition: transform 0.3s, border-radius 0.3s;\n transform-origin: 0% 50%;\n }\n\n &.push-down-full {\n transition: background-color 0.3s, opacity 0.3s, visibility step-end 0.3s;\n visibility: hidden;\n opacity: 0;\n background-color: rgba(black, 0.6);\n\n & > div {\n transform: scale(0.9, 0.9) translate3d(-15px, 0, 0);\n border-radius: 5px;\n }\n }\n\n &.push-down {\n background-color: rgba(black, 0.6);\n\n & > div {\n transform: scale(0.95, 0.95) translate3d(-10px, 0, 0);\n border-radius: 5px;\n }\n }\n\n &.fade-enter-active,\n &.fade-leave-active,\n &[data-extended-enter=\"true\"] {\n position: fixed;\n\n & > div {\n transition: transform 0.3s;\n }\n }\n &.fade-enter, &.fade-leave-to /* .fade-leave-active below version 2.1.8 */ {\n background-color: rgba(black, 0);\n\n & > div {\n transform: translate(100%, 0);\n }\n }\n\n &.fade-enter-active,\n &.fade-leave-active {\n z-index: 10000;\n }\n}\n","\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.split-view-controller {\n //background: $color-white-shade;\n position: relative;\n width: 100%;\n box-sizing: border-box;\n\n & > .master {\n flex-shrink: 0;\n flex-grow: 0;\n position: sticky;\n left: 0;\n top: 0;\n height: 100vh;\n height: calc(var(--vh, 1vh) * 100);\n\n overflow: hidden;\n overflow-y: scroll;\n -webkit-overflow-scrolling: touch;\n\n // do not start scrolling parents if we reached the edge of this view\n // we'll need to add a polyfill for Safari in JS to disable overscroll (currently not available)\n overscroll-behavior-y: contain;\n\n &:last-child {\n position: relative;\n overflow: visible;\n width: 100%;\n height: auto;\n }\n }\n\n & > .detail {\n /*background: $color-white;\n border-top-left-radius: $border-radius;\n border-bottom-left-radius: $border-radius;*/\n\n // Clip contents (during animations)\n // Sometimes not working on iOS (need to fix)\n // clip-path: inset(0px 0px);\n\n // @extend .style-side-view-shadow;\n }\n\n // Make sure our background color etc fills the whole view\n min-height: 100vh;\n min-height: calc(var(--vh, 1vh) * 100);\n\n &[data-has-detail=\"true\"] {\n display: grid;\n grid-template-columns: 320px 1fr;\n grid-template-columns: var(--split-view-width, 320px) 1fr;\n\n & > .master {\n min-width: 0;\n }\n\n & > .detail {\n min-width: 0;\n min-height: 100vh;\n min-height: calc(var(--vh, 1vh) * 100);\n }\n }\n}\n"],"sourceRoot":""}
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@simonbackx/vue-app-navigation",
3
3
  "main": "./dist/main.js",
4
4
  "types": "./dist/index.d.ts",
5
- "version": "1.21.0",
5
+ "version": "1.22.0",
6
6
  "sideEffects": [
7
7
  "*.vue",
8
8
  "*.css"