Add hover arrow

readme.md

@@ -3,11 +3,10 @@
 On a web project, run the following commands to install Essence:
 
 ```shell
-git submodule add path/to/repo/of/essence
-git mv essence resources/essence
+git submodule add https://git.insterprise.com/leo/essence.git resources/essence
 ```
 
-Import Essence from your SASS file:
+Import Essence from your main SASS file such a `app.scss`:
 
 ```scss
 @import 'path/to/essence';

scss/_variables.scss

@@ -5,3 +5,5 @@ $success-50:   hsl(134, 100%, 93%) !default;
 $info-50:      hsl(215, 100%, 97%) !default;
 $warning-50:   hsl(50, 100%, 96%) !default;
 $danger-50:    hsl(350, 100%, 96%) !default;
+
+$secondary-25: hsl(200, 26%, 96%) !default;

scss/bootstrap/_navbar.scss

@@ -1,9 +1,18 @@
-.navbar {
+.essence-navbar.navbar {
   z-index: 1040;
   background-image: none;
 
   .nav-link {
+    border-radius: 0.5rem;
     white-space: nowrap;
+
+    &:hover {
+      @include media-breakpoint-up(md) {
+        background-color: $secondary-25;
+      }
+
+      color: black;
+    }
   }
 
   &.navbar-dark {

scss/bootstrap/_variables.scss

@@ -35,6 +35,7 @@ $spacers: (
         0: 0,
         1: $spacer * .25,
         2: $spacer * .5,
+        25: $spacer * .75,
         3: $spacer,
         4: $spacer * 1.5,
         45: $spacer * 2,

scss/elements/_hover-arrow.scss

@@ -0,0 +1,34 @@
+.hover-arrow {
+  --arrow-spacing: 5px;
+  --arrow-hover-transition: 150ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  --arrow-hover-offset: translateX(3px);
+  --arrow-tip-transform: none;
+  --arrow-line-opacity: 0;
+
+  position: relative;
+  top: var(--arrow-top, -1px);
+  margin-left: var(--arrow-spacing);
+  stroke-width: 2px;
+  fill: none;
+  stroke: currentColor;
+
+  .hover-arrow-line {
+    opacity: var(--arrow-line-opacity);
+    transition: opacity var(--hoverTransition, var(--arrow-hover-transition));
+  }
+  .hover-arrow-tip {
+    transform: var(--arrow-tip-transform);
+    transition: transform var(--hoverTransition, var(--arrow-hover-transition));
+  }
+}
+
+@media (pointer: fine) {
+  a:hover, button:hover {
+    .hover-arrow-line {
+      --arrow-line-opacity: 1;
+    }
+    .hover-arrow-tip {
+      --arrow-tip-transform: var(--arrow-hover-offset);
+    }
+  }
+}

scss/essence.scss

@@ -23,6 +23,7 @@
 @import 'elements/footer';
 @import 'elements/radio';
 @import 'elements/step-progress-bar';
+@import 'elements/hover-arrow';
 
 // Vendors
 @import 'vendors/prismjs';