vcomply-design-system 1.0.0

package/css-build/css/popover/popover.css

@@ -0,0 +1,237 @@
+body {
+  font-size: 16px;
+}
+a,
+button {
+  cursor: pointer;
+}
+.vx-popover {
+  width: 220px;
+  box-shadow: 0px 3px 6px #1c5bd140;
+}
+.vx-popover ul.popover-items {
+  padding: 0;
+  margin: 0;
+  display: block;
+  -webkit-animation: scale-up-center 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
+  animation: scale-up-center 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
+  background: #FFFFFF;
+  box-shadow: 0 3px 6px rgba(28, 91, 209, 0.25);
+  border-radius: 4px;
+  max-height: 220px;
+  overflow: auto;
+}
+.vx-popover ul.popover-items li {
+  list-style: none;
+  border: none;
+  border-bottom: 1px solid #F1F1F1;
+  display: block;
+  width: 100%;
+  padding: 0;
+  background: transparent;
+  border-radius: 0;
+  margin: 0;
+  height: auto;
+  justify-content: flex-start;
+  box-shadow: none;
+}
+.vx-popover ul.popover-items li button {
+  color: #747576;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  background: transparent;
+  font-size: 12px;
+  text-transform: capitalize;
+  display: flex;
+  width: 100%;
+  padding: 8px 12px;
+  border: none;
+  margin: 0;
+}
+.vx-popover ul.popover-items li button i {
+  font-size: 17px;
+  margin-right: 10px;
+  color: #1E5DD3;
+}
+.vx-popover ul.popover-items li button:hover {
+  background: #F1F1F1;
+}
+.vx-popover ul.popover-items li .avatar-card {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 8px;
+}
+.vx-popover ul.popover-items li .avatar-card.within-con {
+  display: block;
+}
+.vx-popover ul.popover-items li .avatar-card .avatar {
+  height: 24px;
+  width: 24px !important;
+  overflow: hidden;
+  background: #1E5DD3;
+  color: #FFFFFF;
+  font-size: 10px;
+  display: inline-flex;
+  margin-right: 4px;
+  border-radius: 50%;
+  align-items: center;
+  justify-content: center;
+  text-transform: uppercase;
+}
+.vx-popover ul.popover-items li .avatar-card .avatar img {
+  width: 100%;
+}
+.vx-popover ul.popover-items li .avatar-card .avatar + span.value {
+  width: calc(100% - 28px);
+}
+.vx-popover ul.popover-items li .avatar-card span.value {
+  width: 100%;
+  color: #6E717E;
+  text-decoration: none;
+  background: transparent;
+  font-size: 12px;
+  text-transform: capitalize;
+  display: block;
+  font-weight: 400;
+  text-align-last: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 20px;
+}
+.vx-popover ul.popover-items li .avatar-card span.value i {
+  font-size: 8px;
+  color: #1C5BD1;
+  cursor: pointer;
+  margin-right: 4px;
+}
+.vx-popover ul.popover-items li .avatar-card.no-image {
+  display: block;
+}
+.vx-popover ul.popover-items li .avatar-card.no-image span.value {
+  width: 100%;
+  display: block;
+}
+.vx-popover ul.popover-items li .chip-item {
+  color: #1E5DD3;
+  padding: 10px;
+  display: flex;
+  align-items: center;
+}
+.vx-popover ul.popover-items li .chip-item i {
+  margin-right: 8px;
+  font-size: 10px;
+  cursor: pointer;
+  display: inline-flex;
+}
+.vx-popover ul.popover-items li .chip-item span {
+  display: block;
+  width: auto;
+  max-width: calc(100% - 16px);
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.vx-popover ul.popover-items li .chip-item span.chip-block {
+  display: block;
+  width: 100%;
+}
+.vx-popover ul.popover-items li .chip-item span.id {
+  font-size: 8px;
+}
+.vx-popover ul.popover-items li .within {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+.vx-popover ul.popover-items li .within .block {
+  background: #F1F1F1;
+  border-radius: 2px;
+  padding: 0 2px;
+  line-height: 14px;
+  font-size: 10px;
+  font-weight: 500;
+  color: #042E7D;
+  margin-right: 6px;
+  display: block;
+  text-transform: uppercase;
+}
+.vx-popover ul.popover-items li .within .data {
+  width: 100%;
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #747576;
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 17px;
+}
+.vx-popover ul.popover-items li:first-child {
+  animation: action-list-open 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+.vx-popover ul.popover-items li:nth-child(2) {
+  animation: action-list-open 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+.vx-popover ul.popover-items li:nth-child(3) {
+  animation: action-list-open 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+.vx-popover ul.popover-items li:nth-child(4) {
+  animation: action-list-open 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+.vx-popover ul.popover-items li:nth-child(5) {
+  animation: action-list-open 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+.vx-popover ul.popover-items li:nth-child(6) {
+  animation: action-list-open 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+.vx-popover ul.popover-items li:nth-child(7) {
+  animation: action-list-open 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+.vx-popover ul.popover-items li:nth-child(8) {
+  animation: action-list-open 0.95s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+.vx-popover ul.popover-items li:nth-child(9) {
+  animation: action-list-open 1.05s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+.vx-popover ul.popover-items li:nth-child(10) {
+  animation: action-list-open 1.15s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+@-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;
+  }
+}
+@keyframes action-list-open {
+  0% {
+    -webkit-transform: translateY(50px);
+    transform: translateY(50px);
+  }
+  100% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}

package/css-build/css/quick-links/quick-links.css

@@ -0,0 +1,84 @@
+body {
+  font-size: 16px;
+}
+a,
+button {
+  cursor: pointer;
+}
+.vx-quick-links {
+  background: #fff;
+  border-top: 4px solid #1E5DD3;
+  border-radius: 5px;
+  position: absolute;
+  transition: all 0.5s ease-in-out;
+  width: 328px;
+  top: calc(100% + 12px);
+  box-shadow: 0 0 10px rgba(30, 93, 211, 0.27);
+  right: -72px;
+  z-index: 2;
+  padding: 0;
+}
+.vx-quick-links:before {
+  border-bottom: 8px solid #1E5DD3;
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  right: 52px;
+  top: -10px;
+}
+.vx-quick-links ul {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+.vx-quick-links ul li {
+  border-bottom: 1px solid #F1F1F1;
+}
+.vx-quick-links ul li a {
+  padding: 12px;
+  text-decoration: none;
+  align-items: center;
+  display: flex;
+}
+.vx-quick-links ul li a span {
+  display: block;
+}
+.vx-quick-links ul li a span.icon {
+  width: 44px;
+  height: 44px;
+  display: flex;
+  border-radius: 4px;
+  align-items: center;
+  justify-content: center;
+  margin-right: 8px;
+  background: #F1F1F1;
+}
+.vx-quick-links ul li a span.icon img {
+  width: 36px;
+  height: 36px;
+}
+.vx-quick-links ul li a span.text span.title {
+  font-size: 14px;
+  color: #161B2F;
+  margin: 0;
+  font-weight: 500;
+  text-transform: uppercase;
+  transition: all 0.2s ease-in-out;
+}
+.vx-quick-links ul li a span.text span.paragraph {
+  font-size: 12px;
+  color: #161B2F;
+  transition: all 0.2s ease-in-out;
+  margin: 0;
+  font-weight: 400;
+}
+.vx-quick-links ul li:hover a span.text span.title,
+.vx-quick-links ul li:hover a span.text span.paragraph {
+  color: #1E5DD3;
+}
+.vx-quick-links ul li:last-child {
+  border-bottom: none;
+}

package/css-build/css/smiley/smiley.css

@@ -0,0 +1,353 @@
+.vx-smiley-popup {
+  background: #d93b41;
+  position: relative;
+}
+.vx-smiley-popup::before {
+  content: "";
+  position: absolute;
+  z-index: 0;
+  background: #fff;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  transition-delay: 1s;
+  border-top-right-radius: 0;
+  transition: all 0.3s ease-in-out;
+}
+.vx-smiley-popup.with-close::before {
+  border-top-right-radius: 180px;
+}
+.vx-smiley-popup button.close {
+  color: #fff;
+  font-size: 22px;
+  position: absolute;
+  top: 14px;
+  right: 20px;
+  z-index: 10;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}
+.vx-smiley-container {
+  width: 550px;
+  position: relative;
+  z-index: 10;
+}
+.vx-smiley-container .vx-smiley {
+  display: block;
+  width: 550px;
+  height: 250px;
+  overflow: hidden;
+  position: relative;
+  -webkit-animation: slide-fwd-center 0.45s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
+  animation: slide-fwd-center 0.45s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
+  margin: 0 auto 24px;
+}
+.vx-smiley-container .vx-smiley::before {
+  position: absolute;
+  background: #ffedc5;
+  width: 110px;
+  height: 110px;
+  content: "";
+  border-radius: 50%;
+  top: 100px;
+  right: 92px;
+}
+.vx-smiley-container .vx-smiley::after {
+  position: absolute;
+  background: #ffbf15;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  content: "";
+  top: 200px;
+  left: 92px;
+}
+.vx-smiley-container .vx-smiley-circle {
+  background: #ffd83d;
+  border-radius: 100%;
+  padding: 24px;
+  position: relative;
+  width: 250px;
+  height: 250px;
+  margin: 0 auto;
+  box-shadow: inset -20px -14px 0 #f4c337;
+}
+.vx-smiley-container .vx-smiley-circle::before {
+  width: 24px;
+  height: 4px;
+  background: #ffbf15;
+  position: absolute;
+  content: "";
+  top: 116px;
+  left: -66px;
+}
+.vx-smiley-container .vx-smiley-circle::after {
+  width: 4px;
+  height: 24px;
+  background: #ffbf15;
+  position: absolute;
+  content: "";
+  top: 108px;
+  left: -56px;
+}
+.vx-smiley-container .vx-smiley-circle-inner {
+  height: 182px;
+  width: 100%;
+  margin: 0 auto;
+}
+.vx-smiley-container .vx-smiley-circle-inner .eyes {
+  width: 164px;
+  margin: 40px auto 0;
+  box-sizing: border-box;
+  padding: 0 4px;
+  transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.vx-smiley-container .vx-smiley-circle-inner .eyes::before {
+  width: 4px;
+  height: 20px;
+  background: #ffbf15;
+  position: absolute;
+  content: "";
+  top: 0;
+  right: -20px;
+}
+.vx-smiley-container .vx-smiley-circle-inner .eyes::after {
+  width: 20px;
+  height: 4px;
+  background: #ffbf15;
+  position: absolute;
+  content: "";
+  top: 8px;
+  right: -28px;
+}
+.vx-smiley-container .vx-smiley-circle-inner .eyes .eye {
+  width: 40px;
+  height: 40px;
+  background: #404549;
+  float: left;
+  border-radius: 100%;
+  overflow: hidden;
+  position: relative;
+}
+.vx-smiley-container .vx-smiley-circle-inner .eyes .eye::before {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  content: "";
+  background: #ffe9b0;
+  border-radius: 50%;
+  top: 8px;
+  left: 1px;
+}
+.vx-smiley-container .vx-smiley-circle-inner .eyes .eye::after {
+  display: block;
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  background: #fed800;
+  transform: rotate(0deg);
+  top: -16px;
+  left: 4px;
+  transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.vx-smiley-container .vx-smiley-circle-inner .eyes .eye:nth-of-type(2) {
+  float: right;
+}
+.vx-smiley-container .vx-smiley-circle-inner .mouth {
+  border-top-left-radius: 100px;
+  border-top-right-radius: 100px;
+  border-bottom-left-radius: 100px;
+  border-bottom-right-radius: 100px;
+  height: 76px;
+  width: 150px;
+  margin: 0 auto;
+  box-sizing: border-box;
+  position: absolute;
+  left: 0;
+  right: 0;
+  background: #404549;
+  transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.vx-smiley-container .vx-smiley-circle-inner .mouth::before {
+  width: 94px;
+  height: 94px;
+  position: absolute;
+  opacity: 0;
+  bottom: -508px;
+  left: -6px;
+  background: #ffd83d;
+  content: "";
+  border-radius: 46px;
+  transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.vx-smiley-container .vx-smiley-circle.happy .eyes .eye {
+  height: 40px;
+  margin-top: 0;
+  animation: wink 3s infinite;
+}
+.vx-smiley-container .vx-smiley-circle.happy .mouth {
+  animation: move-mouth-down 0.3s;
+  animation-delay: 0.3s;
+  animation-fill-mode: forwards;
+}
+.vx-smiley-container .vx-smiley-circle.sad .eyes .eye {
+  animation: wink2 3s infinite;
+}
+.vx-smiley-container .vx-smiley-circle.sad .vx-smiley-circle-inner {
+  animation: move-angry-head 0.6s;
+  animation-delay: 0.3s;
+  animation-fill-mode: forwards;
+}
+.vx-smiley-container .vx-smiley-circle.sad .vx-smiley-circle-inner .mouth {
+  width: 96px;
+  height: 50px;
+  border-top-left-radius: 100px;
+  border-top-right-radius: 100px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  top: 60px;
+}
+.vx-smiley-container .vx-smiley-circle.sad .vx-smiley-circle-inner .mouth::before {
+  background: #ffd83d;
+  content: "";
+  bottom: -66px;
+  left: 0;
+  opacity: 1;
+  transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.vx-smiley-container h3 {
+  font-size: 26px;
+  color: #161b2f;
+  font-weight: 400;
+  margin: 0 0 40px;
+}
+.vx-smiley-container .successSmilyButton button {
+  width: 280px;
+}
+@-webkit-keyframes slide-fwd-center {
+  0% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  }
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+@keyframes slide-fwd-center {
+  0% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  }
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+@keyframes move-mouth-down {
+  0% {
+    border-top-left-radius: 100px;
+    border-top-right-radius: 100px;
+    border-bottom-left-radius: 100px;
+    border-bottom-right-radius: 100px;
+    height: 10%;
+    width: 40%;
+    bottom: 25%;
+    margin: 0 auto;
+    box-sizing: border-box;
+    position: absolute;
+    bottom: 18%;
+    left: 0;
+    right: 0;
+    background: #404549;
+    transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
+  }
+  100% {
+    width: 60%;
+    height: 30%;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-bottom-left-radius: 100px;
+    border-bottom-right-radius: 100px;
+    box-sizing: border-box;
+    position: absolute;
+    bottom: 18%;
+    background: #404549;
+    transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
+  }
+}
+@keyframes wink {
+  0% {
+    height: 40px;
+    margin-top: 0;
+  }
+  10% {
+    height: 40px;
+    margin-top: 0;
+  }
+  15% {
+    height: 4px;
+    margin-top: 18px;
+  }
+  20% {
+    height: 40px;
+    margin-top: 0;
+  }
+  100% {
+    height: 40px;
+    margin-top: 0;
+  }
+}
+@keyframes wink2 {
+  0% {
+    height: 40px;
+    margin-top: 0;
+  }
+  10% {
+    height: 40px;
+    margin-top: 0;
+  }
+  15% {
+    height: 4px;
+    margin-top: 18px;
+  }
+  20% {
+    height: 40px;
+    margin-top: 0;
+  }
+  100% {
+    height: 40px;
+    margin-top: 0;
+  }
+}
+@keyframes move-angry-head {
+  0% {
+    transform: translateX(0%);
+  }
+  20% {
+    transform: translateX(-20%);
+  }
+  40% {
+    transform: translateX(15%);
+  }
+  60% {
+    transform: translateX(-10%);
+  }
+  80% {
+    transform: translateX(5%);
+  }
+  100% {
+    transform: translateX(0%);
+  }
+}
+h3.heading {
+  font-size: 20px;
+  margin-top: 10px;
+  font-weight: 500;
+  margin-bottom: 10px;
+  padding-left: 20px;
+}