vcomply-design-system 1.0.0

package/css-build/css/index2.css

@@ -0,0 +1,313 @@
+::-webkit-scrollbar-track {
+  background-color: #f1f1f1;
+  position: absolute;
+}
+::-webkit-scrollbar {
+  width: 3px;
+  height: 3px;
+  background-color: transparent;
+  position: absolute;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 3px;
+  background-color: #DBDBDB;
+  position: absolute;
+}
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+body {
+  margin: 0;
+  padding: 0px;
+  font-family: 'Poppins', sans-serif;
+}
+* {
+  box-sizing: border-box;
+  font-family: 'Poppins', sans-serif;
+}
+@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';
+}
+h1 {
+  font-weight: 600;
+}
+section + section {
+  margin: 10px 0 0;
+}
+.page-devide {
+  display: flex;
+}
+.page-devide .left {
+  width: 30%;
+}
+.page-devide .left pre.language-markup {
+  height: 100%;
+}
+.page-devide .left .menu-wrapper {
+  overflow: hidden;
+  padding-right: 40px;
+}
+.page-devide .right {
+  width: 70%;
+}
+.page-devide .right pre.language-markup {
+  height: 100%;
+}
+section {
+  padding: 0 20px 20px;
+}
+section.seperator {
+  padding-bottom: 20px;
+  border-bottom: 1px solid #747576;
+  margin-bottom: 20px;
+}
+section input.code {
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+}
+section code {
+  width: 100%;
+  background: #161b2f;
+  display: block;
+  font-size: 12px;
+  color: #f1f1f1;
+  max-height: 600px;
+  overflow: auto;
+}
+section code.language-markup {
+  display: none;
+}
+section code.language-markup.active {
+  display: block;
+}
+section button.copy {
+  position: absolute;
+  top: -1px;
+  right: -1px;
+  background: #f1f1f1;
+  border: 1px solid #f1f1f1;
+  color: #161b2f;
+  font-size: 10px;
+  border-radius: 0 2px 0 2px;
+  padding: 4px 8px;
+  cursor: pointer;
+  text-transform: uppercase;
+  z-index: 2;
+}
+section button.copy i {
+  margin-right: 4px;
+}
+section button.copy:hover {
+  background: #1e5dd3;
+  color: #FFFFFF;
+  border-color: #1e5dd3;
+}
+section h3 {
+  margin-top: 0;
+  font-weight: 500;
+  margin-bottom: 10px;
+  font-size: 20px;
+}
+section button + button {
+  margin-left: 4px;
+}
+section button.block {
+  margin-left: 0;
+}
+section .block {
+  line-height: 40px;
+  font-size: 14px;
+  font-weight: 500;
+  padding: 5px 20px;
+}
+section .block + .block {
+  margin-top: 5px;
+  margin-left: 0;
+}
+section .block.primary {
+  background: #1e5dd3;
+  color: #FFFFFF;
+}
+section .block.outline {
+  background: #FFFFFF;
+  border: 1px solid #f1f1f1;
+  color: #161b2f;
+}
+section .block .block {
+  height: 40px;
+  margin-top: 0;
+  width: 20%;
+  background: #f1f1f1;
+  border-radius: 4px;
+  text-transform: none;
+  padding: 0;
+}
+section .block .block + .block {
+  margin-left: 5px;
+}
+section .devide {
+  width: 100%;
+}
+section .devide .column {
+  width: 50%;
+}
+section .devide .column img {
+  max-width: 100%;
+}
+section .devide .column .vx-main-menu {
+  min-height: 80vh;
+}
+section .devide .column .vx-main-menu ul {
+  min-height: 80vh;
+}
+section .dummy {
+  overflow: hidden;
+  min-width: 48px;
+}
+section .dummy + .vx-d-block {
+  width: 80%;
+}
+section .head {
+  border-bottom: 1px solid #F1F1F1;
+  position: sticky;
+  top: 0;
+  z-index: 4;
+  background: #FFFFFF;
+}
+section h2.title {
+  font-size: 22px;
+  font-weight: 500;
+  line-height: 48px;
+  position: relative;
+  display: inline-block;
+}
+section h2.title:after {
+  content: "";
+  height: 4px;
+  background: #D83A3E;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+}
+section .font-wrapper {
+  display: flex;
+}
+section .font-wrapper .thumbnail {
+  width: 200px;
+  color: #747576;
+  font-size: 100px;
+}
+section .font-wrapper .content {
+  width: calc(100% - 200px);
+  color: #747576;
+}
+section .font-wrapper .content p {
+  font-size: 20px;
+  word-spacing: 10px;
+}
+section .font-wrapper.light {
+  font-weight: 300;
+}
+section .font-wrapper.normal {
+  font-weight: 400;
+}
+section .font-wrapper.medium {
+  font-weight: 500;
+}
+section .font-wrapper.semibold {
+  font-weight: 600;
+}
+section .font-wrapper.bold {
+  font-weight: 700;
+}
+section .vx-color-group {
+  display: flex;
+}
+section .page-container {
+  width: calc(100% - 232px);
+  padding-right: 20px;
+}
+section .page-quick-menu {
+  width: 232px;
+  position: sticky;
+  top: 100px;
+  height: calc(100vh - 110px);
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+section .preview-block {
+  background: #f1f1f1;
+  padding: 47px 15px 15px;
+  border-radius: 4px;
+  margin-bottom: 20px;
+  position: relative;
+}
+section .preview-block .action-buttons {
+  display: flex;
+  justify-content: flex-end;
+  top: 1px;
+  right: 1px;
+  left: 1px;
+  background: #FFFFFF;
+  position: absolute;
+}
+section .preview-block .action-buttons button {
+  color: #747576;
+}
+section .preview-block .action-buttons button i {
+  margin-right: 4px;
+}
+section .preview-block .action-buttons button i.rotate {
+  transform: rotate(90deg);
+}
+section .preview-block .preview-container {
+  width: 100%;
+  overflow: auto;
+  max-height: 400px;
+}
+section .preview-block .preview-container.visible {
+  overflow: visible;
+}
+section .code-view {
+  position: relative;
+  display: none;
+}
+section .code-view.active {
+  display: block;
+}
+section .code-view .code-navigation {
+  padding-left: 8px;
+}
+section .code-view button {
+  background: #f1f1f1;
+  border-radius: 4px 4px 0 0;
+  line-height: 30px;
+  font-size: 14px;
+  text-transform: uppercase;
+  color: #747576;
+  border: none;
+  cursor: pointer;
+  outline: none;
+  padding: 0 20px;
+}
+section .code-view button.active {
+  background: #161b2f;
+  color: #FFFFFF;
+}
+.main-container {
+  background: #f1f1f1;
+}

package/css-build/css/layout/layout.css

@@ -0,0 +1,19 @@
+body {
+  font-size: 16px;
+}
+a,
+button {
+  cursor: pointer;
+}
+.vx-layout-left {
+  width: 280px;
+}
+.vx-layout-main-menu {
+  width: 48px;
+}
+.vx-layout-sub-menu {
+  width: 232px;
+}
+.vx-layout-right {
+  width: calc(100% - 280px);
+}

package/css-build/css/left-menu/main-menu.css

@@ -0,0 +1,98 @@
+body {
+  font-size: 16px;
+}
+a,
+button {
+  cursor: pointer;
+}
+.vx-main-menu {
+  width: 48px;
+  background: #161B2F;
+  position: relative;
+  z-index: 2;
+  height: 100vh;
+}
+.vx-main-menu ul {
+  position: relative;
+  height: 100%;
+}
+.vx-main-menu ul li {
+  list-style: none;
+}
+.vx-main-menu ul li a {
+  text-decoration: none;
+  color: #FFFFFF;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  position: relative;
+}
+.vx-main-menu ul li a:hover {
+  color: #1E5DD3;
+}
+.vx-main-menu ul li a[data-title]:hover::before,
+.vx-main-menu ul li a[data-title].hover::before,
+.vx-main-menu ul li a[data-title]:hover::after,
+.vx-main-menu ul li a[data-title].hover::after {
+  display: block;
+}
+.vx-main-menu ul li a:before {
+  position: absolute;
+  left: 100%;
+  content: "";
+  border-top: 4px solid transparent;
+  border-right: 4px solid #000000;
+  border-bottom: 4px solid transparent;
+  top: calc(50% - 3px);
+  -webkit-animation: animate-right 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  animation: animate-right 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  display: none;
+}
+.vx-main-menu ul li a:after {
+  content: attr(data-title);
+  position: absolute;
+  left: calc(100% + 4px);
+  background: #000000;
+  -webkit-animation: animate-right 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  animation: animate-right 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  color: #FFFFFF;
+  font-size: 12px;
+  white-space: nowrap;
+  padding: 0 12px;
+  border-radius: 2px;
+  top: calc(50% - 16px);
+  line-height: 32px;
+  display: none;
+}
+.vx-main-menu ul li.active a {
+  color: #1E5DD3;
+}
+.vx-main-menu ul li:first-child a {
+  background: #1F253A;
+  height: 48px;
+}
+.vx-main-menu ul li:last-of-type {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+@-webkit-keyframes animate-right {
+  0% {
+    -webkit-transform: translateX(10px);
+    transform: translateX(10px);
+  }
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+@keyframes animate-right {
+  0% {
+    -webkit-transform: translateX(10px);
+    transform: translateX(10px);
+  }
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}