feat(tabset): add style incapsulation for tabset components (#911)

Closes #561
akveo · Oct 23, 2018 · 33162af · 33162af
1 parent 995de58
commit 33162af
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>