3 files changed, 57 insertions, 25 deletions

diff --git a/docs/src/less/components/buttons.less b/docs/src/less/components/buttons.less
index 68c1f5d3..4d4198bc 100644
--- a/docs/src/less/components/buttons.less
+++ b/docs/src/less/components/buttons.less
@@ -67,6 +67,10 @@ nav {
 		box-shadow: inset 0 1px 1px rgba(0,0,0, .2);
 		position: relative;
 		z-index: 1;
+
+		.icon {
+			color: inherit;
+		}
 	}
 
 	@media (min-width: 560px) {
@@ -92,6 +96,7 @@ nav {
 	box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0,0,0, .05);
 	text-shadow: 0 1px 1px #fff;
 	color: @gray;
+	transition: all .3s ease;
 
 	&:hover,
 	&:focus {
@@ -100,6 +105,15 @@ nav {
 		color: @link-color;
 		outline: 0;
 	}
+	&-youtube .icon {
+		color: @color-youtube;
+	}
+	&-vimeo .icon {
+		color: @color-vimeo;
+	}
+	&-twitter .icon {
+		color: @color-twitter;
+	}
 }
 .btn-primary {
 	background-image: linear-gradient(@link-color, darken(@link-color, 3%));
@@ -123,8 +137,8 @@ nav {
 // Count bubble
 .btn-count {
 	position: relative;
-	margin-left: 6px;
-	padding: ((@padding-base / 2) - 1px);
+	margin-left: (@padding-base / 2);
+	padding: (@padding-base / 2) (@padding-base * .75);
 	background: #fff;
 	border: 1px solid @gray-light;
 
diff --git a/docs/src/less/components/examples.less b/docs/src/less/components/examples.less
index f468e1a8..8c0b689e 100644
--- a/docs/src/less/components/examples.less
+++ b/docs/src/less/components/examples.less
@@ -3,46 +3,46 @@
 // ==========================================================================
 
 // Example players
-.example-audio .player,
-.example-video .player {
+.player {
     margin: 0 auto @padding-base;
 
     &-controls {
         border-radius: 0 0 @border-radius-base @border-radius-base;
     }
 }
-.example-audio .player {
+.player-audio {
     max-width: @example-width-audio;
 
-    &-controls {
+    .player-controls {
         border-radius: @border-radius-base;
     }
-    &-progress {
+    .player-progress {
         border-radius: @border-radius-base @border-radius-base 0 0;
         overflow: hidden;
     }
 }
-// Base styles
-.example-video .player {
+.player-video,
+.player-youtube,
+.player-vimeo {
     max-width: @example-width-video;
-
-    video,
-    iframe {
-        border-radius: @border-radius-base;
-    }
-    iframe {
-        -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
-    }
+}
+video,
+.player-video-embed {
+    border-radius: @border-radius-base;
+}
+.player-video-embed {
+    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
 }
 
 // Style full supported player
-.example-video .player-video,
-.example-video .player-youtube {
+.player-video,
+.player-youtube,
+.player-vimeo {
     video,
-    iframe {
+    .player-video-embed {
         border-radius: @border-radius-base @border-radius-base 0 0;
     }
-    &-fullscreen,
+    &.player-fullscreen,
     &.fullscreen-active {
         max-width: none;
 
@@ -55,8 +55,4 @@
             -webkit-mask-image: none;
         }
     }
-}
-.example-video .player-vimeo .player-video-embed {
-    border-radius: @border-radius-base @border-radius-base 0 0;
-    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
 }
\ No newline at end of file
diff --git a/docs/src/less/components/icons.less b/docs/src/less/components/icons.less
new file mode 100644
index 00000000..882ce25d
--- /dev/null
+++ b/docs/src/less/components/icons.less
@@ -0,0 +1,22 @@
+// ==========================================================================
+// Icons
+// ==========================================================================
+
+// Base size icon styles
+.icon {
+	fill: currentColor;
+	width: @icon-size;
+	height: @icon-size;
+	vertical-align: -3px;
+}
+
+// Within elements
+a svg,
+button svg,
+label svg {
+	pointer-events: none;
+}
+a .icon,
+.btn .icon {
+	margin-right: (@padding-base / 2);
+}
\ No newline at end of file