@rabbitio/ui-kit 1.0.0-beta.43 → 1.0.0-beta.46

package/src/components/organisms/Dialog/DialogStep/dialog-step.module.scss

@@ -0,0 +1,362 @@
+@import "../../../../../styles/index";
+
+@import "../dialog.module";
+
+.dialog-step {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding: 0;
+    display: block;
+    width: 100%;
+    opacity: 0;
+    pointer-events: none;
+    user-select: none;
+    transition: all $transitionDuration $transitionEaseOut;
+    transition-delay: 0s;
+    @extend %white-box-big-padding;
+    max-height: 100%;
+
+    @media (min-width: $tablet-width) {
+        overflow: hidden;
+    }
+
+    &.single-step {
+        position: relative;
+        top: 0;
+        left: 0;
+        width: 100%;
+    }
+
+    &.current {
+        opacity: 1;
+        pointer-events: auto;
+        user-select: auto;
+        transition-delay: $transitionDuration * 4;
+        max-height: none;
+        overflow: visible;
+    }
+
+    &.with-background {
+        @media (max-width: $tablet-width) {
+            min-height: 100vh;
+        }
+    }
+
+    &.prev,
+    &.next {
+        opacity: 0;
+    }
+
+    &.animation-disabled {
+        transition: none;
+        transition-delay: 0s;
+    }
+
+    &-background-image {
+        position: absolute;
+        transition: inherit;
+        transition-delay: inherit;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        border-radius: $borderRadius;
+        overflow: hidden;
+
+        @media (max-width: $tablet-width) {
+            border-radius: 0;
+        }
+
+        &-desktop,
+        &-mobile {
+            position: relative;
+            object-fit: cover;
+            transition: inherit;
+            transition-delay: inherit;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+
+            &.prev {
+                transform: translateX(-5px) scale(1.05);
+            }
+
+            &.current {
+                transform: translateX(0px) scale(1.05);
+            }
+
+            &.next {
+                transform: translateX(5px) scale(1.05);
+            }
+        }
+
+        &-desktop {
+            display: block;
+
+            @media (max-width: $phone-width) {
+                display: none;
+
+                &.primary {
+                    display: block;
+                }
+            }
+        }
+
+        &-mobile {
+            display: none;
+
+            &.primary {
+                display: block;
+            }
+
+            @media (max-width: $phone-width) {
+                display: block;
+            }
+        }
+    }
+
+    &-wrapper {
+        padding: 40px;
+
+        @media (max-width: $phone-width) {
+            padding: 20px 20px max(20px, env(safe-area-inset-bottom)) 20px;
+        }
+
+        &.prev {
+            animation: slideToLeft $transitionDuration $transitionEaseOut 0s;
+            animation-fill-mode: both;
+        }
+
+        &.next {
+            animation: slideToRight $transitionDuration $transitionEaseOut 0s;
+            animation-fill-mode: both;
+        }
+
+        &.current {
+            &.appear-from-left {
+                animation: slideFromLeft $transitionDuration $transitionEaseOut
+                    $transitionDuration * 4;
+                animation-fill-mode: both;
+            }
+
+            &.appear-from-right {
+                animation: slideFromRight $transitionDuration $transitionEaseOut
+                    $transitionDuration * 4;
+                animation-fill-mode: both;
+            }
+        }
+
+        @keyframes slideFromLeft {
+            0% {
+                transform: translateX(-20px);
+            }
+
+            100% {
+                transform: translateX(0px);
+            }
+        }
+
+        @keyframes slideFromRight {
+            0% {
+                transform: translateX(20px);
+            }
+
+            100% {
+                transform: translateX(0px);
+            }
+        }
+
+        @keyframes slideToLeft {
+            0% {
+                transform: translateX(0px);
+            }
+
+            100% {
+                transform: translateX(-20px);
+            }
+        }
+
+        @keyframes slideToRight {
+            0% {
+                transform: translateX(0px);
+            }
+
+            100% {
+                transform: translateX(20px);
+            }
+        }
+
+        &-back-button {
+            margin-left: -3px;
+            display: flex;
+            justify-content: flex-start;
+            margin-bottom: Margin("2");
+        }
+
+        &-header {
+            max-width: 377px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            margin: 0 auto;
+            position: relative;
+            font-family: NunitoSans;
+
+            &.text-left {
+                max-width: 100%;
+                margin: 0;
+                align-items: flex-start;
+            }
+
+            &.with-background-image {
+                max-width: 100%;
+                padding-top: 20px;
+            }
+
+            &-logo {
+                width: 130px;
+                @extend .mt-sm-5;
+                @extend .mt-10;
+            }
+
+            &-title {
+                display: flex;
+                justify-content: flex-start;
+                align-items: center;
+                @extend .mt-6;
+                @extend .mb-2;
+
+                &.without-logo {
+                    margin-top: 0;
+                }
+
+                &.close-button-padding {
+                    padding-right: 58px;
+
+                    @media (max-width: $tablet-width) {
+                        padding-right: 46px;
+                    }
+                }
+
+                &.no-close-button-padding {
+                    padding-right: 0;
+                }
+
+                &-icon,
+                &-coin-icon {
+                    margin-right: Margin("3");
+                    display: flex;
+                    align-items: center;
+                }
+
+                &-icon img {
+                    height: 30px;
+                }
+
+                &-loading {
+                    margin-right: 15px;
+
+                    @media (max-width: $phone-width) {
+                        margin-right: 10px;
+                    }
+                }
+
+                &-text {
+                    &-content {
+                        color: SolidColor(dark);
+                        text-align: center;
+                        font-weight: bold;
+                        display: flex;
+                        justify-content: flex-start;
+                        align-items: flex-start;
+
+                        &.without-logo {
+                            text-align: left;
+                            @include typograpy("h3");
+                            position: relative;
+
+                            @media (max-width: $phone-width) {
+                                font-size: 20px;
+                                line-height: 30px;
+                            }
+                        }
+
+                        &.white {
+                            color: $white;
+                        }
+                    }
+                }
+            }
+
+            &-text {
+                @include typograpy("p");
+                max-width: 100%;
+                text-align: center;
+                color: SolidColor("grey");
+                margin-bottom: Margin("10");
+                word-break: normal;
+
+                &.break-words {
+                    word-break: break-all;
+                }
+
+                &.text-left {
+                    text-align: left;
+                }
+
+                &.small-margin {
+                    margin-bottom: Margin("7");
+                }
+
+                &.no-margin {
+                    margin-bottom: 0;
+                }
+
+                &.white {
+                    color: $white;
+                }
+            }
+        }
+        &-content {
+            display: flex;
+            flex-direction: column;
+            justify-self: flex-start;
+            position: relative;
+
+            &.align-left {
+                align-items: flex-start;
+            }
+            &.align-center {
+                align-items: center;
+            }
+            &.align-right {
+                align-items: flex-end;
+            }
+        }
+        &-buttons {
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            margin-top: Margin("7");
+            gap: Margin("7");
+
+            @media (max-width: $phone-width) {
+                margin-top: Margin("5");
+            }
+
+            &.big-margin {
+                margin-top: Margin("10");
+
+                @media (max-width: $phone-width) {
+                    margin-top: Margin("7");
+                }
+            }
+
+            &.no-margin {
+                margin-top: 0;
+            }
+        }
+    }
+}

