vcomply-design-system 1.0.0

package/css-build/css/dialog/dialog.css

@@ -0,0 +1,421 @@
+body {
+  font-size: 16px;
+}
+a,
+button {
+  cursor: pointer;
+}
+.vx-dialog-container {
+  position: relative;
+  border: 1px solid #F1F1F1;
+  border-radius: 4px;
+}
+.vx-dialog-container.dialog-md {
+  width: 560px;
+}
+.vx-dialog-container.dialog-lg {
+  width: 720px;
+}
+.vx-dialog-container.dialog-sm {
+  width: 380px;
+}
+.vx-dialog-container.dialog-sm .vx-dialog-head {
+  height: 40px;
+  padding: 0 10px 0 20px;
+}
+.vx-dialog-container.dialog-sm .vx-dialog-head button {
+  padding-right: 8px;
+  padding-left: 8px;
+}
+.vx-dialog-container.dialog-sm .vx-dialog-body {
+  padding: 15px 20px;
+}
+.vx-dialog-container.dialog-fs {
+  width: 100%;
+  height: 100%;
+  border-radius: 0;
+  overflow: auto;
+  background: #FFFFFF;
+  position: relative;
+}
+.vx-dialog-container.dialog-fs.close {
+  background: #EE3939;
+  border: none;
+}
+.vx-dialog-container.dialog-fs.close:after {
+  position: absolute;
+  content: "";
+  background: #FFFFFF;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: 0 200px 0 0;
+}
+.vx-dialog-container.dialog-fs.close button.close {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  color: #FFFFFF;
+  font-size: 22px;
+}
+.vx-dialog-container.dialog-alert {
+  width: 540px;
+}
+.vx-dialog-container.dialog-alert .vx-dialog-body {
+  background: #f8f8f8;
+  border-radius: 4px 4px 0 0;
+  padding: 50px 15px 35px;
+}
+.vx-dialog-container.dialog-alert .vx-dialog-body-container {
+  padding: 0;
+}
+.vx-dialog-container.dialog-alert .vx-dialog-icon {
+  background: #fff;
+  border: 1px solid #dcdcdc;
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  margin: 0 auto 35px;
+  padding: 5px 0 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.vx-dialog-container.dialog-alert .vx-dialog-icon i {
+  font-size: 40px;
+}
+.vx-dialog-container.dialog-alert .vx-dialog-description {
+  font-size: 16px;
+  color: #747576;
+  text-align: center;
+  margin: 0;
+  font-weight: 400;
+}
+.vx-dialog-container.dialog-alert .vx-dialog-footer {
+  display: flex;
+  font-size: 14px;
+  background: #fff;
+  padding: 15px 20px;
+  letter-spacing: 0.2px;
+  border-radius: 0 0 4px 4px;
+  z-index: 1;
+  position: relative;
+  align-items: center;
+  justify-content: space-between;
+}
+.vx-dialog-container.dialog-alert .vx-dialog-footer p.info {
+  color: #161b2f;
+  margin: 0;
+  font-size: 14px;
+  font-weight: 400;
+  text-align: left;
+}
+.vx-dialog-container.dialog-alert .vx-dialog-footer .action {
+  display: flex;
+}
+.vx-dialog-container.dialog-alert .vx-dialog-footer .action button {
+  padding: 0 25px;
+}
+.vx-dialog-container.side-dialog {
+  height: 100vh;
+  width: 500px;
+  border-radius: 0;
+}
+.vx-dialog-container.side-dialog .vx-dialog-footer {
+  justify-content: flex-end;
+  display: flex;
+  height: 50px;
+  align-items: center;
+  padding: 0 20px;
+  background: #FBFBFB;
+  border-top: 1px solid #F1F1F1;
+  border-radius: 0;
+}
+.vx-dialog-container.side-dialog .vx-dialog-head {
+  border-radius: 0;
+  padding: 0 8px 0 20px;
+}
+.vx-dialog-container.side-dialog .vx-dialog-head .vx-btn {
+  color: #161b2f !important;
+}
+.vx-dialog-container.side-dialog .vx-dialog-body-container {
+  padding: 0;
+}
+.vx-dialog-container.side-dialog .vx-dialog-body {
+  height: calc(100vh - 100px);
+  overflow: auto;
+}
+.vx-dialog-container.animate {
+  -webkit-animation: scale-up-center 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) 50ms both;
+  animation: scale-up-center 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) 50ms both;
+}
+.vx-dialog-head {
+  background: #f8f8f8;
+  border-bottom: 1px solid #F1F1F1;
+  border-radius: 4px 4px 0 0;
+  height: 50px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 22px;
+}
+.vx-dialog-title {
+  margin: 0;
+  color: #161B2F;
+  font-size: 14px;
+  line-height: 21px;
+  font-weight: 500;
+}
+.vx-dialog-close {
+  font-size: 12px;
+  color: #000000;
+  padding: 0 3px;
+  margin: 0;
+  background: transparent;
+  border: none;
+  outline: none;
+  cursor: pointer;
+}
+.vx-dialog-body {
+  padding: 12px 28px;
+  overflow: auto;
+  overflow-x: hidden;
+}
+.vx-dialog-body-container {
+  padding: 4px;
+  background: #FFFFFF;
+}
+.vx-dialog-body-container .editor-block {
+  min-height: 100px;
+  border: 1px solid #F1F1F1;
+}
+.vx-dialog-simple {
+  background: #FFFFFF;
+  box-shadow: 0 0 5px rgba(30, 93, 211, 0.27);
+  -webkit-animation: scale-up-center 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) 50ms both;
+  animation: scale-up-center 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) 50ms both;
+}
+.vx-dialog-simple .vx-dialog-title {
+  padding: 8px12px;
+}
+.vx-dialog-footer {
+  background: #f8f8f8;
+  border-top: 1px solid #F1F1F1;
+  border-radius: 0 0 4px 4px;
+  height: 50px;
+  padding: 0 20px;
+}
+.error-icon {
+  color: #C7381B;
+  font-size: 36px;
+  display: flex;
+  transform: rotate(45deg);
+}
+.bin-icon {
+  display: block;
+  width: 26px;
+  height: 40px;
+  border-radius: 50%;
+  z-index: 2;
+  position: relative;
+}
+.lid {
+  position: relative;
+  width: 30px;
+  height: 2px;
+  left: -2px;
+  border-radius: 4px;
+}
+.lid:before {
+  content: '';
+  position: absolute;
+  top: -3px;
+  right: 0;
+  left: 0;
+  width: 6px;
+  height: 3px;
+  margin: 0 auto;
+  border-radius: 10px 10px 0 0;
+}
+.box {
+  position: relative;
+  height: 34px;
+  margin-top: 2px;
+  border-radius: 0 0 8px 8px;
+}
+.box-inner {
+  background-color: #FFFFFF;
+  position: relative;
+  top: 2px;
+  width: 22px;
+  height: 30px;
+  margin: 0 auto;
+  border-radius: 0 0 5px 5px;
+}
+.bin-lines {
+  position: relative;
+  top: 3px;
+  margin: 0 auto;
+  width: 2px;
+  height: 22px;
+  border-radius: 4px;
+}
+.bin-lines:before,
+.bin-lines:after {
+  background-color: #d93b41;
+  width: 2px;
+  height: 22px;
+  border-radius: 4px;
+  content: '';
+  position: absolute;
+  transition: 0.2s ease background-color;
+}
+.bin-lines:before {
+  left: -6px;
+}
+.bin-lines:after {
+  left: 6px;
+}
+.lid,
+#lid:before,
+.box,
+#bin-lines {
+  background-color: #d93b41;
+  transition: 0.2s ease background-color;
+}
+.bin-icon.active .box {
+  animation: shake 0.2s ease 0.1s;
+}
+.bin-icon.active .box-inner {
+  background-color: #d93b41;
+}
+.bin-icon.active .bin-lines {
+  background-color: #FFFFFF !important;
+}
+.bin-icon.active .bin-lines::before {
+  background-color: #FFFFFF;
+}
+.bin-icon.active .bin-lines::after {
+  background-color: #FFFFFF;
+}
+.bin-icon.active .lid {
+  animation: lift-up 0.8s ease 0.1s, shake_u 0.8s ease 0.1s, shake_l 0.2s ease 0.8s;
+}
+.activateCircle {
+  display: block;
+  width: 50px;
+  height: 50px;
+  background: transparent;
+  border-radius: 50px;
+  overflow: hidden;
+  position: relative;
+  top: 2px;
+  left: 2px;
+}
+.activateCircle:before {
+  width: 1px;
+  height: 1px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: -1px;
+  margin: auto;
+  content: "";
+  border-radius: 50px;
+  transition: all 300ms ease;
+}
+.activateCircle span {
+  display: block;
+  width: 13px;
+  height: 3px;
+  background: #34aa44;
+  margin: 27px 0 0 7px;
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+.activateCircle span.line-2 {
+  margin: -7px 0 0 13px;
+  transform: rotate(135deg);
+  width: 28px;
+}
+.activateCircle.activeActiveIcon:before {
+  width: 55px;
+  height: 55px;
+  transition: all 300ms ease;
+}
+.activateCircle.activeActiveIcon span {
+  background: #34aa44;
+  animation: scale-up-hor-left-1 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
+}
+.activateCircle.activeActiveIcon span.line-2 {
+  background: #34aa44;
+  animation: scale-up-hor-left-2 0.3s cubic-bezier(0, 0, 0, 0) 10ms both;
+}
+@keyframes lift-up {
+  0% {
+    top: 0;
+  }
+  50% {
+    top: -35px;
+  }
+  100% {
+    top: 0;
+  }
+}
+@keyframes scale-up-hor-left-1 {
+  0% {
+    width: 0;
+    transform: rotate(45deg) translate(-2px, -5px);
+  }
+  50% {
+    width: 16px;
+    transform: rotate(45deg) translate(2px, 0px);
+  }
+  100% {
+    width: 13px;
+    transform: rotate(45deg) translate(0px, 0px);
+  }
+}
+@keyframes scale-up-hor-left-2 {
+  0% {
+    width: 0;
+    transform: rotate(135deg) translate(-2px, -8px);
+  }
+  50% {
+    width: 0;
+    transform: rotate(135deg) translate(4px, -8px);
+  }
+  75% {
+    width: 32px;
+    transform: rotate(135deg) translate(0, 0);
+  }
+  100% {
+    width: 28px;
+    transform: rotate(135deg) translate(0px, 0px);
+  }
+}
+@-webkit-keyframes scale-up-center {
+  0% {
+    -webkit-transform: scale(0.5);
+    transform: scale(0.5);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+@keyframes scale-up-center {
+  0% {
+    -webkit-transform: scale(0.5);
+    transform: scale(0.5);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    opacity: 1;
+  }
+}

package/css-build/css/display/display.css

@@ -0,0 +1,24 @@
+.vx-d-none {
+  display: none !important;
+}
+.vx-d-block {
+  display: block !important;
+}
+.vx-d-flex {
+  display: flex !important;
+}
+.vx-d-table {
+  display: table !important;
+}
+.vx-d-inline {
+  display: inline !important;
+}
+.vx-d-inline-block {
+  display: inline-block !important;
+}
+.vx-d-inline-flex {
+  display: inline-flex !important;
+}
+.vx-flex-wrap {
+  flex-wrap: wrap;
+}

package/css-build/css/forms/check-box.css

@@ -0,0 +1,97 @@
+label.vx-checkbox-item {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+  max-width: 100%;
+}
+label.vx-checkbox-item span {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+label.vx-checkbox-item span.checkbox {
+  height: 16px;
+  width: 16px;
+  border-radius: 2px;
+  border: 1px solid #DBDBDB;
+  position: relative;
+  padding: 2px;
+  margin-top: 0px;
+}
+label.vx-checkbox-item span.value {
+  color: #4E4E4E;
+  font-size: 14px;
+  line-height: 16px;
+  font-weight: 400;
+  margin-left: 10px;
+  max-width: calc(100% - 26px);
+}
+label.vx-checkbox-item span.value:empty {
+  display: none;
+}
+label.vx-checkbox-item svg {
+  display: none;
+  margin-top: 0px;
+}
+label.vx-checkbox-item input[type=checkbox] {
+  display: none;
+}
+label.vx-checkbox-item input[type=checkbox]:checked ~ svg {
+  display: block;
+}
+label.vx-checkbox-item input[type=checkbox]:checked + .checkbox {
+  display: none;
+}
+label.vx-checkbox-item input[type=checkbox]:disabled ~ * {
+  opacity: 0.7;
+}
+.disabled {
+  opacity: 0.4 !important;
+}
+.checkmark {
+  width: 16px;
+  height: 16px;
+  border-radius: 2px;
+  stroke-width: 4;
+  stroke: #fff;
+  stroke-miterlimit: 10;
+  box-shadow: inset 0px 0px 0px #34AA44;
+  animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
+}
+.checkmark__circle {
+  stroke-dasharray: 166;
+  stroke-dashoffset: 166;
+  stroke-width: 2;
+  stroke-miterlimit: 10;
+  stroke: #34AA44;
+  fill: none;
+  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
+  padding-right: 10px;
+}
+.checkmark__check {
+  transform-origin: 50% 50%;
+  stroke-dasharray: 48;
+  stroke-dashoffset: 48;
+  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
+}
+@keyframes stroke {
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes scale {
+  0%,
+  100% {
+    transform: none;
+  }
+  50% {
+    transform: scale3d(1.1, 1.1, 1);
+  }
+}
+@keyframes fill {
+  100% {
+    box-shadow: inset 0px 0px 0px 30px #34AA44;
+  }
+}