Freifunk-Troisdorf/meshviewer
5
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

history: sidebar styling

Browse Source
This commit is contained in:
Nils Schneider 2015-03-20 17:42:43 +01:00
parent 2ac844a213
commit 92257c463f
1 changed files with 40 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
history.html
View File

@ -14,20 +14,44 @@
#sidebarhandle { #sidebarhandle {
cursor: pointer; cursor: pointer;
font-family: sans; font-family: sans;
font-size: 18pt; font-size: 20pt;
position: absolute; position: absolute;
right: -1.4em; right: -0.9em;
top: 2em; top: 2em;
z-index: 10; z-index: 10;
background: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.9);
width: 1.5em; height: 1.8em;
padding: 0.25em 0; width: 1.8em;
border-radius: 0.9em;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.19), 0px 3px 6px rgba(0, 0, 0, 0.23);
text-align: center; text-align: center;
border-radius: 0 0.5em 0.5em 0; display: table;
transition: right 0.5s;
}
#sidebar.hidden #sidebarhandle {
right: -2.5em;
}
#sidebarhandle span {
display: table-cell;
vertical-align: middle;
font-family: "ionicons";
transition: transform 0.5s;
}
#sidebarhandle span:after {
padding-right: 0.125em;
content: "\f124";
}
#sidebar.hidden #sidebarhandle span {
transform: scale(-1, 1);
} }
#sidebarhandle:hover { #sidebarhandle:hover {
background: rgba(255, 255, 255, 1); background: white;
color: #dc0067;
} }
.hostname { .hostname {
@ -46,17 +70,16 @@
} }
#sidebar { #sidebar {
max-width: 50em; z-index: 5;
width: 50em;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.19), 0px 3px 6px rgba(0, 0, 0, 0.23);
} }
#sidebar.hidden { #sidebar.hidden {
width: 0px; position: relative;
} margin-left: -50em;
#sidebar.hidden #lists {
display: none;
} }
#lists { #lists {
@ -84,7 +107,6 @@
@media screen and (max-width: 80em) { @media screen and (max-width: 80em) {
#sidebar { #sidebar {
max-width: 50vw;
font-size: 0.8em; font-size: 0.8em;
} }
} }
@ -96,6 +118,7 @@
#lists { #lists {
overflow: visible; overflow: visible;
height: auto;
} }
#sidebarhandle { #sidebarhandle {
@ -107,7 +130,8 @@
} }
#sidebar { #sidebar {
max-width: none; margin-left: 0em !important;
width: auto;
height: auto; height: auto;
} }
@ -136,7 +160,7 @@
</div> </div>
<div id="sidebar"> <div id="sidebar">
<div id="sidebarhandle"> <div id="sidebarhandle">
✕ <span></span>
</div> </div>
<div id="lists"> <div id="lists">
<p> <p>