paris 0.23.0 → 0.24.0

package/src/stories/drawer/Drawer.module.scss

@@ -1,479 +0,0 @@
-$translateInX: 30%;
-$translateInY: 100%;
-$translateOutX: 20%;
-$translateOutY: 60%;
-
-$panelMinMargin: 30px;
-$defaultSize: 360px + $panelMinMargin;
-$panelPaddingX: 20px;
-$panelPaddingY: 20px;
-
-$duration: var(--pte-animations-duration-relaxed);
-$paginationDuration: var(--pte-animations-duration-normal);
-$panelAnimationDelay: var(--pte-animations-duration-fast);
-
-.root {
-    position: fixed;
-    inset: 0;
-    overflow: hidden;
-    z-index: var(--pte-new-layers-overlay);
-    user-select: var(--pte-utils-defaultUserSelect);
-}
-
-.overlay {
-    position: absolute;
-    inset: 0;
-
-    &.overlayBlur {
-        backdrop-filter: blur(2px);
-        background-color: var(--pte-new-colors-overlayPageBackground);
-        will-change: backdrop-filter, opacity;
-    }
-
-    &.overlayGrey {
-        //background-color: rgba(175, 175, 175, 0); // Non-transparent backgroundOverlayGrey (for start animation)
-        background-color: var(--pte-new-colors-overlayPageBackground);
-        will-change: opacity;
-    }
-}
-
-.overlayBlurContainer {
-    .enterFrom {
-        backdrop-filter: blur(0);
-        opacity: 0;
-    }
-    .enterTo {
-        backdrop-filter: blur(2px);
-        opacity: 1;
-    }
-    .leave {
-        transition-delay: $panelAnimationDelay;
-    }
-    .leaveFrom {
-        backdrop-filter: blur(2px);
-        opacity: 1;
-    }
-    .leaveTo {
-        backdrop-filter: blur(0);
-        opacity: 0;
-    }
-}
-
-.overlayGreyContainer {
-    .enterFrom {
-        opacity: 0;
-    }
-    .enterTo {
-        opacity: 1;
-    }
-    .leave {
-        transition-delay: $panelAnimationDelay;
-    }
-    .leaveFrom {
-        opacity: 1;
-    }
-    .leaveTo {
-        opacity: 0;
-    }
-
-}
-
-.panelContainer {
-    position: fixed;
-
-    justify-self: flex-end;
-
-    z-index: var(--pte-new-layers-overlay);
-
-    .enter {
-        transition: $duration var(--pte-animations-timing-easeOutQuad);
-        transition-delay: $panelAnimationDelay;
-        //transition-delay: 50ms;
-    }
-
-    .leave {
-        transition: $duration var(--pte-animations-timing-easeInQuad);
-    }
-
-    &.from-right {
-        right: 0;
-
-        &.size-content, &.size-fullWithMargin {
-            padding-left: $panelMinMargin;
-        }
-        @media (min-width: 371px) {
-            &.size-default {
-                padding-left: $panelMinMargin;
-            }
-        }
-        @media (min-width: 481px) {
-            &.size-fullOnMobile {
-                padding-left: $panelMinMargin;
-            }
-        }
-
-        .enterFrom {
-            transform: translateX($translateInX);
-        }
-
-        .enterTo, .leaveFrom {
-            transform: translateX(0);
-        }
-
-        .leaveTo {
-            transform: translateX($translateOutX);
-        }
-    }
-
-    &.from-left {
-        left: 0;
-
-        &.size-content, &.size-fullWithMargin {
-            padding-right: $panelMinMargin;
-        }
-        @media (min-width: 371px) {
-            &.size-default {
-                padding-right: $panelMinMargin;
-            }
-        }
-        @media (min-width: 481px) {
-            &.size-fullOnMobile {
-                padding-right: $panelMinMargin;
-            }
-        }
-
-        .enterFrom {
-            transform: translateX(-$translateInX);
-        }
-
-        .enterTo, .leaveFrom {
-            transform: translateX(0);
-        }
-
-        .leaveTo {
-            transform: translateX(-$translateOutX);
-
-        }
-    }
-
-
-    &.from-left, &.from-right {
-        height: 100dvh;
-        top: 0;
-        bottom: 0;
-
-        @media (min-width: 371px) {
-            &.size-default {
-                width: min(100vw, $defaultSize);
-            }
-        }
-        @media (max-width: 370px) {
-            &.size-default {
-                width: 100vw;
-            }
-        }
-        @media (min-width: 481px) {
-            &.size-fullOnMobile {
-                width: min(100vw, $defaultSize);
-            }
-        }
-        @media (max-width: 480px) {
-            &.size-fullOnMobile {
-                width: 100vw;
-            }
-        }
-        &.size-content {
-            width: auto;
-        }
-        &.size-full, &.size-fullWithMargin {
-            width: 100vw;
-        }
-    }
-
-    &.from-top {
-        top: 0;
-
-        &.size-content, &.size-fullWithMargin, &.size-default {
-            padding-bottom: $panelMinMargin;
-        }
-        @media (min-width: 481px) {
-            &.size-fullOnMobile {
-                padding-bottom: $panelMinMargin;
-            }
-        }
-
-        .enterFrom {
-            transform: translateY(-$translateInY);
-        }
-
-        .enterTo, .leaveFrom {
-            transform: translateY(0);
-        }
-
-        .leaveTo {
-            transform: translateY(-$translateOutY);
-        }
-    }
-
-    &.from-bottom {
-        bottom: 0;
-
-        &.size-content, &.size-fullWithMargin, &.size-default {
-            padding-top: $panelMinMargin;
-        }
-        @media (min-width: 481px) {
-            &.size-fullOnMobile {
-                padding-top: $panelMinMargin;
-            }
-        }
-
-        .enterFrom {
-            transform: translateY($translateInY);
-        }
-
-        .enterTo, .leaveFrom {
-            transform: translateY(0);
-        }
-
-        .leaveTo {
-            transform: translateY($translateOutY);
-        }
-    }
-
-    &.from-top, &.from-bottom {
-        width: 100vw;
-        left: 0;
-        right: 0;
-
-        &.size-default {
-            height: min(100dvh, $defaultSize);
-        }
-        @media (min-width: 481px) {
-            &.size-fullOnMobile {
-                height: min(100dvh, $defaultSize);
-            }
-        }
-        @media (max-width: 480px) {
-            &.size-fullOnMobile {
-                height: 100dvh;
-            }
-        }
-
-        &.size-content {
-            height: auto;
-        }
-
-        &.size-full, &.size-fullWithMargin {
-            height: 100dvh;
-        }
-    }
-}
-
-.panel {
-    position: relative;
-    height: 100%;
-    padding: 0;
-    background-color: var(--pte-new-colors-surfacePrimary);
-    overflow: auto;
-
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-
-    &.enterFrom {
-        box-shadow: none;
-    }
-
-    &.enterTo, &.leaveFrom {
-        &.from-right {
-            border-left-color: var(--pte-new-borders-dropdown-color);
-            box-shadow: var(--pte-new-lighting-shallowLeft);
-        }
-
-        &.from-left {
-            border-right-color: var(--pte-new-borders-dropdown-color);
-            box-shadow: var(--pte-new-lighting-shallowRight);
-        }
-
-        &.from-top {
-            border-bottom-color: var(--pte-new-borders-dropdown-color);
-            box-shadow: var(--pte-new-lighting-shallowBelow);
-        }
-
-        &.from-bottom {
-            border-top-color: var(--pte-new-borders-dropdown-color);
-            box-shadow: var(--pte-new-lighting-shallowAbove);
-        }
-    }
-
-    &.leaveTo {
-        box-shadow: none;
-    }
-}
-
-.titleTextContainer {
-    display: flex;
-}
-
-.titleBar {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-
-    border-bottom: 1px solid var(--pte-new-colors-borderMedium);
-    padding: 14px 16px;
-}
-
-.titleBarButtons {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 8px;
-}
-
-.actionMenu {}
-
-.closeButton {}
-
-.content {
-    overflow-y: scroll;
-    height: 100%;
-}
-
-.contentChildren {
-    padding: 20px;
-}
-
-.paginationButtons {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 8px;
-
-    .navButton {
-        padding: 2px;
-    }
-}
-
-.titleArea {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 12px;
-}
-
-.enter {
-    transition: $duration var(--pte-animations-timing-easeInOutExpo);
-}
-
-.enterFrom, .enterFromOpacity {
-    opacity: 0;
-}
-
-.enterTo, .enterToOpacity {
-    opacity: 1;
-}
-
-.leave {
-    transition: $duration var(--pte-animations-timing-easeInOutExpo);
-}
-
-.leaveFrom, .leaveFromOpacity {
-    opacity: 1;
-}
-
-.leaveTo, .leaveToOpacity {
-    opacity: 0;
-}
-
-.paginationEnter {
-    transition: $paginationDuration var(--pte-animations-timing-easeInQuad);
-}
-
-.paginationLeave {
-    transition: $paginationDuration var(--pte-animations-timing-easeOutQuad);
-}
-
-// Page transition containers
-.pageStack {
-    display: grid;
-    grid-template-columns: 1fr;
-    min-height: 0;
-}
-
-.pageStackClip {
-    overflow: hidden;
-}
-
-.pageStackItem {
-    grid-area: 1 / 1;
-
-    &[data-active='false'] {
-        pointer-events: none;
-    }
-}
-
-// Progress bar
-.progressBar {
-    position: relative;
-    width: 100%;
-    height: 2px;
-    background: var(--pte-new-colors-borderMedium);
-}
-
-.progressBarFill {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    background: var(--pte-new-colors-contentPrimary);
-    transition: width $paginationDuration var(--pte-animations-timing-easeInQuad);
-}
-
-.bottomPanel {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-}
-
-.bottomPanelSlots {
-    display: flex;
-    flex-direction: column;
-}
-
-.bottomPanelContent {
-    position: relative;
-    padding: 20px;
-
-    &.noPadding {
-        padding: 0;
-    }
-}
-
-.bottomPanelSlotItem {
-    border-top: 1px solid var(--pte-new-colors-borderStrong);
-    position: relative;
-    padding: 20px;
-}
-
-.bottomPanelSpacer {
-    opacity: 0;
-    pointer-events: none;
-}
-
-.glassBlend {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background: var(--pte-new-materials-secondaryThin-backgroundBlend);
-    mix-blend-mode: var(--pte-new-materials-secondaryThin-mixBlendMode);
-}
-.glassOpacity {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background: var(--pte-new-materials-secondaryThin-background);
-    backdrop-filter: var(--pte-new-blurs-strong);
-}