[ADF-2305] Process app tiles on process workspace landing page show "…" in Firefox (#2963)

* [ADF-2305] Process app tiles on process workspace landing page show "..." in Firefox

* [ADF-2305] Removed multi-line ellipsis work around for Firefox
* [ADF-2305] Added multi-line or single line ellpsis conditionally

* * [ADF-2305] Imported line-clamp mixin from core mixins

lib/core/styles/_mixins.scss

@@ -30,31 +30,21 @@
 }
 
 @mixin line-clamp($line-height: 1.25, $lines: 3) {
-    display: block;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
     position: relative;
     line-height: $line-height;
+    padding: 0 !important;
     overflow: hidden;
     text-overflow: ellipsis;
-    padding: 0 !important;
+
+    @supports (-webkit-line-clamp: 1) {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
         -webkit-line-clamp: $lines;
         height: calc(0.99em * #{$line-height} * #{$lines});
+    }
 
-    &:after {
+    @supports not (-webkit-line-clamp: 1) {
-        content: '...';
+        white-space: nowrap;
-        text-align: right;
+        width: 100%;
-        bottom: 0;
-        right: 0;
-        width: 25%;
-        display: block;
-        position: absolute;
-        height: calc(0.99em * #{$line-height});
-    }
-}
-
-@supports (-webkit-line-clamp: 1) {
-    .line-clamp:after  {
-        display: none !important;
     }
 }

lib/process-services/app-list/apps-list.component.scss

@@ -1,17 +1,14 @@
-// TODO: import this mixin from core mixins...
+@mixin adf-apps-theme($theme) {
-// -------
-@mixin line-clamp($line-height: 1.25, $lines: 3) { display: block; display: -webkit-box; -webkit-box-orient: vertical; position: relative; line-height: $line-height; overflow: hidden; text-overflow: ellipsis; padding: 0 !important; -webkit-line-clamp: $lines; height: calc(0.99em * #{$line-height} * #{$lines}); &:after { content: '...'; text-align: right; bottom: 0; right: 0; width: 25%; display: block; position: absolute; height: calc(0.99em * #{$line-height}); } } @supports (-webkit-line-clamp: 1) { .line-clamp:after { display: none !important; } }
-// -------
 
-:host {
+    :host {
         width: 100%;
-}
+    }
 
-.adf-app-list-item {
+    .adf-app-list-item {
         cursor: pointer;
-}
+    }
 
-$themes: (
+    $tile-themes: (
         theme-1: (bg: #269abc, color: #168aac),
         theme-2: (bg: #7da9b0, color: #6d99a0),
         theme-3: (bg: #7689ab, color: #66799b),
@@ -22,9 +19,9 @@ $themes: (
         theme-8: (bg: #a17299, color: #916289),
         theme-9: (bg: #696c67, color: #595c57),
         theme-10: (bg: #cabb33, color: #baab23)
-);
+    );
 
-.adf-app-list-spinner {
+    .adf-app-list-spinner {
         display: flex;
         align-items: center;
         justify-content: center;
@@ -33,9 +30,9 @@ $themes: (
         .mat-spinner {
             margin: 0 auto;
         }
-}
+    }
 
-.adf-app-listgrid {
+    .adf-app-listgrid {
         padding: 8px;
 
         &-item {
@@ -47,15 +44,15 @@ $themes: (
 
                 @for $i from 1 through 10 {
                     &.theme-#{$i} {
-                    $theme: map-get($themes, theme-#{$i});
+                        $tile-theme: map-get($tile-themes, theme-#{$i});
-                    background-color: map-get($theme, bg);
+                        background-color: map-get($tile-theme, bg);
                     }
                 }
 
                 outline: none;
                 transition: transform 280ms cubic-bezier(.4,0,.2,1), box-shadow 280ms cubic-bezier(.4,0,.2,1);
                 min-height: 200px;
-            padding: 0;
+                padding: 0 !important;
 
                 &:hover {
                     box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2);
@@ -72,13 +69,13 @@ $themes: (
 
                     &-icon {
                         font-size: 70px;
-                    width: 1em;
+                        width: 1em !important;
-                    height: 1em;
+                        height: 1em !important;
 
                         @for $i from 1 through 10 {
                             .theme-#{$i} & {
-                            $theme: map-get($themes, theme-#{$i});
+                                $tile-theme: map-get($tile-themes, theme-#{$i});
-                            color: map-get($theme, color);
+                                color: map-get($tile-theme, color);
                             }
                         }
                     }
@@ -86,7 +83,7 @@ $themes: (
 
                 &-title {
                     padding: 16px;
-                margin-bottom: 0;
+                    margin-bottom: 0 !important;
                     z-index: 9999;
 
                     h1 {
@@ -112,7 +109,7 @@ $themes: (
                 }
 
                 &-actions {
-                padding: 0 16px 16px 16px;
+                    padding: 0 16px 16px 16px !important;
                     border-top: 1px solid rgba(0,0,0,.1);
                     min-height: 48px;
                     box-sizing: border-box;
@@ -126,7 +123,8 @@ $themes: (
                         margin-right: 0px;
 
                         &:last-child {
-                        margin-bottom: 0;
+                            margin-bottom: 0 !important;
+                        }
                     }
                 }
             }

lib/process-services/styles/_index.scss

@@ -6,6 +6,7 @@
 @import '../task-list/components/start-task.component';
 @import '../task-list/components/task-filters.component';
 @import '../task-list/components/task-header.component';
+@import '../app-list/apps-list.component';
 
 @mixin adf-process-services-theme($theme) {
     @include adf-process-filters-theme($theme);
@@ -16,4 +17,5 @@
     @include adf-task-list-header-theme($theme);
     @include adf-process-attachment-list-theme($theme);
     @include adf-task-attachment-list-theme($theme);
+    @include adf-apps-theme($theme);
 }