vcomply-design-system 1.0.0

package/README.md

@@ -0,0 +1,22 @@
+# VX Design System
+
+This Design system is based on the design pattern used for all the Vcomply products.
+
+
+## Usage
+
+Add the package as a dependency to your project using:
+
+    npm i vx-design-system
+
+Add the required less file in your stylesheet:
+
+
+    
+
+   @import "~vx-design-system/css-build/less/vx.less";";  
+
+
+
+Usage Warning: An Attribution is required with permission in written.
+

package/css-build/css/alignment/alignment.css

@@ -0,0 +1,33 @@
+.vx-text-left {
+  text-align: left;
+}
+.vx-text-center {
+  text-align: center;
+}
+.vx-text-right {
+  text-align: right;
+}
+.vx-justify-start {
+  justify-content: flex-start;
+}
+.vx-justify-center {
+  justify-content: center;
+}
+.vx-justify-end {
+  justify-content: flex-end;
+}
+.vx-justify-between {
+  justify-content: space-between;
+}
+.vx-justify-around {
+  justify-content: space-around;
+}
+.vx-align-start {
+  align-items: flex-start;
+}
+.vx-align-center {
+  align-items: center;
+}
+.vx-align-end {
+  align-items: flex-end;
+}

package/css-build/css/animate/animate-fade-in-left.css

