From 88643247f6a32ac3902f942fa55c982c76726ffb Mon Sep 17 00:00:00 2001 From: Frank Date: Thu, 4 Nov 2021 14:11:11 -0400 Subject: [PATCH 1/6] Styles structure change --- src/assets/scss/_custom-variables.scss | 159 -------------------- src/assets/scss/_global-styles.scss | 22 --- src/assets/scss/components/_buttons.scss | 76 ---------- src/assets/scss/components/_radio-card.scss | 28 ---- src/assets/scss/components/_typogrophy.scss | 46 ------ src/assets/scss/custom.scss | 25 --- src/main.js | 3 - src/styles/commonStyles.scss | 145 ++++++++++++++++++ src/styles/uxStyles.scss | 159 ++++++++++++++++++++ src/uxComponents/radioCard/radioCard.vue | 31 ++++ vue.config.js | 16 ++ vue.release.config.js | 14 ++ 12 files changed, 365 insertions(+), 359 deletions(-) delete mode 100644 src/assets/scss/_custom-variables.scss delete mode 100644 src/assets/scss/_global-styles.scss delete mode 100644 src/assets/scss/components/_buttons.scss delete mode 100644 src/assets/scss/components/_radio-card.scss delete mode 100644 src/assets/scss/components/_typogrophy.scss delete mode 100644 src/assets/scss/custom.scss diff --git a/src/assets/scss/_custom-variables.scss b/src/assets/scss/_custom-variables.scss deleted file mode 100644 index 2b2211595..000000000 --- a/src/assets/scss/_custom-variables.scss +++ /dev/null @@ -1,159 +0,0 @@ -//Colors - -// White/black -$white: #FFFFFF; -$black: #000; - -// Blues -$blue-100: #E4F1F7;// Used in theme -$blue-200: #C1DFEE; -$blue-300: #9FCEE6; -$blue-400: #69ADCF;// Used in theme -$blue-500: #3B8FB8; -$blue: #167CAC;// Default Blue -$blue-700: #06577C; -$blue-800: #003D58; -$blue-900: #002433;// Used in theme - -// Reds -$red-100: #FFE6E4; -$red-200: #FDC0BB; -$red-300: #FB9A93; -$red-400: #EB5E54; -$red: #DA291C;// Default Red -$red-600: #B0160B; -$red-700: #870900; -$red-800: #5D0600; -$red-900: #330300; - -// Greens -$green-100: #E3F2EA; -$green-200: #BCEDD4; -$green-300: #94D7B6; -$green-400: #EB594F;// Used in theme -$green-500: #2CA168; -$green: #C40E01;// Default Green -$green-700: #006A36; -$green-800: #004F28; -$green-900: #00331A; - -// Yellows -$yellow-100: #FFF5EB; -$yellow-200: #FFE7C7; -$yellow-300: #FFD8A1; -$yellow-400: #FFB25C; -$yellow: #F88F1C;// Default Yellow -$yellow-600: #C76902; -$yellow-700: #964E00; -$yellow-800: #643400; -$yellow-900: #331A00; - -// Grays -$gray-100: #F5F5F5;// Used in theme -$gray-200: #E3E4E4;// Used in theme -$gray-300: #D2D4D4; -$gray: #B0B3B3;// Default Gray -$gray-500: #8E9292;// Used in theme -$gray-600: #4D5151;// Used in theme -$gray-700: #303333;// Used in theme -$gray-800: #222424;// Used in theme -$gray-900: #181A1A;// Used in theme - -// Miscellaneous Colors -$indigo: #6610f2; -$purple: #6f42c1; -$pink: #d63384; -$orange: #fd7e14; -$teal: #20c997; -$cyan: #0dcaf0; - -// scss-docs-start colors-map -$colors: ( -"blue": $blue, -"indigo": $indigo, -"purple": $purple, -"pink": $pink, -"red": $red, -"orange": $orange, -"yellow": $yellow, -"green": $green, -"teal": $teal, -"cyan": $cyan, -"white": $white, -"gray": $gray, -"gray-dark": $gray-500 -); - -// scss-docs-start theme-color-variables -$primary: $blue; -$secondary: $red; -$success: $green; -$info: $cyan; -$warning: $yellow; -$danger: $red; -$light: $gray-100; -$dark: $gray-500; - -// scss-docs-start theme-colors-map -$theme-colors: ( -"primary": $primary, -"secondary": $secondary, -"success": $success, -"info": $info, -"warning": $warning, -"danger": $danger, -"light": $light, -"dark": $dark -); - -//Fonts -$font-family-sans-serif: Roboto, Arial, Helvetica, sans-serif; -$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; -// stylelint-enable value-keyword-case -$font-family-base: $font-family-sans-serif; -$font-family-code: $font-family-monospace; -$font-size-base: 1rem; // Assumes the browser default, typically `16px` - -//Font weight -$font-weight-lighter: lighter !default; -$font-weight-light: 300 !default; -$font-weight-normal: 400 !default; -$font-weight-bold: 500 !default; -$font-weight-bolder: bolder !default; - -//Headings -$h1-font-size: $font-size-base * 3; -$h2-font-size: $font-size-base * 2.625; -$h3-font-size: $font-size-base * 2; -$h4-font-size: $font-size-base * 1.625; -$h5-font-size: $font-size-base * 1.25; -$h6-font-size: $font-size-base * .875; - -//Border Radius -$border-radius: .25rem; -$border-radius-sm: .2rem; -$border-radius-lg: .5rem;//Used for buttons. Can be used for other things, of course. -$border-radius-pill: 50rem; - -//Spacing -// Seven spacers available instead of the usual 5 -$spacer: 1rem; -$spacers: ( - 0: 0, - 1: $spacer * .25, - 2: $spacer * .5, - 3: $spacer, - 4: $spacer * 1.5, - 5: $spacer * 2, - 6: $spacer * 2.5, - 7: $spacer * 3, -); - -//Grid breakpoints -$grid-breakpoints: ( - xs: 0, - sm: 576px, - md: 838px, - lg: 1074px, - xl: 1416px -); diff --git a/src/assets/scss/_global-styles.scss b/src/assets/scss/_global-styles.scss deleted file mode 100644 index 9512ddee3..000000000 --- a/src/assets/scss/_global-styles.scss +++ /dev/null @@ -1,22 +0,0 @@ -body { - font-size: 16px; - background-color: #fff; - padding: .5rem; - .container-fluid { - max-width: 576px;//Remove once desktop app is complete - &.container-shadow { - box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15);//Use instead of Bootstrap's helper - } - } - a { - color: $blue-600; - text-decoration: none; - border-bottom: 1px solid $blue-600; - &:hover { - color: $blue-400; - } - } - .pointer { - cursor: pointer; - } -} diff --git a/src/assets/scss/components/_buttons.scss b/src/assets/scss/components/_buttons.scss deleted file mode 100644 index 21087a117..000000000 --- a/src/assets/scss/components/_buttons.scss +++ /dev/null @@ -1,76 +0,0 @@ -//Custom button styles -.btn { - &.btn-primary { - position: relative; - background: $blue-700; - background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%); - border: none; - border-radius: $border-radius-lg; - height: 48px; - color: $white; - transition: all 150ms linear; - &:hover { - background: linear-gradient(270deg, rgba(6,87,124,1) 0%, rgba(6,87,124,1) 100%); - } - &:focus, // Mouse, touch, stylus focus - &:focus-visible { // Keyboard focus for accessibility - outline: none; - box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700; - } - &.button-loader { - padding: 0 40px 0 12px; - &:after { - content: url(../../assets/img/icons/button-spinner-white.svg); - position: absolute; - right: 14px; - width: 16px; - height: 16px; - margin-left: 12px; - animation: rotation 1s infinite linear; - @keyframes rotation { - 100% { - transform:rotate(360deg); - } - } - } - } - } - &:disabled { - background: $gray-100 !important; - background: linear-gradient(270deg, $gray-100 0%, $gray-100 100%) !important; - color: $gray-400 !important; - height: 48px; - border: none; - border-radius: $border-radius-lg; - } - &.list-button { - position: relative; - background: $white; - height: 48px; - transition: all 150ms linear; - border-radius: $border-radius-lg; - border: 1px solid rgba($gray-300,.3); - width: 100%; - &:focus, // Mouse, touch, stylus focus - &:focus-visible { // Keyboard focus for accessibility - box-shadow: none; - } - &.button-loader { - padding: 0 40px 0 12px; - &:after { - content: url(../../assets/img/icons/button-spinner-green.svg); - position: absolute; - right: 14px; - width: 16px; - height: 16px; - margin-left: 12px; - animation: rotation 1s infinite linear; - @keyframes rotation { - 100% { - transform:rotate(360deg); - } - } - } - } - } -} diff --git a/src/assets/scss/components/_radio-card.scss b/src/assets/scss/components/_radio-card.scss deleted file mode 100644 index 6b3b1797f..000000000 --- a/src/assets/scss/components/_radio-card.scss +++ /dev/null @@ -1,28 +0,0 @@ -.radio-card { - input[type=radio] { - &:focus + label { - background-color: $white; - box-shadow: 0px 0px 0px 4px $blue-600; - } - &:focus-visible + label { - background-color: $white; - box-shadow: 0px 0px 0px 4px $blue-600; - } - &:checked + label { - background-color: $blue-100; - border: 1px solid $blue-600; - } - &.invalid + label { - background-color: $white; - border: 1px solid $red-500; - } - } - label { - background: $white; - border: 1px solid $gray-400; - &:hover { - cursor: pointer; - box-shadow: 0px 0px 0px 6px $blue-100; - } - } -} diff --git a/src/assets/scss/components/_typogrophy.scss b/src/assets/scss/components/_typogrophy.scss deleted file mode 100644 index c40fb9e22..000000000 --- a/src/assets/scss/components/_typogrophy.scss +++ /dev/null @@ -1,46 +0,0 @@ -//Typogrophy -p { - font-size: 16px; - line-height: 1.625; - font-weight: 400; -} - -//Headings -//font-size defined in _custom-variables.scss -//add helper fw-bold to any element to get bold style (500) -h1,.h1 { - line-height: 1.325; - font-weight: 300; -} -h2,.h2 { - line-height: 1.325; - font-weight: 300; -} -h3,.h3 { - line-height: 1.375; - font-weight: 300; -} -h4,.h4 { - line-height: 1.6; - font-weight: 300; -} -h5,.h5 { - line-height: 1.325; - font-weight: 400; -} -h6,.h6 { - line-height: 1.7; - letter-spacing: .75px; - text-transform: uppercase; -} - -label { - line-height: 1.625; - font-weight: 400; -} - -caption { - font-size: .75rem; - line-height: 1.7; - font-weight: 400; -} diff --git a/src/assets/scss/custom.scss b/src/assets/scss/custom.scss deleted file mode 100644 index 356cc0538..000000000 --- a/src/assets/scss/custom.scss +++ /dev/null @@ -1,25 +0,0 @@ -//Import files. Order matters! - -//Bootstrap Functions -@import "./node_modules/bootstrap/scss/functions"; - -//Variable Overrides -@import "_custom-variables"; - -//Bootstrap Default Variables and Mixins -@import "./node_modules/bootstrap/scss/variables"; -@import "./node_modules/bootstrap/scss/mixins"; - -//Bootstrap Defaults -@import "./node_modules/bootstrap/scss/bootstrap"; - -//Custom Global CSS -@import "_global-styles"; - -//Custom Components CSS -@import "./components/_typogrophy"; -@import "./components/_navbar"; -@import "./components/_SelectCar"; -@import "./components/_buttons"; -@import "./components/_vehicle-image"; -@import "./components/_radio-card"; diff --git a/src/main.js b/src/main.js index 2cbd42c11..784b51717 100644 --- a/src/main.js +++ b/src/main.js @@ -6,9 +6,6 @@ import baseMixin from "@/mixins/baseMixin.js"; //Bootstrap JavaScript import "../node_modules/bootstrap/dist/js/bootstrap.js"; -//Get Bootstrap and Custom Styles -import "./assets/scss/custom.scss"; - // Vue App Setup const vueApp = createApp(App); diff --git a/src/styles/commonStyles.scss b/src/styles/commonStyles.scss index e69de29bb..3a99fe61c 100644 --- a/src/styles/commonStyles.scss +++ b/src/styles/commonStyles.scss @@ -0,0 +1,145 @@ +body { + font-size: 16px; + background-color: #fff; + padding: .5rem; + .container-fluid { + max-width: 576px;//Remove once desktop app is complete + &.container-shadow { + box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15);//Use instead of Bootstrap's helper + } + } + a { + color: $blue; + text-decoration: none; + border-bottom: 1px solid $blue; + &:hover { + color: $blue-400; + } + } + .pointer { + cursor: pointer; + } + } + +//Typogrophy +p { + font-size: 16px; + line-height: 1.625; + font-weight: 400; +} + +//Headings +//add helper fw-bold to any element to get bold style (500) +h1,.h1 { + line-height: 1.325; + font-weight: 300; +} +h2,.h2 { + line-height: 1.325; + font-weight: 300; +} +h3,.h3 { + line-height: 1.375; + font-weight: 300; +} +h4,.h4 { + line-height: 1.6; + font-weight: 300; +} +h5,.h5 { + line-height: 1.325; + font-weight: 400; +} +h6,.h6 { + line-height: 1.7; + letter-spacing: .75px; + text-transform: uppercase; +} + +label { + line-height: 1.625; + font-weight: 400; +} + +caption { + font-size: .75rem; + line-height: 1.7; + font-weight: 400; +} + +//Custom button styles +.btn { + &.btn-primary { + position: relative; + background: $blue-700; + background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%); + border: none; + border-radius: $border-radius-lg; + height: 48px; + color: $white; + transition: all 150ms linear; + &:hover { + background: linear-gradient(270deg, rgba(6,87,124,1) 0%, rgba(6,87,124,1) 100%); + } + &:focus, // Mouse, touch, stylus focus + &:focus-visible { // Keyboard focus for accessibility + outline: none; + box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700; + } + &.button-loader { + padding: 0 40px 0 12px; + &:after { + content: url(../../assets/img/icons/button-spinner-white.svg); + position: absolute; + right: 14px; + width: 16px; + height: 16px; + margin-left: 12px; + animation: rotation 1s infinite linear; + @keyframes rotation { + 100% { + transform:rotate(360deg); + } + } + } + } + } + &:disabled { + background: $gray-100 !important; + background: linear-gradient(270deg, $gray-100 0%, $gray-100 100%) !important; + color: $gray !important; + height: 48px; + border: none; + border-radius: $border-radius-lg; + } + &.list-button { + position: relative; + background: $white; + height: 48px; + transition: all 150ms linear; + border-radius: $border-radius-lg; + border: 1px solid rgba($gray-300,.3); + width: 100%; + &:focus, // Mouse, touch, stylus focus + &:focus-visible { // Keyboard focus for accessibility + box-shadow: none; + } + &.button-loader { + padding: 0 40px 0 12px; + &:after { + content: url(../../assets/img/icons/button-spinner-green.svg); + position: absolute; + right: 14px; + width: 16px; + height: 16px; + margin-left: 12px; + animation: rotation 1s infinite linear; + @keyframes rotation { + 100% { + transform:rotate(360deg); + } + } + } + } + } +} diff --git a/src/styles/uxStyles.scss b/src/styles/uxStyles.scss index e69de29bb..2b2211595 100644 --- a/src/styles/uxStyles.scss +++ b/src/styles/uxStyles.scss @@ -0,0 +1,159 @@ +//Colors + +// White/black +$white: #FFFFFF; +$black: #000; + +// Blues +$blue-100: #E4F1F7;// Used in theme +$blue-200: #C1DFEE; +$blue-300: #9FCEE6; +$blue-400: #69ADCF;// Used in theme +$blue-500: #3B8FB8; +$blue: #167CAC;// Default Blue +$blue-700: #06577C; +$blue-800: #003D58; +$blue-900: #002433;// Used in theme + +// Reds +$red-100: #FFE6E4; +$red-200: #FDC0BB; +$red-300: #FB9A93; +$red-400: #EB5E54; +$red: #DA291C;// Default Red +$red-600: #B0160B; +$red-700: #870900; +$red-800: #5D0600; +$red-900: #330300; + +// Greens +$green-100: #E3F2EA; +$green-200: #BCEDD4; +$green-300: #94D7B6; +$green-400: #EB594F;// Used in theme +$green-500: #2CA168; +$green: #C40E01;// Default Green +$green-700: #006A36; +$green-800: #004F28; +$green-900: #00331A; + +// Yellows +$yellow-100: #FFF5EB; +$yellow-200: #FFE7C7; +$yellow-300: #FFD8A1; +$yellow-400: #FFB25C; +$yellow: #F88F1C;// Default Yellow +$yellow-600: #C76902; +$yellow-700: #964E00; +$yellow-800: #643400; +$yellow-900: #331A00; + +// Grays +$gray-100: #F5F5F5;// Used in theme +$gray-200: #E3E4E4;// Used in theme +$gray-300: #D2D4D4; +$gray: #B0B3B3;// Default Gray +$gray-500: #8E9292;// Used in theme +$gray-600: #4D5151;// Used in theme +$gray-700: #303333;// Used in theme +$gray-800: #222424;// Used in theme +$gray-900: #181A1A;// Used in theme + +// Miscellaneous Colors +$indigo: #6610f2; +$purple: #6f42c1; +$pink: #d63384; +$orange: #fd7e14; +$teal: #20c997; +$cyan: #0dcaf0; + +// scss-docs-start colors-map +$colors: ( +"blue": $blue, +"indigo": $indigo, +"purple": $purple, +"pink": $pink, +"red": $red, +"orange": $orange, +"yellow": $yellow, +"green": $green, +"teal": $teal, +"cyan": $cyan, +"white": $white, +"gray": $gray, +"gray-dark": $gray-500 +); + +// scss-docs-start theme-color-variables +$primary: $blue; +$secondary: $red; +$success: $green; +$info: $cyan; +$warning: $yellow; +$danger: $red; +$light: $gray-100; +$dark: $gray-500; + +// scss-docs-start theme-colors-map +$theme-colors: ( +"primary": $primary, +"secondary": $secondary, +"success": $success, +"info": $info, +"warning": $warning, +"danger": $danger, +"light": $light, +"dark": $dark +); + +//Fonts +$font-family-sans-serif: Roboto, Arial, Helvetica, sans-serif; +$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; +// stylelint-enable value-keyword-case +$font-family-base: $font-family-sans-serif; +$font-family-code: $font-family-monospace; +$font-size-base: 1rem; // Assumes the browser default, typically `16px` + +//Font weight +$font-weight-lighter: lighter !default; +$font-weight-light: 300 !default; +$font-weight-normal: 400 !default; +$font-weight-bold: 500 !default; +$font-weight-bolder: bolder !default; + +//Headings +$h1-font-size: $font-size-base * 3; +$h2-font-size: $font-size-base * 2.625; +$h3-font-size: $font-size-base * 2; +$h4-font-size: $font-size-base * 1.625; +$h5-font-size: $font-size-base * 1.25; +$h6-font-size: $font-size-base * .875; + +//Border Radius +$border-radius: .25rem; +$border-radius-sm: .2rem; +$border-radius-lg: .5rem;//Used for buttons. Can be used for other things, of course. +$border-radius-pill: 50rem; + +//Spacing +// Seven spacers available instead of the usual 5 +$spacer: 1rem; +$spacers: ( + 0: 0, + 1: $spacer * .25, + 2: $spacer * .5, + 3: $spacer, + 4: $spacer * 1.5, + 5: $spacer * 2, + 6: $spacer * 2.5, + 7: $spacer * 3, +); + +//Grid breakpoints +$grid-breakpoints: ( + xs: 0, + sm: 576px, + md: 838px, + lg: 1074px, + xl: 1416px +); diff --git a/src/uxComponents/radioCard/radioCard.vue b/src/uxComponents/radioCard/radioCard.vue index 249646f82..fbf55aa77 100644 --- a/src/uxComponents/radioCard/radioCard.vue +++ b/src/uxComponents/radioCard/radioCard.vue @@ -45,3 +45,34 @@ export default { }, }; + \ No newline at end of file diff --git a/vue.config.js b/vue.config.js index f26ca4dab..f5fbdca25 100644 --- a/vue.config.js +++ b/vue.config.js @@ -1,5 +1,7 @@ process.env.VUE_APP_CONSUMER_API_GATEWAY = "https://consumerapidev.safelite.com"; +const path = require('path') + module.exports = { outputDir: "dist/fmg", publicPath: "/fmg", @@ -13,4 +15,18 @@ module.exports = { }, }, }, + css: { + loaderOptions: { + sass: { // Load Order Matters + prependData: ` + @import "./node_modules/bootstrap/scss/functions"; + @import "./node_modules/bootstrap/scss/variables"; + @import "./node_modules/bootstrap/scss/mixins"; + @import "./node_modules/bootstrap/scss/bootstrap"; + @import "@/styles/uxStyles.scss"; + @import "@/styles/commonStyles.scss"; + ` + } + } + } }; diff --git a/vue.release.config.js b/vue.release.config.js index d0be4bb59..3aedfb2bb 100644 --- a/vue.release.config.js +++ b/vue.release.config.js @@ -3,4 +3,18 @@ process.env.VUE_APP_CONSUMER_API_GATEWAY = "__VUE_APP_CONSUMER_API_GATEWAY__"; module.exports = { outputDir: "dist/fmg", publicPath: "/fmg", + css: { + loaderOptions: { + sass: { // Load Order Matters + prependData: ` + @import "./node_modules/bootstrap/scss/functions"; + @import "./node_modules/bootstrap/scss/variables"; + @import "./node_modules/bootstrap/scss/mixins"; + @import "./node_modules/bootstrap/scss/bootstrap"; + @import "@/styles/uxStyles.scss"; + @import "@/styles/commonStyles.scss"; + ` + } + } + } }; From c04e00b6a97a06d830737483800c74b42e2557e5 Mon Sep 17 00:00:00 2001 From: Frank Date: Thu, 4 Nov 2021 14:12:54 -0400 Subject: [PATCH 2/6] don't need path anymore --- vue.config.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/vue.config.js b/vue.config.js index f5fbdca25..267ae4733 100644 --- a/vue.config.js +++ b/vue.config.js @@ -1,7 +1,5 @@ process.env.VUE_APP_CONSUMER_API_GATEWAY = "https://consumerapidev.safelite.com"; -const path = require('path') - module.exports = { outputDir: "dist/fmg", publicPath: "/fmg", From d0316b894b50a9f523fbb3b028d165e34443a1d1 Mon Sep 17 00:00:00 2001 From: Bryan Date: Thu, 4 Nov 2021 14:40:07 -0400 Subject: [PATCH 3/6] Update load order for sass files. --- package-lock.json | 11 ++--------- vue.config.js | 4 ++-- vue.release.config.js | 4 ++-- 3 files changed, 6 insertions(+), 13 deletions(-) diff --git a/package-lock.json b/package-lock.json index e14dd267e..cda38bdec 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2726,7 +2726,6 @@ "thread-loader": "^2.1.3", "url-loader": "^2.2.0", "vue-loader": "^15.9.2", - "vue-loader-v16": "npm:vue-loader@^16.1.0", "vue-style-loader": "^4.1.2", "webpack": "^4.0.0", "webpack-bundle-analyzer": "^3.8.0", @@ -3032,7 +3031,6 @@ "merge-source-map": "^1.1.0", "postcss": "^7.0.36", "postcss-selector-parser": "^6.0.2", - "prettier": "^1.18.2", "source-map": "~0.6.1", "vue-template-es2015-compiler": "^1.9.0" }, @@ -4997,7 +4995,6 @@ "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", - "fsevents": "~2.3.2", "glob-parent": "~5.1.2", "is-binary-path": "~2.1.0", "is-glob": "~4.0.1", @@ -7307,8 +7304,7 @@ "esprima": "^4.0.1", "estraverse": "^4.2.0", "esutils": "^2.0.2", - "optionator": "^0.8.1", - "source-map": "~0.6.1" + "optionator": "^0.8.1" }, "bin": { "escodegen": "bin/escodegen.js", @@ -10877,7 +10873,6 @@ "@jest/types": "^24.9.0", "anymatch": "^2.0.0", "fb-watchman": "^2.0.0", - "fsevents": "^1.2.7", "graceful-fs": "^4.1.15", "invariant": "^2.2.4", "jest-serializer": "^24.9.0", @@ -17953,8 +17948,7 @@ "dev": true, "dependencies": { "graceful-fs": "^4.1.2", - "neo-async": "^2.5.0", - "watchpack-chokidar2": "^2.0.1" + "neo-async": "^2.5.0" }, "optionalDependencies": { "chokidar": "^3.4.1", @@ -18328,7 +18322,6 @@ "anymatch": "^2.0.0", "async-each": "^1.0.1", "braces": "^2.3.2", - "fsevents": "^1.2.7", "glob-parent": "^3.1.0", "inherits": "^2.0.3", "is-binary-path": "^1.0.0", diff --git a/vue.config.js b/vue.config.js index 267ae4733..6389aa1c8 100644 --- a/vue.config.js +++ b/vue.config.js @@ -15,13 +15,13 @@ module.exports = { }, css: { loaderOptions: { - sass: { // Load Order Matters + sass: { // Load Order Matters!!! prependData: ` @import "./node_modules/bootstrap/scss/functions"; + @import "@/styles/uxStyles.scss"; @import "./node_modules/bootstrap/scss/variables"; @import "./node_modules/bootstrap/scss/mixins"; @import "./node_modules/bootstrap/scss/bootstrap"; - @import "@/styles/uxStyles.scss"; @import "@/styles/commonStyles.scss"; ` } diff --git a/vue.release.config.js b/vue.release.config.js index 3aedfb2bb..d166206d0 100644 --- a/vue.release.config.js +++ b/vue.release.config.js @@ -5,13 +5,13 @@ module.exports = { publicPath: "/fmg", css: { loaderOptions: { - sass: { // Load Order Matters + sass: { // Load Order Matters!!! prependData: ` @import "./node_modules/bootstrap/scss/functions"; + @import "@/styles/uxStyles.scss"; @import "./node_modules/bootstrap/scss/variables"; @import "./node_modules/bootstrap/scss/mixins"; @import "./node_modules/bootstrap/scss/bootstrap"; - @import "@/styles/uxStyles.scss"; @import "@/styles/commonStyles.scss"; ` } From 3ceb550045f7781167d0cb02d02eb13f28d268ad Mon Sep 17 00:00:00 2001 From: Bryan Date: Thu, 4 Nov 2021 15:29:30 -0400 Subject: [PATCH 4/6] Code cleanup after restructure. *Removed scss folder. Moved code to commonStyles.scss. *Update button spinner color. *Moved disabled state to within .btn-primary class. --- ...nner-green.svg => button-spinner-blue.svg} | 2 +- src/assets/scss/components/_SelectCar.scss | 61 -------------- src/assets/scss/components/_navbar.scss | 6 -- .../scss/components/_vehicle-image.scss | 6 -- src/styles/commonStyles.scss | 81 ++++++++++++++++--- 5 files changed, 73 insertions(+), 83 deletions(-) rename src/assets/img/icons/{button-spinner-green.svg => button-spinner-blue.svg} (91%) delete mode 100644 src/assets/scss/components/_SelectCar.scss delete mode 100644 src/assets/scss/components/_navbar.scss delete mode 100644 src/assets/scss/components/_vehicle-image.scss diff --git a/src/assets/img/icons/button-spinner-green.svg b/src/assets/img/icons/button-spinner-blue.svg similarity index 91% rename from src/assets/img/icons/button-spinner-green.svg rename to src/assets/img/icons/button-spinner-blue.svg index 2ee9031dd..57185260c 100644 --- a/src/assets/img/icons/button-spinner-green.svg +++ b/src/assets/img/icons/button-spinner-blue.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/scss/components/_SelectCar.scss b/src/assets/scss/components/_SelectCar.scss deleted file mode 100644 index 541fe8960..000000000 --- a/src/assets/scss/components/_SelectCar.scss +++ /dev/null @@ -1,61 +0,0 @@ -.select-car { - height: 100vh; - - .select-car-form { - background: $white; - height: 100%; - - form { - height: calc(100% - 230px); - overflow-y: scroll; - overflow-x: hidden; - } - - .car_list, .current_car_info-text, .needed_car_info-text { - flex-shrink: 0; - width: 100%; - position: relative; - transition: transform .3s; - } - } - - .current_car_info { - position: relative; - min-height: 2.5rem; - - .current_car_info-text { - position: absolute; - } - } -} - -.slide-enter-from { - opacity: 0; - transform: translateX(30vw); -} -.slide-enter-active, .slide-leave-active { - transition: all .4s; -} -.slide-leave-to { - opacity: 0; - transform: translateX(-30vw); -} - -.slide_reverse-enter-from { - opacity: 0; - transform: translateX(-30vw); -} -.slide_reverse-enter-active, .slide_reverse-leave-active { - transition: all .4s; -} -.slide_reverse-leave-to { - opacity: 0; - transform: translateX(30vw); -} - -.fade-enter-from, .fade-leave-to { - opacity: 0; -} -.fade-enter-active, .fade-leave-active { - transition: all .5s ease; -} \ No newline at end of file diff --git a/src/assets/scss/components/_navbar.scss b/src/assets/scss/components/_navbar.scss deleted file mode 100644 index bbfc86d68..000000000 --- a/src/assets/scss/components/_navbar.scss +++ /dev/null @@ -1,6 +0,0 @@ -.navbar { - .logo { - width: 114px; - height: auto; - } -} diff --git a/src/assets/scss/components/_vehicle-image.scss b/src/assets/scss/components/_vehicle-image.scss deleted file mode 100644 index 85bb7319a..000000000 --- a/src/assets/scss/components/_vehicle-image.scss +++ /dev/null @@ -1,6 +0,0 @@ -.vehicle-image { - padding: 6px; - &.blur { - filter: blur(6px); - } -} diff --git a/src/styles/commonStyles.scss b/src/styles/commonStyles.scss index 3a99fe61c..37dab947c 100644 --- a/src/styles/commonStyles.scss +++ b/src/styles/commonStyles.scss @@ -103,14 +103,14 @@ caption { } } } - } - &:disabled { - background: $gray-100 !important; - background: linear-gradient(270deg, $gray-100 0%, $gray-100 100%) !important; - color: $gray !important; - height: 48px; - border: none; - border-radius: $border-radius-lg; + &:disabled { + background: $gray-100 !important; + background: linear-gradient(270deg, $gray-100 0%, $gray-100 100%) !important; + color: $gray !important; + height: 48px; + border: none; + border-radius: $border-radius-lg; + } } &.list-button { position: relative; @@ -127,7 +127,7 @@ caption { &.button-loader { padding: 0 40px 0 12px; &:after { - content: url(../../assets/img/icons/button-spinner-green.svg); + content: url(../../assets/img/icons/button-spinner-blue.svg); position: absolute; right: 14px; width: 16px; @@ -143,3 +143,66 @@ caption { } } } + +// SelectCar styles +.select-car { + height: 100vh; + + .select-car-form { + background: $white; + height: 100%; + + form { + height: calc(100% - 230px); + overflow-y: scroll; + overflow-x: hidden; + } + + .car_list, .current_car_info-text, .needed_car_info-text { + flex-shrink: 0; + width: 100%; + position: relative; + transition: transform .3s; + } + } + + .current_car_info { + position: relative; + min-height: 2.5rem; + + .current_car_info-text { + position: absolute; + } + } +} + +.slide-enter-from { + opacity: 0; + transform: translateX(30vw); +} +.slide-enter-active, .slide-leave-active { + transition: all .4s; +} +.slide-leave-to { + opacity: 0; + transform: translateX(-30vw); +} + +.slide_reverse-enter-from { + opacity: 0; + transform: translateX(-30vw); +} +.slide_reverse-enter-active, .slide_reverse-leave-active { + transition: all .4s; +} +.slide_reverse-leave-to { + opacity: 0; + transform: translateX(30vw); +} + +.fade-enter-from, .fade-leave-to { + opacity: 0; +} +.fade-enter-active, .fade-leave-active { + transition: all .5s ease; +} From b9f9d35ebdacd0e3311e52d1a934411e5aad0d34 Mon Sep 17 00:00:00 2001 From: Bryan Date: Thu, 4 Nov 2021 15:47:38 -0400 Subject: [PATCH 5/6] Rename uxStyles to uxVariables. --- src/styles/{uxStyles.scss => uxVariables.scss} | 10 +++++----- vue.config.js | 2 +- vue.release.config.js | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) rename src/styles/{uxStyles.scss => uxVariables.scss} (94%) diff --git a/src/styles/uxStyles.scss b/src/styles/uxVariables.scss similarity index 94% rename from src/styles/uxStyles.scss rename to src/styles/uxVariables.scss index 2b2211595..f3e15b271 100644 --- a/src/styles/uxStyles.scss +++ b/src/styles/uxVariables.scss @@ -115,11 +115,11 @@ $font-family-code: $font-family-monospace; $font-size-base: 1rem; // Assumes the browser default, typically `16px` //Font weight -$font-weight-lighter: lighter !default; -$font-weight-light: 300 !default; -$font-weight-normal: 400 !default; -$font-weight-bold: 500 !default; -$font-weight-bolder: bolder !default; +$font-weight-lighter: lighter; +$font-weight-light: 300; +$font-weight-normal: 400; +$font-weight-bold: 500; +$font-weight-bolder: bolder; //Headings $h1-font-size: $font-size-base * 3; diff --git a/vue.config.js b/vue.config.js index 6389aa1c8..d66a7893c 100644 --- a/vue.config.js +++ b/vue.config.js @@ -18,7 +18,7 @@ module.exports = { sass: { // Load Order Matters!!! prependData: ` @import "./node_modules/bootstrap/scss/functions"; - @import "@/styles/uxStyles.scss"; + @import "@/styles/uxVariables.scss"; @import "./node_modules/bootstrap/scss/variables"; @import "./node_modules/bootstrap/scss/mixins"; @import "./node_modules/bootstrap/scss/bootstrap"; diff --git a/vue.release.config.js b/vue.release.config.js index d166206d0..a5419b6e3 100644 --- a/vue.release.config.js +++ b/vue.release.config.js @@ -8,7 +8,7 @@ module.exports = { sass: { // Load Order Matters!!! prependData: ` @import "./node_modules/bootstrap/scss/functions"; - @import "@/styles/uxStyles.scss"; + @import "@/styles/uxVariables.scss"; @import "./node_modules/bootstrap/scss/variables"; @import "./node_modules/bootstrap/scss/mixins"; @import "./node_modules/bootstrap/scss/bootstrap"; From fbf1f8c124a1d6f29943dca6c8f32edf2407ff97 Mon Sep 17 00:00:00 2001 From: Frank Date: Thu, 4 Nov 2021 15:53:15 -0400 Subject: [PATCH 6/6] Added mock case for grabbing content --- src/constants/widgetNames.js | 6 +++ src/layouts/selectYear/selectYear.vue | 73 +++++++++++++++++---------- src/mixins/baseMixin.js | 4 ++ 3 files changed, 57 insertions(+), 26 deletions(-) create mode 100644 src/constants/widgetNames.js diff --git a/src/constants/widgetNames.js b/src/constants/widgetNames.js new file mode 100644 index 000000000..013083bcf --- /dev/null +++ b/src/constants/widgetNames.js @@ -0,0 +1,6 @@ +const widgetNames = { + PAGE_HEADING_WIDGET: "PageHeadingWidget", + RADIO_QUESTION_WIDGET: "RadioQuestionWidget" +} + +export { widgetNames } \ No newline at end of file diff --git a/src/layouts/selectYear/selectYear.vue b/src/layouts/selectYear/selectYear.vue index 4f0a2a018..63a08e02e 100644 --- a/src/layouts/selectYear/selectYear.vue +++ b/src/layouts/selectYear/selectYear.vue @@ -1,12 +1,9 @@ diff --git a/src/mixins/baseMixin.js b/src/mixins/baseMixin.js index a64e5e190..414d8bb47 100644 --- a/src/mixins/baseMixin.js +++ b/src/mixins/baseMixin.js @@ -1,4 +1,5 @@ import { storeActions } from "@/constants/storeActions.js"; +import { widgetNames } from "@/constants/widgetNames.js"; export default { methods: { @@ -18,5 +19,8 @@ export default { storeActions() { return storeActions; }, + widgetNames(){ + return widgetNames; + } }, } \ No newline at end of file