Tweak CSS

Author: Tomdango

.storybook/_storybook.scss

@@ -35,3 +35,7 @@
   padding-top: 100px;
   padding-bottom: 100px;
 }
+
+.ribbonlink-demo {
+  padding: 20px;
+}

src/components/ribbon-link/_RibbonLink.scss

@@ -17,7 +17,6 @@
   width: 100%;
   border-radius: 4px;
   outline: none !important;
-  margin-top: 15px;
 
   &:hover,
   &:active,
@@ -34,7 +33,7 @@
   }
 
   &:active {
-    margin-top: 19px;
+    margin-top: 4px;
     border-bottom: 0px solid;
   }
 

stories/RibbonLink.stories.tsx

@@ -7,17 +7,17 @@ const stories = storiesOf('RibbonLink', module);
 
 stories
   .add('Cool Ribbon', () => (
-    <div style={{ padding: 20 }}>
+    <div className="ribbonlink-demo">
       <RibbonLink flavour="cool">Cool Ribbon</RibbonLink>
     </div>
   ))
   .add('Mild Ribbon', () => (
-    <div style={{ padding: 20 }}>
+    <div className="ribbonlink-demo">
       <RibbonLink flavour="mild">Mild Ribbon</RibbonLink>
     </div>
   ))
   .add('Hot Ribbon', () => (
-    <div style={{ padding: 20 }}>
+    <div className="ribbonlink-demo">
       <RibbonLink flavour="hot">Hot Ribbon</RibbonLink>
     </div>
   ))