diff --git a/lib/core/styles/_mixins.scss b/lib/core/styles/_mixins.scss index d2e2b69d24..d7e7525139 100644 --- a/lib/core/styles/_mixins.scss +++ b/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; - -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; + @supports (-webkit-line-clamp: 1) { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: $lines; + height: calc(0.99em * #{$line-height} * #{$lines}); + } + + @supports not (-webkit-line-clamp: 1) { + white-space: nowrap; + width: 100%; } } diff --git a/lib/process-services/app-list/apps-list.component.scss b/lib/process-services/app-list/apps-list.component.scss index 2702466dd8..4c360db63c 100644 --- a/lib/process-services/app-list/apps-list.component.scss +++ b/lib/process-services/app-list/apps-list.component.scss @@ -1,132 +1,130 @@ -// TODO: import this mixin from core mixins... -// ------- -@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; } } -// ------- +@mixin adf-apps-theme($theme) { -:host { - width: 100%; -} - -.adf-app-list-item { - cursor: pointer; -} - -$themes: ( - theme-1: (bg: #269abc, color: #168aac), - theme-2: (bg: #7da9b0, color: #6d99a0), - theme-3: (bg: #7689ab, color: #66799b), - theme-4: (bg: #c74e3e, color: #b73e2e), - theme-5: (bg: #fab96c, color: #eaa95c), - theme-6: (bg: #759d4c, color: #658d3c), - theme-7: (bg: #b1b489, color: #a1a479), - theme-8: (bg: #a17299, color: #916289), - theme-9: (bg: #696c67, color: #595c57), - theme-10: (bg: #cabb33, color: #baab23) -); - -.adf-app-list-spinner { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - height: 85vh; - .mat-spinner { - margin: 0 auto; + :host { + width: 100%; } -} -.adf-app-listgrid { - padding: 8px; + .adf-app-list-item { + cursor: pointer; + } - &-item { - outline: none; + $tile-themes: ( + theme-1: (bg: #269abc, color: #168aac), + theme-2: (bg: #7da9b0, color: #6d99a0), + theme-3: (bg: #7689ab, color: #66799b), + theme-4: (bg: #c74e3e, color: #b73e2e), + theme-5: (bg: #fab96c, color: #eaa95c), + theme-6: (bg: #759d4c, color: #658d3c), + theme-7: (bg: #b1b489, color: #a1a479), + theme-8: (bg: #a17299, color: #916289), + theme-9: (bg: #696c67, color: #595c57), + theme-10: (bg: #cabb33, color: #baab23) + ); + + .adf-app-list-spinner { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + height: 85vh; + .mat-spinner { + margin: 0 auto; + } + } + + .adf-app-listgrid { padding: 8px; - box-sizing: border-box; - - &-card { - - @for $i from 1 through 10 { - &.theme-#{$i} { - $theme: map-get($themes, theme-#{$i}); - background-color: map-get($theme, bg); - } - } + &-item { 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: 8px; + box-sizing: border-box; - &: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); - cursor: pointer; - transform: scale(1.015); - } + &-card { - &-logo { - position: absolute; - right: 20px; - top: 20px; - padding: 16px; - z-index: 9998; + @for $i from 1 through 10 { + &.theme-#{$i} { + $tile-theme: map-get($tile-themes, theme-#{$i}); + background-color: map-get($tile-theme, bg); + } + } - &-icon { - font-size: 70px; - width: 1em; - height: 1em; + 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 !important; - @for $i from 1 through 10 { - .theme-#{$i} & { - $theme: map-get($themes, theme-#{$i}); - color: map-get($theme, color); + &: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); + cursor: pointer; + transform: scale(1.015); + } + + &-logo { + position: absolute; + right: 20px; + top: 20px; + padding: 16px; + z-index: 9998; + + &-icon { + font-size: 70px; + width: 1em !important; + height: 1em !important; + + @for $i from 1 through 10 { + .theme-#{$i} & { + $tile-theme: map-get($tile-themes, theme-#{$i}); + color: map-get($tile-theme, color); + } } } } - } - &-title { - padding: 16px; - margin-bottom: 0; - z-index: 9999; + &-title { + padding: 16px; + margin-bottom: 0 !important; + z-index: 9999; - h1 { + h1 { + color: white; + width: 80%; + font-size: 24px; + margin: 0; + line-height: normal; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + } + + &-subtitle { color: white; - width: 80%; - font-size: 24px; - margin: 0; - line-height: normal; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - } + z-index: 9999; + padding: 16px; - &-subtitle { - color: white; - z-index: 9999; - padding: 16px; - - .line-clamp { - @include line-clamp(1.25, 3); - } - } - - &-actions { - padding: 0 16px 16px 16px; - border-top: 1px solid rgba(0,0,0,.1); - min-height: 48px; - box-sizing: border-box; - - &-icon { - color: #e9f1f3; + .line-clamp { + @include line-clamp(1.25, 3); + } } - &.mat-card-actions { - margin-left: 0px; - margin-right: 0px; + &-actions { + padding: 0 16px 16px 16px !important; + border-top: 1px solid rgba(0,0,0,.1); + min-height: 48px; + box-sizing: border-box; - &:last-child { - margin-bottom: 0; + &-icon { + color: #e9f1f3; + } + + &.mat-card-actions { + margin-left: 0px; + margin-right: 0px; + + &:last-child { + margin-bottom: 0 !important; + } } } } diff --git a/lib/process-services/styles/_index.scss b/lib/process-services/styles/_index.scss index 5b38c24498..b122be6f02 100644 --- a/lib/process-services/styles/_index.scss +++ b/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); }