From 18710015d594763b2cdd9eb8634ca0debded21fe Mon Sep 17 00:00:00 2001 From: Bryan Date: Fri, 5 Nov 2021 12:16:24 -0400 Subject: [PATCH 1/7] Breakout sass files for granularity/clarity. Moved selectCar styles to the component instead of a stand-alone style sheet. --- src/layouts/selectYear/selectYear.vue | 65 +++++++++ src/styles/commonButtonStyles.scss | 76 ++++++++++ src/styles/commonStyles.scss | 188 +------------------------ src/styles/commonTypogrophyStyles.scss | 45 ++++++ vue.config.js | 3 +- vue.release.config.js | 3 +- 6 files changed, 192 insertions(+), 188 deletions(-) create mode 100644 src/styles/commonButtonStyles.scss create mode 100644 src/styles/commonTypogrophyStyles.scss diff --git a/src/layouts/selectYear/selectYear.vue b/src/layouts/selectYear/selectYear.vue index 63a08e02e..68ee90680 100644 --- a/src/layouts/selectYear/selectYear.vue +++ b/src/layouts/selectYear/selectYear.vue @@ -58,3 +58,68 @@ export default { }, }; + + diff --git a/src/styles/commonButtonStyles.scss b/src/styles/commonButtonStyles.scss new file mode 100644 index 000000000..1f4dd97b8 --- /dev/null +++ b/src/styles/commonButtonStyles.scss @@ -0,0 +1,76 @@ +//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-blue.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/commonStyles.scss b/src/styles/commonStyles.scss index 37dab947c..ab36e35c5 100644 --- a/src/styles/commonStyles.scss +++ b/src/styles/commonStyles.scss @@ -1,3 +1,5 @@ +// Common/Global Styles +// Use this file for global styles that don't or won't have their own stylesheet body { font-size: 16px; background-color: #fff; @@ -20,189 +22,3 @@ body { 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-blue.svg); - position: absolute; - right: 14px; - width: 16px; - height: 16px; - margin-left: 12px; - animation: rotation 1s infinite linear; - @keyframes rotation { - 100% { - transform:rotate(360deg); - } - } - } - } - } -} - -// 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; -} diff --git a/src/styles/commonTypogrophyStyles.scss b/src/styles/commonTypogrophyStyles.scss new file mode 100644 index 000000000..fd4a88119 --- /dev/null +++ b/src/styles/commonTypogrophyStyles.scss @@ -0,0 +1,45 @@ +//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; +} diff --git a/vue.config.js b/vue.config.js index d66a7893c..6f570661b 100644 --- a/vue.config.js +++ b/vue.config.js @@ -22,7 +22,8 @@ module.exports = { @import "./node_modules/bootstrap/scss/variables"; @import "./node_modules/bootstrap/scss/mixins"; @import "./node_modules/bootstrap/scss/bootstrap"; - @import "@/styles/commonStyles.scss"; + @import "@/styles/commonButtonStyles.scss"; + @import "@/styles/commonTypogrophyStyles.scss"; ` } } diff --git a/vue.release.config.js b/vue.release.config.js index a5419b6e3..dce7522b8 100644 --- a/vue.release.config.js +++ b/vue.release.config.js @@ -12,7 +12,8 @@ module.exports = { @import "./node_modules/bootstrap/scss/variables"; @import "./node_modules/bootstrap/scss/mixins"; @import "./node_modules/bootstrap/scss/bootstrap"; - @import "@/styles/commonStyles.scss"; + @import "@/styles/commonButtonStyles.scss"; + @import "@/styles/commonTypogrophyStyles.scss"; ` } } From 6618301c15159253d732d6d510f5c4967f57afa8 Mon Sep 17 00:00:00 2001 From: Bryan Date: Fri, 5 Nov 2021 12:23:11 -0400 Subject: [PATCH 2/7] Correct typo. --- ...{commonTypogrophyStyles.scss => commonTypographyStyles.scss} | 2 +- vue.config.js | 2 +- vue.release.config.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) rename src/styles/{commonTypogrophyStyles.scss => commonTypographyStyles.scss} (97%) diff --git a/src/styles/commonTypogrophyStyles.scss b/src/styles/commonTypographyStyles.scss similarity index 97% rename from src/styles/commonTypogrophyStyles.scss rename to src/styles/commonTypographyStyles.scss index fd4a88119..37081a8a4 100644 --- a/src/styles/commonTypogrophyStyles.scss +++ b/src/styles/commonTypographyStyles.scss @@ -1,4 +1,4 @@ -//Typogrophy +//Typography p { font-size: 16px; line-height: 1.625; diff --git a/vue.config.js b/vue.config.js index 6f570661b..1ac89c59e 100644 --- a/vue.config.js +++ b/vue.config.js @@ -23,7 +23,7 @@ module.exports = { @import "./node_modules/bootstrap/scss/mixins"; @import "./node_modules/bootstrap/scss/bootstrap"; @import "@/styles/commonButtonStyles.scss"; - @import "@/styles/commonTypogrophyStyles.scss"; + @import "@/styles/commonTypographyStyles.scss"; ` } } diff --git a/vue.release.config.js b/vue.release.config.js index dce7522b8..e5e760bd5 100644 --- a/vue.release.config.js +++ b/vue.release.config.js @@ -13,7 +13,7 @@ module.exports = { @import "./node_modules/bootstrap/scss/mixins"; @import "./node_modules/bootstrap/scss/bootstrap"; @import "@/styles/commonButtonStyles.scss"; - @import "@/styles/commonTypogrophyStyles.scss"; + @import "@/styles/commonTypographyStyles.scss"; ` } } From 086ddcc7861c49de60b09ac74bfe05c526bc7e9d Mon Sep 17 00:00:00 2001 From: Bryan Date: Fri, 5 Nov 2021 12:44:49 -0400 Subject: [PATCH 3/7] Re-add commonStyles.scss. --- vue.config.js | 1 + vue.release.config.js | 1 + 2 files changed, 2 insertions(+) diff --git a/vue.config.js b/vue.config.js index 1ac89c59e..db22841c4 100644 --- a/vue.config.js +++ b/vue.config.js @@ -22,6 +22,7 @@ module.exports = { @import "./node_modules/bootstrap/scss/variables"; @import "./node_modules/bootstrap/scss/mixins"; @import "./node_modules/bootstrap/scss/bootstrap"; + @import "@/styles/commonStyles.scss"; @import "@/styles/commonButtonStyles.scss"; @import "@/styles/commonTypographyStyles.scss"; ` diff --git a/vue.release.config.js b/vue.release.config.js index e5e760bd5..8ab942282 100644 --- a/vue.release.config.js +++ b/vue.release.config.js @@ -12,6 +12,7 @@ module.exports = { @import "./node_modules/bootstrap/scss/variables"; @import "./node_modules/bootstrap/scss/mixins"; @import "./node_modules/bootstrap/scss/bootstrap"; + @import "@/styles/commonStyles.scss"; @import "@/styles/commonButtonStyles.scss"; @import "@/styles/commonTypographyStyles.scss"; ` From 9d85b39d7c11f8e2f05d23ac17464342c1500398 Mon Sep 17 00:00:00 2001 From: Bryan Date: Fri, 5 Nov 2021 14:12:11 -0400 Subject: [PATCH 4/7] Created vehicleSelectAttributes.scss and moved style to global file. --- src/layouts/selectYear/selectYear.vue | 65 ------------------------- src/styles/vehicleSelectAttributes.scss | 61 +++++++++++++++++++++++ vue.config.js | 1 + vue.release.config.js | 1 + 4 files changed, 63 insertions(+), 65 deletions(-) create mode 100644 src/styles/vehicleSelectAttributes.scss diff --git a/src/layouts/selectYear/selectYear.vue b/src/layouts/selectYear/selectYear.vue index 68ee90680..63a08e02e 100644 --- a/src/layouts/selectYear/selectYear.vue +++ b/src/layouts/selectYear/selectYear.vue @@ -58,68 +58,3 @@ export default { }, }; - - diff --git a/src/styles/vehicleSelectAttributes.scss b/src/styles/vehicleSelectAttributes.scss new file mode 100644 index 000000000..18f6cd2bc --- /dev/null +++ b/src/styles/vehicleSelectAttributes.scss @@ -0,0 +1,61 @@ +.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; +} diff --git a/vue.config.js b/vue.config.js index db22841c4..b6039daf8 100644 --- a/vue.config.js +++ b/vue.config.js @@ -25,6 +25,7 @@ module.exports = { @import "@/styles/commonStyles.scss"; @import "@/styles/commonButtonStyles.scss"; @import "@/styles/commonTypographyStyles.scss"; + @import "@/styles/vehicleSelectAttributes.scss"; ` } } diff --git a/vue.release.config.js b/vue.release.config.js index 8ab942282..20b7c29f6 100644 --- a/vue.release.config.js +++ b/vue.release.config.js @@ -15,6 +15,7 @@ module.exports = { @import "@/styles/commonStyles.scss"; @import "@/styles/commonButtonStyles.scss"; @import "@/styles/commonTypographyStyles.scss"; + @import "@/styles/vehicleSelectAttributes.scss"; ` } } From 1a9bc2652f7ef59d7fc2dcb2b253db11d7b1108e Mon Sep 17 00:00:00 2001 From: Bryan Date: Fri, 5 Nov 2021 14:14:28 -0400 Subject: [PATCH 5/7] Update class name. --- src/styles/vehicleSelectAttributes.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/vehicleSelectAttributes.scss b/src/styles/vehicleSelectAttributes.scss index 18f6cd2bc..8175d0b7e 100644 --- a/src/styles/vehicleSelectAttributes.scss +++ b/src/styles/vehicleSelectAttributes.scss @@ -1,4 +1,4 @@ -.select-car { +.vehicleSelectAttributes { height: 100vh; .select-car-form { From 4db1ed7e768ef120d08764085a3e37bbe090b8b9 Mon Sep 17 00:00:00 2001 From: Bryan Date: Fri, 5 Nov 2021 14:29:22 -0400 Subject: [PATCH 6/7] Update vehicleSelectAttributes.scss --- src/styles/vehicleSelectAttributes.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/vehicleSelectAttributes.scss b/src/styles/vehicleSelectAttributes.scss index 8175d0b7e..a550552b9 100644 --- a/src/styles/vehicleSelectAttributes.scss +++ b/src/styles/vehicleSelectAttributes.scss @@ -1,4 +1,4 @@ -.vehicleSelectAttributes { +.vehicle-select-attributes { height: 100vh; .select-car-form { From 0f3f8b3497ff18c37884ff5ecdd4a4f74515d0f2 Mon Sep 17 00:00:00 2001 From: Bryan Date: Fri, 5 Nov 2021 15:50:34 -0400 Subject: [PATCH 7/7] Create commonComponentStyles folder and move ymmsCommonStyles.scss --- .../ymmsCommonStyles.scss} | 0 vue.config.js | 2 +- vue.release.config.js | 2 +- 3 files changed, 2 insertions(+), 2 deletions(-) rename src/styles/{vehicleSelectAttributes.scss => commonComponentStyles/ymmsCommonStyles.scss} (100%) diff --git a/src/styles/vehicleSelectAttributes.scss b/src/styles/commonComponentStyles/ymmsCommonStyles.scss similarity index 100% rename from src/styles/vehicleSelectAttributes.scss rename to src/styles/commonComponentStyles/ymmsCommonStyles.scss diff --git a/vue.config.js b/vue.config.js index b6039daf8..8027ca62b 100644 --- a/vue.config.js +++ b/vue.config.js @@ -25,7 +25,7 @@ module.exports = { @import "@/styles/commonStyles.scss"; @import "@/styles/commonButtonStyles.scss"; @import "@/styles/commonTypographyStyles.scss"; - @import "@/styles/vehicleSelectAttributes.scss"; + @import "@/styles/commonComponentStyles/ymmsCommonStyles.scss"; ` } } diff --git a/vue.release.config.js b/vue.release.config.js index 20b7c29f6..c6b87f434 100644 --- a/vue.release.config.js +++ b/vue.release.config.js @@ -15,7 +15,7 @@ module.exports = { @import "@/styles/commonStyles.scss"; @import "@/styles/commonButtonStyles.scss"; @import "@/styles/commonTypographyStyles.scss"; - @import "@/styles/vehicleSelectAttributes.scss"; + @import "@/styles/commonComponentStyles/ymmsCommonStyles.scss"; ` } }