aboutsummaryrefslogtreecommitdiffstats
path: root/demo/src/sass/components/links.scss
diff options
context:
space:
mode:
Diffstat (limited to 'demo/src/sass/components/links.scss')
-rw-r--r--demo/src/sass/components/links.scss49
1 files changed, 49 insertions, 0 deletions
diff --git a/demo/src/sass/components/links.scss b/demo/src/sass/components/links.scss
new file mode 100644
index 00000000..b2930862
--- /dev/null
+++ b/demo/src/sass/components/links.scss
@@ -0,0 +1,49 @@
+// ==========================================================================
+// Links
+// ==========================================================================
+
+// Make a <button> look like an <a>
+button.faux-link {
+ @extend a; // stylelint-disable-line
+ @include cancel-button-styles();
+}
+
+// Links
+a {
+ border-bottom: 1px dotted currentColor;
+ color: $color-link;
+ font-weight: $font-weight-bold;
+ position: relative;
+ text-decoration: none;
+ transition: all 0.2s ease;
+
+ &::after {
+ background: currentColor;
+ content: '';
+ height: 1px;
+ left: 50%;
+ position: absolute;
+ top: 100%;
+ transform: translateX(-50%);
+ transition: width 0.2s ease;
+ width: 0;
+ }
+
+ &:hover,
+ &:focus {
+ border-bottom-color: transparent;
+ outline: 0;
+
+ &::after {
+ width: 100%;
+ }
+ }
+
+ &.tab-focus {
+ @include tab-focus();
+ }
+
+ &.no-border::after {
+ display: none;
+ }
+}