@nomios/web-uikit/dist/components/modals/flow-modal/FlowModalContents.css

Nomios' living web UIKit

/*
  Note: If you add a color here, please add it to "/stories/base/colors.css" as well
*/

@keyframes emptyToHalf {
    from { width: 0%; }
    to { width: 100%; }
}

@keyframes hideToRight {
    from { transform: translateX(0%); }
    to { transform: translateX(100%); }
}

@keyframes hideToLeft {
    from { transform: translateX(0%); }
    to { transform: translateX(-100%); }
}

@keyframes showFromRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0%); }
}

@keyframes showFromLeft {
    from { transform: translateX(-100%); }
    to { transform: translateX(0%); }
}

@keyframes rightHalfBorderedToWideExiting {
    from { width: 100%; }
    to { width: 0%; }
}

@keyframes leftHalfBorderedToWideExiting {
    from { flex-grow: 1; }
    to { flex-grow: 0; }
}

@keyframes halfBorderedToWideEntering {
    from { width: 0%; }
    to { width: 74%; }
}

.logoWrapper {
    position: absolute;
    z-index: 10;
    padding-top: 7.5rem;
    padding-left: 7rem;
    opacity: 0;
    transition: opacity 0.1s ease
}

.logoWrapper.visible {
        opacity: 1;
        transition: opacity 0.5s ease;
    }

.logoWrapper .logo {
        font-size: 0.7rem;
        fill: #d4b58b;
    }

.flowModalContents {
    will-change: opacity;
    display: flex;
    background: #fff;
    transition: opacity 0.2s ease-out
}

.flowModalContents.out {
        opacity: 0;
    }

.flowModalContents .modalClose {
        margin-top: 0;
        transform: rotate(0);
        opacity: 0;
        transition:
            margin 0.2s ease,
            transform 0.2s ease
    }

.flowModalContents .modalClose.visible {
            transform: rotate(90deg);
            opacity: 1;
        }

.flowModalContents .modalClose.halfBorderedPosition {
            margin-top: 2rem;
        }

.flowModalContents .closeIcon {
        transition:
            fill-opacity 0.3s ease,
            fill 0.3s ease
    }

.flowModalContents .closeIcon.whiteColored {
            fill: #fff;
        }

.flowModalContents.halfPanel .step {
            width: 100%;
            opacity: 0;
            transition: opacity 0.5s ease
        }

.flowModalContents.halfPanelBordered .step {
            width: 100%;
            opacity: 0;
            transition: opacity 0.5s ease
        }

.flowModalContents.fullPanel .step {
            width: 100%;
            opacity: 0;
            transition: opacity 0.5s ease
        }

.flowModalContents.halfPanel .step.active, .flowModalContents.halfPanelBordered .step.active, .flowModalContents.fullPanel .step.active {
                z-index: 2;
                opacity: 1;
            }

.flowModalContents.halfPanel .step, .flowModalContents.halfPanelBordered .step {
            height: 100%;
        }

.flowModalContents.halfPanel .left, .flowModalContents.halfPanelBordered .left {
            min-width: 33.4rem;
            flex-grow: 1;
        }

.flowModalContents.halfPanel .right, .flowModalContents.halfPanelBordered .right {
            width: 50%;
            min-width: 64rem;
        }

.flowModalContents.halfPanel {
        justify-content: flex-end
    }

.flowModalContents.halfPanel .left {
            background: #334a43
        }

.flowModalContents.halfPanel .left.emptyToHalf {
                position: relative;
                background: transparent
            }

.flowModalContents.halfPanel .left.emptyToHalf::after {
                    content: "";
                    position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    width: 100%;
                    background: #334a43;
                    animation: emptyToHalf 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
                }

.flowModalContents.halfPanel .left.halfToFullExiting {
                animation: hideToLeft 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
            }

.flowModalContents.halfPanel .left.fullToHalfEntering {
                animation: showFromLeft 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
            }

.flowModalContents.halfPanelBordered .left.halfBorderedToWideExiting {
                animation: leftHalfBorderedToWideExiting 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
            }

.flowModalContents.halfPanelBordered .right {
            margin: 2rem 0;
            background: #334a43
        }

