From 88643247f6a32ac3902f942fa55c982c76726ffb Mon Sep 17 00:00:00 2001 From: Frank Date: Thu, 4 Nov 2021 14:11:11 -0400 Subject: [PATCH] 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"; + ` + } + } + } };