@fishawack/lab-velocity 2.0.0-beta.1 → 2.0.0-beta.2

package/components/_footer.scss

@@ -1,46 +0,0 @@
-.vel-footer {
-    background-color: $color1;
-    padding: $spacing * 3 $spacing * 3 $spacing * 2 $spacing * 3;
-    box-sizing: border-box;
-    width: 100%;
-
-    svg {
-        // width: 3 * $spacing;
-        // max-width: 3 * $spacing;
-        // height: 3 * $spacing;
-        display: inline-block;
-        margin-right: $spacing;
-    }
-    * {
-        font-size: get-ratio(14px);
-        line-height: get-ratio(21px);
-    }
-}
-
-.vel-footer__bottom {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: stretch;
-    align-content: stretch;
-    flex-basis: 100%;
-    justify-content: space-between;
-    margin-top: 3.5 * $spacing;
-
-    > * {
-        max-width: 50%;
-        flex-basis: 50%;
-    }
-}
-.vel-footer__bottom__links {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: self-end;
-    flex-basis: 100%;
-}
-
-.vel-footer__bottom__end {
-    justify-content: end;
-    flex-wrap: wrap;
-    align-items: self-end;
-    display: flex;
-}

package/components/_form.scss

@@ -1,24 +0,0 @@
-// @import "element-plus/theme-chalk/el-form";
-.form__group {
-    label {
-        margin-bottom: $spacing;
-        display: inline-block;
-        font-weight: 500;
-    }
-
-    &:not(:last-child) {
-        margin-bottom: 2.5 * $spacing;
-    }
-}
-
-.form__group--error {
-    .el-select__wrapper,
-    .el-select__wrapper:hover,
-    .el-input__wrapper,
-    .el-input__wrapper:hover {
-        box-shadow: 0 0 0 1px $colorAlert inset;
-        .el-select__icon {
-            color: $colorAlert;
-        }
-    }
-}

package/components/_header.scss

@@ -1,54 +0,0 @@
-.vel-header {
-    border-bottom: solid get-ratio(1px) $color4;
-    background-color: $color0;
-    width: 100%;
-    box-sizing: border-box;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    align-content: center;
-    flex-basis: 100%;
-    justify-content: space-between;
-    padding: 1.5 * $spacing 3 * $spacing;
-
-    > * {
-        max-width: 50%;
-        flex-basis: 50%;
-        justify-content: flex-end !important;
-    }
-
-    .icon {
-        min-width: $spacing * 2.5;
-        max-width: $spacing * 2.5;
-        width: $spacing * 2.5;
-        height: $spacing * 2.5;
-        margin-right: 0.5 * $spacing;
-    }
-}
-
-.vel-header__list {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: stretch;
-    align-content: stretch;
-    flex-basis: 100%;
-    padding-right: 1.5 * $spacing;
-    margin-left: -1.5 * $spacing;
-    margin-right: -1.5 * $spacing;
-
-    > div {
-        align-items: center;
-        &:not(:last-child) {
-            position: relative;
-            &::after {
-                position: absolute;
-                content: "";
-                border-right: solid get-ratio(1px) $color4;
-                height: 75%;
-                transform: translateY(-50%);
-                top: 50%;
-                right: 0px;
-            }
-        }
-    }
-}

package/components/_icon.scss

@@ -1,25 +0,0 @@
-// @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

@@ -1,22 +0,0 @@
-@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

@@ -1,44 +0,0 @@
-@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

@@ -1,43 +0,0 @@
-.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

@@ -1,112 +0,0 @@
-@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

@@ -1,8 +0,0 @@
-.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

@@ -1,18 +0,0 @@
-.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

@@ -1,29 +0,0 @@
-@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

@@ -1,56 +0,0 @@
-.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

@@ -1,14 +0,0 @@
-@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

@@ -1,20 +0,0 @@
-@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

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

package/components/_typography.scss

@@ -1,162 +0,0 @@
-@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;
-}