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

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

@@ -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);
}
}
}
}

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);
$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

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

@@ -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 {