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

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

@ -1,22 +1,20 @@
.vehicle-select-attributes { // SelectCar styles
height: 100vh; .select-car {
height: calc(100vh - 1rem);
.select-car-form { .car_list {
background: $white; position: absolute;
height: 100%; height: calc(100% - 1rem);
width: calc(100% - 1rem);
overflow-y: scroll;
overflow-x: hidden;
}
form { .current_car_info-text, .needed_car_info-text {
height: calc(100% - 230px); flex-shrink: 0;
overflow-y: scroll; width: 100%;
overflow-x: hidden; position: relative;
} transition: transform .3s;
.car_list, .current_car_info-text, .needed_car_info-text {
flex-shrink: 0;
width: 100%;
position: relative;
transition: transform .3s;
}
} }
.current_car_info { .current_car_info {
@ -27,35 +25,42 @@
position: absolute; position: absolute;
} }
} }
}
.slide-enter-from { .back-button {
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;
} }