From 33162af276c85a35088ab89d4cae0e688ccbb091 Mon Sep 17 00:00:00 2001
From: Alexander Zhukov <lexzhukovpro@gmail.com>
Date: Tue, 23 Oct 2018 14:56:20 +0300
Subject: [PATCH] feat(tabset): add style incapsulation for tabset components
 (#911)

Closes #561
---
 .../route-tabset/_route-tabset.component.theme.scss        | 4 ++--
 .../components/route-tabset/route-tabset.component.scss    | 6 +++---
 .../components/route-tabset/route-tabset.component.ts      | 5 +++--
 .../theme/components/tabset/_tabset.component.theme.scss   | 4 ++--
 .../theme/components/tabset/tabset.component.scss          | 7 ++++---
 src/framework/theme/components/tabset/tabset.component.ts  | 5 +++--
 6 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/framework/theme/components/route-tabset/_route-tabset.component.theme.scss b/src/framework/theme/components/route-tabset/_route-tabset.component.theme.scss
index b26c163c65..80bdfbc88a 100644
--- a/src/framework/theme/components/route-tabset/_route-tabset.component.theme.scss
+++ b/src/framework/theme/components/route-tabset/_route-tabset.component.theme.scss
@@ -12,14 +12,14 @@
         nb-theme(scrollbar-bg),
         nb-theme(scrollbar-width));
 
-    ul {
+    .route-tabset {
       font-family: nb-theme(route-tabs-font-family);
       font-size: nb-theme(route-tabs-font-size);
 
       padding: 0 nb-theme(route-tabs-padding);
       border-bottom: 1px solid nb-theme(route-tabs-separator);
 
-      li {
+      .route-tab {
         background: nb-theme(route-tabs-header-bg);
         min-width: nb-theme(route-tabs-header-min-width);
 
diff --git a/src/framework/theme/components/route-tabset/route-tabset.component.scss b/src/framework/theme/components/route-tabset/route-tabset.component.scss
index 80fce3808a..c7c992b6fd 100644
--- a/src/framework/theme/components/route-tabset/route-tabset.component.scss
+++ b/src/framework/theme/components/route-tabset/route-tabset.component.scss
@@ -6,13 +6,13 @@
 
 @import '../../styles/core/mixins';
 
-ul {
+.route-tabset {
   display: flex;
   flex-direction: row;
   list-style-type: none;
   margin: 0;
 
-  li {
+  .route-tab {
     cursor: pointer;
     margin-bottom: -1px;
     text-align: center;
@@ -50,6 +50,6 @@ ul {
   }
 }
 
-:host.full-width ul {
+:host.full-width .route-tabset {
   justify-content: space-around;
 }
diff --git a/src/framework/theme/components/route-tabset/route-tabset.component.ts b/src/framework/theme/components/route-tabset/route-tabset.component.ts
index 828daf00f9..25406c1c0e 100644
--- a/src/framework/theme/components/route-tabset/route-tabset.component.ts
+++ b/src/framework/theme/components/route-tabset/route-tabset.component.ts
@@ -63,13 +63,14 @@ import { convertToBoolProperty } from '../helpers';
   selector: 'nb-route-tabset',
   styleUrls: ['./route-tabset.component.scss'],
   template: `
-    <ul>
+    <ul class="route-tabset">
       <li *ngFor="let tab of tabs"
           (click)="$event.preventDefault(); selectTab(tab)"
           routerLink="{{tab.route}}"
           routerLinkActive="active"
           [routerLinkActiveOptions]="{ exact: true }"
-          [class.responsive]="tab.responsive">
+          [class.responsive]="tab.responsive"
+          class="route-tab">
         <a href>
           <i *ngIf="tab.icon" [class]="tab.icon"></i>
           <span *ngIf="tab.title">{{ tab.title }}</span>
diff --git a/src/framework/theme/components/tabset/_tabset.component.theme.scss b/src/framework/theme/components/tabset/_tabset.component.theme.scss
index 53c5a79af6..4c7185fc91 100644
--- a/src/framework/theme/components/tabset/_tabset.component.theme.scss
+++ b/src/framework/theme/components/tabset/_tabset.component.theme.scss
@@ -13,14 +13,14 @@
         nb-theme(scrollbar-bg),
         nb-theme(scrollbar-width));
 
-    ul {
+    .tabset {
       font-family: nb-theme(tabs-font-family);
       font-size: nb-theme(tabs-font-size);
 
       padding: 0 nb-theme(tabs-padding);
       border-bottom: 1px solid nb-theme(tabs-separator);
 
-      li {
+      .tab {
         background: nb-theme(tabs-header-bg);
 
         a {
diff --git a/src/framework/theme/components/tabset/tabset.component.scss b/src/framework/theme/components/tabset/tabset.component.scss
index 7e90502ae7..f5f9084eb5 100644
--- a/src/framework/theme/components/tabset/tabset.component.scss
+++ b/src/framework/theme/components/tabset/tabset.component.scss
@@ -10,7 +10,7 @@
   display: block;
 
 
-  &.full-width ul {
+  &.full-width .tabset {
     justify-content: space-around;
   }
 
@@ -23,13 +23,14 @@
       display: block;
     }
   }
-  ul {
+
+  .tabset {
     display: flex;
     flex-direction: row;
     list-style-type: none;
     margin: 0;
 
-    li {
+    .tab {
       cursor: pointer;
       margin-bottom: -1px;
       text-align: center;
diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index a362f2d158..22e3a35178 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -196,11 +196,12 @@ export class NbTabComponent {
   selector: 'nb-tabset',
   styleUrls: ['./tabset.component.scss'],
   template: `
-    <ul>
+    <ul class="tabset">
       <li *ngFor="let tab of tabs"
           (click)="selectTab(tab)"
           [class.responsive]="tab.responsive"
-          [class.active]="tab.active">
+          [class.active]="tab.active"
+          class="tab">
         <a href (click)="$event.preventDefault()">
           <i *ngIf="tab.tabIcon" [class]="tab.tabIcon"></i>
           <span *ngIf="tab.tabTitle">{{ tab.tabTitle }}</span>