Skip to content

Expand header-color mixin to articles and blocks #595

@swashbuck

Description

@swashbuck

Subject of the enhancement

The current .header-color-mixin allows us to add colors to the menu and page header. Now that we can add background images to articles and blocks (#571), it would be useful to expand this mixin to those elements as well.

// Header color mixin
// Add to menu/page to enable
// e.g. 'header-color transparent-dark'
// Note: both arguments must be predefined variables
// --------------------------------------------------
.header-color-mixin(black, white);
.header-color-mixin(background, background-inverted);
.header-color-mixin(transparent-light, font-color);
.header-color-mixin(transparent-dark, font-color-inverted);
.header-color-mixin(@color, @color-inverted) {
.header-color.@{color} {
.menu,
.page {
&__header {
background-color: @@color;
}
}
.menu,
.page {
&__title,
&__subtitle,
&__body,
&__body a,
&__instruction,
&__instruction a {
color: @@color-inverted;
}
}
}
}

Metadata

Metadata

Assignees

Projects

Status

Needs Reviewing

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions