jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Breakout sass files for granularity/clarity.

Browse source 
Moved selectCar styles to the component instead of a stand-alone style sheet.
This commit is contained in:
Bryan 2021-11-05 12:16:24 -04:00
parent 823d6169b2
commit 18710015d5
6 changed files with 192 additions and 188 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
src/layouts/selectYear/selectYear.vue
View file

@ -58,3 +58,68 @@ export default {
},
};
</script>
<style lang="scss">
// 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;
}
</style>

76
src/styles/commonButtonStyles.scss Normal file
View file

@ -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);
}
}
}
}
}
}

188
src/styles/commonStyles.scss
View file

@ -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;
}

45
src/styles/commonTypogrophyStyles.scss Normal file
View file

@ -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;
}

3
vue.config.js
View file

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

3
vue.release.config.js
View file

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