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

package/components/_checkbox.scss

@@ -1,40 +0,0 @@
-@import "element-plus/theme-chalk/el-checkbox";
-@import "element-plus/theme-chalk/el-checkbox-button";
-
-.vel-checkbox, .el-checkbox {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        gap: $spacing * .5;
-        flex-wrap: wrap ;
-        align-items: baseline;
-        
-        &__label{
-            order: 2;
-        }
-        &__checkbox {
-            order: 1;
-            .el-checkbox__input {
-                &.is-checked {
-                    .el-checkbox__inner {
-                        background-color: black;
-                    }
-                }
-            }
-        }
-        &__error {
-           order: 3;
-           flex-basis: 100%;
-           color: $colorAlert;
-        }        
-}
-
-.vel-checkbox-group, .vel-checkbox {
-    &--vertical {
-        .vel-checkbox-group__wrapper {
-            display: flex;
-            flex-direction: column;
-        }
-    }
-
-}

package/components/_collapse.scss

@@ -1,25 +0,0 @@
-
-@import "element-plus/theme-chalk/el-collapse";
-@import "element-plus/theme-chalk/el-collapse-item";
-
-.el-collapse-item__header {
-    align-items: center;
-    --el-collapse-header-font-size:get-ratio(16px);
-    .vel-icon {
-        vertical-align: middle;
-        width: 13px;
-        min-width: 13px;
-        fill: currentColor;
-        margin-right: 0.25rem;
-
-        svg {
-            vertical-align: middle;
-        }
-    }
-}
-
-.el-collapse {
-    --el-collapse-header-bg-color: transparent;
-    --el-collapse-content-bg-color: transparent;
-    --el-collapse-border-color: transparent;
-}

package/components/_datepicker.scss

@@ -1,51 +0,0 @@
-@import "element-plus/theme-chalk/el-date-picker";
-
-.vel-datepicker {
-    // --el-input-height:38px;
-
-    // &.el-input--large {
-        --el-input-height:46px;
-    // }
-
-    &__error {
-        color: $colorAlert;
-    }
-}
-
-.vel-popper {
-    @include breakpoint (max-width $mobileMax) {
-        min-width: 280px;
-        max-width: 325px;
-        width: auto;
-        .el-date-range-picker{
-            width: 100%;
-            .el-picker-panel__body {
-                width: 100%;
-                min-width: 100%;
-                &>div {
-                    width: auto;
-                    min-width: auto;
-                    border: none;
-                }
-            }
-        }
-    }
-}
-
-.vel-date-picker, .el-date-picker {
-    &.has-sidebar {
-        width: auto;
-
-        .el-picker-panel__body-wrapper {
-            display: flex;
-        }
-    }
-    .el-picker-panel__sidebar {
-        width: auto;
-        position: relative;
-    }
-    .el-picker-panel__body {
-        margin-left: 0px;
-        position: relative !important;
-    }
-}

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,22 +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,55 +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: .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,24 +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,21 +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,44 +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 .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: .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 .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: .2s ease-in-out opacity;
-        margin-left: .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: .5 * $spacing solid;
-    border-image: linear-gradient(90deg, #FF558F 0%, #856DF6 100%) 1;
-    box-shadow: .5 * $spacing .5 * $spacing $spacing 0px #00000040;
-    margin-bottom: 2.5 * $spacing;
-}

package/components/_select.scss

@@ -1,28 +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,57 +0,0 @@
-.vel-side-bar {
-    flex-basis: $spacing * 7.5;
-    display: flex;
-    flex-direction: column;
-    box-shadow: 0px $spacing * .5 $spacing * .5 0px hsla(0, 0%, 0%, 0.251);
-    min-height: 10vh;
-    max-height: 100vh;
-    overflow: hidden;
-    transition: flex-basis .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: .80;
-        }
-        &: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: .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{
-}