Merge pull request #3389 from IgniteUI/refactor-tabs-theme-7.1.x

Refactor tabs theme 7.1.x
IgniteUI · Jan 16, 2019 · 65a60f1 · 65a60f1
2 parents bfaebb5 + 0198601
commit 65a60f1
Show file tree

Hide file tree

Showing 5 changed files with 224 additions and 30 deletions.
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss
@@ -27,11 +27,13 @@
 ///
 /// @param {Color} $tab-ripple-color [null] - The color used for the button background.
 /// @param {Color} $button-ripple-color [null] - The color used for the button background on hover.
+/// @param {Bool} $disable-shadow [true] - Sets the tabs header shadow visibility.
 ///
 /// @requires $default-palette
 /// @requires $light-schema
 /// @requires apply-palette
 /// @requires extend
+/// @requires igx-elevation
 /// @requires text-contrast
 ///
 /// @example scss Set a custom background color
@@ -62,13 +64,17 @@
     $button-hover-color: null,
 
     $tab-ripple-color: null,
-    $button-ripple-color: null
+    $button-ripple-color: null,
+
+    $disable-shadow: true
 ) {
     $name: 'igx-tabs';
     $theme: apply-palette(map-get($schema, $name), $palette);
 
+    $tab-area-shadow: if($disable-shadow == true, none, igx-elevation($elevations, 1));
+
     @if not($item-text-color) and $item-background {
-        $item-text-color: text-contrast($item-background);
+        $item-text-color: rgba(text-contrast($item-background), .54);
     }
 
     @if not($item-hover-color) and $item-background {
@@ -83,18 +89,66 @@
         $item-active-icon-color: text-contrast($item-active-background);
     }
 
+    @if not($item-active-icon-color) and $item-background {
+        $item-active-icon-color: text-contrast($item-background);
+    }
+
+    @if not($indicator-color) and $item-background {
+        $indicator-color: text-contrast($item-background);
+    }
+
     @if not($item-active-color) and $item-active-icon-color {
         $item-active-color: $item-active-icon-color;
     }
 
+
+    // Button
+    @if not($button-color) and $item-background {
+        $button-color: text-contrast($item-background);
+    }
+
     @if not($button-color) and $button-background {
         $button-color: text-contrast($button-background);
     }
 
+    @if not($button-color) and $item-background {
+        $button-background: transparent;
+    }
+
     @if not($button-hover-color) and $button-hover-background {
         $button-hover-color: text-contrast($button-hover-background);
     }
 
+    @if not($button-hover-background) and $item-background {
+        $button-hover-color: text-contrast($item-background);
+    }
+
+    @if not($button-background) and $item-background {
+        @if (lightness($item-background) > 50) {
+            $button-background: transparent;
+        } @else {
+            $button-background: rgba(255, 255, 255 , .1);
+        }
+    }
+
+    @if not($button-hover-background) and $item-background {
+        @if (lightness($item-background) > 50) {
+            $button-hover-background: rgba(0, 0, 0, .05);
+        } @else {
+            $button-hover-background: rgba(255, 255, 255 , .14);
+        }
+    }
+
+    @if not($button-ripple-color) and $button-background {
+        @if (lightness($item-background) > 50) {
+            $button-ripple-color: rgba(0, 0, 0, .4);
+        } @else {
+            $button-ripple-color: rgba(255, 255, 255, .4);
+        }
+    }
+
+    // Button end
+
     @if not($tab-ripple-color) and $item-active-background {
         $tab-ripple-color: text-contrast($item-active-background);
     }
@@ -103,9 +157,7 @@
         $tab-ripple-color: text-contrast($item-background);
     }
 
-    @if not($button-ripple-color) and $button-background {
-        $button-ripple-color: text-contrast($button-background);
-    }
+
 
     @return extend($theme, (
         name: $name,
@@ -124,6 +176,7 @@
         button-hover-color:$button-hover-color,
         tab-ripple-color: $tab-ripple-color,
         button-ripple-color: $button-ripple-color,
+        tab-area-shadow: $tab-area-shadow,
     ));
 }
 
