vcomply-design-system 1.0.0

package/css-build/less/forms/switch.less

@@ -0,0 +1,166 @@
+@import url(../mixin/mixin.less);
+
+label {
+    &.vx-switch {
+        position       : relative;
+        display        : inline-flex;
+        align-items    : center;
+        justify-content: space-between;
+        margin         : 0;
+        padding        : 0;
+
+        &.top {
+            align-items: flex-start;
+        }
+
+        span {
+            &.value {
+                font-size      : 12px;
+                color          : #161b2f;
+                font-weight    : 400;
+                display        : flex;
+                justify-content: space-between;
+                width          : calc(100% - 35px);
+                align-items    : flex-start;
+            }
+
+            &.switch {
+                position: relative;
+                display : block;
+                width   : 25px;
+                height  : 14px;
+                margin-left: 8px;
+
+                input {
+                    position: absolute;
+                    opacity : 0;
+                    margin  : 0;
+                    width   : 100%;
+                    height  : 100%;
+                    z-index : 1;
+                    cursor  : pointer;
+
+                    &:checked {
+                        &+span {
+                            &.switch {
+                                &-box {
+                                    background: @green;
+                                    border    : 1px solid @green;
+
+                                    .switch {
+                                        &-ball {
+                                            left: 13px;
+                                        }
+                                    }
+                                }
+                            }
+
+                        }
+                    }
+
+                    &:disabled {
+                        pointer-events: none;
+
+                        &+.switch-box {
+                            opacity: .5;
+                        }
+                    }
+                }
+
+                &-box {
+                    height       : 100%;
+                    width        : 100%;
+                    border-radius: 11px;
+                    background   : #BCBCBC;
+                    border       : 1px solid #BCBCBC;
+                    display      : block;
+                    transition   : all .2s ease-in-out;
+                }
+
+                &-ball {
+                    height       : 10px;
+                    width        : 10px;
+                    background   : #FFFFFF;
+                    border-radius: 50%;
+                    border       : 1px solid #FFFFFF;
+                    display      : block;
+                    position     : absolute;
+                    left         : 2px;
+                    top          : 2px;
+                    bottom       : 1px;
+                    transition   : all .2s ease-in-out;
+                }
+                &.blue {
+                    input {
+                        position: absolute;
+                        opacity : 0;
+                        margin  : 0;
+                        width   : 100%;
+                        height  : 100%;
+                        z-index : 1;
+                        cursor  : pointer;
+    
+                        &:checked {
+                            &+span {
+                                &.switch {
+                                    &-box {
+                                        background: @primaryBlue;
+                                        border    : 1px solid @primaryBlue;
+    
+                                        .switch {
+                                            &-ball {
+                                                left: 13px;
+                                            }
+                                        }
+                                    }
+                                }
+    
+                            }
+                        }
+    
+                        &:disabled {
+                            pointer-events: none;
+    
+                            &+.switch-box {
+                                opacity: .5;
+                            }
+                        }
+                    }
+                }
+            }
+
+            &.notification {
+                display    : inline-flex;
+                font-size  : 12px;
+                cursor     : pointer;
+                color      : #4681ef;
+                align-items: center;
+                line-height: 20px;
+                margin     : 0 10px;
+            }
+        }
+        &.label {
+            span {
+                &.value {
+                    white-space: nowrap;
+                }
+            }
+        }
+        &.lg {
+            span {
+                &.switch {
+                    width: 40px;
+                    min-width: 40px;
+                    height: 20px;
+                    input[type=checkbox]:checked + span.switch-box .switch-ball {
+                        left: 22px;
+                    }
+                }
+                &.switch-ball {
+                    height: 16px;
+                    width: 16px;
+                }
+            }
+        }
+    }
+}

package/css-build/less/header/header.less

