tobast/glowingbear-mainbox
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Animate sidebar with CSS transitions

Browse source
This commit is contained in:
Lorenz Hübschle-Schneider 2014-07-08 09:51:17 +01:00
commit 8816fe221e
3 changed files with 50 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

26
css/glowingbear.css
View file

@ -171,10 +171,14 @@ input[type=text], input[type=password], #sendMessage, .badge {
padding-top: 35px; /* topbar */
padding-bottom: 1px; /* need to force a padding here */
font-size: smaller;
-webkit-transition:0.35s ease all;
transition:0.35s ease all;
transition:0.2s ease-in-out;
z-index: 2;
}
#sidebar[data-state=visible] {
left: 0px;
}
#sidebar form {
}
#sidebar.ng-hide-add, #sidebar.ng-hide-remove {
@ -274,7 +278,7 @@ input[type=text], input[type=password], #sendMessage, .badge {
.withnicklist {
margin-right: 100px !important; /* nicklist */
}
.withsidebar {
.content[sidebar-state=visible] #bufferlines {
margin-left: 145px; /* sidebar */
}
#bufferlines .btn {
@ -290,7 +294,7 @@ input[type=text], input[type=password], #sendMessage, .badge {
transition:0.35s ease all;
z-index: 1;
}
.footer.withsidebar {
.content[sidebar-state=visible] .footer {
margin-left: 0;
padding-left: 145px;
}
@ -403,8 +407,6 @@ h2 span, h2 small {
#sidebar {
font-size: normal;
bottom: 0px;
width: auto;
max-width: 60%;
top: 0px;
padding-bottom: 35px;
}
@ -415,6 +417,18 @@ h2 span, h2 small {
bottom: 0px;
}
#sidebar[data-state=visible] {
width: 200px;
}
#sidebar[data-state=hidden] {
left: -200px;
}
.content[sidebar-state=visible] #bufferlines, .content[sidebar-state=visible] .footer {
margin-left: 0px;
}
#topbar .title {
left: 40px;
}