vcomply-design-system 1.0.0

package/css-build/less/table/table.less

@@ -0,0 +1,293 @@
+@import url('../mixin/mixin.less');
+
+table.vx-table {
+    border-collapse: separate;
+    border-spacing : 0 4px;
+    width          : 100%;
+
+    thead {
+        tr {
+            th {
+                font-size        : 11px;
+                padding          : 12px 10px;
+                background       : #f1f1f1;
+                text-transform   : uppercase;
+                color            : #747576;
+                font-weight      : 600;
+                line-height      : 14px;
+                text-align       : left;
+                // position      : sticky;
+                // top           : 3px;
+                font-weight      : 400;
+                white-space      : nowrap;
+                z-index          : 2;
+                position         : relative;
+
+                // &:before {
+                //   height       : 10px;
+                //   content      : "";
+                //   position     : absolute;
+                //   top          : -3px;
+                //   right        : 0;
+                //   left         : 0;
+                //   background   : #f1f1f1;
+                //   z-index      : 1;
+                //   border-radius: 0;
+                // }
+
+                &:first-child {
+                    border-radius: 2px 0 0 0;
+                    text-align   : center;
+                    width        : 44px;
+                    padding      : 0 12px;
+
+                    // &::before {
+                    //     border-radius: 2px 0 0 0;
+                    // }
+                }
+
+                &:last-child {
+                    border-radius: 0 2px 0 0;
+                    text-align   : right;
+                    width        : 44px;
+
+                    &::before {
+                        border-radius: 0 2px 0 0;
+                    }
+                }
+
+                span {
+                    &.resizer {
+                        position  : absolute;
+                        top       : 0;
+                        right     : 0;
+                        bottom    : 0;
+                        width     : 1px;
+                        cursor    : ew-resize;
+                        background: #747576;
+                        outline   : none;
+
+                        &:focus {
+                            background: #161B2F;
+                        }
+                    }
+                }
+
+                // &:hover {
+                //     span.sl {
+                //         display: none;
+                //     }
+
+                //     label.vx-checkbox-item {
+                //         display: flex;
+                //         margin-top: -2px;
+                //         margin-left: 4px;
+                //     }
+                // }
+            }
+        }
+    }
+
+    tbody {
+        tr {
+            td {
+                font-size        : 11px;
+                padding          : 4px 10px;
+                background       : #FFFFFF;
+                text-transform   : uppercase;
+                color            : #747576;
+                font-weight      : 600;
+                line-height      : 14px;
+                text-align       : left;
+                font-weight      : 400;
+                white-space      : nowrap;
+                z-index          : 2;
+                // border-bottom : 1px solid #f1f1f1;
+                height           : 55px;
+
+
+                &:first-child {
+                    border-radius: 2px 0 0 2px;
+                    text-align   : center;
+                    width        : 44px;
+                    padding      : 0 12px;
+                }
+
+                &:last-child {
+                    border-radius: 0 2px 2px 0;
+                    text-align   : right;
+                    width        : 44px;
+                }
+
+                button.action {
+                    height     : 100%;
+                    align-items: center;
+
+                    &:hover {
+                        &:before {
+                            opacity: 0.03;
+                        }
+                    }
+
+                    &.expaned {
+                        i {
+                            transform: rotate(90deg);
+                        }
+                    }
+                }
+
+                span {
+                    height: 100%;
+
+                    &.sl-no {
+                        height         : calc(100% + 6px);
+                        display        : flex;
+                        align-items    : center;
+                        justify-content: center;
+                        background     : @greyMain;
+                        color          : @subMenuText;
+                        font-size      : 10px;
+                        writing-mode   : vertical-lr;
+                    }
+                }
+
+                .vx-avatar-group {
+                    width: 60px;
+                }
+
+                .description {
+                    button {
+                        background : transparent;
+                        border     : none;
+                        color      : @primaryBlue;
+                        font-size  : 12px;
+                        line-height: 16px;
+                        width      : 100%;
+                        text-align : left;
+                        padding    : 0;
+                        cursor     : pointer;
+                    }
+
+                    label {
+                        font-size  : 10px;
+                        line-height: 16px;
+                        color      : @lightText;
+                        width      : 100%;
+                        cursor     : text;
+                    }
+                }
+            }
+
+            &.selected {
+                td {
+                    &:first-child {
+                        position: relative;
+
+                        &:before {
+                            background   : #34aa44;
+                            border-radius: 2px 0 0 2px;
+                            content      : "";
+                            position     : absolute;
+                            top          : 0;
+                            left         : 0;
+                            width        : 3px;
+                            height       : 100%;
+                        }
+                    }
+
+                    span.sl {
+                        display: none;
+                    }
+
+                    label.vx-checkbox-item {
+                        display    : flex;
+                        margin-top : -2px;
+                        margin-left: 4px;
+                    }
+                }
+            }
+
+            &:hover {
+                box-shadow: 0 0 15px rgb(30 93 211 / 35%);
+                z-index   : 2;
+                position  : relative;
+            }
+        }
+
+        &.childRow {
+            display: none;
+
+            &.active {
+                display: table-row-group;
+            }
+        }
+    }
+
+    tr {
+        &:hover {
+            span.sl {
+                display: none;
+            }
+
+            label.vx-checkbox-item {
+                display    : flex;
+                margin-top : 0px;
+                margin-left: 0px;
+            }
+        }
+    }
+
+    span.sl {
+        display: inline-block;
+    }
+
+    label.vx-checkbox-item {
+        display: none;
+    }
+
+    &.shorting {
+        thead {
+            tr {
+                th {
+                    i {
+                        float : right;
+                        cursor: pointer;
+                    }
+                }
+            }
+        }
+    }
+
+    &.fix-header {
+        thead {
+            tr {
+                th {
+                    position: sticky;
+                    top     : 4px;
+
+                    &:before {
+                        content   : "";
+                        height    : 4px;
+                        position  : absolute;
+                        top       : -4px;
+                        right     : 0;
+                        left      : 0;
+                        background: @greyMain;
+                    }
+
+                    &:first-child {
+                        &:before {
+                            border-radius: 2px 0 0 0;
+                        }
+                    }
+
+                    &:last-child {
+                        &:before {
+                            border-radius: 0 2px 0 0;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

package/css-build/less/table-card/table-card.less

@@ -0,0 +1,116 @@
+@import url('../mixin/mixin.less');
+@import url('../color/color.less');
+
+.vx-table-card {
+    box-shadow   : 0 0 3px @boxShadow;
+    border-radius: 2px;
+    min-height   : 55px;
+    position     : relative;
+    cursor: pointer;
+
+    &:last-child {
+        margin-right: 0;
+    }
+
+    &.active {
+        box-shadow: 0 0 10px @boxShadowActive;
+        z-index   : 1;
+    }
+
+    &.disabled {
+        opacity       : 1;
+        filter        : grayscale(1);
+        pointer-events: none;
+    }
+
+    i {
+        margin-right: 8px;
+        color       : @lightText;
+        font-size   : 16px;
+    }
+
+    .left {
+        label {
+            font-size     : 11px;
+            line-height   : 16px;
+            letter-spacing: 0.5px;
+            flex-wrap     : wrap;
+            width         : auto;
+            white-space   : nowrap;
+        }
+
+        .performance {
+            span {
+                font-size  :12px;
+                font-weight: 500;
+                padding    : 0 6px;
+                position   : relative;
+
+                &:first-child {
+                    color       : #6ea412;
+                    padding-left: 0;
+                }
+
+                &:nth-child(2) {
+                    color: #e4b700;
+
+                    &::before,
+                    &::after {
+                        content : ".";
+                        position: absolute;
+                        top     : -3px;
+                        color   : #747576;
+                    }
+
+                    &::before {
+                        left: -1px;
+                    }
+
+                    &::after {
+                        right: -1px;
+                    }
+                }
+
+                &:last-child {
+                    color        : #c7381b;
+                    padding-right: 0;
+                }
+            }
+        }
+
+        button {
+            border       : none;
+            border-radius: 2px;
+            font-size    : 11px;
+            line-height  : 28px;
+            min-width    : 30px;
+            height       : 20px;
+            cursor       : pointer;
+
+            &.blue-btn {
+                background: @primaryBlue;
+            }
+
+            &.green-btn {
+                background: @green1;
+            }
+
+            i {
+                font-size   : 8px;
+                margin-right: 8px;
+                color       : #fff;
+            }
+        }
+    }
+
+    .right {
+        span {
+            font-size    : 14px;
+            line-height  : 24px;
+            background   : #042e7d;
+            padding      : 2px 6px;
+            border-radius: 2px;
+            min-width    : 28px;
+        }
+    }
+}

package/css-build/less/text/text.less

@@ -0,0 +1,179 @@
+@import url('../mixin/mixin.less');
+
+.vx-title-text {
+    line-height: 32px;
+    font-weight: 200;
+}
+
+.vx-sub-heading-text {
+    line-height: 24px;
+    font-weight: 400;
+    margin     : 0;
+    display    : block;
+}
+
+.vx-sub-sub-heading-text {
+    line-height: 20px;
+    font-weight: 500;
+    color      : @darkText;
+}
+
+.vx-label-text {
+    font-weight: 500;
+    line-height: 20px;
+    color      : @darkText;
+}
+
+.vx-paragraph-text {
+    line-height: 16px;
+    color      : @lightText;
+    font-weight: 400;
+}
+
+.vx-table-card-text {
+    line-height: 16px;
+    color      : @lightText;
+    font-weight: 500;
+}
+
+.vx-table-heading-text {
+    line-height: 14px;
+    color      : @lightText;
+    font-weight: 400;
+}
+
+.vx-table-text {
+    line-height: 14px;
+    color      : @darkText;
+}
+
+// Font-size
+.vx-fs-title {
+    font-size: 24px;
+}
+
+.vx-fs-sub-title {
+    font-size: 16px;
+}
+
+.vx-fs-sub-sub-title {
+    font-size:12px;
+}
+.vx-fs-sub-label-text {
+    font-size: 10px;
+}
+.vx-fs-paragraph {
+    font-size: 14px;
+}
+
+.vx-fs-small-paragraph {
+    font-size: 10px;
+}
+
+.vx-fs-table-card {
+    font-size:12px;
+}
+
+.vx-fs-table-heading {
+    font-size:12px;
+}
+
+.vx-fs-table-text {
+    font-size:12px;
+}
+
+// Text case
+.vx-tt-capitalize {
+    text-transform: capitalize;
+}
+
+.vx-tt-uppercase {
+    text-transform: uppercase;
+}
+
+.vx-tt-none {
+    text-transform: none;
+}
+
+// Font wight
+.vx-fw-300 {
+    font-weight: 300;
+}
+
+.vx-fw-400 {
+    font-weight: 400;
+}
+
+.vx-fw-500 {
+    font-weight: 500;
+}
+
+.vx-fw-600 {
+    font-weight: 600;
+}
+
+.vx-fw-700 {
+    font-weight: 700;
+}
+
+.vx-txt-error {
+    font-size  : 10px;
+    color      : @error;
+    margin     : 4px 0 0 0;
+    line-height: 16px;
+}
+.vx-fs-2 {
+    font-size: 8px;
+}
+.vx-fs-3 {
+    font-size:12px;
+}
+.vx-fs-4 {
+    font-size: 16px;
+}
+.vx-fs-5 {
+    font-size: 20px;
+}
+.vx-fs-6 {
+    font-size: 24px;
+}
+
+.vx-lh-3 {
+    line-height:12px;
+}
+.vx-lh-4 {
+    line-height: 16px;
+}
+.vx-lh-5 {
+    line-height: 20px;
+}
+.vx-lh-6 {
+    line-height: 24px;
+}
+.vx-lh-7 {
+    line-height: 28px;
+}
+.vx-lh-8 {
+    line-height: 32px;
+}
+.vx-lh-9 {
+    line-height: 36px;
+}
+.vx-lh-10 {
+    line-height: 40px;
+}
+.vx-lh-11 {
+    line-height: 44px;
+}
+.vx-lh-12 {
+    line-height: 48px;
+}
+.vx-lh-13 {
+    line-height: 52px;
+}
+.vx-lh-14 {
+    line-height: 56px;
+}
+.vx-lh-15 {
+    line-height: 60px;
+}

package/css-build/less/user-panel/user-panel.less

@@ -0,0 +1,123 @@
+@import url('../mixin/mixin.less');
+.vx {
+    &-user-panel {
+        background   : @white;
+        padding      : 0;
+        border-radius: 4px;
+        // position     : absolute;
+        width        : 300px;
+        transition   : none;
+        // top          : 100%;
+        // right        : 0;
+        // z-index      : 3;
+        box-shadow   : 0 0 10px rgb(0, 0, 0, 20%);
+        overflow     : hidden;
+
+        &-top {
+            padding        : 8px;
+            display        : flex;
+            align-items    : center;
+            justify-content: space-between;
+
+            .user {
+                width        : 80px;
+                border-radius: 50%;
+                height       : 80px;
+                margin-right : 4px;
+                min-width    : 80px;
+                border-radius: 50%;
+                overflow     : hidden;
+
+                img {
+                    width: 100%;
+                    height: 100%;
+                    border: none;
+                }
+                span.user {
+                    height: 100%;
+                    width: 100%;
+                    font-size: 18px;
+                    background: @primaryBlue;
+                    color: @white;
+                    text-transform: uppercase;
+                    border-radius: 50%;
+                    font-weight: 600;
+                }
+
+                &-details {
+                    width  : calc(100% - 84px);
+                    display: block;
+
+                    .name {
+                        font-size     : 14px;
+                        font-weight   : 500;
+                        text-transform: capitalize;
+                        margin        : 0;
+                        line-height   : 20px;
+                        white-space   : nowrap;
+                        overflow      : hidden;
+                        text-overflow : ellipsis;
+                        display       : block;
+                    }
+
+                    .email {
+                        font-size    : 10px;
+                        line-height  : 16px;
+                        color        : @lightText;
+                        display      : block;
+                        font-weight  : 400;
+                        margin       : 0;
+                        width        : 170px;
+                        white-space  : nowrap;
+                        overflow     : hidden;
+                        text-overflow: ellipsis;
+                    }
+                }
+            }
+
+        }
+        &-bottom {
+            position: relative;
+            ul {
+                display: block;
+                padding: 0;
+                margin: 0;
+                li {
+                    font-size:12px;
+                    border-bottom: 1px solid @greyMain;
+                    display: flex;
+                    padding: 10px 20px 10px 35px;
+                    position: relative;
+                    &:before {
+                        background: @primaryBlue;
+                        content: "";
+                        position: absolute;
+                        left: 10px;
+                        top: 13px;
+                        width: 1px;
+                        height: 10px;
+                    }
+                    span {
+                        display: block;
+                        width: 50%;
+                        strong {
+                            color: @darkText;
+                            font-weight: 500;
+                            display: block;
+                            text-transform: uppercase;
+                        }
+                        &.active {
+                            color: @green;
+                        }
+                        &.expaired {
+                            color: @error;
+                        }
+                    }
+                }
+            }
+        }
+        &-action {
+            padding: 14px 0;
+        }
+    }
+}