source/stylesheets/_refills-nav.scss in refills-0.0.2 vs source/stylesheets/_refills-nav.scss in refills-0.1.0

@@ -3,89 +3,106 @@
 section.inner-content {
   margin-left: auto;
 }
 
 .refills-menu-anchor {
-  @include inline-block;
-  cursor: pointer;
-  border: 1px solid gray;
-  height: 50px;
-  width: 50px;
-  padding: .7em 1em;
+  @include position(fixed, 4.5em null null 1em);
+  @include size(50px);
+  border: 1px solid darken(desaturate(#93e9be, 50), 15%);
   border-radius: 50%;
-  font-size: $base-font-size;
-  margin-bottom: $base-line-height;
-  position: fixed;
-  top: 1em;
-  left: 1em;
+  cursor: pointer;
+  display: inline-block;
+  font-size: 1em;
+  padding: 0.7em 1em;
+  margin-bottom: 1.5em;
+  transition: all 0.2s ease-in-out;
   z-index: 9999;
 
+  &.fixedsticky-on {
+    margin-top: -3.5em;
+  }
+
+  &.fixedsticky-off {
+    position: fixed;
+  }
+
   img {
-    height: 26px;
-    width: 30px;
+    @include size(30px 26px);
+    max-width: 100%;
   }
 }
 
+.refills-menu-anchor-moved {
+  top: 1em;
+}
+
+.fixedsticky-dummy {
+  height: 0 !important;
+}
+
 .refills-menu-screen {
-  @include position(fixed, 0px 0px 0px 0px);
+  @include position(fixed, 0 0 0 0);
   @include transition;
-  background: teal;
+  background-color: teal;
   opacity: 0;
   visibility: hidden;
   z-index: 999998;
 
   &.is-visible {
     opacity: 0;
     visibility: visible;
   }
 }
 
-.er_toc_title {
-  display: none;
-}
-
+.er_toc_title,
 .er_toc_top {
   display: none;
 }
 
 .er_toc {
-  @include position(fixed, 0px auto 0px 0px);
+  $base-line-height: 1.5em !default;
+  @include position(fixed, 0 auto 0 0);
   @include size(220px 100%);
   @include transform(translateX(-220px));
-  @include transition(all .2s linear);
-  overflow-y: scroll;
+  @include transition(all 0.2s linear);
+  background-color: black;
+  overflow-y: auto;
+  -webkit-font-smoothing: antialiased;
   -webkit-overflow-scrolling: touch;
-  background: #1D3842;
+  transition: all 0.2s linear;
   z-index: 999999;
 
   ul {
+    margin: 0;
     padding: 1em;
   }
 
-  ul li {    
+  ul li {
     a {
-      color: $light-gray;
-      font-weight: 800;
-      font-size: $base-font-size;
+      color: darken(#fff, 15%);
+      font-size: 1em;
+      font-weight: 300;
+      line-height: $base-line-height;
+      text-decoration: none;
 
+      &:focus,
       &:hover {
-        color: #FFF;
+        color: #fff;
         text-decoration: none;
       }
     }
   }
 
   ul ul {
-    margin-top: .5em;
     margin-bottom: 1em;
+    margin-top: 0.5em;
     padding: 0;
   }
 
   ul ul li a {
     font-weight: 200;
   }
-  
+
   &.is-visible {
     @include transform(translateX(0));
   }
 }
-