vcomply-design-system 1.0.0

package/css-build/css/snack-bar/snack-bar.css

@@ -0,0 +1,77 @@
+body {
+  font-size: 16px;
+}
+a,
+button {
+  cursor: pointer;
+}
+.vx-snack-bar {
+  border-radius: 4px;
+  box-sizing: border-box;
+  display: block;
+  margin: 24px;
+  max-width: 33vw;
+  min-width: 344px;
+  padding: 14px 16px;
+  min-height: 48px;
+  transform-origin: center;
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+}
+.vx-snack-bar-overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+}
+.vx-snack-bar-overlay.top-center {
+  justify-content: center;
+  align-items: flex-start;
+}
+.vx-snack-bar-overlay.top-left {
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.vx-snack-bar-overlay.top-right {
+  justify-content: flex-end;
+  align-items: flex-start;
+}
+.vx-snack-bar-overlay.bottom-center {
+  justify-content: center;
+  align-items: flex-end;
+}
+.vx-snack-bar-overlay.bottom-left {
+  justify-content: flex-start;
+  align-items: flex-end;
+}
+.vx-snack-bar-overlay.bottom-right {
+  justify-content: flex-end;
+  align-items: flex-end;
+}
+.vx-snack-bar-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  line-height: 20px;
+}
+.vx-snack-bar-text {
+  margin: 0;
+  padding: 0;
+  font-size: 12px;
+  font-weight: 400;
+}
+.vx-snack-bar-action button {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  color: #F6882F;
+}
+.vx-snack-bar.light {
+  background: #FFFFFF;
+  color: #161B2F;
+}
+.vx-snack-bar.dark {
+  background: #161B2F;
+  color: #FFFFFF;
+}

package/css-build/css/table/table.css