.flowModalContents.halfPanelBordered .right.halfBorderedToWideExiting {
                position: relative;
                background: transparent
            }

.flowModalContents.halfPanelBordered .right.halfBorderedToWideExiting::after {
                    content: "";
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    background: #334a43;
                    animation: rightHalfBorderedToWideExiting 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
                }

.flowModalContents.halfPanelBordered .right.emptyToHalf {
                position: relative;
                background: transparent
            }

.flowModalContents.halfPanelBordered .right.emptyToHalf::after {
                    content: "";
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    background: #334a43;
                    animation: emptyToHalf 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
                }

.flowModalContents.halfPanelBordered .right.halfBorderedToFullExiting {
                animation: hideToRight 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
            }

.flowModalContents.halfPanelBordered .right.fullToHalfBorderedEntering {
                animation: showFromRight 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
            }

.flowModalContents.widePanel .left {
            width: 26%;
            min-width: 33.4rem;
        }

.flowModalContents.widePanel .right {
            position: relative;
            width: 74%;
            height: 100%
        }

.flowModalContents.widePanel .right.wideToFullExiting {
                animation: hideToRight 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
            }

.flowModalContents.widePanel .right.stepNotVisible {
                z-index: 1
            }

.flowModalContents.widePanel .right.stepNotVisible::after {
                    content: "";
                    position: absolute;
                    top: 2rem;
                    right: 0;
                    bottom: calc(2rem * 2);
                    left: 0;
                    background: #fff;
                }

.flowModalContents.widePanel .right.halfBorderedToWideEntering {
                animation: halfBorderedToWideEntering 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
            }

.flowModalContents.widePanel .right.fullToWideEntering {
                animation: showFromRight 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
            }

.flowModalContents.widePanel .right .wideStepsWrapper {
                position: relative;
                width: 100%;
                height: 100%;
                z-index: 2;
                opacity: 0;
                transition: opacity 0.5s ease
            }

.flowModalContents.widePanel .right .wideStepsWrapper.active {
                    opacity: 1;
                }

.flowModalContents.widePanel .right .wideStepsWrapper .step {
                    width: calc(100% - 2rem);
                    height: calc(100% - 3 * 2rem);
                    margin-top: 2rem;
                    margin-right: 2rem;
                    background: #334a43;
                    transition:
                        transform 1.2s cubic-bezier(0.23, 1, 0.32, 1),
                        width 1.2s cubic-bezier(0.23, 1, 0.32, 1),
                        background 1.2s cubic-bezier(0.23, 1, 0.32, 1)
                }

.flowModalContents.widePanel .right .wideStepsWrapper .step.fullWidth {
                        width: 100%;
                        background: #fff;
                    }

.flowModalContents.widePanel .right .wideStepsWrapper .step.active {
                        width: 100%;
                        background: #fff;
                    }

.flowModalContents.widePanel .right .wideStepsWrapper .step.translateUp {
                        transform: translateY(2rem);
                    }

.flowModalContents.fullPanel .step {
            height: 100%;
        }

.flowModalContents.fullPanel .left {
            width: 100%;
            background: #334a43
        }

.flowModalContents.fullPanel .left.halfToFullEntering {
                animation: showFromLeft 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
            }

.flowModalContents.fullPanel .left.fullToHalfExiting {
                animation: hideToLeft 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
            }

.flowModalContents.fullPanel .left.advanced {
                width: 0%;
                background: transparent;
            }

.flowModalContents.fullPanel .right {
            width: 0%
        }

.flowModalContents.fullPanel .right.advanced {
                width: 100%;
                background: #334a43
            }

.flowModalContents.fullPanel .right.advanced.wideToFullEntering {
                    animation: showFromRight 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
                }

.flowModalContents.fullPanel .right.advanced.halfBorderedToFullEntering {
                    animation: showFromRight 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
                }

.flowModalContents.fullPanel .right.advanced.fullToWideExiting {
                    animation: hideToRight 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
                }

.flowModalContents.fullPanel .right.advanced.fullToHalfBorderedExiting {
                    animation: hideToRight 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
                }