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

package/components/_typography.scss

@@ -0,0 +1,162 @@
+@import "@fishawack/lab-ui/_typography.scss";
+/* Primary font
+-------------------------------------------------- */
+@font-face {
+    font-family: $primaryFont;
+    font-weight: 400;
+    font-style: normal;
+
+    src:
+        resolve($primaryFontRegular + ".woff2") format("woff2"),
+        resolve($primaryFontRegular + ".woff") format("woff");
+}
+
+@font-face {
+    font-family: $primaryFont;
+    font-weight: 100;
+    font-style: normal;
+
+    src:
+        resolve($primaryFontThin + ".woff2") format("woff2"),
+        resolve($primaryFontThin + ".woff") format("woff");
+}
+
+@font-face {
+    font-family: $primaryFont;
+    font-weight: 200;
+    font-style: normal;
+
+    src:
+        resolve($primaryFontExtraLight + ".woff2") format("woff2"),
+        resolve($primaryFontExtraLight + ".woff") format("woff");
+}
+
+@font-face {
+    font-family: $primaryFont;
+    font-weight: 300;
+    font-style: normal;
+
+    src:
+        resolve($primaryFontLight + ".woff2") format("woff2"),
+        resolve($primaryFontLight + ".woff") format("woff");
+}
+
+@font-face {
+    font-family: $primaryFont;
+    font-weight: 500;
+    font-style: normal;
+
+    src:
+        resolve($primaryFontMedium + ".woff2") format("woff2"),
+        resolve($primaryFontMedium + ".woff") format("woff");
+}
+
+@font-face {
+    font-family: $primaryFont;
+    font-weight: 600;
+    font-style: normal;
+
+    src:
+        resolve($primaryFontSemiBold + ".woff2") format("woff2"),
+        resolve($primaryFontSemiBold + ".woff") format("woff");
+}
+
+@font-face {
+    font-family: $primaryFont;
+    font-weight: 700;
+    font-style: normal;
+
+    src:
+        resolve($primaryFontBold + ".woff2") format("woff2"),
+        resolve($primaryFontBold + ".woff2") format("woff2");
+}
+
+@font-face {
+    font-family: $secondaryFont;
+    font-weight: 500;
+    font-style: normal;
+
+    src: resolve($secondaryFontMedium + ".ttf") format("truetype");
+}
+
+h1,
+.h1 {
+    font-size: get-ratio(48px);
+    line-height: get-ratio(56px);
+    font-family: $primaryFont;
+}
+
+h2,
+.h2 {
+    font-size: get-ratio(36px);
+    line-height: get-ratio(48px);
+    font-family: $secondaryFont;
+}
+
+h3,
+.h3 {
+    font-size: get-ratio(32px);
+    line-height: get-ratio(42px);
+    font-family: $primaryFont;
+}
+
+h4,
+.h4 {
+    font-size: get-ratio(24px);
+    line-height: get-ratio(32px);
+    font-family: $primaryFont;
+}
+
+h5,
+.h5 {
+    font-size: get-ratio(20px);
+    line-height: get-ratio(24px);
+    font-weight: 700;
+    font-family: $primaryFont;
+}
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3,
+h4,
+.h4,
+h5,
+.h5 {
+    font-weight: 500;
+}
+
+// may be project specific
+
+.font-secondary {
+    font-family: $secondaryFont;
+}
+
+.font-primary {
+    font-family: $primaryFont;
+}
+
+.text-10 {
+    font-size: get-ratio(10px);
+    line-height: get-ratio(16px);
+}
+.text-12 {
+    font-size: get-ratio(12px);
+    line-height: get-ratio(18px);
+}
+.text-14 {
+    font-size: get-ratio(14px);
+    line-height: get-ratio(20px);
+}
+.font-16 {
+    font-size: get-ratio(16px);
+    line-height: get-ratio(24px);
+}
+
+.text-60 {
+    font-size: get-ratio(60px);
+    line-height: get-ratio(68px);
+    font-weight: 500;
+    font-family: $primaryFont;
+}

package/components/_upload.scss

@@ -0,0 +1,15 @@
+@import "element-plus/theme-chalk/el-upload";
+
+.vel-upload {
+    .el-upload__tip {
+        color: $color11;
+    }
+    &.form__group--error {
+        .el-upload__tip {
+            color: $colorAlert;
+        }
+    }
+    &__error {
+        color: $colorAlert;
+    }
+}

package/components/_wysiwyg.scss

@@ -0,0 +1,7 @@
+@import "quill/dist/quill.snow";
+@import "quill/dist/quill.core";
+
+.ql-container,
+.ql-toolbar {
+    background-color: $color0;
+}

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

@@ -1,6 +1,6 @@
 {
     "name": "@fishawack/lab-velocity",
-    "version": "2.0.0-beta.4",
+    "version": "2.0.0-beta.6",
     "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"
     ],

package/vendor.scss

@@ -15,7 +15,6 @@
 @import "@fishawack/lab-ui/_typography.scss";
 @import "@fishawack/lab-ui/_grid.scss";
 @import "@fishawack/lab-ui/_button.scss";
-
 @import "@fishawack/lab-ui/_utilities.scss";
 
 // Element-plus base style