Adrien/carrramba-encore-rate
1
0
Fork 0
Code Issues 1 Pull Requests 1 Projects Releases Wiki Activity

💄 Replace css files with scss and factorize CSS rules

Browse Source
This commit is contained in:
Adrien
2023-03-05 12:49:20 +01:00
parent a9d918fb0f
commit f09ba4cc58
15 changed files with 459 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

242
frontend/src/stopsSearchMenu.scss Normal file
View File

@@ -0,0 +1,242 @@
@use "_common";
@use "_utils";
.stopSearchMenu {
@extend %widget;
.inputGroup {
width: 50%;
// height: 5%;
// TODO: Setup hop-ui to avoid to have to overrride rules.
input {
color: var(--idfm-white);
font-family: IDFVoyageur-regular;
}
}
.title {
@extend %title;
display: flex;
justify-content: center;
}
.body {
@extend %body;
flex-direction: row;
.stopsPanels {
width: 50%;
height: 100%;
scroll-snap-type: y mandatory;
overflow-y: scroll;
.stopPanel {
// display: None;
scroll-snap-align: center;
.stop {
width: calc(1880/1920*100%);
height: calc(100% / 5);
// margin: 0 calc(20/1920*100%);
margin: 0 calc(10/1920*100%);
display: flex;
align-items: center;
flex-direction: row;
/* TODO: compute the border weight according to the parent height */
/* TODO: Disable border-bottom for the last .line */
border-bottom: solid calc(2px);
.name {
width: 60%;
font-family: IDFVoyageur-bold;
}
.lineRepr {
// height: 100%;
width: 40%;
aspect-ratio: 2.5;
// margin-left: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
.transportMode {
@extend %transportMode;
height: 50%;
}
.break {
flex-basis: 100%;
height: 0;
}
.linesRepresentationMatrix {
@extend %busLinePicto; // Use the larger picto aspect-ratio
width: 75%;
aspect-ratio: 3;
display: flex;
flex-flow: row;
flex-wrap: wrap;
// justify-content: space-around;
// .break {
// flex-basis: 100%;
// height: 0;
// }
%picto {
margin-left: 1%;
align-self: center;
justify-self: center;
}
%singleLinePicto {
@extend %picto;
height: 80%;
}
.transportMode {
@extend %transportMode;
@extend %picto;
}
.tramLinePicto {
@extendnd %tramLinePicto;
@extend %singleLinePicto;
}
.trainLinePicto {
@extend %trainLinePicto;
@extend %singleLinePicto;
}
.metroLinePicto {
@extendnd %metroLinePicto;
@extend %singleLinePicto;
}
.busLinePicto {
@extend %busLinePicto;
@extend %picto;
}
}
}
}
// .stop:last-child {
// border-bottom: 0;
// /* to make up for the bottom border deletion */
// padding-bottom: calc(2px);
// }
}
.displayed {
display: block;
}
}
.map {
height: 100%;
width: 50%;
}
}
// .lineTable {
// height: 100%;
// width: 50%;
// tr {
// height: 100%;
// display: flex;
// flex-flow: row;
// }
// td {
// height: 100%;
// display: flex;
// flex-flow: row;
// }
// }
// .stop {
// height: 100%;
// display: flex;
// flex-direction: row;
// align-items: center;
// .lineRepr {
// height: 100%;
// aspect-ratio: 5;
// display: flex;
// flex-direction: row;
// flex-wrap: wrap;
// align-items: center;
// .break {
// flex-basis: 100%;
// height: 0;
// }
// .linesRepresentationMatrix {
// @extend %busLinePicto; // Use the larger picto aspect-ratio
// height: 100%;
// aspect-ratio: 3;
// display: flex;
// flex-flow: row;
// flex-wrap: wrap;
// .break {
// flex-basis: 100%;
// height: 0;
// }
// %picto {
// margin-left: 1%;
// align-self: center;
// justify-self: center;
// }
// .transportMode {
// @extend %transportMode;
// @extend %picto;
// }
// .tramLinePicto {
// @extendnd %tramLinePicto;
// @extend %picto;
// }
// .trainLinePicto {
// @extend %trainLinePicto;
// @extend %picto;
// }
// .metroLinePicto {
// @extendnd %metroLinePicto;
// @extend %picto;
// }
// .busLinePicto {
// @extend %busLinePicto;
// @extend %picto;
// }
// }
// }
// }
}