[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
Alfresco · Apr 25, 2023 · 42479d9 · 42479d9
1 parent 6dc7aa0
commit 42479d9
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 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
@@ -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
@@ -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
@@ -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 {