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

package/components/_alert.scss

@@ -0,0 +1,5 @@
+@import "element-plus/theme-chalk/el-alert";
+
+.vel-alert {
+    --el-color-error: #d53a3a;
+}

package/components/_basic.scss

@@ -0,0 +1,55 @@
+@import "element-plus/theme-chalk/el-input";
+
+.el-input {
+    font-size: 1rem;
+
+    .el-input__wrapper {
+        // padding: .5 * $spacing $spacing;
+    }
+
+    .el-input__inner {
+        --el-input-inner-height: 46px;
+    }
+    .el-input-group__append,
+    .el-input-group__prepend {
+        padding: 0 2 * $spacing;
+    }
+}
+
+.vel-basic {
+    &__error {
+        color: $colorAlert;
+    }
+}
+
+.form__icon-container {
+    position: absolute;
+    top: 50%;
+    right: 12px;
+    transform: translateY(-50%);
+    display: flex;
+
+    .icon {
+        display: flex;
+    }
+}
+
+.input--password {
+    .el-input-group__append {
+        border: none;
+        box-shadow: none;
+        background-color: transparent;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        padding: 0px;
+        height: 40px;
+        min-height: fit-content;
+    }
+    .icon {
+        width: 24px;
+        min-width: 24px;
+        padding: 0px !important;
+        fill: #cfd8dd !important;
+    }
+}

package/components/_breadcrumbs.scss

@@ -0,0 +1,39 @@
+@import "element-plus/theme-chalk/el-breadcrumb";
+@import "element-plus/theme-chalk/el-breadcrumb-item";
+.vel-breadcrumb {
+    .el-breadcrumb__separator {
+        display: none;
+        margin: 0px $spacing;
+    }
+
+    .el-breadcrumb__separator,
+    .el-breadcrumb__inner {
+        font-size: get-ratio(16px);
+        line-height: get-ratio(24px);
+    }
+
+    .el-breadcrumb__inner {
+        &.is-link {
+            text-decoration: underline;
+            font-weight: 500;
+            color: $color2;
+            text-transform: capitalize;
+
+            &:hover {
+                color: $color12;
+            }
+        }
+    }
+
+    .el-breadcrumb__item {
+        &:last-child {
+            .el-breadcrumb__inner {
+                &.is-link {
+                    color: $color2;
+                    font-weight: 400;
+                    text-decoration: none;
+                }
+            }
+        }
+    }
+}

package/components/_button.scss

