Docs/demo refresh

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();
+    }
+}