inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-07-24 17:31:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-3742] Added styles for new layout design (#3137)

Browse Source 
* added styling changes

* styling changes

* fixed the button text alignment

* style changes

* renamed the theme variable
This commit is contained in:
Yasa-Nataliya
2023-04-25 20:19:08 +05:30
committed by GitHub
parent 6dc7aa036a
commit 42479d92cc
3 changed files with 56 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
projects/aca-content/src/lib/components/sidenav/sidenav.component.scss
View File

@@ -21,13 +21,14 @@
cursor: pointer; cursor: pointer;
height: 28px; height: 28px;
vertical-align: middle; vertical-align: middle;
transform: scale(0.7);
} }
} }
&-text { &-text {
flex: 1; flex: 1;
color: var(--theme-selected-text-color); color: var(--theme-selected-text-color);
padding-left: 32px; padding-left: 12px;
letter-spacing: 0.25px; letter-spacing: 0.25px;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
@@ -51,21 +52,26 @@
border-radius: 0; border-radius: 0;
&-header { &-header {
height: 32px; height: 32px !important;
padding: 0 32px 0 0; padding: 0 32px 0 0;
display: flex; display: flex;
align-items: center; align-items: center;
border: none; border: none;
} }
&-header:hover {
background: var(--theme-hover-background-color);
}
&-header-title { &-header-title {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
.mat-button {
line-height: 32px;
align-items: center; align-items: center;
border: none !important;
}
.action-button__label {
font-size: var(--theme-caption-font-size);
}
} }
&-body { &-body {
@@ -74,6 +80,11 @@
.mat-button { .mat-button {
line-height: 32px; 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 { .item {
flex-direction: row; flex-direction: row;
display: flex; display: flex;
@@ -116,14 +131,5 @@
color: var(--theme-selected-text-color) !important; color: var(--theme-selected-text-color) !important;
background: var(--theme-selected-background-color); 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);
}
}
} }
} }

2
projects/aca-content/src/lib/ui/variables/variables.scss
View File

@@ -36,6 +36,7 @@ $selected-text-color: #212121;
$selected-background-color: rgba(31, 116, 219, 0.24); $selected-background-color: rgba(31, 116, 219, 0.24);
$action-button-text-color: rgba(33, 35, 40, 0.7); $action-button-text-color: rgba(33, 35, 40, 0.7);
$page-layout-header-background-color: #fff; $page-layout-header-background-color: #fff;
$aca-toolbar-button-background-color: rgba(33, 33, 33, 0.05);
// CSS Variables // CSS Variables
$defaults: ( $defaults: (
@@ -80,6 +81,7 @@ $defaults: (
--theme-action-button-text-color: $action-button-text-color, --theme-action-button-text-color: $action-button-text-color,
--theme-header-border-color: $grey-background, --theme-header-border-color: $grey-background,
--theme-page-layout-header-background-color: $page-layout-header-background-color, --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 // propagates SCSS variables into the CSS variables scope

32
projects/aca-shared/src/lib/components/page-layout/page-layout.component.scss
View File

@@ -22,6 +22,38 @@
font-weight: 400; font-weight: 400;
letter-spacing: 0.15px; 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 { .aca-page-layout-content {