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

Adding new styling

Browse source
This commit is contained in:
Max 2021-11-05 16:29:44 -04:00
parent 8b540b722b
commit ed32135565
1 changed files with 46 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

87
src/styles/commonComponentStyles/ymmsCommonStyles.scss
View file

@ -1,61 +1,66 @@
.vehicle-select-attributes { // SelectCar styles
height: 100vh; .select-car {
height: calc(100vh - 1rem);
.select-car-form {
background: $white; .car_list {
height: 100%; position: absolute;
height: calc(100% - 1rem);
form { width: calc(100% - 1rem);
height: calc(100% - 230px); overflow-y: scroll;
overflow-y: scroll; overflow-x: hidden;
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-text, .needed_car_info-text {
flex-shrink: 0;
width: 100%;
position: relative;
transition: transform .3s;
}
.current_car_info { .current_car_info {
position: relative; position: relative;
min-height: 2.5rem; min-height: 2.5rem;
.current_car_info-text { .current_car_info-text {
position: absolute; position: absolute;
} }
} }
}
.back-button {
.slide-enter-from { margin-left: 5px;
img {
width: 20px;
}
}
}
.slide-enter-from {
opacity: 0; opacity: 0;
transform: translateX(30vw); transform: translateX(30vw);
} }
.slide-enter-active, .slide-leave-active { .slide-enter-active, .slide-leave-active {
transition: all .4s; transition: all .4s;
} }
.slide-leave-to { .slide-leave-to {
opacity: 0; opacity: 0;
transform: translateX(-30vw); transform: translateX(-30vw);
} }
.slide_reverse-enter-from { .slide_reverse-enter-from {
opacity: 0; opacity: 0;
transform: translateX(-30vw); transform: translateX(-30vw);
} }
.slide_reverse-enter-active, .slide_reverse-leave-active { .slide_reverse-enter-active, .slide_reverse-leave-active {
transition: all .4s; transition: all .4s;
} }
.slide_reverse-leave-to { .slide_reverse-leave-to {
opacity: 0; opacity: 0;
transform: translateX(30vw); transform: translateX(30vw);
} }
.fade-enter-from, .fade-leave-to { .fade-enter-from, .fade-leave-to {
opacity: 0; opacity: 0;
} }
.fade-enter-active, .fade-leave-active { .fade-enter-active, .fade-leave-active {
transition: all .5s ease; transition: all .5s ease;
} }