vcomply-design-system 1.0.0

package/css-build/less/mixin/mixin.less

@@ -0,0 +1,27 @@
+// Base Size
+body {
+    font-size: 16px;
+}
+
+@value : 16px;
+a, button {
+    cursor: pointer;
+}
+// Base Color 
+@paginationBorder : #BCBCBC;
+@primaryBlue      : #1E5DD3;
+@subMenuText      : #707070;
+@lightText        : #747576;
+@darkText         : #161B2F;
+@fadeDarkText    : #1F253A;
+@headerFade      : #282E48;
+@white            : #FFFFFF;
+@greyMain         : #F1F1F1;
+@darkGrey         : #DBDBDB;
+@greyLight        : #f8f8f8;
+@fadeGrey        : #FBFBFB;
+@error            : #EB2424;
+@vColor           : #EE3939;
+@green            : #34AA44;
+@black            : #000000;
+@within           : #042E7D;

package/css-build/less/mixin.less

@@ -0,0 +1 @@
+@value: 8px;

package/css-build/less/no-data/no-data.less

@@ -0,0 +1,52 @@
+.vx-no-data {
+    &-wrapper {
+        height       : 100%;
+        width        : 100%;
+        background   : #fff;
+        border-radius: 4px;
+    }
+
+    &-container {
+        width: 450px;
+
+        .image {
+            width        : 250px;
+            margin-bottom: 20px;
+        }
+
+        p.text {
+            font-size    : 16px;
+            font-weight  : 400;
+            line-height  : 24px;
+            margin-bottom: 24px;
+            color        : #161B2F;
+            text-align   : center;
+            margin-top   : 0;
+
+            strong {
+                font-weight: 500;
+            }
+        }
+
+        .button-row {
+            button {
+                &.small {
+                    i {
+                        margin-right: 4px;
+                        font-size   : 10px;
+                    }
+                }
+            }
+        }
+    }
+}
+
+h3 {
+    &.heading {
+        font-size    : 20px;
+        margin-top   : 10px;
+        font-weight  : 500;
+        margin-bottom: 10px;
+        padding-left : 20px;
+    }
+}

package/css-build/less/padding/index.less

@@ -0,0 +1,5 @@
+@import url('./padding-bottom.less');
+@import url('./padding-left.less');
+@import url('./padding-right.less');
+@import url('./padding-top.less');
+@import url('./padding.less');

package/css-build/less/padding/padding-bottom.less

@@ -0,0 +1,25 @@
+@import url('../mixin/mixin.less');
+
+.vx-pb-0 {
+    padding-bottom: 0 !important;
+}
+
+.vx-pb-1 {
+    padding-bottom: 4px !important;
+}
+
+.vx-pb-2 {
+    padding-bottom: 8px !important;
+}
+
+.vx-pb-3 {
+    padding-bottom:12px !important;
+}
+
+.vx-pb-4 {
+    padding-bottom: 16px !important;
+}
+
+.vx-pb-5 {
+    padding-bottom: 20px !important;
+}

package/css-build/less/padding/padding-left.less

@@ -0,0 +1,20 @@
+@import url('../mixin/mixin.less');
+
+.vx-pl-0 {
+    padding-left: 0 !important;
+}
+.vx-pl-1 {
+    padding-left: 4px !important;
+}
+.vx-pl-2 {
+    padding-left: 8px !important;
+}
+.vx-pl-3 {
+    padding-left:12px !important;
+}
+.vx-pl-4 {
+    padding-left: 16px !important;
+}
+.vx-pl-5 {
+    padding-left: 20px !important;
+}

package/css-build/less/padding/padding-right.less

@@ -0,0 +1,20 @@
+@import url('../mixin/mixin.less');
+
+.vx-pr-0 {
+    padding-right: 0 !important;
+}
+.vx-pr-1 {
+    padding-right: 4px !important;
+}
+.vx-pr-2 {
+    padding-right: 8px !important;
+}
+.vx-pr-3 {
+    padding-right:12px !important;
+}
+.vx-pr-4 {
+    padding-right: 16px !important;
+}
+.vx-pr-5 {
+    padding-right: 20px !important;
+}

package/css-build/less/padding/padding-top.less

@@ -0,0 +1,25 @@
+@import url('../mixin/mixin.less');
+
+.vx-pt-0 {
+    padding-top: 0 !important;
+}
+
+.vx-pt-1 {
+    padding-top: 4px !important;
+}
+
+.vx-pt-2 {
+    padding-top: 8px !important;
+}
+
+.vx-pt-3 {
+    padding-top:12px !important;
+}
+
+.vx-pt-4 {
+    padding-top: 16px !important;
+}
+
+.vx-pt-5 {
+    padding-top: 20px !important;
+}

package/css-build/less/padding/padding.less

@@ -0,0 +1,25 @@
+@import url('../mixin/mixin.less');
+
+.vx-p-0 {
+    padding: 0 !important;
+}
+
+.vx-p-1 {
+    padding: 4px !important;
+}
+
+.vx-p-2 {
+    padding: 8px !important;
+}
+
+.vx-p-3 {
+    padding:12px !important;
+}
+
+.vx-p-4 {
+    padding: 16px !important;
+}
+
+.vx-p-5 {
+    padding: 20px !important;
+}

package/css-build/less/pagination/pagination.less

