Merge branch 'master' into mpopov/esf-header-icon-MASTER

Author: simeonoff

CHANGELOG.md

@@ -50,6 +50,8 @@ The following example shows how you can use the Indigo theme:
 
 
 ### New Features
+- `igxButton` directive
+    - Added styles to support extended fab buttons.
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - Introduced `showSummaryOnCollapse` grid property which allows you to control whether the summary row stays visible when the groupBy / parent row is collapsed.
     - Added support for tooltips on data cells default template and summary cells.

projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss

@@ -429,6 +429,8 @@
 @mixin igx-button($theme) {
     @include igx-root-css-vars($theme);
 
+    $left: if-ltr(left, right);
+    $right: if-ltr(right, left);
     $button-border: 1px solid transparent;
     $button-width: rem(88px);
 
@@ -514,15 +516,15 @@
 
 
     $button-floating-padding: (
-        comfortable: rem(15px),
-        cosy: rem(11px),
-        compact: rem(7px)
+        comfortable: rem(8px) rem(16px),
+        cosy: rem(4px) rem(12px),
+        compact: 0 rem(8px)
     );
 
     $button-floating-size: (
-        comfortable: rem(56px),
-        cosy: rem(48px),
-        compact: rem(40px)
+        comfortable: rem(48px),
+        cosy: rem(40px),
+        compact: rem(32px)
     );
 
     $icon-in-button-size: rem(18px);
@@ -762,18 +764,37 @@
             background: --var($theme, 'fab-focus-background');
             box-shadow: $fab-shadow--focus;
         }
+
+        igx-icon {
+            display: inline-flex;
+            order: -1;
+            margin: rem(8px) 0;
+        }
+
+        * + igx-icon {
+            margin: 0;
+            margin-#{$right}: rem(12px);
+        }
     }
 
     %igx-button--fab-cosy {
         padding: map-get($button-floating-padding, 'cosy');
         min-width: map-get($button-floating-size, 'cosy');
         min-height: map-get($button-floating-size, 'cosy');
+
+        * + igx-icon {
+            margin-#{$right}: rem(8px);
+        }
     }
 
     %igx-button--fab-compact {
         padding: map-get($button-floating-padding, 'compact');
         min-width: map-get($button-floating-size, 'compact');
         min-height: map-get($button-floating-size, 'compact');
+
+        * + igx-icon {
+            margin-#{$right}: rem(4px);
+        }
     }
 
     %igx-button--icon {
@@ -849,4 +870,15 @@
             text-align: center;
         }
     }
+
+    %igx-button--fab {
+        p,
+        span,
+        div {
+            @include igx-type-style($type-scale, $text) {
+                text-align: center;
+                margin: 0;
+            }
+        }
+    }
 }

projects/igniteui-angular/src/lib/core/styles/components/charts/_category-chart-component.scss

@@ -0,0 +1,13 @@
+////
+/// @group components
+/// @access private
+/// @author <a href="https://github.com/didimmova" target="_blank">Dilyana Dimova</a>
+/// @requires {mixin} bem-block
+/// @requires {mixin} bem-elem
+/// @requires {mixin} bem-mod
+////
+@include b(category-chart) {
+    // Register the component in the component registry
+    $this: bem--selector-to-string(&);
+    @include register-component(str-slice($this, 2, -1));
+}

projects/igniteui-angular/src/lib/core/styles/components/charts/_data-chart-component.scss

@@ -0,0 +1,13 @@
+////
+/// @group components
+/// @access private
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+/// @requires {mixin} bem-block
+/// @requires {mixin} bem-elem
+/// @requires {mixin} bem-mod
+////
+@include b(data-chart) {
+    // Register the component in the component registry
+    $this: bem--selector-to-string(&);
+    @include register-component(str-slice($this, 2, -1));
+}

projects/igniteui-angular/src/lib/core/styles/components/charts/_doughnut-chart-component.scss

@@ -0,0 +1,13 @@
+////
+/// @group components
+/// @access private
+/// @author <a href="https://github.com/didimmova" target="_blank">Dilyana Dimova</a>
+/// @requires {mixin} bem-block
+/// @requires {mixin} bem-elem
+/// @requires {mixin} bem-mod
+////
+@include b(doughnut-chart) {
+    // Register the component in the component registry
+    $this: bem--selector-to-string(&);
+    @include register-component(str-slice($this, 2, -1));
+}

projects/igniteui-angular/src/lib/core/styles/components/charts/_financial-chart-component.scss

@@ -0,0 +1,13 @@
+////
+/// @group components
+/// @access private
+/// @author <a href="https://github.com/didimmova" target="_blank">Dilyana Dimova</a>
+/// @requires {mixin} bem-block
+/// @requires {mixin} bem-elem
+/// @requires {mixin} bem-mod
+////
+@include b(financial-chart) {
+    // Register the component in the component registry
+    $this: bem--selector-to-string(&);
+    @include register-component(str-slice($this, 2, -1));
+}

projects/igniteui-angular/src/lib/core/styles/components/charts/_funnel-chart-component.scss

@@ -0,0 +1,13 @@
+////
+/// @group components
+/// @access private
+/// @author <a href="https://github.com/didimmova" target="_blank">Dilyana Dimova</a>
+/// @requires {mixin} bem-block
+/// @requires {mixin} bem-elem
+/// @requires {mixin} bem-mod
+////
+@include b(funnel-chart) {
+    // Register the component in the component registry
+    $this: bem--selector-to-string(&);
+    @include register-component(str-slice($this, 2, -1));
+}

projects/igniteui-angular/src/lib/core/styles/components/charts/_gauge-component.scss

@@ -0,0 +1,13 @@
+////
+/// @group components
+/// @access private
+/// @author <a href="https://github.com/didimmova" target="_blank">Dilyana Dimova</a>
+/// @requires {mixin} bem-block
+/// @requires {mixin} bem-elem
+/// @requires {mixin} bem-mod
+////
+@include b(gauge) {
+    // Register the component in the component registry
+    $this: bem--selector-to-string(&);
+    @include register-component(str-slice($this, 2, -1));
+}

projects/igniteui-angular/src/lib/core/styles/components/charts/_geo-map-component.scss

@@ -0,0 +1,13 @@
+////
+/// @group components
+/// @access private
+/// @author <a href="https://github.com/didimmova" target="_blank">Dilyana Dimova</a>
+/// @requires {mixin} bem-block
+/// @requires {mixin} bem-elem
+/// @requires {mixin} bem-mod
+////
+@include b(geo-map) {
+    // Register the component in the component registry
+    $this: bem--selector-to-string(&);
+    @include register-component(str-slice($this, 2, -1));
+}

projects/igniteui-angular/src/lib/core/styles/components/charts/_graph-component.scss

@@ -0,0 +1,13 @@
+////
+/// @group components
+/// @access private
+/// @author <a href="https://github.com/didimmova" target="_blank">Dilyana Dimova</a>
+/// @requires {mixin} bem-block
+/// @requires {mixin} bem-elem
+/// @requires {mixin} bem-mod
+////
+@include b(graph) {
+    // Register the component in the component registry
+    $this: bem--selector-to-string(&);
+    @include register-component(str-slice($this, 2, -1));
+}