Minor fixes

cristianstan · Jun 6, 2015 · 2457f16 · 2457f16
1 parent 3aaa21c
commit 2457f16
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 14 deletions.
diff --git a/css/sonar.css b/css/sonar.css
diff --git a/css/sonar.min.css b/css/sonar.min.css
diff --git a/index.html b/index.html
@@ -100,9 +100,9 @@ <h1 class="title">sonar.<span class="text-muted" style="color:#ccc">s</span>css<
         </p>
     </div>
     <div class="container text-left" style="margin-top:50px;">
-        <h2 class="text-center">documentation</h2>
+        <h2 class="text-center sonar sonar-stroke sonar-primary sonar-delay-longer">documentation</h2>
 
-        <div class="row" style="margin-top:30px">
+        <div class="row" style="margin-top:150px">
           <div class="col-md-6 col-xs-6">
             <h4 id="getting-started"><a href="#getting-started">#</a> Getting started</h4>
             <p>Add <code>sonar</code> as a class to any element to activate.</p>
@@ -168,7 +168,7 @@ <h4 id="colors"><a href="#colors">#</a> Colors</h4>
           </div>
         </div>
 
-        <div style="margin-top:150px;"></div>
+        <div style="margin-top:250px;"></div>
     </div>
 </body>
 

diff --git a/sass/sonar.scss b/sass/sonar.scss
@@ -58,6 +58,26 @@
       @include prefixer(animation-delay, $time-faster);
     }
   }
+  &.sonar-slow{
+    &::after{
+      @include prefixer(animation-duration, $time-slow);
+    }
+  }
+  &.sonar-slower{
+    &::after{
+      @include prefixer(animation-duration, $time-slower);
+    }
+  }
+  &.sonar-fast{
+    &::after{
+      @include prefixer(animation-duration, $time-fast);
+    }
+  }
+  &.sonar-faster{
+    &::after{
+      @include prefixer(animation-duration, $time-faster);
+    }
+  }
   &.sonar-stroke {
     &::after {
       border-width: 0;
@@ -104,7 +124,6 @@
       &:hover {
         &::after {
           @include animation("sonar-base, sonar-stroke");
-          @include prefixer(animation-duration, $duration-base);
         }
       }
     }
@@ -115,7 +134,6 @@
       &:focus {
         &::after {
           @include animation("sonar-base, sonar-stroke");
-          @include prefixer(animation-duration, $duration-base);
         }
       }
     }