vcomply-design-system 1.0.0

package/css-build/less/avatars/avatars.less

@@ -0,0 +1,96 @@
+@import url('../mixin/mixin.less');
+
+.vx-avatar {
+    display      : flex;
+    border-radius: 50%;
+    border       : 2px solid #f1f1f1;
+
+    &.md {
+        height: 28px;
+        width : 28px;
+    }
+
+    &.sm {
+        height: 24px;
+        width : 24px;
+
+        span {
+            font-size  : 8px;
+            font-weight: 500;
+        }
+    }
+
+    &.lg {
+        height: 32px;
+        width : 32px;
+
+        span {
+            font-size: 12px;
+        }
+    }
+
+    &.x-lg {
+        height: 80px;
+        width : 80px;
+
+        span {
+            font-size  : 18px;
+            font-weight: 600;
+        }
+    }
+
+    &.counter {
+        cursor: pointer;
+    }
+
+    span {
+        display        : flex;
+        justify-content: center;
+        align-items    : center;
+        font-size      : 10px;
+        font-weight    : 500;
+        color          : @white ;
+        width          : 100%;
+        height         : 100%;
+        border-radius  : 50%;
+        text-transform : uppercase;
+        margin         : 0;
+
+        background: @greyMain;
+
+        &.green {
+            background: @green;
+        }
+
+        &.blue {
+            background: @primaryBlue;
+        }
+
+        &.grey {
+            color    : @green  !important;
+            font-size: 14px !important;
+        }
+    }
+
+    img {
+        width        : 100%;
+        height       : 100%;
+        border-radius: 50%;
+    }
+
+    &-container {
+        padding-bottom: 20px;
+
+        .vx-avatar+.vx-avatar {
+            margin-left: 20px;
+        }
+    }
+
+    &-group {
+        display: flex;
+
+        .vx-avatar+.vx-avatar {
+            margin-left: -10px;
+        }
+    }
+}

package/css-build/less/button/button.less

@@ -0,0 +1,201 @@
+@import url('../mixin/mixin.less');
+@import url('../padding/padding-top.less');
+@import url('../padding/padding-right.less');
+@import url('../padding/padding-bottom.less');
+@import url('../padding/padding-left.less');
+
+.vx-btn {
+    border           : 1px solid @greyMain;
+    color            : @primaryBlue;
+    cursor           : pointer;
+    overflow         : hidden;
+    outline          : none;
+    border-radius    : 2px;
+    // line-height   : 24px;
+    display          : inline-flex;
+    font-size        :12px;
+    text-transform   : uppercase;
+    font-weight      : 500;
+    transition       : all 0.2s ease-in-out;
+    position         : relative;
+    margin           : 0;
+    text-decoration  : none;
+    padding-right    :12px;
+    padding-left     :12px;
+    justify-content  : center;
+
+    i {
+        margin-right: 8px;
+        transform   : scale(1.2);
+    }
+
+    &.after {
+        i {
+            margin-left : 8px;
+            margin-right: 0;
+        }
+    }
+
+    &.outline {
+        background: transparent;
+    }
+
+    &+.vx-btn {
+        margin-left: 8px;
+    }
+
+    &.transparent {
+        background: transparent !important;
+        border    : none;
+
+        &.primary {
+            color: @primaryBlue;
+        }
+
+        &.red {
+            color: @error;
+        }
+
+        &.grey {
+            color: @darkText;
+        }
+    }
+
+    &:disabled {
+        filter: grayscale(1);
+        cursor: not-allowed;
+
+        &:hover {
+            filter: grayscale(1);
+
+            &:before {
+                display: none;
+            }
+        }
+    }
+
+    &.primary {
+        color       : @white;
+        background  : @primaryBlue;
+        border-color: @primaryBlue;
+
+        &.outline {
+            color       : @primaryBlue;
+            background  : transparent;
+            border-color: @primaryBlue;
+
+            &.light {
+                border-color: #f1f1f1;
+            }
+        }
+    }
+
+    &.red {
+        color       : @white;
+        background  : @error;
+        border-color: @error;
+
+        &.outline {
+            color       : @error;
+            background  : transparent;
+            border-color: @error;
+        }
+    }
+
+    &.grey {
+        color       : @darkText;
+        background  : @darkGrey;
+        border-color: @darkGrey;
+
+        &.outline {
+            color       : @darkText;
+            background  : transparent;
+            border-color: @greyMain;
+        }
+    }
+
+    &.white {
+        background  : @white;
+        color       : @lightText;
+        border-color: @white;
+    }
+
+    &.lg {
+        line-height: 48px;
+        .vx-pr-5();
+        .vx-pl-5();
+        border-radius: 4px;
+        font-size    : 16px;
+        font-weight  : 600;
+        border-width : 2px;
+    }
+
+    &.md {
+        line-height: 24px;
+        min-width  : 80px;
+    }
+
+    &.sm {
+        line-height  : 20px;
+        font-size    : 9px;
+        margin-bottom: 0;
+    }
+
+    &.block {
+        display    : flex;
+        width      : 100%;
+        line-height: 38px;
+        .vx-pr-5();
+        .vx-pl-5();
+        border-radius  : 0px;
+        justify-content: center;
+        font-size      : 11px;
+        letter-spacing : 3.08px;
+
+        &.rounded {
+            border-radius: 4px;
+        }
+    }
+
+    &.icon {
+        height         : 36px;
+        width          : 36px;
+        border-radius  : 50%;
+        display        : inline-flex;
+        justify-content: center;
+        align-items    : center;
+        margin-bottom  : 0;
+
+        &.sm {
+            height     : 28px;
+            width      : 28px;
+            line-height: 26px;
+        }
+
+        i {
+            margin: 0;
+        }
+    }
+
+    &:before {
+        content   : "";
+        position  : absolute;
+        top       : 0;
+        right     : 0;
+        bottom    : 0;
+        left      : 0;
+        background: #000000;
+        opacity   : 0;
+        transition: all 0.2s ease-in-out;
+    }
+
+    &:hover {
+        position      : relative;
+        filter        : brightness(85%);
+        // &:before {
+        //     opacity: .1;
+        // }
+    }
+
+
+}

