refactor(tabs): scope styles to component (#15659)

Author: desig9stein

projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss

@@ -600,13 +600,13 @@
     //     @include switch($switch-theme-map);
     // }
 
-    @if is-used('igx-tabs', $exclude) {
-        $tabs-theme-map: tabs-theme(
-            $schema: $schema,
-        );
-        $tabs-theme-map: meta.call($theme-handler, $tabs-theme-map);
-        @include tabs($tabs-theme-map);
-    }
+    //@if is-used('igx-tabs', $exclude) {
+    //    $tabs-theme-map: tabs-theme(
+    //        $schema: $schema,
+    //    );
+    //    $tabs-theme-map: meta.call($theme-handler, $tabs-theme-map);
+    //    @include tabs($tabs-theme-map);
+    //}
 
     //@if is-used('igx-stepper', $exclude) {
     //    $stepper-theme-map: stepper-theme(

projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss

@@ -102,7 +102,7 @@
     @include switch-typography($categories: (
         label: 'body-1'
     ));
-    @include tabs-typography();
+    //@include tabs-typography();
     @include time-picker-typography($categories: (
         header-hour: 'h4',
         selected-time: 'h4'

projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss

@@ -107,9 +107,9 @@
     @include switch-typography($categories: (
         label: 'body-2'
     ));
-    @include tabs-typography($categories: (
-        label: 'body-2'
-    ));
+    //@include tabs-typography($categories: (
+    //    label: 'body-2'
+    //));
     @include time-picker-typography();
     //@include stepper-typography();
     // @include toast-typography($categories: (

projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss

@@ -103,11 +103,11 @@
     @include switch-typography($categories: (
         label: 'body-2'
     ));
-    @include tabs-typography($categories: (
-        label: 'subtitle-2',
-    )) {
-        --ig-subtitle-2-text-transform: uppercase;
-    };
+    //@include tabs-typography($categories: (
+    //    label: 'subtitle-2',
+    //)) {
+    //    --ig-subtitle-2-text-transform: uppercase;
+    //};
     @include time-picker-typography($categories: (
         header-hour: 'h5',
         selected-time: 'h6'

projects/igniteui-angular/src/lib/core/styles/typography/_material.scss

@@ -60,7 +60,7 @@
     // @include slider-typography();
     // @include snackbar-typography();
     @include switch-typography();
-    @include tabs-typography();
+    //@include tabs-typography();
     @include time-picker-typography();
     //@include stepper-typography();
     // @include toast-typography();

…lib/tabs/tabs/tab-content.component.html …/tabs/content/tab-content.component.htmlprojects/igniteui-angular/src/lib/tabs/tabs/tab-content.component.html renamed to projects/igniteui-angular/src/lib/tabs/tabs/content/tab-content.component.html projects/igniteui-angular/src/lib/tabs/tabs/tab-content.component.html renamed to projects/igniteui-angular/src/lib/tabs/tabs/content/tab-content.component.html

@@ -0,0 +1,38 @@
+@use 'igniteui-theming/sass/animations' as *;
+@use 'sass:map';
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/typography' as *;
+@use 'igniteui-theming/sass/themes' as *;
+@use 'styles/themes/standalone' as *;
+
+@include layer(base) {
+    @include b(igx-tabs-content) {
+        position: relative;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+
+        @include e(inner) {
+            position: absolute;
+            inset: 0;
+            overflow-x: hidden;
+            overflow-y: auto;
+            flex: 1 1 auto;
+
+            &::-moz-focus-inner {
+                // remove dotted border on :focus in firefox
+                border: 0;
+            }
+
+            &:focus {
+                outline-width: 0;
+            }
+
+            &[tabindex='0'] {
+                position: relative;
+            }
+        }
+    }
+
+}

projects/igniteui-angular/src/lib/tabs/tabs/content/tab-content.component.scss

@@ -0,0 +1,16 @@
+import {Component, HostBinding, ViewEncapsulation} from '@angular/core';
+import { IgxTabContentDirective } from '../../tab-content.directive';
+import { IgxTabContentBase } from '../../tabs.base';
+
+@Component({
+    selector: 'igx-tab-content',
+    templateUrl: 'tab-content.component.html',
+    styleUrl: 'tab-content.component.css',
+    encapsulation: ViewEncapsulation.None,
+    providers: [{ provide: IgxTabContentBase, useExisting: IgxTabContentComponent }],
+})
+export class IgxTabContentComponent extends IgxTabContentDirective {
+    /** @hidden */
+    @HostBinding('class.igx-tabs-content__inner')
+    public cssClass = true;
+}

projects/igniteui-angular/src/lib/tabs/tabs/content/tab-content.component.ts

@@ -1,6 +1,6 @@
 <ng-content select="igx-prefix,[igxPrefix]"></ng-content>
 
-<div class="igx-tabs__header-item-inner">
+<div class="igx-tab-header__inner">
     <ng-content></ng-content>
 </div>
 

…/lib/tabs/tabs/tab-header.component.html …bs/tabs/header/tab-header.component.htmlprojects/igniteui-angular/src/lib/tabs/tabs/tab-header.component.html renamed to projects/igniteui-angular/src/lib/tabs/tabs/header/tab-header.component.html projects/igniteui-angular/src/lib/tabs/tabs/tab-header.component.html renamed to projects/igniteui-angular/src/lib/tabs/tabs/header/tab-header.component.html

@@ -0,0 +1,2 @@
+@use 'themes/base';
+@use 'themes/shared';