@@ -139,16 +192,14 @@
 /// @requires --var
 @mixin igx-tabs($theme) {
     @include igx-root-css-vars($theme);
+    $item-min-width: 90px;
+    $item-max-width: 360px;
 
-    $item-min-width-small-res: 74px;
-    $item-min-width: 160px;
-
-    $item-max-width: 264px;
-    $item-padding: 0 rem(24px);
+    $item-padding: 0 rem(16px);
     $tabs-height: rem(48px);
-    $tabs-height-icon: rem(77px);
+    $tabs-height-icon: rem(72px);
     $tabs-animation-function: cubic-bezier(.35, 0, .25, 1);
-    $icon-label-space: rem(10px);
+    $icon-label-space: rem(12px);
 
     $tabs-ripple-theme: igx-ripple-theme($color: --var($theme, 'tab-ripple-color'));
     $button-ripple-theme: igx-ripple-theme($color: --var($theme, 'button-ripple-color'));
@@ -163,11 +214,7 @@
         align-items: center;
         overflow: hidden;
         background: --var($theme, 'item-background');
-    }
-
-    // ITEM WRAPPER
-    %igx-tabs__content-fixed {
-        min-width: $item-max-width
+        box-shadow: --var($theme, 'tab-area-shadow');
     }
 
     %igx-tabs__content-fixed,
@@ -201,10 +248,8 @@
         justify-content: center;
         align-items: center;
         min-width: $item-min-width;
-        @media only screen and (max-width: 600px) {
-            min-width: $item-min-width-small-res;
-        }
         max-width: $item-max-width;
+        word-wrap: break-word;
         height: $tabs-height;
         // Flex basis & shrink are Needed for IE11
         flex-basis: auto;
@@ -213,7 +258,7 @@
         overflow: hidden;
         cursor: pointer;
         position: relative;
-        transition: background .3s $tabs-animation-function;
+        transition: all .3s $tabs-animation-function;
         user-select: none;
         background: --var($theme, 'item-background');
         color: --var($theme, 'item-text-color');
@@ -272,6 +317,7 @@
         align-items: center;
 
         + %igx-tabs__item-label {
+            @include ellipsis();
             padding-top: $icon-label-space;
         }
     }
@@ -284,9 +330,6 @@
         transform: translateX(0);
         height: 2px;
         min-width: $item-min-width;
-        @media only screen and (max-width: 600px) {
-            min-width: $item-min-width-small-res;
-        }
         background: --var($theme, 'indicator-color');
         transition: transform .3s $tabs-animation-function, width .2s $tabs-animation-function;
     }
@@ -338,7 +381,7 @@
     }
 
     %igx-tabs__item-label {
-        @include ellipsis();
+        word-break: break-word;
         max-width: 100%;
         text-align: center;
 

diff --git a/projects/igniteui-angular/src/lib/tabs/tabs.component.spec.ts b/projects/igniteui-angular/src/lib/tabs/tabs.component.spec.ts
@@ -274,7 +274,7 @@ describe('IgxTabs', () => {
         tick(100);
         fixture.detectChanges();
 
-        fixture.componentInstance.wrapperDiv.nativeElement.style.width = '400px';
+        fixture.componentInstance.wrapperDiv.nativeElement.style.width = '200px';
         tick(100);
         fixture.detectChanges();
 
@@ -329,7 +329,7 @@ describe('IgxTabs', () => {
 
         tick();
         fixture.detectChanges();
-        expect(tabs.selectedIndicator.nativeElement.style.transform).toBe('translate(320px)');
+        expect(tabs.selectedIndicator.nativeElement.style.transform).toBe('translate(180px)');
     }));
 });
 

diff --git a/src/app/tabs/tabs.sample.css b/src/app/tabs/tabs.sample.css
@@ -7,6 +7,7 @@
     width: 100%;
     padding: 20px;
     min-width: 250px;
+    margin-bottom: 30px;
 }
 
 .items-wrapper__item-small {
@@ -24,7 +25,12 @@
 }
 
 .my-tab-content {
-    padding: 0 15px;
+    padding: 15px;
+}
+
+.my-tab-content h3 {
+    font-size: 20px;
+    font-weight: 900;
 }
 
 .design-1 .my-tab-content {