package/src/components/organisms/Dialog/dialog.module.scss

@@ -0,0 +1,223 @@
+@import "../../../../styles/index";
+
+$transitionDuration: 0.2s;
+
+.dialog {
+    @extend %black-window;
+    z-index: 9 !important;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    overflow-y: auto;
+    overflow-x: hidden;
+    opacity: 1;
+    backdrop-filter: blur(5px);
+
+    @media (max-width: $tablet-width) {
+        backdrop-filter: none;
+        background: $white;
+        align-items: flex-start;
+        overflow: hidden;
+        flex-direction: column;
+        justify-content: flex-start;
+    }
+
+    &.hidden {
+        opacity: 0;
+    }
+
+    &.vertical-overflow-disabled {
+        overflow-y: hidden;
+    }
+
+    &.inline {
+        position: relative;
+        background: none;
+        overflow: visible;
+        width: auto;
+        height: auto;
+        backdrop-filter: none;
+    }
+
+    &.dialog-transition {
+        &-enter {
+            opacity: 0;
+
+            .scrollable {
+                transform: scale(0.95) translateY(-15px);
+            }
+        }
+
+        &-enter-active {
+            opacity: 1;
+            transition: opacity $transitionDuration ease;
+
+            .scrollable {
+                transform: scale(1) translateY(0vh);
+                transition: transform $transitionDuration ease;
+            }
+        }
+
+        &-exit {
+            opacity: 1;
+
+            .scrollable {
+                transform: scale(1) translateY(0vh);
+            }
+        }
+
+        &-exit-active {
+            opacity: 0;
+            transition: opacity $transitionDuration ease;
+
+            .scrollable {
+                transform: scale(0.98) translateY(10px);
+                transition: transform $transitionDuration ease;
+            }
+        }
+    }
+
+    .scrollable {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0 auto;
+        width: 100%;
+        -webkit-overflow-scrolling: auto !important;
+
+        @media (max-width: $tablet-width) {
+            margin: 0;
+            flex: 1 1;
+            align-items: start;
+
+            &:not(.inline) {
+                overflow-y: auto;
+                overflow-x: hidden;
+            }
+        }
+    }
+
+    .fixed-buttons-container {
+        background-color: $white;
+        width: 100vw;
+        padding: 20px 20px max(20px, env(safe-area-inset-bottom)) 20px;
+        opacity: 1;
+        box-shadow:
+            0px 0px 3px 3px $white,
+            0px 0px 10px 5px $white;
+        z-index: 0;
+
+        @media (min-width: $phone-width) {
+            padding: 20px 40px 40px 40px;
+        }
+
+        &-enter {
+            display: none;
+            opacity: 0;
+            transition: none;
+        }
+
+        &-enter-active {
+            display: block;
+            opacity: 0;
+            transition: opacity $transitionDuration $transitionEaseOut;
+        }
+
+        &-enter-done,
+        &-exit {
+            opacity: 1;
+            transition: opacity $transitionDuration $transitionEaseOut;
+        }
+
+        &-exit-active {
+            display: block;
+            opacity: 0;
+            transition: opacity $transitionDuration $transitionEaseOut;
+        }
+
+        &-exit-done {
+            display: none;
+            opacity: 0;
+            transition: none;
+        }
+
+        @media (min-width: $tablet-width) {
+            display: none;
+
+            &-enter,
+            &-enter-active,
+            &-enter-done,
+            &-exit,
+            &-exit-active,
+            &-exit-done {
+                display: none;
+            }
+        }
+    }
+
+    &-wrapper {
+        position: relative;
+        width: 100%;
+        max-width: 550px;
+        box-shadow: 0 40px 30px 0 rgba(27, 45, 68, 0.2);
+        margin: Margin("5");
+        transition: all $transitionDuration $transitionEaseOut;
+        transition-delay: $transitionDuration;
+        background: $white;
+        border-radius: $borderRadius;
+
+        @media (min-width: $tablet-width) {
+            overflow: hidden;
+        }
+
+        @media (max-width: $tablet-width) {
+            margin: 0;
+
+            &:not(.inline) {
+                box-shadow: none;
+                min-width: 100vw;
+                backdrop-filter: blur(5px);
+                border-radius: 0;
+            }
+        }
+
+        &.inline {
+            margin: 0;
+            width: 100%;
+            min-width: auto;
+        }
+
+        &.animation-disabled {
+            transition: none;
+            transition-delay: 0s;
+            overflow: visible;
+        }
+
+        &.wide {
+            max-width: 1014px;
+        }
+
+        &-rah-content {
+            display: block !important;
+        }
+
+        &-controls-top-padding {
+            width: 100%;
+            display: block;
+            height: 20px;
+        }
+
+        &-close {
+            position: absolute;
+            top: 40px;
+            right: 40px;
+            z-index: 2;
+
+            @media (max-width: $phone-width) {
+                top: 20px;
+                right: 20px;
+            }
+        }
+    }
+}