@@ -0,0 +1,304 @@
+@import "element-plus/theme-chalk/el-button";
+
+.vel-button {
+    height: auto;
+    --el-border-radius-base: 0px;
+    --el-font-size-base: get-ratio(16px);
+
+    .is-round {
+        --el-border-radius-base: 999px;
+    }
+
+    // colors
+    &.el-button--default {
+        --el-color-primary: #ffffff;
+
+        // text color
+        --el-text-color-regular: #{$color2};
+        --el-button-hover-text-color: #{$color1};
+        --el-button-active-text-color: #{$color1};
+        --el-button-disabled-text-color: #bdbdbd;
+
+        // background color
+        --el-button-bg-color: #ffffff;
+        --el-button-hover-bg-color: #{$color8};
+        --el-button-active-text-color: #{$color1};
+        --el-button-disabled-bg-color: #ffffff;
+
+        // border color
+        --el-button-border-color: #{$color5};
+        --el-button-hover-border-color: #afafaf;
+        --el-button-active-border-color: #{$color1};
+        --el-button-disabled-border-color: #{$color4};
+
+        &.is-loading {
+            --el-text-color-regular: #a4a4a4;
+            --el-button-border-color: #{$color4};
+        }
+
+        &.is-plain {
+            --el-color-primary: #ffffff;
+
+            // text color
+            --el-text-color-regular: #{$color2};
+            --el-button-hover-text-color: #{$color1};
+            --el-button-active-text-color: #{$color1};
+            --el-button-disabled-text-color: #bdbdbd;
+
+            // background color
+            --el-button-bg-color: #ffffff;
+            --el-button-hover-bg-color: ##ffffff;
+            --el-button-active-text-color: #{$color1};
+            --el-button-disabled-bg-color: #ffffff;
+
+            // border color
+            --el-button-border-color: #{$color5};
+            --el-button-hover-border-color: #{$color1};
+            --el-button-active-border-color: #{$color1};
+            --el-button-disabled-border-color: #{$color4};
+
+            &.is-loading {
+                --el-text-color-regular: #a4a4a4;
+                --el-button-border-color: #{$color4};
+            }
+        }
+    }
+
+    &.el-button--primary {
+        --el-color-primary: #{$color1};
+
+        // text color
+        --el-text-color-regular: #ffffff;
+        --el-button-hover-text-color: #ffffff;
+        --el-button-active-text-color: #ffffff;
+        --el-button-disabled-text-color: #ffffff;
+
+        // background color
+        --el-button-bg-color: #{$color1};
+        --el-button-hover-bg-color: #{$color12};
+        --el-button-active-bg-color: #090909;
+        --el-button-disabled-bg-color: #afafaf;
+
+        // border color
+        --el-button-border-color: transparent;
+        --el-button-hover-border-color: transparent;
+        --el-button-active-border-color: transparent;
+        --el-button-disabled-border-color: transparent;
+
+        &.is-loading {
+            --el-text-color-regular: #a4a4a4;
+            --el-button-border-color: transparent;
+            --el-button-bg-color: #5c5c5c;
+        }
+
+        &.is-plain {
+            --el-color-primary: #{$color1};
+
+            // text color
+            --el-text-color-regular: #{$color1};
+            --el-button-hover-text-color: #ffffff;
+            --el-button-active-text-color: #ffffff;
+            --el-button-disabled-text-color: #ffffff;
+            --el-color-primary-light-5: #757575;
+
+            // background color
+            --el-button-bg-color: #f2f2f2;
+            --el-button-hover-bg-color: #{$color1};
+            --el-button-active-bg-color: #090909;
+            --el-button-disabled-bg-color: #{$color8};
+            --el-color-primary-light-9: #{$color8};
+
+            // border color
+            --el-button-border-color: #757575;
+            --el-button-hover-border-color: transparent;
+            --el-button-active-border-color: transparent;
+            --el-button-disabled-border-color: #d5d5d5;
+            --el-color-primary-light-8: #d5d5d5;
+
+            &.is-loading {
+                --el-text-color-regular: #{$color12};
+                --el-button-border-color: #757575;
+                --el-button-bg-color: #{$color8};
+            }
+        }
+
+        &.is-text,
+        &.is-link {
+            // text color
+            --el-button-hover-link-text-color: #{$color12};
+            --el-button-active-color: #090909;
+
+            &.is-disabled {
+                --el-color-primary-light-5: #bdbdbd;
+            }
+        }
+    }
+
+    &.el-button--danger {
+        --el-color-primary: #{$colorAlert};
+
+        // text color
+        --el-text-color-regular: #ffffff;
+        --el-button-hover-text-color: #ffffff;
+        --el-button-active-text-color: #ffffff;
+        --el-button-disabled-text-color: #ffffff;
+
+        // background color
+        --el-button-bg-color: #{$colorAlert};
+        --el-button-hover-bg-color: #df6b6b;
+        --el-button-active-bg-color: #b42929;
+        --el-button-disabled-bg-color: #ea9c9c;
+
+        // border color
+        --el-button-border-color: transparent;
+        --el-button-hover-border-color: transparent;
+        --el-button-active-border-color: transparent;
+        --el-button-disabled-border-color: transparent;
+
+        &.is-loading {
+            --el-text-color-regular: #ffffff;
+            --el-button-border-color: transparent;
+            --el-button-bg-color: #df6b6b;
+        }
+
+        &.is-plain {
+            // border: 2px solid orange !important;
+            --el-color-primary: #{$colorAlert};
+
+            // text color
+            --el-button-text-color: #d53a3a;
+            --el-text-color-regular: #d53a3a;
+            --el-button-hover-text-color: #ffffff;
+            --el-button-active-text-color: #ffffff;
+            --el-button-disabled-text-color: ##ea9c9c;
+
+            // background color
+            --el-button-bg-color: #fcf1f1;
+            --el-button-hover-bg-color: #d53a3a;
+            --el-button-active-bg-color: #b42929;
+            --el-button-disabled-bg-color: #fcf1f1;
+
+            // border color
+            --el-button-border-color: #ea9c9c;
+            --el-button-hover-border-color: transparent;
+            --el-button-active-border-color: transparent;
+            --el-button-disabled-border-color: #f9e1e1;
+
+            &.is-loading {
+                --el-text-color-regular: ##df6b6b;
+                --el-button-border-color: #ea9c9c;
+                --el-button-bg-color: #fcf1f1;
+            }
+        }
+    }
+
+    &.el-button--success {
+    }
+
+    &.el-button--info {
+    }
+
+    &.el-button--warning {
+    }
+
+    .vel-icon {
+        fill: currentColor;
+        path {
+            fill: currentColor;
+        }
+    }
+
+    // sizes & spacing
+    &.el-button--default,
+    &.el-button--primary,
+    &.el-button--danger,
+    &.el-button--success,
+    &.el-button--warning,
+    &.el-button--info {
+        // line-height: 1;
+        padding: get-ratio(11px) $spacing * 2;
+    }
+
+    &.el-button--large {
+        // line-height: 1;
+        padding: get-ratio(15px) $spacing * 2;
+    }
+
+    &.el-button--small {
+        // line-height: 1;
+        padding: get-ratio(5px) $spacing;
+    }
+
+    // shapes
+
+    &.is-circle,
+    &.is-square {
+        width: auto;
+        & [class*="el-icon"] + span {
+            margin-left: 0;
+        }
+        &.el-button--default,
+        &.el-button--primary,
+        &.el-button--danger,
+        &.el-button--success,
+        &.el-button--warning,
+        &.el-button--info {
+            padding: get-ratio(11px);
+        }
+
+        &.el-button--large {
+            padding: get-ratio(15px);
+        }
+
+        &.el-button--small {
+            padding: get-ratio(5px);
+        }
+    }
+    // Fix for improper spacing
+    .el-icon.is-loading {
+        + span:empty {
+            margin-left: 0px;
+        }
+    }
+}
+
+.vel-button {
+    &[disabled="true"] {
+        pointer-events: none !important;
+    }
+
+    &--iconRight {
+        .el-icon {
+            order: 2;
+        }
+
+        > span {
+            order: 1;
+            margin: 0 0.5rem 0 0;
+        }
+    }
+
+    &--iconOnly1 {
+        > span {
+            margin: 0;
+        }
+
+        .vel-icon {
+            width: 1.5 * $spacing;
+            height: 1.5 * $spacing;
+        }
+
+        svg {
+            width: 100%;
+            height: 100%;
+        }
+
+        &.el-button--small {
+            padding: $spacing $spacing * 2;
+        }
+
+        &.el-button--large {
+            padding: 2 * $spacing 2.5 * $spacing;
+        }
+    }
+}