@@ -0,0 +1,144 @@
+@import url('../mixin/mixin.less');
+
+ul.vx-pagination {
+    display        : flex;
+    align-items    : center;
+    padding        : 0;
+    margin         :12px 0 0;
+    justify-content: flex-end;
+
+    li {
+        list-style: none;
+        display   : block;
+
+        &+li {
+            margin-left: 3px;
+        }
+
+        button {
+            border         : 1px solid @paginationBorder;
+            background     : @white;
+            border-radius  : 2px;
+            color          : @darkText;
+            font-weight    : 400;
+            height         : 20px;
+            min-width      : 20px;
+            padding        : 0 7px;
+            display        : inline-flex;
+            justify-content: center;
+            align-items    : center;
+            outline        : none;
+            cursor         : pointer;
+            text-transform : uppercase;
+            font-size      :12px;
+            line-height    : 18px;
+
+            &.active,
+            &:hover {
+                border-color: @primaryBlue;
+                background  : @primaryBlue;
+                color       : #FFFFFF;
+            }
+
+            &.disabled {
+                filter        : grayscale(100%);
+                pointer-events: none;
+                opacity       : 1;
+                color         : unset !important;
+                border        : 1px solid #bcbcbc;
+            }
+
+            &.disable {
+                pointer-events: none;
+            }
+
+            i {
+                font-size  : 8px;
+                width      : 13px;
+                height     : 13px;
+                line-height: 13px;
+            }
+        }
+    }
+}
+
+.vx-pagination-container {
+    display: flex;
+
+    .vx-go-to-page {
+        margin :12px 0 0 8px;
+        display: flex;
+
+        ul {
+            padding: 0;
+            margin : 0;
+
+            &.vx-go-pagination {
+                display    : flex;
+                align-items: flex-start;
+                border     : 1px solid @paginationBorder;
+
+                li {
+                    list-style: none;
+                    display   : block;
+
+                    span {
+                        display        : inline-flex;
+                        justify-content: center;
+                        align-items    : center;
+                        text-transform : uppercase;
+                        border-radius  : 0;
+                        border         : none;
+                        color          : @darkText;
+                        background     : @white;
+                        font-size      : 10px;
+                        height         : 18px;
+                        min-width      : 20px;
+                        padding        : 0 4px;
+                    }
+
+                    button {
+                        display        : inline-flex;
+                        justify-content: center;
+                        align-items    : center;
+                        outline        : none;
+                        cursor         : pointer;
+                        text-transform : uppercase;
+                        border-radius  : 0;
+                        border         : none;
+                        color          : @darkText;
+                        background     : @white;
+                        font-size      : 8px;
+                        height         : 18px;
+                        min-width      : 20px;
+
+                        &.enter {
+                            background: @greyMain;
+                            color     : @primaryBlue;
+                            font-size : 10px;
+                            padding   : 0 4px;
+                        }
+                    }
+
+                    input {
+                        height    : 18px;
+                        border    : none;
+                        outline   : none;
+                        font-size :12px;
+                        background: @white;
+                        width     : 72px;
+                        font-size : 10px;
+                    }
+
+                    &:first-of-type {
+                        border-right: 1px solid @paginationBorder;
+                    }
+
+                    &:last-of-type {
+                        border-left: 1px solid @paginationBorder;
+                    }
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,116 @@
+@import url('../mixin/mixin.less');
+
+.vx-panel {
+    display: block;
+    // border : 1px solid @greyMain;
+
+    &+.vx-panel {
+        margin-top: 10px;
+    }
+
+    &-head {
+        display        : flex;
+        padding        : 0 4px 0 12px;
+        margin         : 0;
+        align-items    : center;
+        justify-content: space-between;
+        border-bottom  : 1px solid #DCDCDC;
+
+        .title {
+            padding    : 0;
+            margin     : 0;
+            color      : @darkText;
+            line-height: 40px;
+        }
+
+        .action {
+            width: auto;
+        }
+    }
+
+    &-body {
+        padding   : 8px12px;
+        display   : block;
+        background: @white;
+        transition: height 0.35s ease;
+    }
+
+    &-footer {
+        background     : #FBFBFB;
+        border-top     : 1px solid #F1F1F1;
+        display        : flex;
+        align-items    : center;
+        justify-content: flex-end;
+        height         : 48px;
+        padding        : 12px;
+    }
+
+    &.active {
+        border-color: @primaryBlue  !important;
+
+        .vx-panel {
+            &-head {
+                border-bottom-color: @primaryBlue;
+            }
+        }
+    }
+
+    &.default {
+        // border-color: @greyMain;
+
+        .vx-panel {
+            &-head {
+                background: @fadeGrey;
+            }
+        }
+    }
+
+    &.accordionItem {
+        &.close {
+            .vx-panel-body {
+                height  : 0;
+                overflow: hidden;
+                padding : 0;
+            }
+        }
+
+        &.open {
+            .vx-panel-body {
+                height: auto;
+            }
+
+            .accordionItemHeading {
+                .action {
+                    button {
+                        i {
+                            transform : rotate(90deg);
+                            transition: height 0.35s ease;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    &.vx-lg {
+        .vx-panel {
+            &-head {
+                .title {
+                    line-height: 48px;
+                    font-size  : 16px;
+                }
+            }
+
+            &-body {
+                padding:12px 20px;
+            }
+        }
+
+    }
+}
+
+.vx-accordion-group {
+    .vx-panel {
+        margin: 0;
+    }
+}