@@ -0,0 +1,236 @@
+@import url('../mixin/mixin.less');
+@import url('../color/color.less');
+
+.vx {
+    &-header {
+
+        &.toggle {
+            .vx-header-top {
+                transition: all .2s ease-in-out;
+                left      : 60px;
+            }
+        }
+
+        &-top {
+            background   : @headerFade;
+            height       : 48px;
+            position     : sticky;
+            top          : 0;
+            right        : 0;
+            z-index      : 1;
+            padding-right: 12px;
+            transition   : all .2s ease-in-out;
+        }
+
+        &-bottom {
+            // margin-top: 12rem;
+            // height    : 25rem;
+            position: relative;
+
+            h1 {
+                position: relative;
+            }
+
+            &:before {
+                position  : absolute;
+                top       : 0;
+                right     : 0;
+                left      : 0;
+                height    : 100px;
+                content   : "";
+                background: @darkText;
+            }
+        }
+    }
+
+    &-search-block {
+        padding   : 6px 12px;
+        position  : relative;
+        width     : 350px;
+        transition: all .3s ease-in-out;
+
+        input[type=text] {
+            background   : transparent;
+            height       : 32px;
+            line-height  : 16px;
+            padding      : 8px 8px 8px 28px;
+            font-size    : 12px;
+            color        : @white;
+            font-weight  : 300;
+            width        : 100%;
+            border       : none;
+            border-radius: 4px;
+            transition   : all .3s ease-in-out;
+            outline      : none;
+        }
+
+        i {
+            color    : @darkGrey;
+            font-size: 14px;
+            position : absolute;
+            cursor   : pointer;
+            left     : 12px;
+            top      : 16px;
+            z-index  : 1;
+        }
+
+        &:focus-within {
+            width     : 412px;
+            transition: all .3s ease-in-out;
+
+            input[type=text] {
+                border-color: @greyMain;
+            }
+        }
+    }
+
+    &-quick-block {
+        display    : flex;
+        width      : auto;
+        align-items: center;
+    }
+
+    &-quick-column {
+        display : flex;
+        width   : auto;
+        position: relative;
+
+        button.top {
+            width          : 30px;
+            height         : 30px;
+            color          : @white;
+            justify-content: center;
+            border         : 4px solid #161B2F;
+            border-radius  : 50%;
+            font-size      : 17px;
+            display        : flex;
+            align-items    : center;
+            transition     : all .2s ease-in-out;
+            background     : transparent;
+            outline        : none;
+            cursor         : pointer;
+            padding        : 0;
+            background     : #1E5DD3;
+            line-height    : 16px;
+
+            &.plus {
+                font-size: 17px;
+            }
+
+            &.notification {
+                background: #E28F19;
+                font-size : 12px;
+
+                span.counter {
+                    display        : inline-flex;
+                    justify-content: center;
+                    align-items    : center;
+                    font-size      : 9px;
+                    color          : #FFFFFF;
+                    background     : #161b2f;
+                    border         : 1px solid #282E48;
+                    height         : 18px;
+                    min-width      : 18px;
+                    border-radius  : 20px;
+                    position       : absolute;
+                    left           : 14px;
+                    top            : -8px;
+                    line-height    : 10px;
+                    padding        : 0 4px;
+                }
+            }
+        }
+
+        button.more {
+            color      : @white;
+            font-size  : 12px;
+            display    : flex;
+            align-items: center;
+            transition : all .2s ease-in-out;
+            background : transparent;
+            border     : none;
+            outline    : none;
+            cursor     : pointer;
+            padding    : 0;
+            margin     : 0 20px;
+        }
+
+        &.plus {
+            &.toggle {
+                button {
+                    transition: all .2s ease-in-out;
+                    transform : rotate(45deg);
+                }
+            }
+        }
+
+        &.notification {
+            margin-left: 24px;
+
+            span {
+                display        : inline-flex;
+                justify-content: center;
+                align-items    : center;
+                font-size      : 11px;
+                color          : @white;
+                background     : @vColor;
+                border         : 1px solid #282e48;
+                height         : 22px;
+                min-width      : 22px;
+                border-radius  : 22px;
+                position       : absolute;
+                left           : 16px;
+                top            : -1px;
+                line-height    : 10px;
+                padding        : 0 4px;
+            }
+        }
+
+        &.user {
+            margin-left: 24px;
+
+            img,
+            span.small-user {
+                height          : 22px;
+                width           : 22px;
+                border-radius   : 50%;
+                background      : @blue2;
+                color           : @white;
+                font-size       : 10px;
+                font-weight     : 500;
+                // line-height  : 14px;
+            }
+        }
+    }
+
+    &-tab-menu {
+        ul {
+            padding : 0;
+            margin  : 0 -8px;
+            display : flex;
+            position: relative;
+
+            li {
+                list-style: none;
+                display   : block;
+                padding   : 0 8px;
+
+                a {
+                    line-height    : 24px;
+                    color          : @white;
+                    display        : block;
+                    border-bottom  : 2px solid transparent;
+                    text-decoration: none;
+                    font-size      : 10px;
+                    text-transform : uppercase;
+                    font-weight    : 400;
+                    cursor         : pointer;
+
+                    &.active {
+                        border-color: @primaryBlue;
+                    }
+                }
+            }
+        }
+    }
+}

