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"; ` } }