vcomply-design-system 1.0.0

package/css-build/less/left-menu/sub-menu.less

@@ -0,0 +1,326 @@
+@import url('../mixin/mixin.less');
+@import url('../icons/icons.less');
+
+.vx-sub-menu {
+    width      : 232px;
+    height     : 100%;
+    position   : relative;
+    margin-left: 0;
+    background : @white;
+    transition : all .2s ease-in-out;
+    padding    : 0;
+
+    &.toggle {
+        margin-left: -220px;
+        transition : all .2s ease-in-out;
+
+        ul,
+        .vx-bottom-section {
+            opacity       : 0;
+            pointer-events: none;
+        }
+
+        &.hoverable {
+            &:hover {
+                margin-left: 0;
+
+                ul,
+                .vx-bottom-section {
+                    opacity       : 1;
+                    pointer-events: all;
+                }
+            }
+
+            button.vx-toggle-menu {
+                opacity: 0;
+            }
+        }
+    }
+
+
+    h3.vx-title {
+        font-size    : 14px;
+        border-bottom: 1px solid #F1F1F1;
+        padding      : 0;
+        margin-bottom: 20px;
+
+        span {
+            display     : block;
+            height      : 16px;
+            width       : 2px;
+            margin-right: 8px;
+        }
+    }
+
+    ul {
+        box-shadow: 0 8px 8px rgb(30 93 210 / 25%);
+        height    : calc(100vh - 69px);
+        overflow  : auto;
+        padding   : 0 12px;
+
+        li {
+            list-style     : none;
+            display        : flex;
+            border-bottom  : 1px solid @greyMain;
+            align-items    : center;
+            justify-content: space-between;
+            flex-wrap      : wrap;
+
+            a {
+                text-decoration: none;
+                line-height    : 40px;
+                font-size      : 12px;
+                color          : @subMenuText;
+                height         : 40px;
+                cursor         : pointer;
+                width          : 100%;
+
+                &:hover,
+                &.active {
+                    color: @primaryBlue;
+                }
+
+                &.parent {
+                    color: @darkText;
+                }
+            }
+
+            img {
+                width        : 16px;
+                height       : 16px;
+                padding      : 4px;
+                border-radius: 50%;
+                border       : 1px solid @greyMain;
+            }
+
+            ul {
+                padding-left: 0;
+                width       : 100%;
+                box-shadow  : none;
+                height      : auto;
+
+                li {
+                    a {
+                        padding-left: 12px !important;
+                        position    : relative;
+
+                        &:before {
+                            font-family: 'icon';
+                            content    : '\e910';
+                            position   : absolute;
+                            left       : 0;
+                            height     : 40px;
+                            display    : flex;
+                            align-items: center;
+                            font-size  : 8px;
+                        }
+                    }
+
+                }
+            }
+        }
+    }
+
+    .vx-bottom-section {
+        position: absolute;
+        bottom  : 0;
+        left    : 0;
+        width   : 100%;
+
+        button {
+            background: @primaryBlue;
+            border    : none;
+            color     : @white;
+            font-size : 16px;
+            padding   : 0 12px;
+            height    : 44px;
+            width     : 100%;
+            cursor    : pointer;
+
+            i {
+                margin-right: 8px;
+            }
+        }
+    }
+
+
+
+
+    button.vx-toggle-menu {
+        border           : none;
+        font-size        : 12px;
+        display          : flex;
+        position         : absolute;
+        height           : 44px;
+        line-height      : 44px;
+        width            : 30px;
+        justify-content  : center;
+        align-items      : center;
+        top              : 25px;
+        cursor           : pointer;
+        transition       : 0.3s ease-in-out;
+        z-index          : 3;
+        outline          : none;
+        right            : -19px;
+        color            : #fff;
+        -webkit-transform: scale(1);
+        transform        : scale(1);
+        background       : transparent;
+
+        &:before {
+            background           : #282e48;
+            /* Old browsers */
+            background           : -moz-linear-gradient(top, #282e48 0%, #282e48 50%, #161b2f 50%, #161b2f 100%);
+            /* FF3.6-15 */
+            background           : -webkit-linear-gradient(top, #282e48 0%, #282e48 50%, #161b2f 50%, #161b2f 100%);
+            /* Chrome10-25,Safari5.1-6 */
+            background           : linear-gradient(to bottom, #282e48 0%, #282e48 50%, #161b2f 50%, #161b2f 100%);
+            /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+            filter               : progid:DXImageTransform.Microsoft.gradient(startColorstr='#282e48', endColorstr='#161b2f', GradientType=0);
+            /* IE6-9 */
+            transform            : rotate(0deg);
+            -webkit-mask         : url(https://s3.amazonaws.com/cdn.v-comply.com/design-system/images/open-arrow-left.svg) no-repeat;
+            mask                 : url(https://s3.amazonaws.com/cdn.v-comply.com/design-system/images/open-arrow-left.svg) no-repeat;
+            -webkit-mask-position: left;
+            mask-position        : left;
+            -webkit-mask-size    : auto 100%;
+            mask-size            : auto 100%;
+            content              : '';
+            position             : absolute;
+            top                  : 2px;
+            right                : 0;
+            bottom               : 0;
+            left                 : 3px;
+
+            @-moz-document url-prefix() {
+                top: -2px !important;
+            }
+        }
+
+        i {
+            position: relative;
+            top     : 0.6px;
+
+            @-moz-document url-prefix() {
+                top: -1px !important;
+            }
+        }
+
+        &.toggle {
+            -webkit-transform: scale(-1);
+            transform        : scale(-1);
+            width            : 30px;
+
+            &:before {
+                background   : #ffffff;
+                // left      : 3px;
+            }
+
+            i {
+                position: relative;
+            }
+        }
+    }
+
+    &:hover {
+        button.vx-toggle-menu {
+            i {
+                animation: jello-collapsed 1s 1;
+            }
+        }
+    }
+}
+
+@keyframes arrow-move-before {
+    0% {
+        left     : 30%;
+        top      : 10%;
+        transform: rotate(45deg);
+    }
+
+    50% {
+        left     : 50%;
+        top      : 10%;
+        transform: rotate(0);
+    }
+
+    100% {
+        left     : 50%;
+        top      : 10%;
+        transform: rotate(-45deg);
+    }
+}
+
+@keyframes arrow-move-after {
+    0% {
+        left     : 30%;
+        bottom   : 10%;
+        transform: rotate(-45deg);
+    }
+
+    50% {
+        left     : 30%;
+        bottom   : 10%;
+        transform: rotate(0deg);
+    }
+
+    100% {
+        left     : 50%;
+        bottom   : 10%;
+        transform: rotate(45deg);
+    }
+}
+
+@keyframes arrow-move-before-toggle {
+    0% {
+        left     : 50%;
+        top      : 10%;
+        transform: rotate(-45deg);
+    }
+
+    50% {
+        left     : 50%;
+        top      : 10%;
+        transform: rotate(0);
+    }
+
+    100% {
+        left     : 30%;
+        top      : 10%;
+        transform: rotate(45deg);
+    }
+}
+
+@keyframes arrow-move-after-toggle {
+    0% {
+        left     : 50%;
+        bottom   : 10%;
+        transform: rotate(45deg);
+    }
+
+    50% {
+        left     : 30%;
+        bottom   : 10%;
+        transform: rotate(0deg);
+    }
+
+    100% {
+        left     : 30%;
+        bottom   : 10%;
+        transform: rotate(-45deg);
+    }
+}
+
+@keyframes jello-collapsed {
+    0% {
+        right: 0;
+    }
+
+    50% {
+        right: 3px;
+    }
+
+    100% {
+        right: 0;
+    }
+}

package/css-build/less/list/list.less

@@ -0,0 +1,5 @@
+ul.no-list {    
+    li {
+        list-style: none;
+    }
+}

package/css-build/less/loader/v-loader.less

@@ -0,0 +1,219 @@
+.vx-v-loader {
+	display        : flex;
+	overflow       : hidden;
+	align-items    : center;
+	justify-content: center;
+	text-align     : center;
+	// position       : absolute;
+	// top            : 0;
+	// left           : 0;
+	background     : transparent;
+	// z-index        : 9;
+	// top: 0;
+	// right: 0;
+	// bottom: 0;
+	// left: 0;
+    &-container {
+        position     : relative;
+        width        : 60px;
+        height       : 60px;
+        margin-left  : 0;
+        padding      : 2px;
+        border-radius: 20px;
+        box-sizing   : border-box;
+    }
+}
+
+.vx-v-loader-inner {
+	display        : flex;
+	align-items    : center;
+	justify-content: center;
+	height         : 56px;
+
+	svg {
+		position: relative;
+	}
+}
+
+.vx-v-loader-colored-blocks {
+	overflow           : hidden;
+	position           : absolute;
+	left               : 0%;
+	top                : 0;
+	width              : 60px;
+	height             : 60px;
+	margin-left        : 0;
+	padding            : 2px;
+	box-sizing         : border-box;
+	border-radius      : 20px;
+	-webkit-perspective: 1000px;
+	perspective        : 1000px;
+	-webkit-animation  : demoAnim 4s ease-in-out infinite, contAnim 4s infinite;
+	animation          : demoAnim 4s ease-in-out infinite, contAnim 4s infinite;
+}
+
+.vx-v-loader-colored-blocks-rotater {
+	position     : absolute;
+	left         : 0;
+	top          : 0;
+	width        : 60px;
+	height       : 60px;
+	box-sizing   : border-box;
+	border-radius: inherit;
+}
+
+.vx-v-loader-colored-blocks-inner {
+	overflow     : hidden;
+	position     : relative;
+	height       : 100%;
+	background   : #ffffff;
+	border-radius: inherit;
+	box-sizing   : border-box;
+}
+
+.vx-v-loader-colored-block {
+	position                : absolute;
+	left                    : 50%;
+	top                     : 50%;
+	width                   : 300%;
+	height                  : 300%;
+	box-sizing              : border-box;
+	-webkit-transform-origin: 0 0;
+	transform-origin        : 0 0;
+}
+
+.vx-v-loader-colored-block:nth-child(1) {
+	-webkit-transform: rotate(45deg) skewX(37deg);
+	transform        : rotate(45deg) skewX(37deg);
+	background-color : #4681ef;
+}
+
+.vx-v-loader-colored-block:nth-child(2) {
+	-webkit-transform: rotate(97deg) skewX(32deg);
+	transform        : rotate(97deg) skewX(32deg);
+	background-color : #66bf72;
+}
+
+.vx-v-loader-colored-block:nth-child(3) {
+	-webkit-transform: rotate(154deg) skewX(26deg);
+	transform        : rotate(154deg) skewX(26deg);
+	background-color : #8c81f5;
+}
+
+.vx-v-loader-colored-block:nth-child(4) {
+	-webkit-transform: rotate(-22deg) skewX(22deg);
+	transform        : rotate(-22deg) skewX(22deg);
+	background-color : #e75151;
+}
+
+.vx-v-loader-colored-block:nth-child(5) {
+	-webkit-transform: rotate(218deg) skewX(24deg);
+	transform        : rotate(218deg) skewX(24deg);
+	background-color : #f5a05b;
+}
+
+.vx-v-loader-colored-block:nth-child(6) {
+	-webkit-transform: rotate(282deg) skewX(33deg);
+	transform        : rotate(282deg) skewX(33deg);
+	background-color : #f4c84a;
+}
+
+@-webkit-keyframes contAnim {
+
+	15%,
+	100% {
+		margin-left: 0;
+		width      : 60px;
+	}
+
+	25%,
+	90% {
+		margin-left: 0;
+		width      : 60px;
+	}
+}
+
+@keyframes contAnim {
+
+	15%,
+	100% {
+		margin-left: 0;
+		width      : 60px;
+	}
+
+	25%,
+	90% {
+		margin-left: 0;
+		width      : 60px;
+	}
+}
+
+@-webkit-keyframes demoAnim {
+	15% {
+		border-radius    : 20px;
+		-webkit-transform: rotate(0);
+		transform        : rotate(0);
+	}
+
+	30%,
+	43% {
+		border-radius    : 50%;
+		-webkit-transform: rotate(360deg);
+		transform        : rotate(360deg);
+	}
+
+	52%,
+	65% {
+		border-radius    : 0;
+		-webkit-transform: rotate(720deg);
+		transform        : rotate(720deg);
+	}
+
+	78%,
+	90% {
+		border-radius    : 50%;
+		-webkit-transform: rotate(1080deg);
+		transform        : rotate(1080deg);
+	}
+
+	100% {
+		border-radius    : 20px;
+		-webkit-transform: rotate(1440deg);
+		transform        : rotate(1440deg);
+	}
+}
+
+@keyframes demoAnim {
+	15% {
+		border-radius    : 20px;
+		-webkit-transform: rotate(0);
+		transform        : rotate(0);
+	}
+
+	30%,
+	43% {
+		border-radius    : 50%;
+		-webkit-transform: rotate(360deg);
+		transform        : rotate(360deg);
+	}
+
+	52%,
+	65% {
+		border-radius    : 0;
+		-webkit-transform: rotate(720deg);
+		transform        : rotate(720deg);
+	}
+
+	78%,
+	90% {
+		border-radius    : 50%;
+		-webkit-transform: rotate(1080deg);
+		transform        : rotate(1080deg);
+	}
+
+	100% {
+		border-radius    : 20px;
+		-webkit-transform: rotate(1440deg);
+		transform        : rotate(1440deg);
+	}
+}

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

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

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

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

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

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

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

@@ -0,0 +1,40 @@
+@import url('../mixin/mixin.less');
+
+.vx-mr-0 {
+    margin-right: 0 !important;
+}
+
+.vx-mr-1 {
+    margin-right: 4px !important;
+}
+
+.vx-mr-2 {
+    margin-right: 8px !important;
+}
+
+.vx-mr-3 {
+    margin-right:12px !important;
+}
+
+.vx-mr-4 {
+    margin-right: 16px !important;
+}
+
+.vx-mr-5 {
+    margin-right: 20px !important;
+}
+.vx-mr-6 {
+    margin-right: 24px !important;
+}
+.vx-mr-7 {
+    margin-right: 28px !important;
+}
+.vx-mr-8 {
+    margin-right: 32px !important;
+}
+.vx-mr-9 {
+    margin-right: 36px !important;
+}
+.vx-mr-10 {
+    margin-right: 40px !important;
+}

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

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

package/css-build/less/margin/margin.less

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