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

package/components/_auth.scss

@@ -0,0 +1,163 @@
+.AuthModule {
+    position: fixed;
+    background-color: black;
+    height: 100vh;
+    width: 100%;
+    background: url("../media/content/images/hero-auth-background-desktop.jpg")
+        center top no-repeat;
+    background-size: cover;
+    z-index: 10;
+
+    .logo {
+        width: 13.3rem;
+        z-index: 99;
+    }
+
+    @include breakpoint(max-width $tabletMax) {
+        background: url("../media/content/images/hero-auth-background-tablet.jpg")
+            center top no-repeat;
+    }
+
+    @include breakpoint(max-width $mobileMax) {
+        background: url("../media/content/images/hero-auth-background-mobile.jpg")
+            center top no-repeat;
+    }
+}
+
+.AuthModule__form {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: white;
+    min-width: 320px;
+    width: 460px;
+    padding: 48px 40px 40px;
+    z-index: 1;
+
+    @include breakpoint(max-width $mobileMax) {
+        top: 84px;
+        transform: translate(-50%, 0);
+        padding: 24px;
+        width: calc(100% - 80px);
+
+        h2 .h2 {
+            font-size: 24px;
+            line-height: 32px;
+        }
+    }
+
+    h2,
+    .h2 {
+        line-height: 50px;
+        font-size: 48px;
+    }
+
+    .h2--small {
+        font-size: 36px;
+        line-height: 44px;
+    }
+
+    p {
+        font-size: 14px;
+        line-height: 20px;
+        margin-bottom: 24px;
+        letter-spacing: -0.1px;
+
+        &.disclaimer {
+            font-size: 12px;
+            color: rgba($color1, 0.5);
+            margin: 0;
+        }
+
+        a {
+            color: $color1;
+        }
+
+        &.form__error {
+            font-size: 12px;
+            line-height: 18px;
+        }
+    }
+
+    .vel-button {
+        max-width: 200px;
+        width: 200px;
+        padding: 9px 23.5px;
+        font-size: 14px;
+
+        @include breakpoint(max-width $mobileMax) {
+            max-width: unset;
+            width: 100%;
+        }
+    }
+
+    .form {
+        &.error {
+            .form__input {
+                .el-input__wrapper {
+                    border: 0.4px solid red;
+                }
+            }
+
+            .form__input.error {
+                border: none;
+
+                .el-input__wrapper {
+                    border: 0.4px solid red;
+                }
+            }
+        }
+    }
+
+    .vel-basic__label {
+        font-size: 12px;
+        color: rgba($color1, 0.5);
+    }
+
+    .vel-basic__textbox {
+        --el-border-color: #cfd8dd;
+        --el-input-text-color: #666666;
+        --el-input-focus-border-color: #cfd8dd;
+        --el-input-hover-border-color: #cfd8dd;
+        font-size: 14px;
+
+        .el-input__inner {
+            --el-input-inner-height: 38px;
+        }
+    }
+
+    .el-button--primary {
+        --el-button-text-color: #ffffff;
+    }
+
+    input,
+    input:focus {
+        @extend .el-input__inner;
+    }
+}
+
+.AuthModule__logo__container {
+    position: absolute;
+    top: 48px;
+    left: 0%;
+}
+
+.AuthModule__logo {
+    position: relative;
+}
+
+.AuthModule__Content {
+    position: absolute;
+    z-index: 1;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    max-width: 1024px;
+    width: 100%;
+    height: 100%;
+}
+
+.color-highlight {
+    color: green;
+}

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