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/_styles.scss

@@ -1,3 +1,7 @@
+.leader {
+  font-size: 1.125rem;
+}
+
 .smaller {
   font-size: 0.9375em;
 }

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/_dropdown.scss

@@ -0,0 +1,25 @@
+// Make dropdown menus auto drop
+@include media-breakpoint-up(md) {
+  .dropdown {
+    .dropdown-menu {
+      display: block;
+      opacity: 0;
+      transition: opacity .15s linear;
+      pointer-events: none; // Prevent auto show when mouse is below top menu item
+      min-width: 190px;
+    }
+
+    &:hover {
+      .dropdown-menu {
+        display: block;
+        opacity: 1;
+        pointer-events: auto; // Prevent auto hide when mouse is in dropdown menu
+      }
+    }
+
+    .dropdown-menu-end {
+      right: 0;
+      left: auto;
+    }
+  }
+}

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 {
@@ -11,30 +20,4 @@
       color: #fff;
     }
   }
-
-  // Make dropdown menus auto drop
-  @include media-breakpoint-up(md) {
-    .dropdown {
-      .dropdown-menu {
-        display: block;
-        opacity: 0;
-        transition: all .15s linear;
-        pointer-events: none; // Prevent auto show when mouse is below top menu item
-        min-width: 190px;
-      }
-
-      &:hover {
-        .dropdown-menu {
-          display: block;
-          opacity: 1;
-          pointer-events: auto; // Prevent auto hide when mouse is in dropdown menu
-        }
-      }
-
-      .dropdown-menu-end {
-        right: 0;
-        left: auto;
-      }
-    }
-  }
 }

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,
@@ -102,9 +103,6 @@ $dropdown-link-hover-bg: hsl(200, 36%, 95%);
 $card-border-width: 0;
 $card-box-shadow: 0 .125rem .25rem rgba($black, .075);
 
-// Breadcrumb
-$breadcrumb-divider: quote(">");
-
 // Code
 $code-font-size: 100% !default;
 $code-color: $purple !default;

scss/bootstrap/helpers/_icon_link.scss

@@ -0,0 +1,7 @@
+.icon-link {
+  gap: 0;
+
+  i::before {
+    display: inline-block;
+  }
+}

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/elements/_sidebar.scss

@@ -32,6 +32,7 @@
 
   .sidebar-link {
     padding: 0.5rem 1rem;
+    margin: 0.125rem 0;
     border-radius: 0.5rem;
     color: $secondary;
     text-decoration: none;
@@ -42,7 +43,7 @@
     }
 
     &:hover {
-      color: $gray-800;
+      color: $black;
       background-color: $gray-200;
       text-decoration: none;
     }

scss/essence.scss

@@ -10,17 +10,20 @@
 // Bootstrap components
 @import 'bootstrap/reboots';
 @import 'bootstrap/buttons';
+@import 'bootstrap/dropdown';
 @import 'bootstrap/nav';
 @import 'bootstrap/navbar';
 @import 'bootstrap/pagination';
-
 @import 'bootstrap/code';
 
+@import 'bootstrap/helpers/icon_link';
+
 // Essence components
 @import 'elements/sidebar';
 @import 'elements/footer';
 @import 'elements/radio';
 @import 'elements/step-progress-bar';
+@import 'elements/hover-arrow';
 
 // Vendors
 @import 'vendors/prismjs';

scss/vendors/_prismjs.scss

@@ -1,135 +1,150 @@
 /**
- * Prism Essence Theme, based on Material Theme.
+ * Essence's Prism Theme, based on Material Theme, but brighter.
  *
  * Author: Leo Nguyen
  */
-$prism-bg:     hsl(220, 25%, 25%);
-$prism-gray:   hsl(230, 40%, 70%);
-$prism-red:    hsl(0, 100%, 80%);
-$prism-orange: hsl(15, 90%, 70%);
-$prism-yellow: hsl(50, 100%, 75%);
-$prism-green:  hsl(100, 80%, 80%);
-$prism-cyan:   hsl(200, 100%, 80%);
-$prism-blue:   hsl(230, 100%, 80%);
-$prism-purple: hsl(275, 100%, 80%);
+:root {
+  --prism-bg:     hsl(220, 15%, 20%);
+  --prism-gray:   hsl(210, 30%, 65%);
+  --prism-red:    hsl(0, 100%, 80%);
+  --prism-orange: hsl(30, 100%, 75%);
+  --prism-yellow: hsl(50, 90%, 70%);
+  --prism-green:  hsl(100, 80%, 80%);
+  --prism-cyan:   hsl(190, 100%, 80%);
+  --prism-blue:   hsl(220, 100%, 85%);
+  --prism-purple: hsl(275, 100%, 80%);
+}
+
+/*.prism-theme-material {
+  --prism-bg:     #263238;
+  --prism-gray:   #546e7a;
+  --prism-red:    #f07178;
+  --prism-orange: #f78c6c;
+  --prism-yellow: #ffcb6b;
+  --prism-green:  #c3e88d;
+  --prism-cyan:   #89ddff;
+  --prism-blue:   #82aaff;
+  --prism-purple: #c792ea;
+}*/
 
 pre {
   margin: 0.5rem 0 1rem;
   padding: 1.5rem;
   border-radius: 0.5rem;
-  background: $prism-bg;
-  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-  font-size: 1rem;
+  background: var(--prism-bg);
   line-height: 1.5;
   overflow: auto;
   white-space: pre;
   word-spacing: normal;
-  word-break: normal;
-  word-wrap: normal;
   tab-size: 4;
   hyphens: none;
 
   code {
     padding: 0;
     color: #fff;
-    background: $prism-bg;
+    background: var(--prism-bg);
   }
 }
 
