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>