Merge pull request #5725 from IgniteUI/fix-typography

refactor(themes): update typography and a few broken styles

Author: Lipata

projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss

@@ -421,6 +421,7 @@
         color: --var($theme, 'content-text-color');
         cursor: pointer;
         outline: none;
+        flex-basis: 14.28%;
         // transition: background .15s ease-out;
 
         &:hover,
@@ -462,12 +463,9 @@
     }
 
     %cal-value--year {
-        display: flex;
         margin: 0;
-        justify-content: center;
-        align-items: center;
         min-width: 8ch;
-        height: rem(52px);
+        line-height: rem(52px);
     }
 
     %cal-value--year-current {
@@ -639,37 +637,35 @@
     $picker-date: map-get($categories, 'picker-date');
     $content: map-get($categories, 'content');
 
-    @include igx-scope('.igx-typography') {
-        %cal-header-year {
-            @include igx-type-style($type-scale, $header-year) {
-                margin: 0;
-            }
+    %cal-header-year {
+        @include igx-type-style($type-scale, $header-year) {
+            margin: 0;
         }
+    }
 
-        %cal-header-date {
-            @include igx-type-style($type-scale, $header-date) {
-                line-height: rem(42px);
-                margin: 0;
-            }
+    %cal-header-date {
+        @include igx-type-style($type-scale, $header-date) {
+            line-height: rem(42px);
+            margin: 0;
         }
+    }
 
-        %cal-picker-date {
-            @include igx-type-style($type-scale, $picker-date) {
-                margin: 0;
-            }
+    %cal-picker-date {
+        @include igx-type-style($type-scale, $picker-date) {
+            margin: 0;
         }
+    }
 
-        %cal-value {
-            @include igx-type-style($type-scale, $content) {
-                margin: 0;
-            }
+    %cal-value {
+        @include igx-type-style($type-scale, $content) {
+            margin: 0;
         }
+    }
 
-        %cal-value--year-current {
-            @include igx-type-style($type-scale, $content) {
-                font-size: rem(24px);
-                margin: 0;
-            }
+    %cal-value--year-current {
+        @include igx-type-style($type-scale, $content) {
+            font-size: rem(24px);
+            margin: 0;
         }
     }
 }

projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss

@@ -346,15 +346,13 @@
     $item: map-get($categories, 'item');
     $header: map-get($categories, 'header');
 
-    @include igx-scope('.igx-typography') {
-        %item {
-            @include igx-type-style($type-scale, $item);
-        }
+    %item {
+        @include igx-type-style($type-scale, $item);
+    }
 
-        %item--header {
-            @include igx-type-style($type-scale, $header) {
-                margin: 0;
-            }
+    %item--header {
+        @include igx-type-style($type-scale, $header) {
+            margin: 0;
         }
     }
 }

src/app/hierarchical-grid/hierarchical-grid.sample.ts

@@ -1,5 +1,10 @@
 import { Component, ViewChild } from '@angular/core';
-import { IgxRowIslandComponent, IgxHierarchicalGridComponent, IPathSegment, IGridCellEventArgs } from 'igniteui-angular';
+import {
+    IgxRowIslandComponent,
+    IgxHierarchicalGridComponent,
+    IPathSegment,
+    IGridCellEventArgs
+} from 'igniteui-angular';
 
 @Component({
     selector: 'app-hierarchical-grid-sample',
@@ -15,7 +20,6 @@ export class HierarchicalGridSampleComponent {
     displayDensities;
     riToggle = true;
 
-
     public columns;
     public childColumns;
 
@@ -25,7 +29,6 @@ export class HierarchicalGridSampleComponent {
     @ViewChild('hGrid', { static: true })
     hGrid: IgxHierarchicalGridComponent;
 
-
     constructor() {
         // this.localData.push({ ID: -1, Name: ''});
         // for (let i = 0; i < 10000; i++) {
@@ -51,12 +54,19 @@ export class HierarchicalGridSampleComponent {
         const currLevel = level;
         let children;
         for (let i = 0; i < count; i++) {
-           if (level > 0 ) {
-               children = this.generateData(count / 2 , currLevel - 1);
-           }
-           prods.push({
-            ID: i, ChildLevels: currLevel,  ProductName: 'Product: A' + i, 'Col1': i,
-            'Col2': i, 'Col3': i, childData: children, childData2: children });
+            if (level > 0) {
+                children = this.generateData(count / 2, currLevel - 1);
+            }
+            prods.push({
+                ID: i,
+                ChildLevels: currLevel,
+                ProductName: 'Product: A' + i,
+                Col1: i,
+                Col2: i,
+                Col3: i,
+                childData: children,
+                childData2: children
+            });
         }
         return prods;
     }
@@ -67,19 +77,26 @@ export class HierarchicalGridSampleComponent {
         let children;
         for (let i = 0; i < count; i++) {
             const rowID = parendID ? parendID + i : i.toString();
-            if (level > 0 ) {
-               // Have child grids for row with even id less rows by not multiplying by 2
-               children = this.generateDataUneven((i % 2 + 1) * Math.round(count / 3) , currLevel - 1, rowID);
+            if (level > 0) {
+                // Have child grids for row with even id less rows by not multiplying by 2
+                children = this.generateDataUneven(((i % 2) + 1) * Math.round(count / 3), currLevel - 1, rowID);
             }
             prods.push({
-                ID: rowID, ChildLevels: currLevel,  ProductName: 'Product: A' + i, 'Col1': i,
-                'Col2': i, 'Col3': i, childData: children, childData2: children });
+                ID: rowID,
+                ChildLevels: currLevel,
+                ProductName: 'Product: A' + i,
+                Col1: i,
+                Col2: i,
+                Col3: i,
+                childData: children,
+                childData2: children
+            });
         }
         return prods;
     }
 
     setterChange() {
-       this.layout1.rowSelectable = !this.layout1.rowSelectable;
+        this.layout1.rowSelectable = !this.layout1.rowSelectable;
     }
 
     setterBindingChange() {
@@ -94,16 +111,15 @@ export class HierarchicalGridSampleComponent {
         this.firstLevelExpanded = !this.firstLevelExpanded;
     }
 
-    testApis() {
-    }
+    testApis() {}
 
     selectDensity(event) {
         this.density = this.displayDensities[event.index].label;
     }
 
     cellClick($evt: IGridCellEventArgs) {
         console.log('Cell Click', $evt);
-        console.log($evt.context);
+        // console.log($evt.context);
     }
 
     public LoadMoreColumns() {

src/index.html

@@ -8,7 +8,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"></head>
-<body class="igx-typography fluent-excel-dark-theme">
+<body class="igx-typography default-theme">
   <app-root></app-root>
 </body>
 </html>