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

package/components/_wysiwyg2.scss

@@ -0,0 +1,142 @@
+@import "element-plus/theme-chalk/el-dropdown";
+@import "element-plus/theme-chalk/el-dropdown-item";
+@import "element-plus/theme-chalk/el-dialog";
+@import "./button.scss";
+
+.vel-wysiwyg__controls {
+    background-color: $color0;
+    display: flex;
+    flex-grow: 1;
+    border: solid $color5 2px;
+    border-bottom: none;
+    // margin-bottom: .5 * $spacing;
+    font-size: get-ratio(14px);
+    padding: 0 0.5 * $spacing;
+    > * {
+        padding: 0.5 * $spacing;
+        padding-right: $spacing;
+        --el-font-size-base: get-ratio(14px);
+        &:not(:last-child) {
+            border-right: solid 1px $color5;
+        }
+    }
+
+    button {
+        // border: solid 1px $color1;
+        background-color: transparent;
+        cursor: pointer;
+        min-width: 28px;
+        padding: 3px 5px;
+        line-height: 1;
+        border: none;
+        &.is-active,
+        &:hover {
+            background-color: $color5;
+        }
+        svg {
+            height: 90%;
+        }
+    }
+    .el-dropdown {
+        line-height: 1.15;
+    }
+
+    .ql-stroke {
+        fill: none;
+        stroke: #444;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        stroke-width: 2;
+    }
+
+    .ql-stroke-miter {
+        fill: none;
+        stroke: #444;
+        stroke-miterlimit: 10;
+        stroke-width: 2;
+    }
+
+    .ql-fill,
+    .ql-stroke.ql-fill {
+        fill: #444;
+    }
+
+    .ql-empty {
+        fill: none;
+    }
+
+    .ql-even {
+        fill-rule: evenodd;
+    }
+
+    .ql-thin,
+    .ql-stroke.ql-thin {
+        stroke-width: 1;
+    }
+
+    .ql-transparent {
+        opacity: 0.4;
+    }
+
+    ~ div {
+        // margin-top: $spacing;
+        border: solid $color5 2px;
+        background-color: $color0;
+        > div {
+            padding: 2 * $spacing;
+        }
+    }
+}
+.vel-wysiwyg__button {
+    // border: solid 1px $color1;
+    background-color: transparent;
+    // cursor: pointer;
+
+    &.is-active,
+    &:hover {
+        background-color: $color5;
+    }
+}
+
+.vel-wysiwyg {
+    // border: solid $color1 1px;
+    // padding: $spacing * 1.5;
+
+    table,
+    td,
+    th {
+        border: solid 0.5px $color1;
+    }
+    th {
+        background-color: $color5;
+    }
+    hr {
+        height: 1px;
+        background-color: $color1;
+    }
+    a {
+        text-decoration: underline;
+    }
+}
+
+.lab-table,
+.lab-table-cell,
+.lab-table-header {
+    border: solid 0.5px $color1;
+}
+.lab-table-header {
+    background-color: $color5;
+}
+
+.lab-table {
+    a {
+        text-decoration: underline;
+    }
+}
+.lab-table-cell {
+    &:active,
+    &:focus-within,
+    &.selectedCell {
+        background-color: transparentize($color: $color5, $amount: 0.8);
+    }
+}

package/modules/_AuthModule.scss

@@ -0,0 +1,212 @@
+@import "./AuthVariables";
+@import "element-plus/theme-chalk/base";
+@import "../components/input.scss";
+@import "../components/button";
+@import "../components/basic";
+@import "./modal";
+
+// AuthModule
+.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;
+                }
+            }
+        }
+        // &__icon-container{
+        //     position: absolute;
+        //     top: 50%;
+        //     right: $spacing * 1.5;
+        //     transform: translateY(-50%);
+        //     display: flex;
+        // }
+        // &__action-icon {
+        //     margin-left: $spacing * 0.5;
+        //     cursor: pointer;
+        // }
+    }
+    .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;
+        padding-bottom: $am-spacing * 2.5;
+        .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%;
+}
+
+.AM-mb {
+    margin-bottom: $am-spacing !important;
+}
+.AM-mt {
+    margin-top: $am-spacing !important;
+}
+.AM-pb {
+    padding-bottom: $am-spacing !important;
+}
+.AM-pt {
+    padding-top: $am-spacing !important;
+}
+@for $i from 1 through 5 {
+    .AM-mb-#{$i - 1} {
+        margin-bottom: ($i - 1) * $am-spacing !important;
+    }
+
+    .AM-mb-#{$i - 1}\.5 {
+        margin-bottom: ($i - 0.5) * $am-spacing !important;
+    }
+
+    .AM-mt-#{$i - 1} {
+        margin-top: ($i - 1) * $am-spacing !important;
+    }
+
+    .AM-mt-#{$i - 1}\.5 {
+        margin-top: ($i - 0.5) * $am-spacing !important;
+    }
+
+    .AM-pt-#{$i - 1} {
+        padding-top: ($i - 1) * $am-spacing !important;
+    }
+
+    .AM-pt-#{$i - 1}\.5 {
+        padding-top: ($i - 0.5) * $am-spacing !important;
+    }
+
+    .AM-pb-#{$i - 1} {
+        padding-bottom: ($i - 1) * $am-spacing !important;
+    }
+
+    .AM-pb-#{$i - 1}\.5 {
+        padding-bottom: ($i - 0.5) * $am-spacing !important;
+    }
+}
+
+.AM-color-highlight {
+    color: $am-highlight;
+}

package/modules/_AuthVariables.scss

@@ -0,0 +1,7 @@
+$am-spacing: 8px;
+$am-highlight: #3c976e;
+
+$color8: #f2f2f2; //Used
+$color10: #dcdbdb;
+$color12: #5c5c5c;
+$colorAlert: #d53a3a;

package/modules/_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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fishawack/lab-velocity",
-    "version": "2.0.0-beta.3",
+    "version": "2.0.0-beta.5",
     "description": "Avalere Health branded style system",
     "scripts": {
         "setup": "npm ci || npm i && npm run content",
@@ -62,6 +62,8 @@
     },
     "files": [
         "*.scss",
+        "modules",
+        "components",
         "_Build/vue/components",
         "_Build/vue/modules/AuthModule"
     ],