vcomply-design-system 1.0.0

package/css-build/css/header/header.css

@@ -0,0 +1,344 @@
+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-header.toggle .vx-header-top {
+  transition: all 0.2s ease-in-out;
+  left: 60px;
+}
+.vx-header-top {
+  background: #282E48;
+  height: 48px;
+  position: sticky;
+  top: 0;
+  right: 0;
+  z-index: 1;
+  padding-right: 12px;
+  transition: all 0.2s ease-in-out;
+}
+.vx-header-bottom {
+  position: relative;
+}
+.vx-header-bottom h1 {
+  position: relative;
+}
+.vx-header-bottom:before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 100px;
+  content: "";
+  background: #161B2F;
+}
+.vx-search-block {
+  padding: 6px 12px;
+  position: relative;
+  width: 350px;
+  transition: all 0.3s ease-in-out;
+}
+.vx-search-block input[type=text] {
+  background: transparent;
+  height: 32px;
+  line-height: 16px;
+  padding: 8px 8px 8px 28px;
+  font-size: 12px;
+  color: #FFFFFF;
+  font-weight: 300;
+  width: 100%;
+  border: none;
+  border-radius: 4px;
+  transition: all 0.3s ease-in-out;
+  outline: none;
+}
+.vx-search-block i {
+  color: #DBDBDB;
+  font-size: 14px;
+  position: absolute;
+  cursor: pointer;
+  left: 12px;
+  top: 16px;
+  z-index: 1;
+}
+.vx-search-block:focus-within {
+  width: 412px;
+  transition: all 0.3s ease-in-out;
+}
+.vx-search-block:focus-within input[type=text] {
+  border-color: #F1F1F1;
+}
+.vx-quick-block {
+  display: flex;
+  width: auto;
+  align-items: center;
+}
+.vx-quick-column {
+  display: flex;
+  width: auto;
+  position: relative;
+}
+.vx-quick-column button.top {
+  width: 30px;
+  height: 30px;
+  color: #FFFFFF;
+  justify-content: center;
+  border: 4px solid #161B2F;
+  border-radius: 50%;
+  font-size: 17px;
+  display: flex;
+  align-items: center;
+  transition: all 0.2s ease-in-out;
+  background: transparent;
+  outline: none;
+  cursor: pointer;
+  padding: 0;
+  background: #1E5DD3;
+  line-height: 16px;
+}
+.vx-quick-column button.top.plus {
+  font-size: 17px;
+}
+.vx-quick-column button.top.notification {
+  background: #E28F19;
+  font-size: 12px;
+}
+.vx-quick-column button.top.notification span.counter {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 9px;
+  color: #FFFFFF;
+  background: #161b2f;
+  border: 1px solid #282E48;
+  height: 18px;
+  min-width: 18px;
+  border-radius: 20px;
+  position: absolute;
+  left: 14px;
+  top: -8px;
+  line-height: 10px;
+  padding: 0 4px;
+}
+.vx-quick-column button.more {
+  color: #FFFFFF;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  transition: all 0.2s ease-in-out;
+  background: transparent;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  padding: 0;
+  margin: 0 20px;
+}
+.vx-quick-column.plus.toggle button {
+  transition: all 0.2s ease-in-out;
+  transform: rotate(45deg);
+}
+.vx-quick-column.notification {
+  margin-left: 24px;
+}
+.vx-quick-column.notification span {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 11px;
+  color: #FFFFFF;
+  background: #EE3939;
+  border: 1px solid #282e48;
+  height: 22px;
+  min-width: 22px;
+  border-radius: 22px;
+  position: absolute;
+  left: 16px;
+  top: -1px;
+  line-height: 10px;
+  padding: 0 4px;
+}
+.vx-quick-column.user {
+  margin-left: 24px;
+}
+.vx-quick-column.user img,
+.vx-quick-column.user span.small-user {
+  height: 22px;
+  width: 22px;
+  border-radius: 50%;
+  background: #4681ef;
+  color: #FFFFFF;
+  font-size: 10px;
+  font-weight: 500;
+}
+.vx-tab-menu ul {
+  padding: 0;
+  margin: 0 -8px;
+  display: flex;
+  position: relative;
+}
+.vx-tab-menu ul li {
+  list-style: none;
+  display: block;
+  padding: 0 8px;
+}
+.vx-tab-menu ul li a {
+  line-height: 24px;
+  color: #FFFFFF;
+  display: block;
+  border-bottom: 2px solid transparent;
+  text-decoration: none;
+  font-size: 10px;
+  text-transform: uppercase;
+  font-weight: 400;
+  cursor: pointer;
+}
+.vx-tab-menu ul li a.active {
+  border-color: #1E5DD3;
+}

package/css-build/css/icons/icons.css

@@ -0,0 +1,53 @@
+body {
+  font-size: 16px;
+}
+a,
+button {
+  cursor: pointer;
+}
+body {
+  margin: 0;
+  padding: 0px;
+  font-family: 'Poppins', sans-serif;
+}
+* {
+  box-sizing: border-box;
+}
+@font-face {
+  font-family: 'icon';
+  src: url('../../fonts/icon.eot?p42r08');
+  src: url('../../fonts/icon.eot?p42r08#iefix') format('embedded-opentype'), url('../../fonts/icon.ttf?p42r08') format('truetype'), url('../../fonts/icon.woff?p42r08') format('woff'), url('../../fonts/icon.svg?p42r08#icon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+.icons {
+  font-style: normal;
+  font-family: 'icon';
+}
+.icon-group {
+  width: calc(20% - 8px);
+  padding: 8px;
+  margin: 4px;
+  border-radius: 0.2px;
+  border: 1px solid #F1F1F1;
+}
+.icon-group i {
+  font-size: 20px;
+  margin-right: 12px;
+}
+.icon-group span.description {
+  position: relative;
+}
+.icon-group span.name {
+  font-size: 12px;
+  color: #161B2F;
+  line-height: 16px;
+  border-bottom: 1px solid #F1F1F1;
+  width: 100%;
+}
+.icon-group span.code {
+  font-size: 16px;
+  color: #747576;
+  width: 100%;
+}