@@ -0,0 +1,191 @@
+body {
+  font-size: 16px;
+}
+a,
+button {
+  cursor: pointer;
+}
+table.vx-table {
+  border-collapse: separate;
+  border-spacing: 0 4px;
+  width: 100%;
+}
+table.vx-table thead tr th {
+  font-size: 11px;
+  padding: 12px 10px;
+  background: #f1f1f1;
+  text-transform: uppercase;
+  color: #747576;
+  font-weight: 600;
+  line-height: 14px;
+  text-align: left;
+  font-weight: 400;
+  white-space: nowrap;
+  z-index: 2;
+  position: relative;
+}
+table.vx-table thead tr th:first-child {
+  border-radius: 2px 0 0 0;
+  text-align: center;
+  width: 44px;
+  padding: 0 12px;
+}
+table.vx-table thead tr th:last-child {
+  border-radius: 0 2px 0 0;
+  text-align: right;
+  width: 44px;
+}
+table.vx-table thead tr th:last-child::before {
+  border-radius: 0 2px 0 0;
+}
+table.vx-table thead tr th span.resizer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 1px;
+  cursor: ew-resize;
+  background: #747576;
+  outline: none;
+}
+table.vx-table thead tr th span.resizer:focus {
+  background: #161B2F;
+}
+table.vx-table tbody tr td {
+  font-size: 11px;
+  padding: 4px 10px;
+  background: #FFFFFF;
+  text-transform: uppercase;
+  color: #747576;
+  font-weight: 600;
+  line-height: 14px;
+  text-align: left;
+  font-weight: 400;
+  white-space: nowrap;
+  z-index: 2;
+  height: 55px;
+}
+table.vx-table tbody tr td:first-child {
+  border-radius: 2px 0 0 2px;
+  text-align: center;
+  width: 44px;
+  padding: 0 12px;
+}
+table.vx-table tbody tr td:last-child {
+  border-radius: 0 2px 2px 0;
+  text-align: right;
+  width: 44px;
+}
+table.vx-table tbody tr td button.action {
+  height: 100%;
+  align-items: center;
+}
+table.vx-table tbody tr td button.action:hover:before {
+  opacity: 0.03;
+}
+table.vx-table tbody tr td button.action.expaned i {
+  transform: rotate(90deg);
+}
+table.vx-table tbody tr td span {
+  height: 100%;
+}
+table.vx-table tbody tr td span.sl-no {
+  height: calc(100% + 6px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #F1F1F1;
+  color: #707070;
+  font-size: 10px;
+  writing-mode: vertical-lr;
+}
+table.vx-table tbody tr td .vx-avatar-group {
+  width: 60px;
+}
+table.vx-table tbody tr td .description button {
+  background: transparent;
+  border: none;
+  color: #1E5DD3;
+  font-size: 12px;
+  line-height: 16px;
+  width: 100%;
+  text-align: left;
+  padding: 0;
+  cursor: pointer;
+}
+table.vx-table tbody tr td .description label {
+  font-size: 10px;
+  line-height: 16px;
+  color: #747576;
+  width: 100%;
+  cursor: text;
+}
+table.vx-table tbody tr.selected td:first-child {
+  position: relative;
+}
+table.vx-table tbody tr.selected td:first-child:before {
+  background: #34aa44;
+  border-radius: 2px 0 0 2px;
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 3px;
+  height: 100%;
+}
+table.vx-table tbody tr.selected td span.sl {
+  display: none;
+}
+table.vx-table tbody tr.selected td label.vx-checkbox-item {
+  display: flex;
+  margin-top: -2px;
+  margin-left: 4px;
+}
+table.vx-table tbody tr:hover {
+  box-shadow: 0 0 15px rgba(30, 93, 211, 0.35);
+  z-index: 2;
+  position: relative;
+}
+table.vx-table tbody.childRow {
+  display: none;
+}
+table.vx-table tbody.childRow.active {
+  display: table-row-group;
+}
+table.vx-table tr:hover span.sl {
+  display: none;
+}
+table.vx-table tr:hover label.vx-checkbox-item {
+  display: flex;
+  margin-top: 0px;
+  margin-left: 0px;
+}
+table.vx-table span.sl {
+  display: inline-block;
+}
+table.vx-table label.vx-checkbox-item {
+  display: none;
+}
+table.vx-table.shorting thead tr th i {
+  float: right;
+  cursor: pointer;
+}
+table.vx-table.fix-header thead tr th {
+  position: sticky;
+  top: 4px;
+}
+table.vx-table.fix-header thead tr th:before {
+  content: "";
+  height: 4px;
+  position: absolute;
+  top: -4px;
+  right: 0;
+  left: 0;
+  background: #F1F1F1;
+}
+table.vx-table.fix-header thead tr th:first-child:before {
+  border-radius: 2px 0 0 0;
+}
+table.vx-table.fix-header thead tr th:last-child:before {
+  border-radius: 0 2px 0 0;
+}

package/css-build/css/table-card/table-card.css

@@ -0,0 +1,242 @@
+body {
+  font-size: 16px;
+}
+a,
+button {
+  cursor: pointer;
+}
+.vx-txt-red {
+  color: #EB2424;
+}
+.vx-txt-blue {
+  color: #1E5DD3;
+}
+.vx-txt-white {
+  color: #FFFFFF;
+}
+.vx-paragraph-txt {
+  color: #747576;
+}
+.vx-label-txt {
+  color: #161B2F;
+}
+.vx-bg-grey {
+  background: #F1F1F1;
+}
+.vx-bg-white {
+  background: #FFFFFF;
+}
+.vx-bg-red {
+  background: #EB2424;
+}
+.vx-bg-vColor {
+  background: #EE3939;
+}
+.vx-bg-blue {
+  background: #1E5DD3;
+}
+.vx-bg-light-text {
+  background: #747576;
+}
+.vx-dark-border {
+  border-color: #161B2F;
+}
+.vx-grey-border {
+  border-color: #F1F1F1;
+}
+.vx-red-border {
+  border-color: #EB2424;
+}
+.vx-blue-border {
+  border-color: #1E5DD3;
+}
+.vx-color-palette {
+  min-height: 40px;
+  width: 100%;
+  border-radius: 0;
+  color: #FFFFFF;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.vx-color-palette input {
+  font-size: 12px;
+  font-weight: 400;
+  color: #FFFFFF;
+  border: none;
+  background: transparent;
+  outline: none;
+  width: 100%;
+  text-align: center;
+}
+.vx-color-palette.bg.blue-1 {
+  background: #1e5dd3;
+}
+.vx-color-palette.bg.blue-2 {
+  background: #4681ef;
+}
+.vx-color-palette.bg.blue-3 {
+  background: #7aa6f7;
+}
+.vx-color-palette.bg.blue-4 {
+  background: #d4e2fc;
+}
+.vx-color-palette.bg.blue-5 {
+  background: #033187;
+}
+.vx-color-palette.bg.green-1 {
+  background: #34aa44;
+}
+.vx-color-palette.bg.green-2 {
+  background: #66bf72;
+}
+.vx-color-palette.bg.green-3 {
+  background: #97d2a0;
+}
+.vx-color-palette.bg.green-4 {
+  background: #d6f2da;
+}
+.vx-color-palette.bg.red-1 {
+  background: #d93b41;
+}
+.vx-color-palette.bg.red-2 {
+  background: #e75151;
+}
+.vx-color-palette.bg.red-3 {
+  background: #f77272;
+}
+.vx-color-palette.bg.red-4 {
+  background: #ffeaea;
+}
+.vx-color-palette.bg.orange-1 {
+  background: #f6882f;
+}
+.vx-color-palette.bg.orange-2 {
+  background: #f5a05b;
+}
+.vx-color-palette.bg.orange-3 {
+  background: #f9b883;
+}
+.vx-color-palette.bg.orange-4 {
+  background: #fbe1cc;
+}
+.vx-color-palette.bg.yellow-1 {
+  background: #f0b819;
+}
+.vx-color-palette.bg.yellow-2 {
+  background: #f4c84a;
+}
+.vx-color-palette.bg.yellow-3 {
+  background: #fadd8a;
+}
+.vx-color-palette.bg.yellow-4 {
+  background: #fff4d6;
+}
+.vx-color-palette.bg.dark-1 {
+  background: #000000;
+}
+.vx-color-palette.bg.dark-2 {
+  background: #161b2f;
+}
+.vx-color-palette.bg.dark-3 {
+  background: #747576;
+}
+.vx-color-palette:first-child {
+  border-radius: 4px 0 0 4px;
+}
+.vx-color-palette:last-child {
+  border-radius: 0 4px 4px 0;
+}
+.vx-color-palette:last-child input {
+  color: #000000;
+}
+.vx-table-card {
+  box-shadow: 0 0 3px rgba(30, 93, 211, 0.27);
+  border-radius: 2px;
+  min-height: 55px;
+  position: relative;
+  cursor: pointer;
+}
+.vx-table-card:last-child {
+  margin-right: 0;
+}
+.vx-table-card.active {
+  box-shadow: 0 0 10px rgba(30, 93, 210, 0.9);
+  z-index: 1;
+}
+.vx-table-card.disabled {
+  opacity: 1;
+  filter: grayscale(1);
+  pointer-events: none;
+}
+.vx-table-card i {
+  margin-right: 8px;
+  color: #747576;
+  font-size: 16px;
+}
+.vx-table-card .left label {
+  font-size: 11px;
+  line-height: 16px;
+  letter-spacing: 0.5px;
+  flex-wrap: wrap;
+  width: auto;
+  white-space: nowrap;
+}
+.vx-table-card .left .performance span {
+  font-size: 12px;
+  font-weight: 500;
+  padding: 0 6px;
+  position: relative;
+}
+.vx-table-card .left .performance span:first-child {
+  color: #6ea412;
+  padding-left: 0;
+}
+.vx-table-card .left .performance span:nth-child(2) {
+  color: #e4b700;
+}
+.vx-table-card .left .performance span:nth-child(2)::before,
+.vx-table-card .left .performance span:nth-child(2)::after {
+  content: ".";
+  position: absolute;
+  top: -3px;
+  color: #747576;
+}
+.vx-table-card .left .performance span:nth-child(2)::before {
+  left: -1px;
+}
+.vx-table-card .left .performance span:nth-child(2)::after {
+  right: -1px;
+}
+.vx-table-card .left .performance span:last-child {
+  color: #c7381b;
+  padding-right: 0;
+}
+.vx-table-card .left button {
+  border: none;
+  border-radius: 2px;
+  font-size: 11px;
+  line-height: 28px;
+  min-width: 30px;
+  height: 20px;
+  cursor: pointer;
+}
+.vx-table-card .left button.blue-btn {
+  background: #1E5DD3;
+}
+.vx-table-card .left button.green-btn {
+  background: #34aa44;
+}
+.vx-table-card .left button i {
+  font-size: 8px;
+  margin-right: 8px;
+  color: #fff;
+}
+.vx-table-card .right span {
+  font-size: 14px;
+  line-height: 24px;
+  background: #042e7d;
+  padding: 2px 6px;
+  border-radius: 2px;
+  min-width: 28px;
+}

package/css-build/css/text/text.css

@@ -0,0 +1,157 @@
+body {
+  font-size: 16px;
+}
+a,
+button {
+  cursor: pointer;
+}
+.vx-title-text {
+  line-height: 32px;
+  font-weight: 200;
+}
+.vx-sub-heading-text {
+  line-height: 24px;
+  font-weight: 400;
+  margin: 0;
+  display: block;
+}
+.vx-sub-sub-heading-text {
+  line-height: 20px;
+  font-weight: 500;
+  color: #161B2F;
+}
+.vx-label-text {
+  font-weight: 500;
+  line-height: 20px;
+  color: #161B2F;
+}
+.vx-paragraph-text {
+  line-height: 16px;
+  color: #747576;
+  font-weight: 400;
+}
+.vx-table-card-text {
+  line-height: 16px;
+  color: #747576;
+  font-weight: 500;
+}
+.vx-table-heading-text {
+  line-height: 14px;
+  color: #747576;
+  font-weight: 400;
+}
+.vx-table-text {
+  line-height: 14px;
+  color: #161B2F;
+}
+.vx-fs-title {
+  font-size: 24px;
+}
+.vx-fs-sub-title {
+  font-size: 16px;
+}
+.vx-fs-sub-sub-title {
+  font-size: 12px;
+}
+.vx-fs-sub-label-text {
+  font-size: 10px;
+}
+.vx-fs-paragraph {
+  font-size: 14px;
+}
+.vx-fs-small-paragraph {
+  font-size: 10px;
+}
+.vx-fs-table-card {
+  font-size: 12px;
+}
+.vx-fs-table-heading {
+  font-size: 12px;
+}
+.vx-fs-table-text {
+  font-size: 12px;
+}
+.vx-tt-capitalize {
+  text-transform: capitalize;
+}
+.vx-tt-uppercase {
+  text-transform: uppercase;
+}
+.vx-tt-none {
+  text-transform: none;
+}
+.vx-fw-300 {
+  font-weight: 300;
+}
+.vx-fw-400 {
+  font-weight: 400;
+}
+.vx-fw-500 {
+  font-weight: 500;
+}
+.vx-fw-600 {
+  font-weight: 600;
+}
+.vx-fw-700 {
+  font-weight: 700;
+}
+.vx-txt-error {
+  font-size: 10px;
+  color: #EB2424;
+  margin: 4px 0 0 0;
+  line-height: 16px;
+}
+.vx-fs-2 {
+  font-size: 8px;
+}
+.vx-fs-3 {
+  font-size: 12px;
+}
+.vx-fs-4 {
+  font-size: 16px;
+}
+.vx-fs-5 {
+  font-size: 20px;
+}
+.vx-fs-6 {
+  font-size: 24px;
+}
+.vx-lh-3 {
+  line-height: 12px;
+}
+.vx-lh-4 {
+  line-height: 16px;
+}
+.vx-lh-5 {
+  line-height: 20px;
+}
+.vx-lh-6 {
+  line-height: 24px;
+}
+.vx-lh-7 {
+  line-height: 28px;
+}
+.vx-lh-8 {
+  line-height: 32px;
+}
+.vx-lh-9 {
+  line-height: 36px;
+}
+.vx-lh-10 {
+  line-height: 40px;
+}
+.vx-lh-11 {
+  line-height: 44px;
+}
+.vx-lh-12 {
+  line-height: 48px;
+}
+.vx-lh-13 {
+  line-height: 52px;
+}
+.vx-lh-14 {
+  line-height: 56px;
+}
+.vx-lh-15 {
+  line-height: 60px;
+}