Docs/demo refresh

10 files changed, 155 insertions, 314 deletions

diff --git a/demo/src/less/components/base.less b/demo/src/less/components/base.less
deleted file mode 100644
index 7e5f97c6..00000000
--- a/demo/src/less/components/base.less
+++ /dev/null
@@ -1,43 +0,0 @@
-// ==========================================================================
-// Base layout
-// ==========================================================================
-
-// BORDER-BOX ALL THE THINGS!
-// http://paulirish.com/2012/box-sizing-border-box-ftw/
-*, *::after, *::before {
-    box-sizing: border-box;
-}
-
-// Hidden
-[hidden] {
-    display: none;
-}
-
-// Base
-html {
-    height: 100%;
-    background: @body-background fixed;
-}
-body {
-    margin: 0 auto @padding-base;
-    padding: (@padding-base / 2);
-    max-width: @example-width-video;
-
-    @media (min-width: @screen-sm) {
-        margin-bottom: (@padding-base * 2);
-    }
-}
-
-// Header
-header {
-    padding: @padding-base;
-    margin-bottom: @padding-base;
-
-    p {
-        .font-size(18);
-    }
-    @media (min-width: @screen-sm) {
-        padding-top: (@padding-base * 3);
-        padding-bottom: (@padding-base * 3);
-    }
-}
\ No newline at end of file
diff --git a/demo/src/less/components/buttons.less b/demo/src/less/components/buttons.less
index c99a0836..ed605086 100644
--- a/demo/src/less/components/buttons.less
+++ b/demo/src/less/components/buttons.less
@@ -2,171 +2,65 @@
 // Buttons
 // ==========================================================================
 
-nav {
-	ul {
-		list-style: none;
-		margin: 0;
-		padding: 0;
-		font-size: 0;
-	}
-	li {
-		display: inline-block;
-		margin-top: (@padding-base / 2);
-		.font-size();
-		white-space: nowrap;
-	}
-	li + li {
-		margin-left: @padding-base;
-	}
-}
-
-// Tabs
-.btn__bar {
-	position: relative;
-	margin: 0 auto @padding-base;
-	max-width: @example-width-video;
-	white-space: nowrap;
-
-	&::before {
-		content: "";
-		position: absolute;
-		top: 50%;
-		left: 0;
-		right: 0;
-		height: 1px;
-		background: @gray-lighter;
-	}
-
-	ul {
-		position: relative;
-		z-index: 1;
-		display: inline-block;
-		user-select: none;
-	}
-	li {
-		margin: 0;
-
-		&:first-child .btn {
-			border-radius: 4px 0 0 4px;
-		}
-		&:last-child .btn {
-			border-radius: 0 4px 4px 0;
-		}
-		& + li .btn {
-			margin-left: -1px;
-		}
-
-		&.active .btn {
-			&:extend(.btn--primary);
-			box-shadow: inset 0 1px 1px rgba(0,0,0, .2);
-			position: relative;
-			z-index: 1;
-
-			.icon {
-				color: inherit;
-			}
-		}
-		&.active + li .btn:hover {
-			z-index: 0;
-		}
-	}
-	.btn {
-		position: relative;
-		display: block;
-		border-radius: 0;
-
-		&:hover,
-		&:focus {
-			z-index: 1;
-		}
-	}
-
-	@media (min-width: 560px) {
-		margin-bottom: (@padding-base * 2);
-	}
-}
-
 // Shared