package/css-build/less/color/color.less

@@ -0,0 +1,209 @@
+@import url('../mixin/mixin.less');
+
+// Text Color
+.vx-txt-red {
+    color: @error;
+}
+
+.vx-txt-blue {
+    color: @primaryBlue;
+}
+
+.vx-txt-white {
+    color: @white;
+}
+
+.vx-paragraph-txt {
+    color: @lightText;
+}
+
+.vx-label-txt {
+    color: @darkText;
+}
+
+// Background
+.vx-bg-grey {
+    background: @greyMain;
+}
+
+.vx-bg-white {
+    background: @white;
+}
+
+.vx-bg-red {
+    background: @error;
+}
+
+.vx-bg-vColor {
+    background: @vColor;
+}
+
+.vx-bg-blue {
+    background: @primaryBlue;
+}
+.vx-bg-light-text {
+    background: @lightText;
+} 
+
+// Border
+.vx-dark-border {
+    border-color: @darkText;
+}
+
+.vx-grey-border {
+    border-color: @greyMain;
+}
+
+.vx-red-border {
+    border-color: @error;
+}
+
+.vx-blue-border {
+    border-color: @primaryBlue;
+}
+
+
+// mixin
+@blue1 : #1e5dd3;
+@blue2 : #4681ef;
+@blue3 : #7aa6f7;
+@blue4 : #d4e2fc;
+@green1 : #34aa44;
+@green2 : #66bf72;
+@green3 : #97d2a0;
+@green4 : #d6f2da;
+@red1 : #d93b41;
+@red2 : #e75151;
+@red3 : #f77272;
+@red4 : #ffeaea;
+@orange1 : #f6882f;
+@orange2 : #f5a05b;
+@orange3 : #f9b883;
+@orange4 : #fbe1cc;
+@yellow1 : #f0b819;
+@yellow2 : #f4c84a;
+@yellow3 : #fadd8a;
+@yellow4 : #fff4d6;
+@dark1 : #000000;
+@dark2 : #161b2f;
+@dark3 : #747576;
+@boxShadow : rgba(30, 93, 211, 0.27);
+@boxShadowActive : rgba(30, 93, 210, 0.9);
+
+
+
+// Mix color
+.vx-color-palette {
+    min-height: 40px;
+    width: 100%;
+    border-radius: 0;
+    color: @white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    input {
+        font-size:12px;
+        font-weight: 400;
+        color: @white;
+        border: none;
+        background: transparent;
+        outline: none;
+        width: 100%;
+        text-align: center;
+    }
+    &.bg {
+        &.blue {
+            &-1 {
+                background: #1e5dd3;
+            }
+            &-2 {
+                background: #4681ef;
+            }
+            &-3 {
+                background: #7aa6f7;
+            }
+            &-4 {
+                background: #d4e2fc;
+            }
+            &-5 {
+                background: #033187;
+            }
+        }
+        &.green {
+            &-1 {
+                background: #34aa44;
+            }
+            &-2 {
+                background: #66bf72;
+            }
+            &-3 {
+                background: #97d2a0;
+            }
+            &-4 {
+                background: #d6f2da;
+            }
+        }
+        &.red {
+            &-1 {
+                background: #d93b41;
+            }
+            &-2 {
+                background: #e75151;
+            }
+            &-3 {
+                background: #f77272;
+            }
+            &-4 {
+                background: #ffeaea;
+            }
+        }
+        &.orange {
+            &-1 {
+                background: #f6882f;
+            }
+            &-2 {
+                background: #f5a05b;
+            }
+            &-3 {
+                background: #f9b883;
+            }
+            &-4 {
+                background: #fbe1cc;
+            }
+        }
+        &.yellow {
+            &-1 {
+                background: #f0b819;
+            }
+            &-2 {
+                background: #f4c84a;
+            }
+            &-3 {
+                background: #fadd8a;
+            }
+            &-4 {
+                background: #fff4d6;
+            }
+        }
+        &.dark {
+            &-1 {
+                background: #000000;
+            }
+            &-2 {
+                background: #161b2f;
+            }
+            &-3 {
+                background: #747576;
+            }
+        }
+    }
+    &:first-child {
+        border-radius: 4px 0 0 4px;
+    }
+    &:last-child {
+        border-radius: 0 4px 4px 0;
+        input {
+            color: @black;
+        }
+    }
+}