share

assets/js/theme/design-system/dropdowns.js

@@ -23,7 +23,7 @@ class Dropdown {
 }
 
 // Selectors
-['.diplomas-select'].map(selector => {
+['.diplomas-select', '.dropdown-share'].map(selector => {
     if (document.querySelector(selector)) {
         new Dropdown(selector);
     }

assets/sass/_theme/design-system/nav.sass

@@ -157,19 +157,23 @@ body
     a
         font-size: px2rem(13)
         text-decoration: none
-        padding: 0.75rem
+        padding: $spacing0
+        display: block
+        &::before
+            font-size: px2rem(13)
         &:hover
             opacity: 0.7
         &::after
             content: none
-        &:last-child
-            margin-right: -0.75rem
+        // &:last-child
+            // margin-right: -0.75rem
 
     span
         display: none
         vertical-align: middle
 
 .dropdown-share
+    position: relative
     > button
         @include button-reset
         color: $hero-color
@@ -178,13 +182,26 @@ body
         font-size: $program-share-font-size
         @include icon(social, after)
             margin-left: px2rem(10)
-    ul
-        display: none
     .dropdown-menu
+        background: invert($hero-background-color)
         padding: 0
+        position: absolute
+        width: 100%
+        bottom: 100%
         .share
+            display: flex
             li
                 margin: 0
+                flex: 1 1
+                text-align: center
         a
-            // @extend .dropdown-item
-            color: $body-color
+            color: invert($hero-color)
+
+
+[aria-expanded="false"] + .dropdown-menu
+    display: none
+[aria-expanded="true"] + .dropdown-menu
+    display: block
+    animation-duration: 0.3s
+    animation-fill-mode: both
+    animation-name: showIn
\ No newline at end of file