Refactored tabs styling from inside the component

lib/common/components/Tabs/tabs.js

@@ -10,8 +10,7 @@ import {CORE_DIRECTIVES} from 'angular2/common';
   template: `
     <ul>
       <li *ngFor="#tab of tabs" [ngClass]="{active: tab.active}" (click)="selectTab(tab)"
-        class="tab-{{tab.tabStatus}}"> {{tab.tabTitle}}
-      </li>
+        class="tab-{{tab.tabStatus}}">{{tab.tabTitle}}</li>
     </ul>
     <ng-content></ng-content>
   `,

lib/common/components/Tabs/tabs.scss

@@ -3,24 +3,16 @@
 ul {
   display: block;
   margin: 0;
-  padding: 10px 0px 0 0;
+  padding: 0;
 }
 
 li {
-  font-size: 13px;
   list-style: none;
-  margin: 2px 0;
-  padding: 2px 5px;
   display: inline-block;
   cursor: pointer;
-  color: #8A9094;
-  line-height: 1.25;
-  color: $sample-panel-headers-color;
 }
 
 li.active {
-  background-color: white;
-  color: #666;
 }
 
 .tab-success, .tab-error, .tab-redirect, .tab-info {
@@ -31,9 +23,8 @@ li.active {
     height: 6px;
     width: 6px;
     border-radius: 50%;
+    margin-right: 0.5em;
   }
-
-
 }
 
 .tab-success:before {

lib/components/ResponsesSamples/responses-samples.scss

@@ -14,3 +14,21 @@ header {
   color: $sample-panel-headers-color;
   text-transform: uppercase;
 }
+
+:host tabs li {
+  font-size: 13px;
+  margin: 2px 0;
+  padding: 2px 5px;
+  color: #8A9094;
+  line-height: 1.25;
+  color: $sample-panel-headers-color;
+
+  &.active {
+    background-color: white;
+    color: #666;
+  }
+}
+
+:host tabs ul {
+  padding-top: 10px;
+}