Design Sidebar

Verantwortlicher: Simon Künnen

Beschreibung: Umsetzung des Optionsmenü, welches von der Seite in den Bildschirm fährt. Weiterhin wird dieses Menü als Sidebar beschrieben. Von hier werden diverse Filter gesetzt und Routen bearbeitet.

Betroffende Dateien: Index.html, style.css, elements.css

Eingebundene Bibliotheken: ion-rangeslider

Code:
In style.css

/*** Sidebar - Simon ***/
#sidebar-head-topbar {
height: 65px;
padding-top: 5px;
box-shadow: 0px 1px 15px #000;
}
.is__ios-fullscreen #sidebar-head-topbar {
height: 80px;
padding-top: 20px;
}
#sidebar[class*="i-f__"] {
margin-right: 10px;
}
#sidebar-head-topbar-title {
font-size: 1.6rem;
font-weight: 200;
text-align: left;
display: inline-block;
line-height: 55px;
color: #fff;
}
#sidebar-head-topbar .i__options {
margin: 5px;
float: left;
position: relative;
top: 12px;
margin-right: 15px;
}
.sidebar-head-topbar-box {
padding-left: 20px;
}
#sidebar-theatre {
height: 100%;
margin-top: 0px;
}
#sidebar-theatre h3 {
font-size: 1rem;
font-weight: 200;
line-height: 2;
margin: 0;
padding: 0;
}
.sidebar-theatre-box {
padding-left: 20px;
margin-top: 15px;
padding-right: 20px;
}
.sidebar-theatre-box #location {
margin-top: -15px;
}
.sidebar-theatre-box h3 {
color: #fff;
display: inline;
}
.sidebar-theatre-box h4 {
color: #c7c7c7;
font-size: 1.0rem;
font-weight: 200;
margin: 0;
padding: 0;
}
.sidebar-theatre-box img {
margin-right: 15px;
position: relative;
top: 1px;
}
.sidebar-theatre-box input {
padding: 4px;
background: #d1d1d1;
border: 1px solid #1d1d1d;
width: 100%;
line-height: 1.5;
font-size: 1rem;
}
.seperator {
height: 1px;
min-height: 1px;
background: #292929;
margin-top: 10px;
}
/*** /Sidebar - Simon ***/