From dce75ccd92f3a0e822474f5eae924b6a858b921a Mon Sep 17 00:00:00 2001
From: Roman Hotsiy <gotsijroman@gmail.com>
Date: Sat, 9 Jan 2016 22:30:55 +0200
Subject: [PATCH] Refactored tabs styling from inside the component

---
 lib/common/components/Tabs/tabs.js             |  3 +--
 lib/common/components/Tabs/tabs.scss           | 13 ++-----------
 .../ResponsesSamples/responses-samples.scss    | 18 ++++++++++++++++++
 3 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/lib/common/components/Tabs/tabs.js b/lib/common/components/Tabs/tabs.js
index be638353..f091afa9 100644
--- a/lib/common/components/Tabs/tabs.js
+++ b/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>
   `,
diff --git a/lib/common/components/Tabs/tabs.scss b/lib/common/components/Tabs/tabs.scss
index d2ea6989..dc2f5e53 100644
--- a/lib/common/components/Tabs/tabs.scss
+++ b/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 {
diff --git a/lib/components/ResponsesSamples/responses-samples.scss b/lib/components/ResponsesSamples/responses-samples.scss
index c6139acb..a8b3481f 100644
--- a/lib/components/ResponsesSamples/responses-samples.scss
+++ b/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;
+}