vcomply-design-system 1.0.0

package/css-build/css/index.css

@@ -0,0 +1,548 @@
+body {
+  font-size: 16px;
+}
+a,
+button {
+  cursor: pointer;
+}
+.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;
+}
+.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;
+}
+.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;
+}
+.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;
+}
+.vx-btn {
+  border: 1px solid #F1F1F1;
+  color: #1E5DD3;
+  cursor: pointer;
+  overflow: hidden;
+  outline: none;
+  border-radius: 2px;
+  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;
+}
+.vx-btn i {
+  margin-right: 8px;
+  transform: scale(1.2);
+}
+.vx-btn.after i {
+  margin-left: 8px;
+  margin-right: 0;
+}
+.vx-btn.outline {
+  background: transparent;
+}
+.vx-btn + .vx-btn {
+  margin-left: 8px;
+}
+.vx-btn.transparent {
+  background: transparent !important;
+  border: none;
+}
+.vx-btn.transparent.primary {
+  color: #1E5DD3;
+}
+.vx-btn.transparent.red {
+  color: #EB2424;
+}
+.vx-btn.transparent.grey {
+  color: #161B2F;
+}
+.vx-btn:disabled {
+  filter: grayscale(1);
+  cursor: not-allowed;
+}
+.vx-btn:disabled:hover {
+  filter: grayscale(1);
+}
+.vx-btn:disabled:hover:before {
+  display: none;
+}
+.vx-btn.primary {
+  color: #FFFFFF;
+  background: #1E5DD3;
+  border-color: #1E5DD3;
+}
+.vx-btn.primary.outline {
+  color: #1E5DD3;
+  background: transparent;
+  border-color: #1E5DD3;
+}
+.vx-btn.primary.outline.light {
+  border-color: #f1f1f1;
+}
+.vx-btn.red {
+  color: #FFFFFF;
+  background: #EB2424;
+  border-color: #EB2424;
+}
+.vx-btn.red.outline {
+  color: #EB2424;
+  background: transparent;
+  border-color: #EB2424;
+}
+.vx-btn.grey {
+  color: #161B2F;
+  background: #DBDBDB;
+  border-color: #DBDBDB;
+}
+.vx-btn.grey.outline {
+  color: #161B2F;
+  background: transparent;
+  border-color: #F1F1F1;
+}
+.vx-btn.white {
+  background: #FFFFFF;
+  color: #747576;
+  border-color: #FFFFFF;
+}
+.vx-btn.lg {
+  line-height: 48px;
+  padding-right: 20px !important;
+  padding-left: 20px !important;
+  border-radius: 4px;
+  font-size: 16px;
+  font-weight: 600;
+  border-width: 2px;
+}
+.vx-btn.md {
+  line-height: 24px;
+  min-width: 80px;
+}
+.vx-btn.sm {
+  line-height: 20px;
+  font-size: 9px;
+  margin-bottom: 0;
+}
+.vx-btn.block {
+  display: flex;
+  width: 100%;
+  line-height: 38px;
+  padding-right: 20px !important;
+  padding-left: 20px !important;
+  border-radius: 0px;
+  justify-content: center;
+  font-size: 11px;
+  letter-spacing: 3.08px;
+}
+.vx-btn.block.rounded {
+  border-radius: 4px;
+}
+.vx-btn.icon {
+  height: 36px;
+  width: 36px;
+  border-radius: 50%;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 0;
+}
+.vx-btn.icon.sm {
+  height: 28px;
+  width: 28px;
+  line-height: 26px;
+}
+.vx-btn.icon i {
+  margin: 0;
+}
+.vx-btn:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: #000000;
+  opacity: 0;
+  transition: all 0.2s ease-in-out;
+}
+.vx-btn:hover {
+  position: relative;
+  filter: brightness(85%);
+}
+.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;
+}
+@-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;
+}
+.vx-left-menu {
+  width: 260px;
+  height: 100vh;
+  position: sticky;
+  top: 0;
+  transition: all 0.2s ease-in-out;
+  z-index: 2;
+  overflow: auto;
+}
+.vx-left-menu.toggle {
+  width: 60px;
+  transition: all 0.2s ease-in-out;
+}
+.vx-right-container {
+  width: 100%;
+  transition: all 0.2s ease-in-out;
+}
+.vx-wrapper {
+  padding: 0 12px;
+}
+.vx-wrapper iframe {
+  height: calc(100vh - 4px);
+  background: #FFFFFF;
+  border-radius: 4px;
+  padding: 0 12px;
+  display: none;
+}
+.vx-wrapper iframe.active {
+  display: block;
+}
+.vx-h-100 {
+  height: 100%;
+}
+.vx-dialog-wrapper {
+  display: flex;
+  position: fixed;
+  z-index: 5;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  justify-content: center;
+  align-items: center;
+}
+.vx-dialog-overlay {
+  position: fixed;
+  z-index: -1;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: #161b2f60;
+}