xobs/fa23-si
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

progress bar is now a div and uses the same transition + easing as slides (fixes #6)

Browse Source
This commit is contained in:
Hakim El Hattab
2011-12-22 21:25:15 -08:00
parent 91c3056a62
commit 9065114ef0
4 changed files with 24 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
css/main.css
View File

@ -131,9 +131,9 @@ h1 {
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-moz-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-o-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-moz-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-o-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
}
@ -447,32 +447,28 @@ section img {
* PROGRESS BAR
*********************************************/
progress::-webkit-progress-bar {
background: rgba(0,0,0,0.2);
}
progress::-moz-progress-bar {
background: hsl(185, 85%, 50%);
}
progress::-webkit-progress-value {
background: hsl(185, 85%, 50%);
}
progress {
.progress {
position: absolute;
display: none;
height: 4px;
width: 100%;
bottom: 0;
left: 0;
padding: 0;
margin: 0;
border: 0;
outline: 0;
background: none;
background: rgba(0,0,0,0.2);
}
.progress span {
display: block;
background: hsl(185, 85%, 50%);
height: 100%;
width: 0px;
-webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
}
/*********************************************
* ROLLING LINKS