vcomply-design-system 1.0.0

package/css-build/less/popover/popover.less

@@ -0,0 +1,273 @@
+@import url('../mixin/mixin.less');
+
+.vx-popover {
+    width     : 220px;
+    box-shadow: 0px 3px 6px #1c5bd140;
+
+    ul.popover-items {
+        padding          : 0;
+        margin           : 0;
+        display          : block;
+        -webkit-animation: scale-up-center .2s cubic-bezier(.39, .575, .565, 1) both;
+        animation        : scale-up-center .2s cubic-bezier(.39, .575, .565, 1) both;
+        background       : @white;
+        box-shadow       : 0 3px 6px rgb(28 91 209 / 25%);
+        border-radius    : 4px;
+        max-height       : 220px;
+        overflow         : auto;
+
+        li {
+            list-style     : none;
+            border         : none;
+            border-bottom  : 1px solid @greyMain;
+            display        : block;
+            width          : 100%;
+            padding        : 0;
+            background     : transparent;
+            border-radius  : 0;
+            margin         : 0;
+            height         : auto;
+            justify-content: flex-start;
+            box-shadow     : none;
+
+            button {
+                color          : @lightText;
+                text-align     : left;
+                text-decoration: none;
+                cursor         : pointer;
+                background     : transparent;
+                font-size      :12px;
+                text-transform : capitalize;
+                display        : flex;
+                width          : 100%;
+                padding        : 8px 12px;
+                border         : none;
+                margin         : 0;
+
+                i {
+                    font-size   : 17px;
+                    margin-right: 10px;
+                    color       : @primaryBlue;
+                }
+
+                &:hover {
+                    background: @greyMain;
+                }
+            }
+
+            .avatar-card {
+                display    : flex;
+                align-items: center;
+                width      : 100%;
+                padding    : 8px;
+
+                &.within-con {
+                    display: block;
+                }
+
+                .avatar {
+                    height         : 24px;
+                    width          : 24px !important;
+                    overflow       : hidden;
+                    background     : @primaryBlue;
+                    color          : @white;
+                    font-size      : 10px;
+                    display        : inline-flex;
+                    margin-right   : 4px;
+                    border-radius  : 50%;
+                    align-items    : center;
+                    justify-content: center;
+                    text-transform : uppercase;
+
+                    img {
+                        width: 100%;
+                    }
+
+                    &+span.value {
+                        width: calc(100% - 28px);
+                    }
+                }
+
+                span {
+                    &.value {
+                        width             : 100%;
+                        color             : #6E717E;
+                        text-decoration   : none;
+                        // cursor         : pointer;
+                        background        : transparent;
+                        font-size         :12px;
+                        text-transform    : capitalize;
+                        display           : block;
+                        font-weight       : 400;
+                        text-align-last   : left;
+                        white-space       : nowrap;
+                        overflow          : hidden;
+                        text-overflow     : ellipsis;
+                        line-height       : 20px;
+
+                        i {
+                            font-size   : 8px;
+                            color       : #1C5BD1;
+                            cursor      : pointer;
+                            margin-right: 4px;
+                        }
+                    }
+                }
+
+                &.no-image {
+                    display: block;
+
+                    span.value {
+                        width  : 100%;
+                        display: block;
+                    }
+                }
+            }
+
+            .chip-item {
+                color      : @primaryBlue;
+                padding    : 10px;
+                display    : flex;
+                align-items: center;
+
+                i {
+                    margin-right: 8px;
+                    font-size   : 10px;
+                    cursor      : pointer;
+                    display     : inline-flex;
+                }
+
+                span {
+                    display      : block;
+                    width        : auto;
+                    max-width    : calc(100% - 16px);
+                    font-size    :12px;
+                    font-weight  : 500;
+                    white-space  : nowrap;
+                    overflow     : hidden;
+                    text-overflow: ellipsis;
+
+                    &.chip-block {
+                        display: block;
+                        width  : 100%;
+                    }
+
+                    &.id {
+                        font-size: 8px;
+                    }
+                }
+            }
+
+            .within {
+                display        : flex;
+                align-items    : center;
+                justify-content: flex-start;
+
+                .block {
+                    background    : @greyMain;
+                    border-radius : 2px;
+                    padding       : 0 2px;
+                    line-height   : 14px;
+                    font-size     : 10px;
+                    font-weight   : 500;
+                    color         : @within;
+                    margin-right  : 6px;
+                    display       : block;
+                    text-transform: uppercase;
+                }
+
+                .data {
+                    width        : 100%;
+                    display      : block;
+                    overflow     : hidden;
+                    text-overflow: ellipsis;
+                    white-space  : nowrap;
+                    color        : @lightText;
+                    font-size    : 11px;
+                    font-weight  : 400;
+                    line-height  : 17px;
+                }
+            }
+
+            &:first-child {
+                animation: action-list-open 0.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+            }
+
+            &:nth-child(2) {
+                animation: action-list-open 0.35s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+            }
+
+            &:nth-child(3) {
+                animation: action-list-open 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+            }
+
+            &:nth-child(4) {
+                animation: action-list-open .55s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+            }
+
+            &:nth-child(5) {
+                animation: action-list-open .65s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+            }
+
+            &:nth-child(6) {
+                animation: action-list-open .75s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+            }
+
+            &:nth-child(7) {
+                animation: action-list-open .85s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+            }
+
+            &:nth-child(8) {
+                animation: action-list-open .95s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+            }
+
+            &:nth-child(9) {
+                animation: action-list-open 1.05s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+            }
+
+            &:nth-child(10) {
+                animation: action-list-open 1.15s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+            }
+        }
+    }
+}
+
+@-webkit-keyframes scale-up-center {
+    0% {
+        -webkit-transform: scale(0.5);
+        transform        : scale(0.5);
+        opacity          : 0;
+    }
+
+    100% {
+        -webkit-transform: scale(1);
+        transform        : scale(1);
+        opacity          : 1;
+    }
+}
+
+@keyframes scale-up-center {
+    0% {
+        -webkit-transform: scale(0.5);
+        transform        : scale(0.5);
+        opacity          : 0;
+    }
+
+    100% {
+        -webkit-transform: scale(1);
+        transform        : scale(1);
+        opacity          : 1;
+    }
+}
+
+@keyframes action-list-open {
+    0% {
+        -webkit-transform: translateY(50px);
+        transform        : translateY(50px);
+    }
+
+    100% {
+        -webkit-transform: translateY(0);
+        transform        : translateY(0);
+    }
+}

