ESLint, comments, quality and speed menus

1 files changed, 135 insertions, 125 deletions

diff --git a/demo/src/less/components/buttons.less b/demo/src/less/components/buttons.less
index d1538967..c99a0836 100644
--- a/demo/src/less/components/buttons.less
+++ b/demo/src/less/components/buttons.less
@@ -3,160 +3,170 @@
 // ==========================================================================
 
 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;
-    }
+	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;
-    white-space: nowrap;
-
-    &::before {
-        content: "";
-        position: absolute;
-        top: 50%;
-        left: 0;
-        right: 0;
-        height: 1px;
-        background: @off-white;
-    }
-
-    ul {
-        position: relative;
-        z-index: 1;
-        display: inline-block;
-    }
-    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);
-            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);
-    }
+	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;
+	display: inline-block;
+	vertical-align: middle;
+	border-radius: @border-radius-base;
+	user-select: none;
+	font-weight: @font-weight-bold;
 }
 
 // Buttons
 .btn {
-    padding: (@padding-base / 2) ((@padding-base / 2) + 2);
-    background: #fff;
-    border: 1px solid @gray-lighter;
-    color: @gray;
-    transition: all .2s ease;
-    .font-size(@font-size-small);
-
-    &:hover,
-    &:focus {
-        border-color: @gray-light;
-    }
+	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();
+	padding: (@padding-base / 2) @padding-base;
+	.font-size();
 }
 
 // Styles
 .btn--primary {
-    background-color: @link-color;
-    border-color: @link-color;
-    color: #fff;
-
-    &:hover,
-    &:focus {
-        color: #fff;
-        border-color: darken(@link-color, 5%);
-    }
+	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;
+	color: @color-youtube;
 }
 .btn--vimeo .icon {
-    color: @color-vimeo;
+	color: @color-vimeo;
 }
 .btn--twitter .icon {
-    color: @color-twitter;
+	color: @color-twitter;
 }
 
 // Count bubble
 .btn__count {
-    position: relative;
-    margin-left: (@padding-base / 2);
-    padding: (@padding-base / 2) (@padding-base * .75);
-    background: #fff;
-    border: 1px solid @gray-lighter;
-
-    &::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%);
-    }
+	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%);
+	}
 }