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

[ACA-2960] Add background image and elevation to header (#1389)

Browse Source
This commit is contained in:
Baptiste Mahé
2020-03-27 19:06:47 +01:00
committed by GitHub
parent 26f94b6798
commit 4536224cd4
2 changed files with 79 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/app/components/header/header.component.scss
View File

@@ -1,23 +1,35 @@
@import '~@angular/material/theming';
@mixin app-header-theme($theme) { @mixin app-header-theme($theme) {
$foreground: map-get($theme, foreground); $foreground: map-get($theme, foreground);
.adf-app-title { .app-header {
color: mat-color($foreground, text, 0.72); @include mat-elevation(6, #000000, 0.1);
} z-index: 2;
.adf-menu-icon { .mat-toolbar {
color: mat-color($foreground, text, 0.72) !important; background-image: url('./assets/images/mastHead-bg-shapesPattern.svg') !important;
} background-repeat: no-repeat !important;
.aca-current-user { .adf-app-title {
color: mat-color($foreground, text, 0.72) !important; color: mat-color($foreground, text, 0.72);
} }
.adf-toolbar-divider div { .adf-menu-icon {
background-color: mat-color($foreground, text, 0.72) !important; color: mat-color($foreground, text, 0.72) !important;
} }
.app-toolbar-menu { .aca-current-user {
color: mat-color($foreground, text, 0.72) !important; color: mat-color($foreground, text, 0.72) !important;
}
.adf-toolbar-divider div {
background-color: mat-color($foreground, text, 0.72) !important;
}
.app-toolbar-menu {
color: mat-color($foreground, text, 0.72) !important;
}
}
} }
} }

53
src/assets/images/mastHead-bg-shapesPattern.svg Normal file
View File

@@ -0,0 +1,53 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="768px" height="64px" viewBox="0 0 768 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 63.1 (101010) - https://sketch.com -->
<title>F9486AC0-402C-4076-AD87-A8B3E339A00C</title>
<desc>Created with sketchtool.</desc>
<defs>
<rect id="path-1" x="0" y="0" width="1440" height="1024"></rect>
<linearGradient x1="39.5825108%" y1="4.36333766%" x2="2.76867691%" y2="43.9379266%" id="linearGradient-3">
<stop stop-color="#FB9729" offset="0%"></stop>
<stop stop-color="#FF6B00" offset="100%"></stop>
</linearGradient>
<linearGradient x1="39.5825108%" y1="4.41939366%" x2="2.76867691%" y2="43.9453727%" id="linearGradient-4">
<stop stop-color="#FB9729" offset="0%"></stop>
<stop stop-color="#FF6B00" offset="100%"></stop>
</linearGradient>
<linearGradient x1="39.5825108%" y1="4.41972419%" x2="2.76867691%" y2="43.9454166%" id="linearGradient-5">
<stop stop-color="#FB9729" offset="0%"></stop>
<stop stop-color="#FF6B00" offset="100%"></stop>
</linearGradient>
</defs>
<g id="1.-🎨-Styles-/-Atoms-/-Molecules-/-Compounds" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="08.5-Various-(Light)" transform="translate(-80.000000, -593.000000)">
<g id="Header" transform="translate(80.000000, 550.000000)">
<g id="3.-Layout/Desktop/Header/ADW/MastHead" transform="translate(0.000000, 43.000000)">
<g id="mastHead-bg-shapesPattern">
<g id="bgWallpaper-Pattern">
<g transform="translate(0.000000, -418.000000)" id="standards/bgWallpaper-ColCircles">
<g transform="translate(0.000000, 1.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Mask"></g>
<g id="interectionsShapes" mask="url(#mask-2)">
<g transform="translate(-5874.000000, -2763.000000)" id="Group-2">
<g transform="translate(0.025102, 0.632890)">
<g id="masthead-v2" transform="translate(0.576046, 0.968258)">
<path d="M6137.3568,3265.15228 C6731.50498,3265.15228 7213.15725,2783.18681 7213.15725,2188.65228 C7213.15725,1594.11774 6731.50498,1112.15228 6137.3568,1112.15228 C5934.86387,1112.15228 5572.13069,1112.15228 5049.15725,1112.15228 C5057.42331,1636.08719 5061.55635,1994.92052 5061.55635,2188.65228 C5061.55635,2783.18681 5543.20862,3265.15228 6137.3568,3265.15228 Z" id="Petal-Blue" stroke="url(#linearGradient-3)" stroke-width="5" transform="translate(6131.157249, 2188.652277) rotate(-193.000000) translate(-6131.157249, -2188.652277) "></path>
<path d="M6047.87926,3281.34542 C6563.7778,3281.34542 6981.9962,2862.95552 6981.9962,2346.84542 C6981.9962,1830.73532 6563.7778,1412.34542 6047.87926,1412.34542 C5872.05476,1412.34542 5557.09374,1412.34542 5102.9962,1412.34542 C5110.17362,1867.16862 5113.76233,2178.66862 5113.76233,2346.84542 C5113.76233,2862.95552 5531.98072,3281.34542 6047.87926,3281.34542 Z" id="Petal-Green" stroke="#8BC34A" stroke-width="10" transform="translate(6042.496196, 2346.845419) rotate(-236.000000) translate(-6042.496196, -2346.845419) "></path>
<path d="M4476.11162,7601 C6211.88094,7601 7619,6193.83097 7619,4458 C7619,2722.16903 6211.88094,1315 4476.11162,1315 C3884.54032,1315 2824.83644,1315 1297,1315 C1321.14883,2844.705 1333.22325,3892.37167 1333.22325,4458 C1333.22325,6193.83097 2740.3423,7601 4476.11162,7601 Z" id="Petal-thin-orange" stroke="url(#linearGradient-4)" stroke-width="2" transform="translate(4458.000000, 4458.000000) rotate(-135.000000) translate(-4458.000000, -4458.000000) "></path>
<path d="M6722.92439,3755.28058 C7108.40685,3755.28058 7420.90213,3442.77534 7420.90213,3057.28058 C7420.90213,2671.78583 7108.40685,2359.28058 6722.92439,2359.28058 C6591.54728,2359.28058 6356.20653,2359.28058 6016.90213,2359.28058 C6022.26515,2698.99872 6024.94665,2931.66538 6024.94665,3057.28058 C6024.94665,3442.77534 6337.44193,3755.28058 6722.92439,3755.28058 Z" id="Petal-orange" stroke="url(#linearGradient-5)" stroke-width="23" transform="translate(6718.902134, 3057.280584) rotate(-57.000000) translate(-6718.902134, -3057.280584) "></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB