WIP React > Svelte

Put most of the developed design into Svelte
2020-02-11 15:09:32 +01:00
parent 61e45cb171
commit 9b0c154f61
95 changed files with 3627 additions and 9464 deletions
--- a/src/style/atoms/_link.scss
+++ b/src/style/atoms/_link.scss
@@ -0,0 +1,55 @@
+// Change link
+.link-change {
+    position: relative;
+    display: inline-block;
+    margin: 0 6px;
+    padding: 0 8px;
+    color: $color-secondary;
+    text-decoration: none;
+    transition: color 200ms ease;
+
+    // Line
+    &:after {
+        content: "";
+        position: absolute;
+        z-index: -1;
+        background-color: rgba($color-secondary, .22);
+        height: 14px;
+        width: 100%;
+        bottom: 5px;
+        left: 0;
+        border-radius: 50vh;
+        transition: all 200ms ease;
+    }
+
+    // Icon
+    .icon {
+        position: relative;
+        z-index: 3;
+        top: -3px;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        width: 22px;
+        height: 22px;
+        margin-left: 6px;
+        background-color: #fff;
+        border-radius: 50vh;
+
+        svg {
+            height: auto;
+        }
+    }
+
+    // Hover
+    &:hover {
+        color: $color-text;
+
+        &:after {
+            background-color: rgba($color-secondary, .4);
+        }
+        svg * {
+            animation-play-state: running;
+        }
+    }
+}