@fishawack/lab-velocity 2.0.0-beta.3 → 2.0.0-beta.5

package/components/_icon.scss

@@ -0,0 +1,25 @@
+// @import "@fishawack/lab-ui/_icon.scss";
+
+.vel-icon {
+    .vel-link &,
+    .vel-button &,
+    .vel-basic & {
+        width: get-ratio(16px);
+        min-width: get-ratio(16px);
+        max-height: get-ratio(16px);
+        padding-bottom: 0px;
+        line-height: 0px;
+    }
+
+    .vel-button.el-button--small & {
+        width: get-ratio(12px);
+        min-width: get-ratio(12px);
+        max-height: get-ratio(12px);
+    }
+    .vel-side-bar__button & {
+        width: get-ratio(20px);
+        min-width: get-ratio(20px);
+        padding-bottom: 0px;
+        line-height: 0px;
+    }
+}

package/components/_inputNumber.scss

@@ -0,0 +1,22 @@
+@import "element-plus/theme-chalk/el-input-number";
+
+.vel-input-number {
+    display: block;
+    font-size: 1rem;
+
+    .el-input__wrapper {
+        // padding: .5 * $spacing $spacing;
+    }
+
+    .el-input__inner {
+        --el-input-inner-height: 38px;
+    }
+    .el-input-group__append,
+    .el-input-group__prepend {
+        padding: 0 2 * $spacing;
+    }
+
+    &__error {
+        color: $colorAlert;
+    }
+}

package/components/_link.scss

@@ -0,0 +1,44 @@
+@import "element-plus/theme-chalk/el-link";
+
+.vel-link.el-link--default {
+    &:hover {
+        color: currentColor;
+        &:after {
+            border-color: currentColor;
+        }
+    }
+}
+.vel-link--underline.vel-link {
+    &:after {
+        border-bottom: 1px solid currentColor;
+        bottom: 0;
+        content: "";
+        height: 0;
+        left: 0;
+        position: absolute;
+        right: 0;
+        border-color: currentColor;
+    }
+    &:hover {
+        color: currentColor;
+        &:after {
+            border-color: currentColor;
+        }
+    }
+}
+
+.vel-link--default {
+    font-size: get-ratio(16px);
+}
+
+.vel-link--large {
+    font-size: get-ratio(18px);
+}
+
+.vel-link--small {
+    font-size: get-ratio(14px);
+}
+
+.vel-link--xsmall {
+    font-size: get-ratio(12px);
+}

package/components/_loader.scss

@@ -0,0 +1,43 @@
+.vel-loader {
+    position: relative;
+    display: block;
+    width: 6rem;
+    height: 6rem;
+    border-radius: 50%;
+    background-color: inherit;
+
+    svg {
+        .circle {
+            animation: 2s spinning cubic-bezier(0.41, 0.26, 0.2, 0.62) infinite;
+            transform-origin: center;
+        }
+    }
+}
+
+.vel-loader--l {
+    width: 10rem;
+    height: 10rem;
+
+    &::before {
+        border-width: 0.6rem;
+    }
+
+    @include breakpoint(max-width $mobileMax) {
+        width: 6rem;
+        height: 6rem;
+
+        &::before {
+            border-width: 0.4rem;
+        }
+    }
+}
+
+@keyframes spinning {
+    from {
+        transform: rotate(0);
+    }
+
+    to {
+        transform: rotate(2turn);
+    }
+}

package/components/_menu.scss

@@ -0,0 +1,112 @@
+@import "element-plus/theme-chalk/el-menu";
+@import "element-plus/theme-chalk/el-menu-item";
+@import "element-plus/theme-chalk/el-sub-menu";
+
+ul.vel-menu {
+    li {
+        --el-menu-level-padding: 0;
+        padding-right: 0px;
+    }
+    .el-sub-menu__title,
+    a,
+    .el-menu-item > * {
+        font-size: get-ratio(18px);
+        border-left: solid 0.5 * $spacing transparent;
+        padding: 0 2.5 * $spacing;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        overflow: hidden;
+        .vel-icon {
+            vertical-align: middle;
+            width: 2.5 * $spacing;
+            min-width: 2.5 * $spacing;
+            fill: currentColor;
+            margin-right: 0.5 * $spacing;
+            * {
+                vertical-align: middle;
+            }
+        }
+    }
+
+    .el-sub-menu__title {
+        padding: 0 2.5 * $spacing !important;
+    }
+
+    a {
+        height: 100%;
+        box-sizing: border-box;
+        border-left: solid 0.5 * $spacing $color8;
+        .vel-icon {
+            width: 2.5 * $spacing;
+            max-width: 2.5 * $spacing;
+            min-width: 2.5 * $spacing;
+            padding-bottom: 0px;
+        }
+        &.active {
+            border-left-color: $color1;
+        }
+    }
+
+    span,
+    .el-sub-menu__icon-arrow {
+        opacity: 0;
+        transition: 0.2s ease-in-out opacity;
+        margin-left: 0.5 * $spacing;
+    }
+
+    .active & {
+        span,
+        .el-sub-menu__icon-arrow {
+            opacity: 1;
+        }
+    }
+
+    .el-icon {
+        flex-shrink: 1;
+        width: auto;
+    }
+}
+
+.vel-sub-menu {
+    --el-menu-level-padding: 0;
+    .el-menu-item,
+    .vel-sub-menu {
+        padding-left: 5 * $spacing !important;
+    }
+    .el-sub-menu__title {
+        height: auto;
+        line-height: get-ratio(48px);
+    }
+}
+
+.vel-menu-item {
+    height: auto;
+    line-height: get-ratio(48px);
+    * {
+        vertical-align: middle;
+    }
+}
+
+.vel-menu {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    li:last-child {
+        margin-top: auto;
+        margin-bottom: 0px;
+    }
+
+    .el-sub-menu {
+        .vel-menu-item {
+            a.active {
+                border-left-color: transparent;
+            }
+        }
+        .vel-menu-item a {
+            padding-left: 0px;
+            padding-right: 0px;
+        }
+    }
+}

