From 3ceb550045f7781167d0cb02d02eb13f28d268ad Mon Sep 17 00:00:00 2001 From: Bryan Date: Thu, 4 Nov 2021 15:29:30 -0400 Subject: [PATCH 1/2] 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 2/2] 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";