@@ -0,0 +1,28 @@
+@-webkit-keyframes fadeInLeft {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(-200px, 0, 0);
+    transform: translate3d(-200px, 0, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+}
+@keyframes fadeInLeft {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(-200px, 0, 0);
+    transform: translate3d(-200px, 0, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+}
+.animate-fadeInLeft {
+  -webkit-animation-name: fadeInLeft;
+  animation-name: fadeInLeft;
+}

package/css-build/css/animate/animate-fade-in-right.css

@@ -0,0 +1,28 @@
+@-webkit-keyframes fadeInRight {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(200px, 0, 0);
+    transform: translate3d(200px, 0, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+}
+@keyframes fadeInRight {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(200px, 0, 0);
+    transform: translate3d(200px, 0, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+}
+.animate-fadeInRight {
+  -webkit-animation-name: fadeInRight;
+  animation-name: fadeInRight;
+}

package/css-build/css/animate/animate-fade-in.css

@@ -0,0 +1,20 @@
+@-webkit-keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.animate-fadeIn {
+  -webkit-animation-name: fadeIn;
+  animation-name: fadeIn;
+}

package/css-build/css/animate/animate-fade-out.css

@@ -0,0 +1,20 @@
+@-webkit-keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.animate-fadeOut {
+  -webkit-animation-name: fadeOut;
+  animation-name: fadeOut;
+}

package/css-build/css/animate/animate-slide-down.css

@@ -0,0 +1,26 @@
+@-webkit-keyframes slideInDown {
+  0% {
+    -webkit-transform: translate3d(0, -200px, 0);
+    transform: translate3d(0, -200px, 0);
+    visibility: visible;
+  }
+  to {
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+}
+@keyframes slideInDown {
+  0% {
+    -webkit-transform: translate3d(0, -200px, 0);
+    transform: translate3d(0, -200px, 0);
+    visibility: visible;
+  }
+  to {
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+}
+.animate-slideInDown {
+  -webkit-animation-name: slideInDown;
+  animation-name: slideInDown;
+}

package/css-build/css/animate/animate-slide-left.css

@@ -0,0 +1,26 @@
+@-webkit-keyframes slideInLeft {
+  0% {
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+    visibility: visible;
+  }
+  to {
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+}
+@keyframes slideInLeft {
+  0% {
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+    visibility: visible;
+  }
+  to {
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+}
+.animate-slideInLeft {
+  -webkit-animation-name: slideInLeft;
+  animation-name: slideInLeft;
+}

package/css-build/css/animate/animate-slide-right.css

@@ -0,0 +1,26 @@
+@-webkit-keyframes slideInRight {
+  0% {
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+  to {
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+}
+@keyframes slideInRight {
+  0% {
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+  to {
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+}
+.animate-slideInRight {
+  -webkit-animation: slideInRight 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  animation: slideInRight 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}

package/css-build/css/animate/animate-slide-up.css

@@ -0,0 +1,26 @@
+@-webkit-keyframes slideInUp {
+  0% {
+    -webkit-transform: translate3d(0, 200px, 0);
+    transform: translate3d(0, 200px, 0);
+    visibility: visible;
+  }
+  to {
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+}
+@keyframes slideInUp {
+  0% {
+    -webkit-transform: translate3d(0, 200px, 0);
+    transform: translate3d(0, 200px, 0);
+    visibility: visible;
+  }
+  to {
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+}
+.animate-slideInUp {
+  -webkit-animation-name: slideInUp;
+  animation-name: slideInUp;
+}

package/css-build/css/animate/animation.css

@@ -0,0 +1,58 @@
+.animate {
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+.animate.animate-infinite {
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+}
+.animate.animate-repeat-1 {
+  -webkit-animation-iteration-count: 1;
+  animation-iteration-count: 1;
+}
+.animate.animate-repeat-2 {
+  -webkit-animation-iteration-count: 2;
+  animation-iteration-count: 2;
+}
+.animate.animate-repeat-3 {
+  -webkit-animation-iteration-count: 3;
+  animation-iteration-count: 3;
+}
+.animate.animate-delay-1s {
+  -webkit-animation-delay: 1s;
+  animation-delay: 1s;
+}
+.animate.animate-delay-2s {
+  -webkit-animation-delay: 2s;
+  animation-delay: 2s;
+}
+.animate.animate-delay-3s {
+  -webkit-animation-delay: 3s;
+  animation-delay: 3s;
+}
+.animate.animate-delay-4s {
+  -webkit-animation-delay: 4s;
+  animation-delay: 4s;
+}
+.animate.animate-delay-5s {
+  -webkit-animation-delay: 5s;
+  animation-delay: 5s;
+}
+.animate.animate-faster {
+  -webkit-animation-duration: 0.2s;
+  animation-duration: 0.2s;
+}
+.animate.animate-fast {
+  -webkit-animation-duration: 0.5s;
+  animation-duration: 0.5s;
+}
+.animate.animate-slow {
+  -webkit-animation-duration: 2s;
+  animation-duration: 2s;
+}
+.animate.animate-slower {
+  -webkit-animation-duration: 3s;
+  animation-duration: 3s;
+}

package/css-build/css/animate/index.css

@@ -0,0 +1,258 @@
+@-webkit-keyframes fadeInLeft {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(-200px, 0, 0);
+    transform: translate3d(-200px, 0, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+}
+@keyframes fadeInLeft {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(-200px, 0, 0);
+    transform: translate3d(-200px, 0, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+}
+.animate-fadeInLeft {
+  -webkit-animation-name: fadeInLeft;
+  animation-name: fadeInLeft;
+}
+@-webkit-keyframes fadeInRight {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(200px, 0, 0);
+    transform: translate3d(200px, 0, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+}
+@keyframes fadeInRight {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(200px, 0, 0);
+    transform: translate3d(200px, 0, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+}
+.animate-fadeInRight {
+  -webkit-animation-name: fadeInRight;
+  animation-name: fadeInRight;
+}
+@-webkit-keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.animate-fadeIn {
+  -webkit-animation-name: fadeIn;
+  animation-name: fadeIn;
+}
+@-webkit-keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.animate-fadeOut {
+  -webkit-animation-name: fadeOut;
+  animation-name: fadeOut;
+}
+@-webkit-keyframes slideInDown {
+  0% {
+    -webkit-transform: translate3d(0, -200px, 0);
+    transform: translate3d(0, -200px, 0);
+    visibility: visible;
+  }
+  to {
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+}
+@keyframes slideInDown {
+  0% {
+    -webkit-transform: translate3d(0, -200px, 0);
+    transform: translate3d(0, -200px, 0);
+    visibility: visible;
+  }
+  to {
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+}
+.animate-slideInDown {
+  -webkit-animation-name: slideInDown;
+  animation-name: slideInDown;
+}
+@-webkit-keyframes slideInLeft {
+  0% {
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+    visibility: visible;
+  }
+  to {
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+}
+@keyframes slideInLeft {
+  0% {
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+    visibility: visible;
+  }
+  to {
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+}
+.animate-slideInLeft {
+  -webkit-animation-name: slideInLeft;
+  animation-name: slideInLeft;
+}
+@-webkit-keyframes slideInRight {
+  0% {
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+  to {
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+}
+@keyframes slideInRight {
+  0% {
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+  to {
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+}
+.animate-slideInRight {
+  -webkit-animation: slideInRight 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  animation: slideInRight 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+@-webkit-keyframes slideInUp {
+  0% {
+    -webkit-transform: translate3d(0, 200px, 0);
+    transform: translate3d(0, 200px, 0);
+    visibility: visible;
+  }
+  to {
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+}
+@keyframes slideInUp {
+  0% {
+    -webkit-transform: translate3d(0, 200px, 0);
+    transform: translate3d(0, 200px, 0);
+    visibility: visible;
+  }
+  to {
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+}
+.animate-slideInUp {
+  -webkit-animation-name: slideInUp;
+  animation-name: slideInUp;
+}
+.animate {
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+.animate.animate-infinite {
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+}
+.animate.animate-repeat-1 {
+  -webkit-animation-iteration-count: 1;
+  animation-iteration-count: 1;
+}
+.animate.animate-repeat-2 {
+  -webkit-animation-iteration-count: 2;
+  animation-iteration-count: 2;
+}
+.animate.animate-repeat-3 {
+  -webkit-animation-iteration-count: 3;
+  animation-iteration-count: 3;
+}
+.animate.animate-delay-1s {
+  -webkit-animation-delay: 1s;
+  animation-delay: 1s;
+}
+.animate.animate-delay-2s {
+  -webkit-animation-delay: 2s;
+  animation-delay: 2s;
+}
+.animate.animate-delay-3s {
+  -webkit-animation-delay: 3s;
+  animation-delay: 3s;
+}
+.animate.animate-delay-4s {
+  -webkit-animation-delay: 4s;
+  animation-delay: 4s;
+}
+.animate.animate-delay-5s {
+  -webkit-animation-delay: 5s;
+  animation-delay: 5s;
+}
+.animate.animate-faster {
+  -webkit-animation-duration: 0.2s;
+  animation-duration: 0.2s;
+}
+.animate.animate-fast {
+  -webkit-animation-duration: 0.5s;
+  animation-duration: 0.5s;
+}
+.animate.animate-slow {
+  -webkit-animation-duration: 2s;
+  animation-duration: 2s;
+}
+.animate.animate-slower {
+  -webkit-animation-duration: 3s;
+  animation-duration: 3s;
+}

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

@@ -0,0 +1,83 @@
+body {
+  font-size: 16px;
+}
+a,
+button {
+  cursor: pointer;
+}
+.vx-avatar {
+  display: flex;
+  border-radius: 50%;
+  border: 2px solid #f1f1f1;
+}
+.vx-avatar.md {
+  height: 28px;
+  width: 28px;
+}
+.vx-avatar.sm {
+  height: 24px;
+  width: 24px;
+}
+.vx-avatar.sm span {
+  font-size: 8px;
+  font-weight: 500;
+}
+.vx-avatar.lg {
+  height: 32px;
+  width: 32px;
+}
+.vx-avatar.lg span {
+  font-size: 12px;
+}
+.vx-avatar.x-lg {
+  height: 80px;
+  width: 80px;
+}
+.vx-avatar.x-lg span {
+  font-size: 18px;
+  font-weight: 600;
+}
+.vx-avatar.counter {
+  cursor: pointer;
+}
+.vx-avatar span {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 10px;
+  font-weight: 500;
+  color: #FFFFFF;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  text-transform: uppercase;
+  margin: 0;
+  background: #F1F1F1;
+}
+.vx-avatar span.green {
+  background: #34AA44;
+}
+.vx-avatar span.blue {
+  background: #1E5DD3;
+}
+.vx-avatar span.grey {
+  color: #34AA44 !important;
+  font-size: 14px !important;
+}
+.vx-avatar img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+.vx-avatar-container {
+  padding-bottom: 20px;
+}
+.vx-avatar-container .vx-avatar + .vx-avatar {
+  margin-left: 20px;
+}
+.vx-avatar-group {
+  display: flex;
+}
+.vx-avatar-group .vx-avatar + .vx-avatar {
+  margin-left: -10px;
+}