replace vehiclemenu

This commit is contained in:
Luke
2021-05-07 20:00:26 +02:00
parent f7a54d67fd
commit 530e2f6ba6
12 changed files with 249 additions and 5 deletions

View File

@@ -0,0 +1,109 @@
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
html, body {
height: 100vh;
width: 100vw;
}
body {
margin: 0;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}
main {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
bottom: 15vh;
}
.vehicle-menu {
background-color: rgba(0, 0, 0, 0.5);
list-style: none;
margin: 0;
padding: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: .5em;
border-radius: 3px;
color: white;
}
.vehicle-menu__item {
width: 8em;
padding: .5em;
border-radius: 3px;
}
.vehicle-menu__item:not(:last-child) {
margin-right: .5em;
}
.vehicle-menu__item:hover {
background-color: rgba(0, 0, 0, 0.125);
}
.vehicle-menu__icon {
max-width: 3em;
height: auto;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
}
.vehicle-menu__text {
text-align: center;
margin-top: .5em;
}
.flex--column {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
/*# sourceMappingURL=style.css.map */

View File

@@ -0,0 +1,9 @@
{
"version": 3,
"mappings": "AAAA,AAAA,IAAI,CAAC;EAAE,UAAU,EAAE,UAAU;CAAI;;AACjC,AAAA,CAAC,EAAE,CAAC,AAAA,OAAO,EAAE,CAAC,AAAA,MAAM,CAAC;EAAE,UAAU,EAAE,OAAO;CAAI;;AAE9C,AAAA,IAAI,EAAE,IAAI,CAAC;EACT,MAAM,EAAE,KAAK;EACb,KAAK,EAAE,KAAK;CACb;;AAED,AAAA,IAAI,CAAC;EACH,MAAM,EAAE,CAAC;EACT,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,GAAG;EACnB,eAAe,EAAE,MAAM;EAEvB,WAAW,EAAE,oIAAoI;CAClJ;;AAED,AAAA,IAAI,CAAC;EACH,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,GAAG;EACnB,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;EACnB,QAAQ,EAAE,QAAQ;EAClB,MAAM,EAAE,IAAI;CACb;;AAED,AAAA,aAAa,CAAC;EACZ,gBAAgB,EAAO,kBAAK;EAC5B,UAAU,EAAE,IAAI;EAChB,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EAEV,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,GAAG;EACnB,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;EACnB,OAAO,EAAE,IAAI;EAEb,aAAa,EAAE,GAAG;EAClB,KAAK,EAAE,KAAK;CAsBb;;AApBE,AAAD,mBAAO,CAAC;EACN,KAAK,EAAE,GAAG;EACV,OAAO,EAAE,IAAI;EACb,aAAa,EAAE,GAAG;CAInB;;AAPA,AAKC,mBALK,AAKJ,IAAK,CAAA,WAAW,EAAE;EAAE,YAAY,EAAE,IAAI;CAAI;;AAL5C,AAMC,mBANK,AAMJ,MAAM,CAAC;EAAE,gBAAgB,EAAO,oBAAK;CAAW;;AAGlD,AAAD,mBAAO,CAAC;EACN,SAAS,EAAE,GAAG;EACd,MAAM,EAAE,IAAI;EAEZ,UAAU,EAAE,MAAM;CACnB;;AAEA,AAAD,mBAAO,CAAC;EACN,UAAU,EAAE,MAAM;EAClB,UAAU,EAAE,IAAI;CACjB;;AAGH,AAAA,aAAa,CAAC;EACZ,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;CACvB",
"sources": [
"style.scss"
],
"names": [],
"file": "style.css"
}

View File

@@ -0,0 +1,68 @@
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
html, body {
height: 100vh;
width: 100vw;
}
body {
margin: 0;
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}
main {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
position: absolute;
bottom: 15vh;
}
.vehicle-menu {
background-color: rgba(black, .5);
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: .5em;
border-radius: 3px;
color: white;
&__item {
width: 8em;
padding: .5em;
border-radius: 3px;
&:not(:last-child) { margin-right: .5em; }
&:hover { background-color: rgba(black, .125); }
}
&__icon {
max-width: 3em;
height: auto;
align-self: center;
}
&__text {
text-align: center;
margin-top: .5em;
}
}
.flex--column {
display: flex;
flex-direction: column;
}