vcomply-design-system 1.0.0

package/css-build/less/smiley/smiley.less

@@ -0,0 +1,422 @@
+.vx-smiley {
+    &-popup {
+        background: #d93b41;
+        position  : relative;
+
+        &::before {
+            content                : "";
+            position               : absolute;
+            z-index                : 0;
+            background             : #fff;
+            top                    : 0;
+            right                  : 0;
+            bottom                 : 0;
+            left                   : 0;
+            transition-delay       : 1s;
+            border-top-right-radius: 0;
+            transition             : all .3s ease-in-out;
+        }
+
+        &.with-close {
+            &::before {
+                border-top-right-radius: 180px;
+            }
+        }
+
+        button {
+            &.close {
+                color     : #fff;
+                font-size : 22px;
+                position  : absolute;
+                top       : 14px;
+                right     : 20px;
+                z-index   : 10;
+                background: none;
+                border    : none;
+                padding   : 0;
+                cursor    : pointer;
+            }
+        }
+    }
+
+    &-container {
+        width   : 550px;
+        position: relative;
+        z-index : 10;
+
+        .vx-smiley {
+            display          : block;
+            width            : 550px;
+            height           : 250px;
+            overflow         : hidden;
+            position         : relative;
+            -webkit-animation: slide-fwd-center 0.45s cubic-bezier(0.680, -0.550, 0.265, 1.550) both;
+            animation        : slide-fwd-center 0.45s cubic-bezier(0.680, -0.550, 0.265, 1.550) both;
+            margin           : 0 auto 24px;
+
+            &::before {
+                position     : absolute;
+                background   : #ffedc5;
+                width        : 110px;
+                height       : 110px;
+                content      : "";
+                border-radius: 50%;
+                top          : 100px;
+                right        : 92px;
+            }
+
+            &::after {
+                position     : absolute;
+                background   : #ffbf15;
+                width        : 36px;
+                height       : 36px;
+                border-radius: 50%;
+                content      : "";
+                top          : 200px;
+                left         : 92px;
+            }
+
+            &-circle {
+                background   : #ffd83d;
+                border-radius: 100%;
+                padding      : 24px;
+                position     : relative;
+                width        : 250px;
+                height       : 250px;
+                margin       : 0 auto;
+                box-shadow   : inset -20px -14px 0 #f4c337;
+
+                &::before {
+                    width     : 24px;
+                    height    : 4px;
+                    background: #ffbf15;
+                    position  : absolute;
+                    content   : "";
+                    top       : 116px;
+                    left      : -66px;
+                }
+
+                &::after {
+                    width     : 4px;
+                    height    : 24px;
+                    background: #ffbf15;
+                    position  : absolute;
+                    content   : "";
+                    top       : 108px;
+                    left      : -56px;
+                }
+
+                &-inner {
+                    height: 182px;
+                    width : 100%;
+                    margin: 0 auto;
+
+                    .eyes {
+                        width     : 164px;
+                        margin    : 40px auto 0;
+                        box-sizing: border-box;
+                        padding   : 0 4px;
+                        transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
+
+                        &::before {
+                            width     : 4px;
+                            height    : 20px;
+                            background: #ffbf15;
+                            position  : absolute;
+                            content   : "";
+                            top       : 0;
+                            right     : -20px;
+                        }
+
+                        &::after {
+                            width     : 20px;
+                            height    : 4px;
+                            background: #ffbf15;
+                            position  : absolute;
+                            content   : "";
+                            top       : 8px;
+                            right     : -28px;
+                        }
+
+                        .eye {
+                            width        : 40px;
+                            height       : 40px;
+                            background   : #404549;
+                            float        : left;
+                            border-radius: 100%;
+                            overflow     : hidden;
+                            position     : relative;
+
+                            &::before {
+                                position     : absolute;
+                                width        : 10px;
+                                height       : 10px;
+                                content      : "";
+                                background   : #ffe9b0;
+                                border-radius: 50%;
+                                top          : 8px;
+                                left         : 1px;
+                            }
+
+                            &::after {
+                                display   : block;
+                                content   : "";
+                                position  : absolute;
+                                width     : 0;
+                                height    : 0;
+                                background: #fed800;
+                                transform : rotate(0deg);
+                                top       : -16px;
+                                left      : 4px;
+                                transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
+                            }
+
+                            &:nth-of-type(2) {
+                                float: right;
+                            }
+                        }
+                    }
+
+                    .mouth {
+                        border-top-left-radius    : 100px;
+                        border-top-right-radius   : 100px;
+                        border-bottom-left-radius : 100px;
+                        border-bottom-right-radius: 100px;
+                        height                    : 76px;
+                        width                     : 150px;
+                        margin                    : 0 auto;
+                        box-sizing                : border-box;
+                        position                  : absolute;
+                        left                      : 0;
+                        right                     : 0;
+                        background                : #404549;
+                        transition                : all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
+
+                        &::before {
+                            width        : 94px;
+                            height       : 94px;
+                            position     : absolute;
+                            opacity      : 0;
+                            bottom       : -508px;
+                            left         : -6px;
+                            background   : #ffd83d;
+                            content      : "";
+                            border-radius: 46px;
+                            transition   : all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
+                        }
+                    }
+                }
+
+                &.happy {
+                    .eyes {
+                        .eye {
+                            height    : 40px;
+                            margin-top: 0;
+                            animation : wink 3s infinite;
+                        }
+                    }
+
+                    .mouth {
+                        animation          : move-mouth-down .3s;
+                        animation-delay    : .3s;
+                        animation-fill-mode: forwards;
+                    }
+                }
+
+                &.sad {
+                    .eyes {
+                        .eye {
+                            animation: wink2 3s infinite;
+                        }
+                    }
+
+                    .vx-smiley-circle-inner {
+                        animation          : move-angry-head .6s;
+                        animation-delay    : .3s;
+                        animation-fill-mode: forwards;
+
+                        .mouth {
+                            width                     : 96px;
+                            height                    : 50px;
+                            border-top-left-radius    : 100px;
+                            border-top-right-radius   : 100px;
+                            border-bottom-left-radius : 0;
+                            border-bottom-right-radius: 0;
+                            top                       : 60px;
+
+                            &::before {
+                                background: #ffd83d;
+                                content   : "";
+                                bottom    : -66px;
+                                left      : 0;
+                                opacity   : 1;
+                                transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        h3 {
+            font-size  : 26px;
+            color      : #161b2f;
+            font-weight: 400;
+            margin     : 0 0 40px;
+        }
+
+        .successSmilyButton {
+            button {
+                width: 280px;
+            }
+        }
+    }
+}
+
+@-webkit-keyframes slide-fwd-center {
+    0% {
+        -webkit-transform: scale(0);
+        transform        : scale(0);
+    }
+
+    100% {
+        -webkit-transform: scale(1);
+        transform        : scale(1);
+    }
+}
+
+@keyframes slide-fwd-center {
+    0% {
+        -webkit-transform: scale(0);
+        transform        : scale(0);
+    }
+
+    100% {
+        -webkit-transform: scale(1);
+        transform        : scale(1);
+    }
+}
+
+@keyframes move-mouth-down {
+    0% {
+        border-top-left-radius    : 100px;
+        border-top-right-radius   : 100px;
+        border-bottom-left-radius : 100px;
+        border-bottom-right-radius: 100px;
+        height                    : 10%;
+        width                     : 40%;
+        bottom                    : 25%;
+        margin                    : 0 auto;
+        box-sizing                : border-box;
+        position                  : absolute;
+        bottom                    : 18%;
+        left                      : 0;
+        right                     : 0;
+        background                : #404549;
+        transition                : all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
+    }
+
+    100% {
+        width                     : 60%;
+        height                    : 30%;
+        border-top-left-radius    : 0;
+        border-top-right-radius   : 0;
+        border-bottom-left-radius : 100px;
+        border-bottom-right-radius: 100px;
+        box-sizing                : border-box;
+        position                  : absolute;
+        bottom                    : 18%;
+        background                : #404549;
+        transition                : all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
+    }
+}
+
+@keyframes wink {
+    0% {
+        height    : 40px;
+        margin-top: 0;
+    }
+
+    10% {
+        height    : 40px;
+        margin-top: 0;
+    }
+
+    15% {
+        height    : 4px;
+        margin-top: 18px;
+    }
+
+    20% {
+        height    : 40px;
+        margin-top: 0;
+    }
+
+    100% {
+        height    : 40px;
+        margin-top: 0;
+    }
+}
+
+@keyframes wink2 {
+    0% {
+        height    : 40px;
+        margin-top: 0;
+    }
+
+    10% {
+        height    : 40px;
+        margin-top: 0;
+    }
+
+    15% {
+        height    : 4px;
+        margin-top: 18px;
+    }
+
+    20% {
+        height    : 40px;
+        margin-top: 0;
+    }
+
+    100% {
+        height    : 40px;
+        margin-top: 0;
+    }
+}
+
+@keyframes move-angry-head {
+    0% {
+        transform: translateX(0%);
+    }
+
+    20% {
+        transform: translateX(-20%);
+    }
+
+    40% {
+        transform: translateX(15%);
+    }
+
+    60% {
+        transform: translateX(-10%);
+    }
+
+    80% {
+        transform: translateX(5%);
+    }
+
+    100% {
+        transform: translateX(0%);
+    }
+}
+
+h3 {
+    &.heading {
+        font-size    : 20px;
+        margin-top   : 10px;
+        font-weight  : 500;
+        margin-bottom: 10px;
+        padding-left : 20px;
+    }
+}

package/css-build/less/snack-bar/snack-bar.less

@@ -0,0 +1,86 @@
+@import url(../mixin/mixin.less);
+
+.vx-snack-bar {
+    border-radius   : 4px;
+    box-sizing      : border-box;
+    display         : block;
+    margin          : 24px;
+    max-width       : 33vw;
+    min-width       : 344px;
+    padding         : 14px 16px;
+    min-height      : 48px;
+    transform-origin: center;
+    box-shadow      : 0px 3px 5px -1px rgb(0 0 0 / 20%), 0px 6px 10px 0px rgb(0 0 0 / 14%), 0px 1px 18px 0px rgb(0 0 0 / 12%);
+
+    &-overlay {
+        position: fixed;
+        top     : 0;
+        right   : 0;
+        bottom  : 0;
+        left    : 0;
+        display : flex;
+
+        &.top-center {
+            justify-content: center;
+            align-items    : flex-start;
+        }
+
+        &.top-left {
+            justify-content: flex-start;
+            align-items    : flex-start;
+        }
+
+        &.top-right {
+            justify-content: flex-end;
+            align-items    : flex-start;
+        }
+
+        &.bottom-center {
+            justify-content: center;
+            align-items    : flex-end;
+        }
+
+        &.bottom-left {
+            justify-content: flex-start;
+            align-items    : flex-end;
+        }
+
+        &.bottom-right {
+            justify-content: flex-end;
+            align-items    : flex-end;
+        }
+    }
+
+    &-container {
+        display        : flex;
+        justify-content: space-between;
+        align-items    : center;
+        line-height    : 20px;
+    }
+
+    &-text {
+        margin     : 0;
+        padding    : 0;
+        font-size  :12px;
+        font-weight: 400;
+    }
+
+    &-action {
+        button {
+            font-size  :12px;
+            font-weight: 500;
+            line-height: 16px;
+            color      : #F6882F;
+        }
+    }
+
+    &.light {
+        background: #FFFFFF;
+        color     : #161B2F;
+    }
+
+    &.dark {
+        background: #161B2F;
+        color     : #FFFFFF;
+    }
+}