vcomply-design-system 1.0.0

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

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

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

@@ -0,0 +1,7 @@
+body {
+  font-size: 16px;
+}
+a,
+button {
+  cursor: pointer;
+}

package/css-build/css/no-data/no-data.css

@@ -0,0 +1,36 @@
+.vx-no-data-wrapper {
+  height: 100%;
+  width: 100%;
+  background: #fff;
+  border-radius: 4px;
+}
+.vx-no-data-container {
+  width: 450px;
+}
+.vx-no-data-container .image {
+  width: 250px;
+  margin-bottom: 20px;
+}
+.vx-no-data-container p.text {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  margin-bottom: 24px;
+  color: #161B2F;
+  text-align: center;
+  margin-top: 0;
+}
+.vx-no-data-container p.text strong {
+  font-weight: 500;
+}
+.vx-no-data-container .button-row button.small i {
+  margin-right: 4px;
+  font-size: 10px;
+}
+h3.heading {
+  font-size: 20px;
+  margin-top: 10px;
+  font-weight: 500;
+  margin-bottom: 10px;
+  padding-left: 20px;
+}

package/css-build/css/padding/index.css

@@ -0,0 +1,97 @@
+body {
+  font-size: 16px;
+}
+a,
+button {
+  cursor: pointer;
+}
+.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-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-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-p-0 {
+  padding: 0 !important;
+}
+.vx-p-1 {
+  padding: 4px !important;
+}
+.vx-p-2 {
+  padding: 8px !important;
+}
+.vx-p-3 {
+  padding: 12px !important;
+}
+.vx-p-4 {
+  padding: 16px !important;
+}
+.vx-p-5 {
+  padding: 20px !important;
+}

package/css-build/css/padding/padding-bottom.css

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

package/css-build/css/padding/padding-left.css

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

package/css-build/css/padding/padding-right.css

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

package/css-build/css/padding/padding-top.css

@@ -0,0 +1,25 @@
+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;
+}

package/css-build/css/padding/padding.css

@@ -0,0 +1,25 @@
+body {
+  font-size: 16px;
+}
+a,
+button {
+  cursor: pointer;
+}
+.vx-p-0 {
+  padding: 0 !important;
+}
+.vx-p-1 {
+  padding: 4px !important;
+}
+.vx-p-2 {
+  padding: 8px !important;
+}
+.vx-p-3 {
+  padding: 12px !important;
+}
+.vx-p-4 {
+  padding: 16px !important;
+}
+.vx-p-5 {
+  padding: 20px !important;
+}

package/css-build/css/pagination/pagination.css

