vcomply-design-system 1.0.0

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

@@ -0,0 +1,323 @@
+body {
+  font-size: 16px;
+}
+a,
+button {
+  cursor: pointer;
+}
+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: 0.2px;
+  border: 1px solid #F1F1F1;
+}
+.icon-group i {
+  font-size: 20px;
+  margin-right: 12px;
+}
+.icon-group span.description {
+  position: relative;
+}
+.icon-group span.name {
+  font-size: 12px;
+  color: #161B2F;
+  line-height: 16px;
+  border-bottom: 1px solid #F1F1F1;
+  width: 100%;
+}
+.icon-group span.code {
+  font-size: 16px;
+  color: #747576;
+  width: 100%;
+}
+.vx-sub-menu {
+  width: 232px;
+  height: 100%;
+  position: relative;
+  margin-left: 0;
+  background: #FFFFFF;
+  transition: all 0.2s ease-in-out;
+  padding: 0;
+}
+.vx-sub-menu.toggle {
+  margin-left: -220px;
+  transition: all 0.2s ease-in-out;
+}
+.vx-sub-menu.toggle ul,
+.vx-sub-menu.toggle .vx-bottom-section {
+  opacity: 0;
+  pointer-events: none;
+}
+.vx-sub-menu.toggle.hoverable:hover {
+  margin-left: 0;
+}
+.vx-sub-menu.toggle.hoverable:hover ul,
+.vx-sub-menu.toggle.hoverable:hover .vx-bottom-section {
+  opacity: 1;
+  pointer-events: all;
+}
+.vx-sub-menu.toggle.hoverable button.vx-toggle-menu {
+  opacity: 0;
+}
+.vx-sub-menu h3.vx-title {
+  font-size: 14px;
+  border-bottom: 1px solid #F1F1F1;
+  padding: 0;
+  margin-bottom: 20px;
+}
+.vx-sub-menu h3.vx-title span {
+  display: block;
+  height: 16px;
+  width: 2px;
+  margin-right: 8px;
+}
+.vx-sub-menu ul {
+  box-shadow: 0 8px 8px rgba(30, 93, 210, 0.25);
+  height: calc(100vh - 69px);
+  overflow: auto;
+  padding: 0 12px;
+}
+.vx-sub-menu ul li {
+  list-style: none;
+  display: flex;
+  border-bottom: 1px solid #F1F1F1;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+.vx-sub-menu ul li a {
+  text-decoration: none;
+  line-height: 40px;
+  font-size: 12px;
+  color: #707070;
+  height: 40px;
+  cursor: pointer;
+  width: 100%;
+}
+.vx-sub-menu ul li a:hover,
+.vx-sub-menu ul li a.active {
+  color: #1E5DD3;
+}
+.vx-sub-menu ul li a.parent {
+  color: #161B2F;
+}
+.vx-sub-menu ul li img {
+  width: 16px;
+  height: 16px;
+  padding: 4px;
+  border-radius: 50%;
+  border: 1px solid #F1F1F1;
+}
+.vx-sub-menu ul li ul {
+  padding-left: 0;
+  width: 100%;
+  box-shadow: none;
+  height: auto;
+}
+.vx-sub-menu ul li ul li a {
+  padding-left: 12px !important;
+  position: relative;
+}
+.vx-sub-menu ul li ul li a:before {
+  font-family: 'icon';
+  content: '\e910';
+  position: absolute;
+  left: 0;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  font-size: 8px;
+}
+.vx-sub-menu .vx-bottom-section {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+}
+.vx-sub-menu .vx-bottom-section button {
+  background: #1E5DD3;
+  border: none;
+  color: #FFFFFF;
+  font-size: 16px;
+  padding: 0 12px;
+  height: 44px;
+  width: 100%;
+  cursor: pointer;
+}
+.vx-sub-menu .vx-bottom-section button i {
+  margin-right: 8px;
+}
+.vx-sub-menu 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;
+}
+.vx-sub-menu button.vx-toggle-menu: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() {
+  .vx-sub-menu button.vx-toggle-menu:before {
+    top: -2px !important;
+  }
+}
+.vx-sub-menu button.vx-toggle-menu i {
+  position: relative;
+  top: 0.6px;
+}
+@-moz-document url-prefix() {
+  .vx-sub-menu button.vx-toggle-menu i {
+    top: -1px !important;
+  }
+}
+.vx-sub-menu button.vx-toggle-menu.toggle {
+  -webkit-transform: scale(-1);
+  transform: scale(-1);
+  width: 30px;
+}
+.vx-sub-menu button.vx-toggle-menu.toggle:before {
+  background: #ffffff;
+}
+.vx-sub-menu button.vx-toggle-menu.toggle i {
+  position: relative;
+}
+.vx-sub-menu: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/css/list/list.css

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

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

@@ -0,0 +1,183 @@
+.vx-v-loader {
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background: transparent;
+}
+.vx-v-loader-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;
+}
+.vx-v-loader-inner 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/css/margin/index.css

@@ -0,0 +1,112 @@
+body {
+  font-size: 16px;
+}
+a,
+button {
+  cursor: pointer;
+}
+.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;
+}
+.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;
+}
+.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;
+}
+.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;
+}
+.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;
+}

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

@@ -0,0 +1,25 @@
+body {
+  font-size: 16px;
+}
+a,
+button {
+  cursor: pointer;
+}
+.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/css/margin/margin-left.css

@@ -0,0 +1,25 @@
+body {
+  font-size: 16px;
+}
+a,
+button {
+  cursor: pointer;
+}
+.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/css/margin/margin-right.css

@@ -0,0 +1,40 @@
+body {
+  font-size: 16px;
+}
+a,
+button {
+  cursor: pointer;
+}
+.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;
+}