From 42479d92ccfffa56e225a13032d53c12a68d95ca Mon Sep 17 00:00:00 2001 From: Yasa-Nataliya <107834418+Yasa-Nataliya@users.noreply.github.com> Date: Tue, 25 Apr 2023 20:19:08 +0530 Subject: [PATCH] [ACS-3742] Added styles for new layout design (#3137) * added styling changes * styling changes * fixed the button text alignment * style changes * renamed the theme variable --- .../components/sidenav/sidenav.component.scss | 38 +++++++++++-------- .../src/lib/ui/variables/variables.scss | 2 + .../page-layout/page-layout.component.scss | 32 ++++++++++++++++ 3 files changed, 56 insertions(+), 16 deletions(-) diff --git a/projects/aca-content/src/lib/components/sidenav/sidenav.component.scss b/projects/aca-content/src/lib/components/sidenav/sidenav.component.scss index 6355fd357..a6be2ffb3 100644 --- a/projects/aca-content/src/lib/components/sidenav/sidenav.component.scss +++ b/projects/aca-content/src/lib/components/sidenav/sidenav.component.scss @@ -21,13 +21,14 @@ cursor: pointer; height: 28px; vertical-align: middle; + transform: scale(0.7); } } &-text { flex: 1; color: var(--theme-selected-text-color); - padding-left: 32px; + padding-left: 12px; letter-spacing: 0.25px; font-style: normal; font-weight: 400; @@ -51,21 +52,26 @@ border-radius: 0; &-header { - height: 32px; + height: 32px !important; padding: 0 32px 0 0; display: flex; align-items: center; border: none; } - - &-header:hover { - background: var(--theme-hover-background-color); - } &-header-title { display: flex; flex-direction: row; - align-items: center; + + .mat-button { + line-height: 32px; + align-items: center; + border: none !important; + } + + .action-button__label { + font-size: var(--theme-caption-font-size); + } } &-body { @@ -74,6 +80,11 @@ .mat-button { line-height: 32px; + align-items: center; + + .mat-button-wrapper { + display: flex; + } } } @@ -87,6 +98,10 @@ } } + .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled='true']):hover { + background: none !important; + } + .item { flex-direction: row; display: flex; @@ -116,14 +131,5 @@ color: var(--theme-selected-text-color) !important; background: var(--theme-selected-background-color); } - - .action-panel-header { - color: var(--theme-action-button-text-color); - padding: 0 24px; - - &__label { - font-size: var(--theme-caption-font-size); - } - } } } diff --git a/projects/aca-content/src/lib/ui/variables/variables.scss b/projects/aca-content/src/lib/ui/variables/variables.scss index 7a00c9913..8489d71da 100644 --- a/projects/aca-content/src/lib/ui/variables/variables.scss +++ b/projects/aca-content/src/lib/ui/variables/variables.scss @@ -36,6 +36,7 @@ $selected-text-color: #212121; $selected-background-color: rgba(31, 116, 219, 0.24); $action-button-text-color: rgba(33, 35, 40, 0.7); $page-layout-header-background-color: #fff; +$aca-toolbar-button-background-color: rgba(33, 33, 33, 0.05); // CSS Variables $defaults: ( @@ -80,6 +81,7 @@ $defaults: ( --theme-action-button-text-color: $action-button-text-color, --theme-header-border-color: $grey-background, --theme-page-layout-header-background-color: $page-layout-header-background-color, + --theme-app-toolbar-button-background-color: $aca-toolbar-button-background-color ); // propagates SCSS variables into the CSS variables scope diff --git a/projects/aca-shared/src/lib/components/page-layout/page-layout.component.scss b/projects/aca-shared/src/lib/components/page-layout/page-layout.component.scss index d21ed1b7d..0c5b20304 100644 --- a/projects/aca-shared/src/lib/components/page-layout/page-layout.component.scss +++ b/projects/aca-shared/src/lib/components/page-layout/page-layout.component.scss @@ -22,6 +22,38 @@ font-weight: 400; letter-spacing: 0.15px; } + + .aca-toolbar-action { + .app-toolbar-menu { + .mat-button { + display: flex; + justify-content: center; + align-items: center; + border-radius: 6px; + height: 32px; + background: var(--theme-app-toolbar-button-background-color); + color: var(--theme-selected-text-color); + line-height: 32px; + + .mat-button-wrapper { + display: flex; + } + } + + .mat-flat-button { + display: flex; + justify-content: center; + align-items: center; + border-radius: 6px; + height: 32px; + line-height: 32px; + + .mat-button-wrapper { + display: flex; + } + } + } + } } .aca-page-layout-content {