vcomply-design-system 1.0.0

package/css-build/css/button/button.css

@@ -0,0 +1,237 @@
+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%);
+}

package/css-build/css/color/color.css

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