diff --git a/package-lock.json b/package-lock.json index b5a7cc355..e14dd267e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11695,9 +11695,6 @@ "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=", "dev": true, - "dependencies": { - "graceful-fs": "^4.1.6" - }, "optionalDependencies": { "graceful-fs": "^4.1.6" } @@ -17955,7 +17952,6 @@ "integrity": "sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==", "dev": true, "dependencies": { - "chokidar": "^3.4.1", "graceful-fs": "^4.1.2", "neo-async": "^2.5.0", "watchpack-chokidar2": "^2.0.1" @@ -18020,7 +18016,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/public/index.html b/public/index.html index 84665a8b4..9047c9643 100644 --- a/public/index.html +++ b/public/index.html @@ -7,7 +7,7 @@ - + <%= htmlWebpackPlugin.options.title %> diff --git a/src/assets/scss/_CustomVariables.scss b/src/assets/scss/_CustomVariables.scss deleted file mode 100644 index 2a87319f3..000000000 --- a/src/assets/scss/_CustomVariables.scss +++ /dev/null @@ -1,106 +0,0 @@ -// Color system - -// scss-docs-start gray-color-variables -$white: #FFFFFF; -$gray-100: #F4F4F4; -$gray-200: #CACBCC; -$gray-300: #B3B4B5; -$gray-400: #B0B3B3;//Default Gray (Gray 400) -$black: #000; -// scss-docs-end gray-color-variables - -// fusv-disable -// scss-docs-start gray-colors-map -$grays: ( -"100": $gray-100, -"200": $gray-200, -"300": $gray-300, -"400": $gray-400, -); -// scss-docs-end gray-colors-map -// fusv-enable - -// scss-docs-start color-variables -$blue-100: #E4F1F7; -$blue-200: #E7F1F6; -$blue-300: #B9D7E6; -$blue-400: #125B7E; -$blue-600: #1574A1; -$blue-700: #06577C; -$blue: #167CAC;//Default Blue (Blue 500) -$indigo: #6610f2; -$purple: #6f42c1; -$pink: #d63384; -$red-200: #FBE9E8; -$red-300: #F3BEBA; -$red: #DA291C;//Default Red (Red 400) -$red-500: #AF2117; -$orange: #fd7e14; -$yellow-200: #FEF6E8; -$yellow-300: #FCE6BA; -$yellow: #F88F1C;//Default Yellow (Yellow 400) -$green-200: #E6F2EC; -$green-300: #B5DAC8; -$green: #098649;//Default Green (Green 400) -$green-500: #075F35; -$teal: #20c997; -$cyan: #0dcaf0; -// scss-docs-end color-variables - -// 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-400, -"gray-dark": $gray-400 -); -// scss-docs-end colors-map - -// scss-docs-start theme-color-variables -$primary: $red; -$secondary: $gray-400; -$success: $green; -$info: $cyan; -$warning: $yellow; -$danger: $red-500; -$light: $gray-100; -$dark: $gray-400; -// scss-docs-end theme-color-variables - -// scss-docs-start theme-colors-map -$theme-colors: ( -"primary": $primary, -"secondary": $secondary, -"success": $success, -"info": $info, -"warning": $warning, -"danger": $danger, -"light": $light, -"dark": $dark -); -// scss-docs-end theme-colors-map - -//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; - -//Gutters -$grid-gutter-width: .75rem; - -//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; \ No newline at end of file diff --git a/src/assets/scss/_GlobalStyles.scss b/src/assets/scss/_GlobalStyles.scss deleted file mode 100644 index 1646125b5..000000000 --- a/src/assets/scss/_GlobalStyles.scss +++ /dev/null @@ -1,18 +0,0 @@ -body { - font-size: 16px; - background-color: #fff; - padding: 0 .75rem; -} - -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/_custom-variables.scss b/src/assets/scss/_custom-variables.scss new file mode 100644 index 000000000..2b2211595 --- /dev/null +++ b/src/assets/scss/_custom-variables.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/assets/scss/_global-styles.scss b/src/assets/scss/_global-styles.scss new file mode 100644 index 000000000..9512ddee3 --- /dev/null +++ b/src/assets/scss/_global-styles.scss @@ -0,0 +1,22 @@ +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 index bf3cbf883..21087a117 100644 --- a/src/assets/scss/components/_buttons.scss +++ b/src/assets/scss/components/_buttons.scss @@ -3,7 +3,7 @@ &.btn-primary { position: relative; background: $blue-700; - background: linear-gradient(270deg, rgba(21,116,161,1) 0%, rgba(18,91,126,1) 100%); + background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%); border: none; border-radius: $border-radius-lg; height: 48px; @@ -51,6 +51,10 @@ 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 { diff --git a/src/assets/scss/components/_typogrophy.scss b/src/assets/scss/components/_typogrophy.scss new file mode 100644 index 000000000..c40fb9e22 --- /dev/null +++ b/src/assets/scss/components/_typogrophy.scss @@ -0,0 +1,46 @@ +//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 index 90689eefd..356cc0538 100644 --- a/src/assets/scss/custom.scss +++ b/src/assets/scss/custom.scss @@ -4,7 +4,7 @@ @import "./node_modules/bootstrap/scss/functions"; //Variable Overrides -@import "_CustomVariables"; +@import "_custom-variables"; //Bootstrap Default Variables and Mixins @import "./node_modules/bootstrap/scss/variables"; @@ -14,11 +14,12 @@ @import "./node_modules/bootstrap/scss/bootstrap"; //Custom Global CSS -@import "_GlobalStyles"; +@import "_global-styles"; //Custom Components CSS +@import "./components/_typogrophy"; @import "./components/_navbar"; -@import "./components/_SelectCar"; +@import "./components/_SelectCar"; @import "./components/_buttons"; @import "./components/_vehicle-image"; @import "./components/_radio-card"; diff --git a/src/layouts/componentTest/componentTest.vue b/src/layouts/componentTest/componentTest.vue index 493b9c1d4..1128790eb 100644 --- a/src/layouts/componentTest/componentTest.vue +++ b/src/layouts/componentTest/componentTest.vue @@ -1,6 +1,6 @@ diff --git a/src/uxComponents/radioCard/radioCard.vue b/src/uxComponents/radioCard/radioCard.vue index 70a7cec82..249646f82 100644 --- a/src/uxComponents/radioCard/radioCard.vue +++ b/src/uxComponents/radioCard/radioCard.vue @@ -1,5 +1,5 @@