vcomply-design-system 1.3.4 → 1.3.6

package/css-build/css-v2/avatars/avatars.css

@@ -0,0 +1,895 @@
+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: 80px;
+  width: 100%;
+  border-radius: 0;
+  color: #FFFFFF;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  margin-bottom: 20px;
+}
+.vx-color-palette input {
+  font-size: 12px;
+  font-weight: 400;
+  color: #000000;
+  border: none;
+  background: transparent;
+  outline: none;
+  width: 100%;
+  text-align: center;
+  position: absolute;
+  bottom: -20px;
+  left: 0;
+  right: 0;
+}
+.vx-color-palette.bg.blue-10 {
+  background: #f4f8ff;
+}
+.vx-color-palette.bg.blue-20 {
+  background: #e2ecff;
+}
+.vx-color-palette.bg.blue-30 {
+  background: #bcd0f6;
+}
+.vx-color-palette.bg.blue-40 {
+  background: #7aa7f7;
+}
+.vx-color-palette.bg.blue-50 {
+  background: #4681ef;
+}
+.vx-color-palette.bg.blue-60 {
+  background: #1e5dd3;
+}
+.vx-color-palette.bg.blue-70 {
+  background: #1146a8;
+}
+.vx-color-palette.bg.blue-80 {
+  background: #042e7d;
+}
+.vx-color-palette.bg.blue-90 {
+  background: #0d2556;
+}
+.vx-color-palette.bg.blue-100 {
+  background: #161b2f;
+}
+.vx-color-palette.bg.green-10 {
+  background: #ddf4e0;
+}
+.vx-color-palette.bg.green-20 {
+  background: #caebcf;
+}
+.vx-color-palette.bg.green-30 {
+  background: #b7e2bd;
+}
+.vx-color-palette.bg.green-40 {
+  background: #97d2a0;
+}
+.vx-color-palette.bg.green-50 {
+  background: #66bf72;
+}
+.vx-color-palette.bg.green-60 {
+  background: #34aa44;
+}
+.vx-color-palette.bg.green-70 {
+  background: #1c802a;
+}
+.vx-color-palette.bg.green-80 {
+  background: #04550f;
+}
+.vx-color-palette.bg.green-90 {
+  background: #023c0a;
+}
+.vx-color-palette.bg.green-100 {
+  background: #021d05;
+}
+.vx-color-palette.bg.red-10 {
+  background: #ffeeeb;
+}
+.vx-color-palette.bg.red-20 {
+  background: #fdd9d1;
+}
+.vx-color-palette.bg.red-30 {
+  background: #fac3b7;
+}
+.vx-color-palette.bg.red-40 {
+  background: #e38b7a;
+}
+.vx-color-palette.bg.red-50 {
+  background: #d5624b;
+}
+.vx-color-palette.bg.red-60 {
+  background: #c7381b;
+}
+.vx-color-palette.bg.red-70 {
+  background: #a82a1d;
+}
+.vx-color-palette.bg.red-80 {
+  background: #781c17;
+}
+.vx-color-palette.bg.red-90 {
+  background: #470e10;
+}
+.vx-color-palette.bg.red-100 {
+  background: #2f090a;
+}
+.vx-color-palette.bg.orange-10 {
+  background: #fdf1e8;
+}
+.vx-color-palette.bg.orange-20 {
+  background: #fbe3d0;
+}
+.vx-color-palette.bg.orange-30 {
+  background: #f7c8a1;
+}
+.vx-color-palette.bg.orange-40 {
+  background: #f2ac73;
+}
+.vx-color-palette.bg.orange-50 {
+  background: #ee9044;
+}
+.vx-color-palette.bg.orange-60 {
+  background: #e87315;
+}
+.vx-color-palette.bg.orange-70 {
+  background: #bb5d11;
+}
+.vx-color-palette.bg.orange-80 {
+  background: #8c460d;
+}
+.vx-color-palette.bg.orange-90 {
+  background: #5e2f08;
+}
+.vx-color-palette.bg.orange-100 {
+  background: #2f1704;
+}
+.vx-color-palette.bg.yellow-10 {
+  background: #fef8e7;
+}
+.vx-color-palette.bg.yellow-20 {
+  background: #fcf2cf;
+}
+.vx-color-palette.bg.yellow-30 {
+  background: #fae6a3;
+}
+.vx-color-palette.bg.yellow-40 {
+  background: #f7d873;
+}
+.vx-color-palette.bg.yellow-50 {
+  background: #f5cc48;
+}
+.vx-color-palette.bg.yellow-60 {
+  background: #f2bf19;
+}
+.vx-color-palette.bg.yellow-70 {
+  background: #cb9e0b;
+}
+.vx-color-palette.bg.yellow-80 {
+  background: #967508;
+}
+.vx-color-palette.bg.yellow-90 {
+  background: #654f06;
+}
+.vx-color-palette.bg.yellow-100 {
+  background: #302603;
+}
+.vx-color-palette.bg.gray-10 {
+  background: #f9f9fa;
+}
+.vx-color-palette.bg.gray-20 {
+  background: #f2f2f5;
+}
+.vx-color-palette.bg.gray-30 {
+  background: #e3e3e9;
+}
+.vx-color-palette.bg.gray-40 {
+  background: #cdced6;
+}
+.vx-color-palette.bg.gray-50 {
+  background: #a9aab6;
+}
+.vx-color-palette.bg.gray-60 {
+  background: #787a8c;
+}
+.vx-color-palette.bg.gray-70 {
+  background: #565a6f;
+}
+.vx-color-palette.bg.gray-80 {
+  background: #343952;
+}
+.vx-color-palette.bg.gray-90 {
+  background: #282e48;
+}
+.vx-color-palette.bg.gray-100 {
+  background: #242940;
+}
+.vx-color-palette.bg.neutral-100 {
+  background: #000000;
+}
+.vx-color-palette.bg.neutral-0 {
+  background: #ffffff;
+}
+.vx-blue-10 {
+  color: #f4f8ff;
+}
+.vx-blue-20 {
+  color: #e2ecff;
+}
+.vx-blue-30 {
+  color: #bcd0f6;
+}
+.vx-blue-40 {
+  color: #7aa7f7;
+}
+.vx-blue-50 {
+  color: #4681ef;
+}
+.vx-blue-60 {
+  color: #1e5dd3;
+}
+.vx-blue-70 {
+  color: #1146a8;
+}
+.vx-blue-80 {
+  color: #042e7d;
+}
+.vx-blue-90 {
+  color: #0d2556;
+}
+.vx-blue-100 {
+  color: #161b2f;
+}
+.vx-green-10 {
+  color: #ddf4e0;
+}
+.vx-green-20 {
+  color: #caebcf;
+}
+.vx-green-30 {
+  color: #b7e2bd;
+}
+.vx-green-40 {
+  color: #97d2a0;
+}
+.vx-green-50 {
+  color: #66bf72;
+}
+.vx-green-60 {
+  color: #34aa44;
+}
+.vx-green-70 {
+  color: #1c802a;
+}
+.vx-green-80 {
+  color: #04550f;
+}
+.vx-green-90 {
+  color: #023c0a;
+}
+.vx-green-100 {
+  color: #021d05;
+}
+.vx-red-10 {
+  color: #ffeeeb;
+}
+.vx-red-20 {
+  color: #fdd9d1;
+}
+.vx-red-30 {
+  color: #fac3b7;
+}
+.vx-red-40 {
+  color: #e38b7a;
+}
+.vx-red-50 {
+  color: #d5624b;
+}
+.vx-red-60 {
+  color: #c7381b;
+}
+.vx-red-70 {
+  color: #a82a1d;
+}
+.vx-red-80 {
+  color: #781c17;
+}
+.vx-red-90 {
+  color: #470e10;
+}
+.vx-red-100 {
+  color: #2f090a;
+}
+.vx-orange-10 {
+  color: #fdf1e8;
+}
+.vx-orange-20 {
+  color: #fbe3d0;
+}
+.vx-orange-30 {
+  color: #f7c8a1;
+}
+.vx-orange-40 {
+  color: #f2ac73;
+}
+.vx-orange-50 {
+  color: #ee9044;
+}
+.vx-orange-60 {
+  color: #e87315;
+}
+.vx-orange-70 {
+  color: #bb5d11;
+}
+.vx-orange-80 {
+  color: #8c460d;
+}
+.vx-orange-90 {
+  color: #5e2f08;
+}
+.vx-orange-100 {
+  color: #2f1704;
+}
+.vx-yellow-10 {
+  color: #fef8e7;
+}
+.vx-yellow-20 {
+  color: #fcf2cf;
+}
+.vx-yellow-30 {
+  color: #fae6a3;
+}
+.vx-yellow-40 {
+  color: #f7d873;
+}
+.vx-yellow-50 {
+  color: #f5cc48;
+}
+.vx-yellow-60 {
+  color: #f2bf19;
+}
+.vx-yellow-70 {
+  color: #cb9e0b;
+}
+.vx-yellow-80 {
+  color: #967508;
+}
+.vx-yellow-90 {
+  color: #654f06;
+}
+.vx-yellow-100 {
+  color: #302603;
+}
+.vx-gray-10 {
+  color: #f9f9fa;
+}
+.vx-gray-20 {
+  color: #f2f2f5;
+}
+.vx-gray-30 {
+  color: #e3e3e9;
+}
+.vx-gray-40 {
+  color: #cdced6;
+}
+.vx-gray-50 {
+  color: #a9aab6;
+}
+.vx-gray-60 {
+  color: #787a8c;
+}
+.vx-gray-70 {
+  color: #565a6f;
+}
+.vx-gray-80 {
+  color: #343952;
+}
+.vx-gray-90 {
+  color: #282e48;
+}
+.vx-gray-100 {
+  color: #242940;
+}
+.vx-neutral-100 {
+  color: #000000;
+}
+.vx-neutral-0 {
+  color: #ffffff;
+}
+.vx-bg-blue-10 {
+  background: #f4f8ff;
+}
+.vx-bg-blue-20 {
+  background: #e2ecff;
+}
+.vx-bg-blue-30 {
+  background: #bcd0f6;
+}
+.vx-bg-blue-40 {
+  background: #7aa7f7;
+}
+.vx-bg-blue-50 {
+  background: #4681ef;
+}
+.vx-bg-blue-60 {
+  background: #1e5dd3;
+}
+.vx-bg-blue-70 {
+  background: #1146a8;
+}
+.vx-bg-blue-80 {
+  background: #042e7d;
+}
+.vx-bg-blue-90 {
+  background: #0d2556;
+}
+.vx-bg-blue-100 {
+  background: #161b2f;
+}
+.vx-bg-green-10 {
+  background: #ddf4e0;
+}
+.vx-bg-green-20 {
+  background: #caebcf;
+}
+.vx-bg-green-30 {
+  background: #b7e2bd;
+}
+.vx-bg-green-40 {
+  background: #97d2a0;
+}
+.vx-bg-green-50 {
+  background: #66bf72;
+}
+.vx-bg-green-60 {
+  background: #34aa44;
+}
+.vx-bg-green-70 {
+  background: #1c802a;
+}
+.vx-bg-green-80 {
+  background: #04550f;
+}
+.vx-bg-green-90 {
+  background: #023c0a;
+}
+.vx-bg-green-100 {
+  background: #021d05;
+}
+.vx-bg-red-10 {
+  background: #ffeeeb;
+}
+.vx-bg-red-20 {
+  background: #fdd9d1;
+}
+.vx-bg-red-30 {
+  background: #fac3b7;
+}
+.vx-bg-red-40 {
+  background: #e38b7a;
+}
+.vx-bg-red-50 {
+  background: #d5624b;
+}
+.vx-bg-red-60 {
+  background: #c7381b;
+}
+.vx-bg-red-70 {
+  background: #a82a1d;
+}
+.vx-bg-red-80 {
+  background: #781c17;
+}
+.vx-bg-red-90 {
+  background: #470e10;
+}
+.vx-bg-red-100 {
+  background: #2f090a;
+}
+.vx-bg-orange-10 {
+  background: #fdf1e8;
+}
+.vx-bg-orange-20 {
+  background: #fbe3d0;
+}
+.vx-bg-orange-30 {
+  background: #f7c8a1;
+}
+.vx-bg-orange-40 {
+  background: #f2ac73;
+}
+.vx-bg-orange-50 {
+  background: #ee9044;
+}
+.vx-bg-orange-60 {
+  background: #e87315;
+}
+.vx-bg-orange-70 {
+  background: #bb5d11;
+}
+.vx-bg-orange-80 {
+  background: #8c460d;
+}
+.vx-bg-orange-90 {
+  background: #5e2f08;
+}
+.vx-bg-orange-100 {
+  background: #2f1704;
+}
+.vx-bg-yellow-10 {
+  background: #fef8e7;
+}
+.vx-bg-yellow-20 {
+  background: #fcf2cf;
+}
+.vx-bg-yellow-30 {
+  background: #fae6a3;
+}
+.vx-bg-yellow-40 {
+  background: #f7d873;
+}
+.vx-bg-yellow-50 {
+  background: #f5cc48;
+}
+.vx-bg-yellow-60 {
+  background: #f2bf19;
+}
+.vx-bg-yellow-70 {
+  background: #cb9e0b;
+}
+.vx-bg-yellow-80 {
+  background: #967508;
+}
+.vx-bg-yellow-90 {
+  background: #654f06;
+}
+.vx-bg-yellow-100 {
+  background: #302603;
+}
+.vx-bg-gray-10 {
+  background: #f9f9fa;
+}
+.vx-bg-gray-20 {
+  background: #f2f2f5;
+}
+.vx-bg-gray-30 {
+  background: #e3e3e9;
+}
+.vx-bg-gray-40 {
+  background: #cdced6;
+}
+.vx-bg-gray-50 {
+  background: #a9aab6;
+}
+.vx-bg-gray-60 {
+  background: #787a8c;
+}
+.vx-bg-gray-70 {
+  background: #565a6f;
+}
+.vx-bg-gray-80 {
+  background: #343952;
+}
+.vx-bg-gray-90 {
+  background: #282e48;
+}
+.vx-bg-gray-100 {
+  background: #242940;
+}
+.vx-bg-neutral-100 {
+  background: #000000;
+}
+.vx-bg-neutral-0 {
+  background: #ffffff;
+}
+.vx-avatar {
+  border: 2px solid #f2f2f5;
+  border-radius: 50%;
+  display: flex;
+}
+.vx-avatar.sm {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+.vx-avatar.sm span {
+  font-size: 9px;
+}
+.vx-avatar.md {
+  height: 1.75rem;
+  width: 1.75rem;
+}
+.vx-avatar.lg {
+  height: 2rem;
+  width: 2rem;
+}
+.vx-avatar.xl {
+  height: 2.5rem;
+  width: 2.5rem;
+}
+.vx-avatar.xl span {
+  font-size: 16px;
+}
+.vx-avatar.large {
+  height: 3.75rem;
+  width: 3.75rem;
+}
+.vx-avatar.large span {
+  font-size: 19px;
+}
+.vx-avatar.xxl {
+  height: 5rem;
+  width: 5rem;
+}
+.vx-avatar.xxl span {
+  font-size: 23px;
+}
+.vx-avatar.huge {
+  border: none;
+  height: 6.25rem;
+  width: 6.25rem;
+}
+.vx-avatar.huge span {
+  font-size: 28px;
+}
+.vx-avatar.icon-avatars {
+  background: #f9f9fa;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.vx-avatar.icon-avatars i {
+  font-size: 12px;
+  color: #565a6f;
+}
+.vx-avatar.badge-avatars {
+  position: relative;
+}
+.vx-avatar.badge-avatars::before {
+  content: "";
+  border: 1px solid #ffffff;
+  border-radius: 50px;
+  position: absolute;
+  bottom: -0.125rem;
+  right: -0.125rem;
+  width: 0.5rem;
+  height: 0.5rem;
+}
+.vx-avatar.badge-avatars.green::before {
+  background: #34aa44;
+}
+.vx-avatar.badge-avatars.red::before {
+  background: #c7381b;
+}
+.vx-avatar.pill-avatars {
+  cursor: pointer;
+  position: relative;
+}
+.vx-avatar.pill-avatars .count-pill {
+  background: #1e5dd3;
+  border-radius: 1.25rem;
+  border: 0.125rem solid #ffffff;
+  color: #ffffff;
+  font-size: 9px;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 0.25rem;
+  position: absolute;
+  bottom: -0.125rem;
+  left: 1rem;
+  min-width: 1.125rem;
+  height: 1rem;
+}
+.vx-avatar.pill-avatars .count-pill.green {
+  background: #34aa44;
+}
+.vx-avatar.pill-avatars .edit-pill {
+  background: #1e5dd3;
+  border-radius: 50%;
+  border: 0.125rem solid #ffffff;
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  bottom: -0.125rem;
+  left: 1rem;
+  width: 1rem;
+  height: 1rem;
+}
+.vx-avatar.pill-avatars .edit-pill i {
+  font-size: 6px;
+}
+.vx-avatar.square-avatars {
+  border-radius: 0.25rem;
+}
+.vx-avatar.square-avatars span,
+.vx-avatar.square-avatars img {
+  border-radius: 0.125rem;
+}
+.vx-avatar.x-lg {
+  height: 80px;
+  width: 80px;
+}
+.vx-avatar.x-lg span {
+  font-size: 18px;
+  font-weight: 600;
+}
+.vx-avatar.counter {
+  cursor: pointer;
+  min-width: 28px;
+  width: auto;
+  border-radius: 20px;
+  padding: 0 4px;
+  background: #34aa44;
+}
+.vx-avatar.counter span {
+  background: transparent;
+}
+.vx-avatar span {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 11px;
+  font-weight: 500;
+  color: #ffffff;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  text-transform: uppercase;
+  margin: 0;
+  background: #f2f2f5;
+}
+.vx-avatar span.green {
+  background: #34aa44;
+}
+.vx-avatar span.blue {
+  background: #1e5dd3;
+}
+.vx-avatar span.grey {
+  color: #787a8c !important;
+  font-size: 14px !important;
+}
+.vx-avatar img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+.vx-avatar-container {
+  padding-bottom: 20px;
+}
+.vx-avatar-container .vx-avatar + .vx-avatar {
+  margin-left: 20px;
+}
+.vx-avatar-group {
+  display: flex;
+}
+.vx-avatar-group .vx-avatar + .vx-avatar {
+  margin-left: -8px;
+}
+.avatar-name {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+.avatar-name .vx-avatar {
+  margin-right: 0.5rem;
+}
+.avatar-name .userName {
+  color: #787a8c;
+  font-size: 11px;
+  line-height: 1rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  width: calc(100% - 2.5rem);
+}
+.avatar-performance {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+.avatar-performance .vx-avatar {
+  margin-right: 0.5rem;
+}
+.avatar-performance-right {
+  width: calc(100% - 2.5rem);
+}
+.avatar-performance-right .userName {
+  color: #787a8c;
+  font-size: 11px;
+  line-height: 1rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.avatar-performance-right .performanceControls {
+  font-size: 9px;
+  font-weight: 500;
+  line-height: 0.75rem;
+  display: flex;
+  align-items: center;
+}
+.avatar-performance-right .performanceControls span:first-of-type {
+  color: #34aa44;
+}
+.avatar-performance-right .performanceControls span:nth-of-type(2) {
+  color: #f2bf19;
+  position: relative;
+  padding: 0 1.125rem;
+}
+.avatar-performance-right .performanceControls span:nth-of-type(2)::before {
+  background: #cdced6;
+  border-radius: 1.25rem;
+  content: "";
+  position: absolute;
+  top: 5px;
+  left: 0.5rem;
+  width: 0.125rem;
+  height: 0.125rem;
+}
+.avatar-performance-right .performanceControls span:nth-of-type(2)::after {
+  background: #cdced6;
+  border-radius: 1.25rem;
+  content: "";
+  position: absolute;
+  top: 5px;
+  right: 0.5rem;
+  width: 0.125rem;
+  height: 0.125rem;
+}
+.avatar-performance-right .performanceControls span:last-of-type {
+  color: #c7381b;
+}