vcomply-design-system 1.0.0

package/css-build/less/index2.less

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

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

@@ -0,0 +1,16 @@
+@import url('../mixin/mixin.less');
+.vx-layout {
+    &-left {
+        width: 280px;
+    }
+    &-main-menu {
+        width: 48px;
+    }
+    &-sub-menu {
+        width: 232px;
+    }
+    &-right {
+        width: calc(100% - 280px);
+    }
+
+}

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

@@ -0,0 +1,123 @@
+@import url(../mixin/mixin.less);
+
+.vx-main-menu {
+    width     : 48px;
+    background: @darkText;
+    position  : relative;
+    z-index   : 2;
+    height    : 100vh;
+
+    ul {
+        position: relative;
+        height  : 100%;
+
+        li {
+            list-style: none;
+
+            a {
+                // display        : flex;
+                // text-align     : center;
+                text-decoration   : none;
+                // padding        : 16px;
+                color             : @white;
+                cursor            : pointer;
+                // font-size      : 16px;
+                transition        : all .2s ease-in-out;
+                position          : relative;
+
+                &:hover {
+                    color: @primaryBlue;
+                }
+
+                &[data-title] {
+
+                    &:hover,
+                    &.hover {
+
+                        &::before,
+                        &::after {
+                            display: block;
+                        }
+                    }
+                }
+
+                &:before {
+                    position         : absolute;
+                    left             : 100%;
+                    content          : "";
+                    border-top       : 4px solid transparent;
+                    border-right     : 4px solid @black;
+                    border-bottom    : 4px solid transparent;
+                    top              : calc(50% - 3px);
+                    -webkit-animation: animate-right 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+                    animation        : animate-right 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+                    display          : none;
+                }
+
+                &:after {
+                    content          : attr(data-title);
+                    position         : absolute;
+                    left             : calc(100% + 4px);
+                    background       : @black;
+                    -webkit-animation: animate-right 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+                    animation        : animate-right 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+                    color            : @white;
+                    font-size        :12px;
+                    white-space      : nowrap;
+                    padding          : 0 12px;
+                    border-radius    : 2px;
+                    top              : calc(50% - 16px);
+                    line-height      : 32px;
+                    display          : none;
+                }
+            }
+
+            &.active {
+                a {
+                    color: @primaryBlue;
+                }
+            }
+
+            &:first-child {
+
+                a {
+                    background: @fadeDarkText;
+                    height    : 48px;
+                }
+
+            }
+
+            &: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);
+    }
+}