Merge pull request #199 from wet-boew/feature-multimedia-player

Feature multimedia player - progress bar polyfill fix and UI improvements
wet-boew · Aug 13, 2012 · 50056a2 · 50056a2
2 parents 2317a3e + cf755f2
commit 50056a2
Show file tree

Hide file tree

Showing 6 changed files with 190 additions and 186 deletions.
diff --git a/build/js/css/pe-ap-ie-min.css b/build/js/css/pe-ap-ie-min.css
diff --git a/build/js/css/pe-ap-min.css b/build/js/css/pe-ap-min.css
diff --git a/build/js/pe-ap-min.js b/build/js/pe-ap-min.js
diff --git a/src/js/sass/multimedia.scss b/src/js/sass/multimedia.scss
@@ -16,63 +16,71 @@ video, object.video {
 	min-height:1.5em;
 }
 
-.wet-boew-multimedia-controls-start {
-	float:left;
-}
-
-.wet-boew-multimedia-controls-end {
-	float:right;
-}
-
 @mixin border {
 	border:1px solid #BBB;
 }
 
+@mixin ui {
+	@include border;
+	background:#DADADA url('../images/multimedia/background-toolbar.png') repeat-x 0 0;
+}
+
 $progress-color: #000;
 
 .wet-boew-multimedia-controls{
 	width:100%;
-	background:#DADADA url('../images/multimedia/background-toolbar.png') repeat-x 0 0;
 	padding:0;
 
 	button {
-		@include border;
-		background:transparent;
+		@include ui;
 		padding:0;
 
-		svg{
-			margin:0;
+		svg, img {
 			display:block;
+			margin:0;
+			padding:0;
 		}
 
 		img {
 			width:20px;
 			height:20px;
-			padding:0;
-			margin:0;
 		}
 	}
+
+	.wet-boew-multimedia-controls-start {
+		float:left;
+	}
 
+	.wet-boew-multimedia-controls-end {
+		float:right;
+}	
+
 	.wet-boew-multimedia-timeline{
-		@include border;
-		margin-left:82px;
+		position:relative;
+		@include ui;
+		margin-left:83px;
 		margin-right:55px;
-		padding:1px 6px;
-		progress {
-			@include border;
-			color:$progress-color;
-			width:100%;
-			&::-moz-progress-bar {
-				background:$progress-color;
-			}
-
-			&::-webkit-progress-value {
-				background:$progress-color;
-			}
-
-			&[aria-valuenow]:before  {
-				background:$progress-color;
-			}
+		height:18px;
+		padding: 2px 4px;
+	}
+
+	progress {
+		@include border;
+		color:$progress-color;
+		width:100%;
+		height:14px;
+		margin:2px 0;
+		/* Polyfill */
+		div.progress-frame {
+			border:none;
+			background-color:transparent!important;
+			padding:0;
+		}
+		div.progress-bar {
+			background-color:$progress-color!important;
+			padding:0;
 		}
 	}
-}
+}
+
+
diff --git a/src/js/sass/progress.scss b/src/js/sass/progress.scss
@@ -15,7 +15,7 @@
 progress {
 		display:inline-block;
 
-		div.progress-frame,  {
+		div.progress-frame  {
 			@include progress(#FFF);
 		}
 
@@ -24,7 +24,7 @@ progress {
 		}
 
 		div.progress-bar {
-			height: 1em;
+			height: 100%;
 			border: none;
 			background-color: #009900;  
 		}