_refills-nav.scss in refills-0.2.0

- old
+ new

@@ -1,34 +1,35 @@
-$sidebar-width: em(200);
+$sidebar-width: 12.5em;
 
 section.inner-content {
   margin-left: auto;
 }
 
 .refills-menu-anchor {
   @include position(fixed, 4.5em null null 1em);
   @include size(50px);
-  border: 1px solid darken(desaturate(#93e9be, 50), 15%);
+  border: 1px solid $refills-secondary-anchor-color;
   border-radius: 50%;
   cursor: pointer;
   display: inline-block;
-  font-size: 1em;
-  padding: 0.7em 1em;
+  fill: $refills-secondary-anchor-color;
   margin-bottom: 1.5em;
+  padding-top: 0.9em;
+  text-align: center;
   transition: all 0.2s ease-in-out;
   z-index: 9999;
 
   &.fixedsticky-on {
-    margin-top: -3.5em;
+    margin-top: 0;
   }
 
   &.fixedsticky-off {
     position: fixed;
   }
 
   img {
-    @include size(30px 26px);
+    @include size(30px, 26px);
     max-width: 100%;
   }
 }
 
 .refills-menu-anchor-moved {
@@ -38,14 +39,14 @@
 .fixedsticky-dummy {
   height: 0 !important;
 }
 
 .refills-menu-screen {
-  @include position(fixed, 0 0 0 0);
-  @include transition;
+  @include position(fixed, 0);
   background-color: teal;
   opacity: 0;
+  transition: all 0.15s ease-out;
   visibility: hidden;
   z-index: 999998;
 
   &.is-visible {
     opacity: 0;
@@ -59,17 +60,16 @@
 }
 
 .er_toc {
   $base-line-height: 1.5em !default;
   @include position(fixed, 0 auto 0 0);
-  @include size(220px 100%);
-  @include transform(translateX(-220px));
-  @include transition(all 0.2s linear);
+  @include size(220px, 100%);
   background-color: black;
-  overflow-y: auto;
   -webkit-font-smoothing: antialiased;
   -webkit-overflow-scrolling: touch;
+  overflow-y: auto;
+  transform: translateX(-220px);
   transition: all 0.2s linear;
   z-index: 999999;
 
   ul {
     margin: 0;
@@ -101,8 +101,8 @@
   ul ul li a {
     font-weight: 200;
   }
 
   &.is-visible {
-    @include transform(translateX(0));
+    transform: translateX(0);
   }
 }