@@ -0,0 +1,131 @@
+body {
+  font-size: 16px;
+}
+a,
+button {
+  cursor: pointer;
+}
+ul.vx-pagination {
+  display: flex;
+  align-items: center;
+  padding: 0;
+  margin: 12px 0 0;
+  justify-content: flex-end;
+}
+ul.vx-pagination li {
+  list-style: none;
+  display: block;
+}
+ul.vx-pagination li + li {
+  margin-left: 3px;
+}
+ul.vx-pagination li button {
+  border: 1px solid #BCBCBC;
+  background: #FFFFFF;
+  border-radius: 2px;
+  color: #161B2F;
+  font-weight: 400;
+  height: 20px;
+  min-width: 20px;
+  padding: 0 7px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  outline: none;
+  cursor: pointer;
+  text-transform: uppercase;
+  font-size: 12px;
+  line-height: 18px;
+}
+ul.vx-pagination li button.active,
+ul.vx-pagination li button:hover {
+  border-color: #1E5DD3;
+  background: #1E5DD3;
+  color: #FFFFFF;
+}
+ul.vx-pagination li button.disabled {
+  filter: grayscale(100%);
+  pointer-events: none;
+  opacity: 1;
+  color: unset !important;
+  border: 1px solid #bcbcbc;
+}
+ul.vx-pagination li button.disable {
+  pointer-events: none;
+}
+ul.vx-pagination li button i {
+  font-size: 8px;
+  width: 13px;
+  height: 13px;
+  line-height: 13px;
+}
+.vx-pagination-container {
+  display: flex;
+}
+.vx-pagination-container .vx-go-to-page {
+  margin: 12px 0 0 8px;
+  display: flex;
+}
+.vx-pagination-container .vx-go-to-page ul {
+  padding: 0;
+  margin: 0;
+}
+.vx-pagination-container .vx-go-to-page ul.vx-go-pagination {
+  display: flex;
+  align-items: flex-start;
+  border: 1px solid #BCBCBC;
+}
+.vx-pagination-container .vx-go-to-page ul.vx-go-pagination li {
+  list-style: none;
+  display: block;
+}
+.vx-pagination-container .vx-go-to-page ul.vx-go-pagination li span {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  text-transform: uppercase;
+  border-radius: 0;
+  border: none;
+  color: #161B2F;
+  background: #FFFFFF;
+  font-size: 10px;
+  height: 18px;
+  min-width: 20px;
+  padding: 0 4px;
+}
+.vx-pagination-container .vx-go-to-page ul.vx-go-pagination li button {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  outline: none;
+  cursor: pointer;
+  text-transform: uppercase;
+  border-radius: 0;
+  border: none;
+  color: #161B2F;
+  background: #FFFFFF;
+  font-size: 8px;
+  height: 18px;
+  min-width: 20px;
+}
+.vx-pagination-container .vx-go-to-page ul.vx-go-pagination li button.enter {
+  background: #F1F1F1;
+  color: #1E5DD3;
+  font-size: 10px;
+  padding: 0 4px;
+}
+.vx-pagination-container .vx-go-to-page ul.vx-go-pagination li input {
+  height: 18px;
+  border: none;
+  outline: none;
+  font-size: 12px;
+  background: #FFFFFF;
+  width: 72px;
+  font-size: 10px;
+}
+.vx-pagination-container .vx-go-to-page ul.vx-go-pagination li:first-of-type {
+  border-right: 1px solid #BCBCBC;
+}
+.vx-pagination-container .vx-go-to-page ul.vx-go-pagination li:last-of-type {
+  border-left: 1px solid #BCBCBC;
+}

package/css-build/css/panel/panel.css

@@ -0,0 +1,76 @@
+body {
+  font-size: 16px;
+}
+a,
+button {
+  cursor: pointer;
+}
+.vx-panel {
+  display: block;
+}
+.vx-panel + .vx-panel {
+  margin-top: 10px;
+}
+.vx-panel-head {
+  display: flex;
+  padding: 0 4px 0 12px;
+  margin: 0;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #DCDCDC;
+}
+.vx-panel-head .title {
+  padding: 0;
+  margin: 0;
+  color: #161B2F;
+  line-height: 40px;
+}
+.vx-panel-head .action {
+  width: auto;
+}
+.vx-panel-body {
+  padding: 8px12px;
+  display: block;
+  background: #FFFFFF;
+  transition: height 0.35s ease;
+}
+.vx-panel-footer {
+  background: #FBFBFB;
+  border-top: 1px solid #F1F1F1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  height: 48px;
+  padding: 12px;
+}
+.vx-panel.active {
+  border-color: #1E5DD3 !important;
+}
+.vx-panel.active .vx-panel-head {
+  border-bottom-color: #1E5DD3;
+}
+.vx-panel.default .vx-panel-head {
+  background: #FBFBFB;
+}
+.vx-panel.accordionItem.close .vx-panel-body {
+  height: 0;
+  overflow: hidden;
+  padding: 0;
+}
+.vx-panel.accordionItem.open .vx-panel-body {
+  height: auto;
+}
+.vx-panel.accordionItem.open .accordionItemHeading .action button i {
+  transform: rotate(90deg);
+  transition: height 0.35s ease;
+}
+.vx-panel.vx-lg .vx-panel-head .title {
+  line-height: 48px;
+  font-size: 16px;
+}
+.vx-panel.vx-lg .vx-panel-body {
+  padding: 12px 20px;
+}
+.vx-accordion-group .vx-panel {
+  margin: 0;
+}