@fishawack/lab-velocity 2.0.0-beta.4 → 2.0.0-beta.6

package/components/_datepicker.scss

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

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

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

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

@@ -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/_modal.scss

@@ -0,0 +1,24 @@
+@import "@fishawack/lab-ui/_modal.scss";
+
+.modal--auth {
+    background-color: transparent;
+
+    transition: all 500ms ease-in-out;
+
+    &::before {
+        content: "";
+        pointer-events: none;
+        z-index: 0 !important;
+        position: fixed;
+        width: 100%;
+        height: 100%;
+        background: #00000066;
+        backdrop-filter: blur(1.5rem);
+        top: 0;
+        left: 0;
+        right: 0;
+    }
+}
+.AuthModule__form.modal__box {
+    position: absolute;
+}

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 {
+}