consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Allow different layout backgounds per tenant

Browse Source 
We were already doing the same for the main header color; now we also
make it easier to use different top links, subnavigation and footer
colors per tenant.

Just like we do with SCSS variables, we use the brand-secondary color
for the top links when the `--top-links` variable isn't defined.
This commit is contained in:
Javi Martín
2022-10-28 20:26:08 +02:00
parent af040fcc2b
commit d0d8f9cc1e
2 changed files with 11 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/assets/stylesheets/custom/tenants.scss
View File

@@ -5,21 +5,26 @@
// `.tenant-public` selector.
//
// You can use CSS variables to customize the colors. Here's an example
// changing the brand, links and main header colors for just the main
// changing the brand, links and main layout colors for just the main
// tenant.
//
// .tenant-public {
// --anchor-color: #372;
// --anchor-color-hover: #137;
// --brand: #153;
// --brand-secondary: #173a00;
// --brand-secondary: #134a00;
// --footer: #e6e6e6;
// --main-header: #351;
// --top-links: var(--main-header);
// --subnavigation: #ffd;
// }
//
// Some colors default to another color, so you don't have to change
// both colors if you'd like them to be the same. For instance, the
// `--main-header` and `--anchor-color` colors will use the `--brand`
// color if `--main-header` or `--anchor-color` are not defined.
// color if `--main-header` or `--anchor-color` are not defined, while
// the `--top-links` color will use the `--brand-secondary` color if
// `--top-links` is not defined.
//
// If, for instance, you're using a light color for the main header when
// the default color is a dark one, you should also change the text

6
app/assets/stylesheets/layout.scss
View File

@@ -693,7 +693,7 @@ body > header,
}
.top-links {
@include background-with-text-contrast($top-links);
@include background-with-text-contrast($top-links, [top-links, brand-secondary]);
display: flex;
flex-wrap: wrap;
font-size: $small-font-size;
@@ -737,7 +737,7 @@ body > header,
flex-direction: column;
@include breakpoint(medium) {
@include background-with-text-contrast($subnavigation);
@include background-with-text-contrast($subnavigation, subnavigation);
flex-direction: row;
padding-bottom: 0;
@@ -913,7 +913,7 @@ footer {
}
.footer {
@include background-with-text-contrast($footer);
@include background-with-text-contrast($footer, footer);
clear: both;
margin-top: $line-height * 2;
padding-bottom: $line-height;