consul/grecia
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. // `.tenant-public` selector.
// //
// You can use CSS variables to customize the colors. Here's an example // 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.
// //
// .tenant-public { // .tenant-public {
// --anchor-color: #372; // --anchor-color: #372;
// --anchor-color-hover: #137; // --anchor-color-hover: #137;
// --brand: #153; // --brand: #153;
// --brand-secondary: #173a00; // --brand-secondary: #134a00;
// --footer: #e6e6e6;
// --main-header: #351; // --main-header: #351;
// --top-links: var(--main-header);
// --subnavigation: #ffd;
// } // }
// //
// Some colors default to another color, so you don't have to change // 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 // both colors if you'd like them to be the same. For instance, the
// `--main-header` and `--anchor-color` colors will use the `--brand` // `--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 // 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 // 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 { .top-links {
@include background-with-text-contrast($top-links); @include background-with-text-contrast($top-links, [top-links, brand-secondary]);
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
font-size: $small-font-size; font-size: $small-font-size;
@@ -737,7 +737,7 @@ body > header,
flex-direction: column; flex-direction: column;
@include breakpoint(medium) { @include breakpoint(medium) {
@include background-with-text-contrast($subnavigation); @include background-with-text-contrast($subnavigation, subnavigation);
flex-direction: row; flex-direction: row;
padding-bottom: 0; padding-bottom: 0;
@@ -913,7 +913,7 @@ footer {
} }
.footer { .footer {
@include background-with-text-contrast($footer); @include background-with-text-contrast($footer, footer);
clear: both; clear: both;
margin-top: $line-height * 2; margin-top: $line-height * 2;
padding-bottom: $line-height; padding-bottom: $line-height;