package/components/_pageTitle.scss

@@ -0,0 +1,8 @@
+.vel-page-title {
+    padding: 3 * $spacing 6 * $spacing;
+    background-color: $color0;
+    border-bottom: 0.5 * $spacing solid;
+    border-image: linear-gradient(90deg, #ff558f 0%, #856df6 100%) 1;
+    box-shadow: 0.5 * $spacing 0.5 * $spacing $spacing 0px #00000040;
+    margin-bottom: 2.5 * $spacing;
+}

package/components/_permissionLegend.scss

@@ -0,0 +1,18 @@
+.permission-legend {
+    background-color: #f2f2f2;
+    border: 1px solid #e6e6e6;
+    padding: $spacing * 2;
+}
+
+.permission-legend__list {
+    list-style: none;
+    padding-left: 0;
+
+    & > li {
+        margin-bottom: $spacing;
+    }
+}
+
+.permission-legend__description {
+    padding-left: $spacing;
+}

package/components/_select.scss

@@ -0,0 +1,29 @@
+@import "element-plus/theme-chalk/el-tag";
+@import "element-plus/theme-chalk/el-option";
+@import "element-plus/theme-chalk/el-option-group";
+@import "element-plus/theme-chalk/el-scrollbar";
+@import "element-plus/theme-chalk/el-popper";
+@import "element-plus/theme-chalk/el-select";
+
+.vel-select {
+    .el-select__wrapper {
+        font-size: get-ratio(16px);
+        padding: get-ratio(17px) get-ratio(16px);
+    }
+    .el-select__input,
+    .el-select__selected-item {
+        line-height: get-ratio(16px);
+        height: get-ratio(16px);
+    }
+    .el-tag--default {
+        font-size: get-ratio(12px);
+        line-height: get-ratio(12px);
+        height: get-ratio(18px);
+    }
+    .el-select__selection.is-near {
+        margin-left: 0px;
+    }
+    &__error {
+        color: $colorAlert;
+    }
+}

package/components/_sidebar.scss

@@ -0,0 +1,56 @@
+.vel-side-bar {
+    flex-basis: $spacing * 7.5;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0px $spacing * 0.5 $spacing * 0.5 0px hsla(0, 0%, 0%, 0.251);
+    min-height: 10vh;
+    max-height: 100vh;
+    overflow: hidden;
+    transition: flex-basis 0.3s ease-in-out;
+    background-color: $color0;
+
+    position: sticky;
+    top: 0vh;
+    padding-top: 2 * $spacing;
+    min-width: get-ratio(64px);
+    flex-basis: get-ratio(64px);
+
+    > div {
+        &:first-child {
+            flex-grow: 0.8;
+        }
+        &:last-child {
+            margin-bottom: 5.5vh;
+        }
+    }
+
+    &.active {
+        flex-basis: 31.5 * $spacing;
+        min-width: 31.5 * $spacing;
+
+        .vel-side-bar__button {
+            transform: rotateY(180deg);
+        }
+    }
+}
+
+.vel-side-bar__button {
+    outline: none;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    &:focus {
+        outline: 1px solid;
+    }
+}
+
+.vel-side-bar__bottom {
+    display: flex;
+    justify-content: flex-end;
+    border-top: solid 1px #e6e6e6;
+    padding: $spacing $spacing * 1.5;
+}
+
+main {
+    overflow: hidden;
+}

package/components/_switch.scss

@@ -0,0 +1,14 @@
+@import "element-plus/theme-chalk/el-switch";
+
+.vel-switch {
+    &__error {
+        color: $colorAlert;
+    }
+    .el-switch {
+        --el-switch-on-color: #{$color1};
+        height: auto;
+    }
+    .vel-switch__label {
+        margin-right: 0.5rem;
+    }
+}

package/components/_table.scss

@@ -0,0 +1,20 @@
+@import "element-plus/theme-chalk/el-table-column";
+@import "element-plus/theme-chalk/el-table";
+@import "element-plus/theme-chalk/el-pagination";
+
+.el-table {
+    padding: get-ratio(8px);
+    thead tr .el-table__cell {
+        background-color: #f7f7f7;
+    }
+    .el-table__cell {
+        padding: get-ratio(8px) get-ratio(12px);
+    }
+}
+
+.table-wrapper {
+    // display: flex;
+    display: flex;
+    width: 100%;
+    max-width: 100%;
+}

package/components/_tooltip.scss

@@ -0,0 +1,4 @@
+@import "element-plus/theme-chalk/el-tooltip";
+
+.vel-tooltip {
+}

package/components/_typography.scss

@@ -0,0 +1,162 @@
+@import "@fishawack/lab-ui/_typography.scss";
+/* Primary font
+-------------------------------------------------- */
+@font-face {
+    font-family: $primaryFont;
+    font-weight: 400;
+    font-style: normal;
+
+    src:
+        resolve($primaryFontRegular + ".woff2") format("woff2"),
+        resolve($primaryFontRegular + ".woff") format("woff");
+}
+
+@font-face {
+    font-family: $primaryFont;
+    font-weight: 100;
+    font-style: normal;
+
+    src:
+        resolve($primaryFontThin + ".woff2") format("woff2"),
+        resolve($primaryFontThin + ".woff") format("woff");
+}
+
+@font-face {
+    font-family: $primaryFont;
+    font-weight: 200;
+    font-style: normal;
+
+    src:
+        resolve($primaryFontExtraLight + ".woff2") format("woff2"),
+        resolve($primaryFontExtraLight + ".woff") format("woff");
+}
+
+@font-face {
+    font-family: $primaryFont;
+    font-weight: 300;
+    font-style: normal;
+
+    src:
+        resolve($primaryFontLight + ".woff2") format("woff2"),
+        resolve($primaryFontLight + ".woff") format("woff");
+}
+
+@font-face {
+    font-family: $primaryFont;
+    font-weight: 500;
+    font-style: normal;
+
+    src:
+        resolve($primaryFontMedium + ".woff2") format("woff2"),
+        resolve($primaryFontMedium + ".woff") format("woff");
+}
+
+@font-face {
+    font-family: $primaryFont;
+    font-weight: 600;
+    font-style: normal;
+
+    src:
+        resolve($primaryFontSemiBold + ".woff2") format("woff2"),
+        resolve($primaryFontSemiBold + ".woff") format("woff");
+}
+
+@font-face {
+    font-family: $primaryFont;
+    font-weight: 700;
+    font-style: normal;
+
+    src:
+        resolve($primaryFontBold + ".woff2") format("woff2"),
+        resolve($primaryFontBold + ".woff2") format("woff2");
+}
+
+@font-face {
+    font-family: $secondaryFont;
+    font-weight: 500;
+    font-style: normal;
+
+    src: resolve($secondaryFontMedium + ".ttf") format("truetype");
+}
+
+h1,
+.h1 {
+    font-size: get-ratio(48px);
+    line-height: get-ratio(56px);
+    font-family: $primaryFont;
+}
+
+h2,
+.h2 {
+    font-size: get-ratio(36px);
+    line-height: get-ratio(48px);
+    font-family: $secondaryFont;
+}
+
+h3,
+.h3 {
+    font-size: get-ratio(32px);
+    line-height: get-ratio(42px);
+    font-family: $primaryFont;
+}
+
+h4,
+.h4 {
+    font-size: get-ratio(24px);
+    line-height: get-ratio(32px);
+    font-family: $primaryFont;
+}
+
+h5,
+.h5 {
+    font-size: get-ratio(20px);
+    line-height: get-ratio(24px);
+    font-weight: 700;
+    font-family: $primaryFont;
+}
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3,
+h4,
+.h4,
+h5,
+.h5 {
+    font-weight: 500;
+}
+
+// may be project specific
+
+.font-secondary {
+    font-family: $secondaryFont;
+}
+
+.font-primary {
+    font-family: $primaryFont;
+}
+
+.text-10 {
+    font-size: get-ratio(10px);
+    line-height: get-ratio(16px);
+}
+.text-12 {
+    font-size: get-ratio(12px);
+    line-height: get-ratio(18px);
+}
+.text-14 {
+    font-size: get-ratio(14px);
+    line-height: get-ratio(20px);
+}
+.font-16 {
+    font-size: get-ratio(16px);
+    line-height: get-ratio(24px);
+}
+
+.text-60 {
+    font-size: get-ratio(60px);
+    line-height: get-ratio(68px);
+    font-weight: 500;
+    font-family: $primaryFont;
+}

package/components/_upload.scss

@@ -0,0 +1,15 @@
+@import "element-plus/theme-chalk/el-upload";
+
+.vel-upload {
+    .el-upload__tip {
+        color: $color11;
+    }
+    &.form__group--error {
+        .el-upload__tip {
+            color: $colorAlert;
+        }
+    }
+    &__error {
+        color: $colorAlert;
+    }
+}

package/components/_wysiwyg.scss

@@ -0,0 +1,7 @@
+@import "quill/dist/quill.snow";
+@import "quill/dist/quill.core";
+
+.ql-container,
+.ql-toolbar {
+    background-color: $color0;
+}