package/components/_cascader.scss

@@ -0,0 +1,12 @@
+@import "element-plus/theme-chalk/el-cascader";
+@import "element-plus/theme-chalk/el-cascader-panel";
+@import "element-plus/theme-chalk/el-popper";
+
+.el-cascader-panel {
+    font-size: 1rem;
+}
+
+.el-cascader-node {
+    line-height: get-ratio(40px);
+    height: get-ratio(40px);
+}

package/components/_checkbox.scss

@@ -0,0 +1,41 @@
+@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 * 0.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/_chip.scss

@@ -0,0 +1,24 @@
+.chip {
+    border: solid 1px currentColor;
+    border-radius: 4px;
+    background-color: #f0f9eb;
+    padding: get-ratio(2px) get-ratio(10px);
+    font-size: get-ratio(12px);
+    line-height: get-ratio(18px);
+    box-sizing: border-box;
+
+    &.deactive,
+    &--inherited {
+        color: #909399 !important;
+        border-color: #dedfe0 !important;
+        background-color: #f4f4f5 !important;
+    }
+}
+
+.chip--round {
+    display: inline-block;
+    text-indent: -100000px;
+    width: get-ratio(22px);
+    height: get-ratio(22px);
+    border-radius: 100%;
+}

package/components/_collapse.scss

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

@@ -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;
+            }
+        }
+    }
+}