-/* Purple (keyword) */
-.token.keyword,
-.token.important,
-.token.builtin,
-.token.atrule {
-  color: $prism-purple;
-}
-
-/* Yellow (entity, class) */
-.token.entity,
-.token.class,
-.token.name,
-.token.class-name,
-.token.package,
-.token.scope,
-.token.attr-name {
-  color: $prism-yellow;
-}
-
-/* Blue (function) */
-.token.function-name,
-.token.function {
-  color: $prism-blue;
-}
-
-/* Red (tag) */
-.token.tag,
-.token.namespace,
-.token.selector,
-.token.deleted {
-  color: $prism-red;
-}
-
-/* Green (string, attribute) */
-.token.string,
-.token.char,
-.token.property,
-.token.attr-value,
-.token.regex {
-  color: $prism-green;
-}
-
-/* Orange (number, literal) */
-.token.number,
-.token.boolean,
-.token.constant {
-  color: $prism-orange;
-}
-
-/* Cyan (sign) */
-.token.symbol,
-.token.punctuation,
-.token.operator,
-.token.url,
-.token.unit,
-.token.hexcode,
-.token.doctype-tag {
-  color: $prism-cyan;
-}
-
-/* White (variable, CSS pseudo class) */
-.token.variable,
-.token.pseudo-class {
-  color: #fff;
-}
-
-/* Gray (comment) */
-.token.comment,
-.token.block-comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: $prism-gray;
-}
-
-.token.important,
-.token.bold {
-  font-weight: bold;
-}
-.token.italic {
-  font-style: italic;
-}
-
-.token.entity {
-  cursor: help;
-}
-
-.token.inserted {
-  color: green;
-}
-
-div.code-toolbar > .toolbar > .toolbar-item > a, div.code-toolbar > .toolbar > .toolbar-item > button, div.code-toolbar > .toolbar > .toolbar-item > span {
+div.code-toolbar > .toolbar > .toolbar-item > a,
+div.code-toolbar > .toolbar > .toolbar-item > button,
+div.code-toolbar > .toolbar > .toolbar-item > span {
   padding: 0.5em 1em;
   margin: 0.25em 0.5em;
   font-size: 0.9em;
   color: #eee;
 }
+
+.token {
+  /* Red (constant, tag, selector) */
+  &.constant,
+  &.tag,
+  &.selector,
+  &.namespace,
+  &.deleted {
+    color: var(--prism-red);
+  }
+
+  /* Orange/Red (number, boolean, constant) */
+  &.number,
+  &.boolean {
+    color: var(--prism-orange);
+  }
+
+  /* Yellow (entity, class) */
+  &.entity,
+  &.class,
+  &.name,
+  &.class-name,
+  &.package,
+  &.scope,
+  &.attr-name {
+    color: var(--prism-yellow);
+  }
+
+  /* Green (string, attribute) */
+  &.string,
+  &.char,
+  &.property,
+  &.attr-value,
+  &.regex {
+    color: var(--prism-green);
+  }
+
+  /* Cyan (symbol) */
+  &.symbol,
+  &.punctuation,
+  &.operator,
+  &.url,
+  &.unit,
+  &.hexcode,
+  &.doctype-tag {
+    color: var(--prism-cyan);
+  }
+
+  /* Blue (function) */
+  &.function-name,
+  &.function {
+    color: var(--prism-blue);
+  }
+
+  /* Purple (keyword) */
+  &.keyword,
+  &.important,
+  &.builtin,
+  &.atrule {
+    color: var(--prism-purple);
+  }
+
+  /* White (variable, CSS pseudo class) */
+  &.variable,
+  &.pseudo-class {
+    color: #fff;
+  }
+
+  /* Gray (comment) */
+  &.comment,
+  &.block-comment,
+  &.prolog,
+  &.doctype,
+  &.cdata {
+    color: var(--prism-gray);
+  }
+
+  // &.important,
+  &.bold {
+    font-weight: bold;
+  }
+
+  &.italic {
+    font-style: italic;
+  }
+
+  &.entity {
+    cursor: help;
+  }
+
+  &.inserted {
+    color: green;
+  }
+}