-.btn,
-.btn__count {
-	display: inline-block;
-	vertical-align: middle;
-	border-radius: @border-radius-base;
-	user-select: none;
-	font-weight: @font-weight-bold;
+.button,
+.button__count {
+    position: relative;
+    display: inline-flex;
+    vertical-align: middle;
+    align-items: center;
+    padding: (@spacing-base * 0.75);
+
+    border-radius: @border-radius-base;
+    box-shadow: 0 1px 1px fade(#000, 10%);
+    background: #fff;
+    border: 0;
+
+    color: @gray;
+    user-select: none;
+    font-weight: @font-weight-bold;
+    text-shadow: none;
 }
 
 // Buttons
-.btn {
-	padding: (@padding-base / 2) ((@padding-base / 2) + 2);
-	background: linear-gradient(lighten(@off-white, 2%), darken(@off-white, 3%));
-	border: 1px solid @gray-light;
-	box-shadow: 0 1px 1px rgba(0,0,0, .05);
-	text-shadow: 0 1px 1px #fff;
-	color: @gray;
-	transition: background .1s ease, color .1s ease;
-	.font-size(@font-size-small);
-
-	&:hover,
-	&:focus {
-		border-color: darken(@gray-light, 8%);
-		color: @gray;
-		outline: 0;
-	}
-}
-
-// Sizes
-.btn--large {
-	padding: (@padding-base / 2) @padding-base;
-	.font-size();
-}
-
-// Styles
-.btn--primary {
-	background-image: linear-gradient(@link-color, darken(@link-color, 5%));
-	background-color: @link-color;
-	border-color: darken(@link-color, 10%);
-	box-shadow: 0 1px 1px rgba(0,0,0, .15);
-	text-shadow: 0 1px 1px rgba(0,0,0, .1);
-	color: #fff;
-
-	&:hover,
-	&:focus {
-		color: #fff;
-		border-color: darken(@link-color, 20%);
-	}
-}
-.btn--youtube .icon {
-	color: @color-youtube;
-}
-.btn--vimeo .icon {
-	color: @color-vimeo;
-}
-.btn--twitter .icon {
-	color: @color-twitter;
+.button {
+    padding-left: @spacing-base;
+    padding-right: @spacing-base;
+    transition: all 0.2s ease;
+
+    &:hover,
+    &:focus {
+        color: @gray-dark;
+        outline: 0;
+
+        &::after {
+            display: none;
+        }
+    }
+
+    &.tab-focus {
+        .tab-focus();
+    }
 }
 
 // Count bubble
-.btn__count {
-	position: relative;
-	margin-left: (@padding-base / 2);
-	padding: (@padding-base / 2) (@padding-base * .75);
-	background: #fff;
-	border: 1px solid @gray-light;
-
-	&::before {
-		content: "";
-		position: absolute;
-		display: block;
-		width: @arrow-size;
-		height: @arrow-size;
-		left: 1px;
-		top: 50%;
-		margin-top: -(@arrow-size / 2);
-
-		background: inherit;
-		border: inherit;
-		border-width: 1px 0 0 1px;
-		transform: rotate(-45deg) translate(-50%, -50%);
-	}
+.button__count {
+    margin-left: (@spacing-base / 2);
+    animation: fadein 0.2s ease;
+
+    &::before {
+        content: '';
+        position: absolute;
+        display: block;
+        width: @arrow-size;
+        height: @arrow-size;
+        left: 1px;
+        top: 50%;
+        margin-top: -(@arrow-size / 2);
+
+        background: inherit;
+        border: inherit;
+        border-width: 1px 0 0 1px;
+        transform: rotate(-45deg) translate(-50%, -50%);
+    }
 }
diff --git a/demo/src/less/components/error.less b/demo/src/less/components/error.less
deleted file mode 100644
index b1427173..00000000
--- a/demo/src/less/components/error.less
+++ /dev/null
@@ -1,19 +0,0 @@
-// ==========================================================================
-// Errors (AWS pages)
-// ==========================================================================
-
-// Error page
-html.error,
-.error body {
-    height: 100%;
-}
-.error body {
-    width: 100%;
-    display: table;
-    table-layout: fixed;
-}
-.error main {
-    display: table-cell;
-    width: 100%;
-    vertical-align: middle;
-}
\ No newline at end of file
diff --git a/demo/src/less/components/header.less b/demo/src/less/components/header.less
new file mode 100644
index 00000000..c5f8b1fe
--- /dev/null
+++ b/demo/src/less/components/header.less
@@ -0,0 +1,24 @@
+// ==========================================================================
+// Header
+// ==========================================================================
+
+header {
+    padding: @spacing-base;
+    text-align: center;
+
+    p {
+        .font-size(18);
+        margin-bottom: @spacing-base * 1.5;
+    }
+
+    @media @mq-sm {
+        padding-top: (@spacing-base * 3);
+        padding-bottom: (@spacing-base * 3);
+    }
+
+    @media @mq-md {
+        max-width: 400px;
+        margin-right: (@spacing-base * 2);
+        text-align: left;
+    }
+}
diff --git a/demo/src/less/components/icons.less b/demo/src/less/components/icons.less
index 9530b601..29f185bd 100644
--- a/demo/src/less/components/icons.less
+++ b/demo/src/less/components/icons.less
@@ -4,23 +4,19 @@
 
 // Base size icon styles
 .icon {
-	fill: currentColor;
-	width: @icon-size;
-	height: @icon-size;
-	vertical-align: -3px;
+    fill: currentColor;
+    width: @icon-size;
+    height: @icon-size;
 }
 
 // Within elements
 a svg,
 button svg,
 label svg {
-	pointer-events: none;
+    pointer-events: none;
 }
+
 a .icon,
 .btn .icon {
-	margin-right: (@padding-base / 2);
-}
-.btn:not(.btn-large) .icon {
-	width: (@icon-size - 2);
-	height: (@icon-size - 2);
+    margin-right: (@spacing-base / 2);
 }
diff --git a/demo/src/less/components/links.less b/demo/src/less/components/links.less
new file mode 100644
index 00000000..7a62ab40
--- /dev/null
+++ b/demo/src/less/components/links.less
@@ -0,0 +1,46 @@
+// ==========================================================================
+// Links
+// ==========================================================================
+
+// Make a <button> look like an <a>
+button.faux-link {
+    .cancel-button-styles();
+
+    &:extend(a all);
+}
+
+// Links
+a {
+    position: relative;
+    border-bottom: 1px dotted currentColor;
+    transition: all 0.2s ease;
+    text-decoration: none;
+    color: @color-link;
+    font-weight: @font-weight-bold;
+
+    &::after {
+        content: '';
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 0;
+        height: 1px;
+        transition: width 0.2s ease;
+        background: currentColor;
+    }
+
+    &:hover,
+    &:focus {
+        border-bottom-color: transparent;
+        outline: 0;
+
+        &::after {
+            width: 100%;
+        }
+    }
+
+    &.tab-focus {
+        .tab-focus();
+    }
+}
diff --git a/demo/src/less/components/lists.less b/demo/src/less/components/lists.less
new file mode 100644
index 00000000..bae3d11d
--- /dev/null
+++ b/demo/src/less/components/lists.less
@@ -0,0 +1,11 @@
+// ==========================================================================
+// Lists
+// ==========================================================================
+
+// Lists
+ul,
+li {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
diff --git a/demo/src/less/components/navigation.less b/demo/src/less/components/navigation.less
new file mode 100644
index 00000000..0b80f7e8
--- /dev/null
+++ b/demo/src/less/components/navigation.less
@@ -0,0 +1,9 @@
+// ==========================================================================
+// Navigation
+// ==========================================================================
+
+nav {
+    display: flex;
+    justify-content: center;
+    margin-bottom: @spacing-base;
+}
diff --git a/demo/src/less/components/examples.less b/demo/src/less/components/players.less
index a9e72d21..c0f3e965 100644
--- a/demo/src/less/components/examples.less
+++ b/demo/src/less/components/players.less
@@ -11,13 +11,11 @@ video {
 // Example players
 .plyr {
     margin: 0 auto;
-    border-radius: @border-radius-large;
-}
-.plyr--audio {
-    max-width: @example-width-audio;
+    border-radius: @border-radius-base;
+    box-shadow: 0 2px 5px fade(#000, 20%);
 }
 .plyr__video-wrapper::after {
-    content: "";
+    content: '';
     pointer-events: none;
     position: absolute;
     top: 0;
@@ -31,10 +29,10 @@ video {
 // Style full supported player
 .plyr__cite {
     display: none;
-    margin-top: @padding-base;
+    margin-top: @spacing-base;
 
     .icon {
-        margin-right: (@padding-base / 4);
+        margin-right: (@spacing-base / 4);
     }
 }
 
diff --git a/demo/src/less/components/type.less b/demo/src/less/components/type.less
deleted file mode 100644
index 8e621700..00000000
--- a/demo/src/less/components/type.less
+++ /dev/null
@@ -1,75 +0,0 @@
-// ==========================================================================
-// Typography
-// ==========================================================================
-
-// Base
-html {
-    font-size: 100%;
-}
-body {
-    font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
-    line-height: 1.5;
-    text-align: center;
-    color: @gray;
-    font-weight: @font-weight-base;
-    .font-smoothing();
-}
-
-// Headings
-h1,
-h2 {
-    letter-spacing: -.025em;
-    color: @brand-primary;
-    margin: 0 0 (@padding-base / 2);
-    line-height: 1.2;
-    font-weight: @font-weight-bold;
-}
-h1 {
-    .font-size(@font-size-h1);
-}
-
-// Paragraph and small
-p,
-small {
-    margin: 0 0 @padding-base;
-}
-small {
-    display: block;
-    padding: 0 (@padding-base / 2);
-    .font-size(@font-size-small);
-}
-
-// Lists
-ul,
-li {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-
-// Links
-a {
-    text-decoration: none;
-    color: @link-color;
-    border-bottom: 1px dotted currentColor;
-    transition: background 0.3s ease, color 0.3s ease, border 0.3s ease;
-
-    &:hover,
-    &:focus {
-        color: @gray-dark;
-        border-bottom-color: rgba(0, 0, 0, 0);
-    }
-    &:focus {
-        .tab-focus();
-    }
-    &.logo {
-        border: 0;
-    }
-}
-
-.color--vimeo {
-    color: @color-vimeo;
-}
-.color--youtube {
-    color: @color-youtube;
-}