package/css-build/less/icons/icons.less

@@ -0,0 +1,50 @@
+@import url('../mixin/mixin.less');
+body {
+    margin     : 0;
+    padding    : 0px;
+    font-family: 'Poppins', sans-serif;
+}
+* {
+    box-sizing: border-box;
+}
+@font-face {
+    font-family : 'icon';
+    src         : url('../../fonts/icon.eot?p42r08');
+    src         : url('../../fonts/icon.eot?p42r08#iefix') format('embedded-opentype'), url('../../fonts/icon.ttf?p42r08') format('truetype'), url('../../fonts/icon.woff?p42r08') format('woff'), url('../../fonts/icon.svg?p42r08#icon') format('svg');
+    font-weight : normal;
+    font-style  : normal;
+    font-display: block;
+}
+
+.icons {
+    font-style : normal;
+    font-family: 'icon';
+}
+.icon-group {
+    width: calc(20% - 8px);
+    padding: 8px;
+    margin: 4px;
+    border-radius: .2px;
+    border: 1px solid @greyMain;
+    i {
+        font-size: 20px;
+        margin-right:12px;
+    }
+    span {
+        &.description {
+            position: relative;
+        }
+        &.name {
+            font-size:12px;
+            color: @darkText;
+            line-height: 16px;
+            border-bottom: 1px solid @greyMain;
+            width: 100%;
+        }
+        &.code {
+            font-size: 16px;
+            color: @lightText;
+            width: 100%;
+        }
+    }
+}

package/css-build/less/index.less

@@ -0,0 +1,74 @@
+@import url('./mixin/mixin.less');
+@import url('./button/button.less');
+@import url('./animate/animation.less');
+@import url('./animate/animate-fade-in-left.less');
+@import url('./animate/animate-fade-in-right.less');
+@import url('./animate/animate-fade-in.less');
+@import url('./animate/animate-fade-out.less');
+@import url('./animate/animate-slide-down.less');
+@import url('./animate/animate-slide-left.less');
+@import url('./animate/animate-slide-right.less');
+@import url('./animate/animation.less');
+@import url('./animate/animate-slide-up.less');
+
+
+.vx-left-menu {
+    width     : 260px;
+    height    : 100vh;
+    position  : sticky;
+    top       : 0;
+    transition: all .2s ease-in-out;
+    z-index   : 2;
+    overflow: auto;
+
+    &.toggle {
+        width     : 60px;
+        transition: all .2s ease-in-out;
+    }
+}
+
+.vx-right-container {
+    width     : 100%;
+    transition: all .2s ease-in-out;
+}
+
+.vx-wrapper {
+    padding   : 0 12px;
+    // margin-top: -48px;
+
+    iframe {
+        height       : calc(100vh - 4px);
+        background   : @white;
+        border-radius: 4px;
+        padding      : 0 12px;
+        display: none;
+        &.active {
+            display: block;
+        }
+    }
+}
+.vx-h-100 {
+    height: 100%;
+}
+.vx-dialog {
+    &-wrapper {
+        display: flex;
+        position: fixed;
+        z-index: 5;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        justify-content: center;
+        align-items: center;
+    }
+    &-overlay {
+        position: fixed;
+        z-index: -1;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background: #161b2f60;
+    }
+}