aboutsummaryrefslogtreecommitdiffstats
path: root/demo/src/sass/components/links.scss
diff options
context:
space:
mode:
authorSam Potts <sam@potts.es>2018-03-17 23:30:16 +1100
committerSam Potts <sam@potts.es>2018-03-17 23:30:16 +1100
commit600f0eb8a3cf49f5268e5c15487797d496bc19b6 (patch)
treeae7d43ee753035458e5927b66eb588ff26d58afd /demo/src/sass/components/links.scss
parente0562752eaa4553466b78fb6828d05147a0891d1 (diff)
parent5db73b13276bf50357cc98896421318de66ab042 (diff)
downloadplyr-600f0eb8a3cf49f5268e5c15487797d496bc19b6.tar.lz
plyr-600f0eb8a3cf49f5268e5c15487797d496bc19b6.tar.xz
plyr-600f0eb8a3cf49f5268e5c15487797d496bc19b6.zip
Merge branch 'beta'
# Conflicts: # readme.md
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;
+ }
+}