package/css-build/less/quick-links/quick-links.less

@@ -0,0 +1,90 @@
+@import url('../mixin/mixin.less');
+.vx {
+    &-quick-links {
+        background: #fff;
+        border-top: 4px solid @primaryBlue;
+        border-radius: 5px;
+        position: absolute;
+        transition: all .5s ease-in-out;
+        width: 328px;
+        top: calc(100% + 12px);
+        box-shadow: 0 0 10px rgb(30 93 211 / 27%);
+        right: -72px;
+        z-index: 2;
+        padding: 0;
+        &:before {
+            border-bottom: 8px solid @primaryBlue;
+            content: "";
+            position: absolute;
+            width: 0;
+            height: 0;
+            border-left: 8px solid transparent;
+            border-right: 8px solid transparent;
+            right: 52px;
+            top: -10px;
+        }
+        ul {
+            padding: 0;
+            margin: 0;
+            list-style: none;
+            li {
+                border-bottom: 1px solid @greyMain;
+                a {
+                    padding:12px;
+                    text-decoration: none;
+                    align-items: center;
+                    display: flex;
+                    span {
+                        display: block;
+                        &.icon {
+                            width: 44px;
+                            height: 44px;
+                            display: flex;
+                            border-radius: 4px;
+                            align-items: center;
+                            justify-content: center;
+                            margin-right: 8px;
+                            background: @greyMain;
+                            img {
+                                width: 36px;
+                                height: 36px;
+                            }
+                        }
+                        &.text {
+                            span {
+                                &.title {
+                                    font-size: 14px;
+                                    color: @darkText;
+                                    margin: 0;
+                                    font-weight: 500;
+                                    text-transform: uppercase;
+                                    transition: all 0.2s ease-in-out;
+                                }
+                                &.paragraph {
+                                    font-size:12px;
+                                    color: @darkText;
+                                    transition: all 0.2s ease-in-out;
+                                    margin: 0;
+                                    font-weight: 400;
+                                }
+                            }
+                            
+                        }
+                    }
+                }
+                &:hover {
+                    a {
+                        span.text span {
+                            &.title, &.paragraph {
+                                color: @primaryBlue;
+                            }                            
+                        }
+                    }
+                }
+                &:last-child {
+                    border-bottom: none;
+                }
+            }
+        }
+    }
+}