_tooltip.scss in refills-0.2.0

- old
+ new

@@ -1,31 +1,22 @@
-.tooltip-item {  
-  ///////////////////////////////////////////////////////////////////////////////////
+.tooltip-item {
   $base-border-color: gainsboro !default;
   $base-border-radius: 3px !default;
   $base-line-height: 1.5em !default;
   $dark-gray: #333 !default;
   $base-font-color: $dark-gray !default;
-  
-  p {
-    color: $base-font-color;
-    line-height: $base-line-height;
-    margin: 0;
-  }
-  //////////////////////////////////////////////////////////////////////////////////
-
   $tooltip-background: white;
   $tooltip-color: $base-font-color;
   $tooltip-max-width: 16em;
   $tooltip-arrow-width: 8px;
   $tooltip-shadow: 0 2px 2px silver;
   $tooltip-distance-from-item: 3em;
   $tooltip-arrow-distance-from-box: -1.3em;
 
   background: $tooltip-background;
-  border-radius: $base-border-radius;
   border: 1px solid $base-border-color;
+  border-radius: $base-border-radius;
   display: inline-block;
   padding: 0.5em 1em;
   position: relative;
   text-align: center;
 
@@ -35,11 +26,10 @@
     visibility: visible;
   }
 
   .tooltip {
     @include position(absolute, null 0 $tooltip-distance-from-item 0);
-    @include transition (all 0.2s ease-in-out);
     background-color: $tooltip-background;
     background: #fff;
     border-radius: $base-border-radius;
     box-shadow: $tooltip-shadow;
     color: $tooltip-color;
@@ -48,22 +38,25 @@
     margin: 0 auto;
     max-width: $tooltip-max-width;
     opacity: 0;
     padding: 1em;
     text-align: center;
+    transition: all 0.2s ease-in-out;
     visibility: hidden;
     z-index: 10;
 
     p {
-      margin-bottom: 0;
+      color: $base-font-color;
+      line-height: $base-line-height;
+      margin: 0;
     }
 
-    &:after {
-      @include position(absolute, null 0 null 0);
+    &::after {
+      @include position(absolute, null 0);
       border: $tooltip-arrow-width solid transparent;
       bottom: $tooltip-arrow-distance-from-box;
       color: $tooltip-background;
-      content: '▼';
+      content: "▼";
       font-size: 1.4em;
       margin-left: -$tooltip-arrow-width;
       text-align: center;
       text-shadow: $tooltip-shadow;
     }