discourse-category-banners/common/common.scss

103 lines
1.9 KiB
SCSS

body:not(.category-header) {
// hides banners based on outcome of shouldShow
.category-title-header {
display: none;
}
}
.category-title-contents {
display: grid;
grid-template-areas: "logo title" "logo description";
grid-template-columns: auto 1fr;
@include breakpoint(tablet) {
grid-template-areas: "logo" "title" "description";
grid-template-columns: auto;
}
.category-logo {
grid-area: logo;
align-self: center;
margin: 0 1em 0 0;
--max-height: 8em;
@include breakpoint(tablet) {
margin: 0 0 0.5em;
}
}
.category-title {
grid-area: title;
align-self: end;
}
.category-title-description {
grid-area: description;
}
}
div[class^="category-title-header"] {
display: flex;
width: 100%;
justify-content: center;
@if $align_text == "center" {
text-align: center;
}
@if $align_text == "right" {
text-align: right;
}
.category-title-contents {
max-width: 500px;
padding: 40px;
.d-icon-lock {
height: 0.75em;
width: 0.75em;
vertical-align: 0;
}
}
.category-title-description {
a,
a:visited {
color: currentColor;
text-decoration: underline;
}
a.mention,
a.mention-group {
color: var(--primary);
text-decoration: none;
}
span.mention {
color: inherit;
}
}
// styles that impact the category icons theme component
.category-icon-widget-wrapper {
display: inline-block;
.category-icon-widget {
display: flex;
.category-icon {
display: flex;
@if $override_category_icon_color == "true" {
color: currentColor !important; // overrides inline style
}
.d-icon {
height: 0.75em;
width: 0.75em;
}
}
}
}
}
@if $plugin_outlet == "header-list-container-bottom" {
#header-list-area {
display: flex;
flex-direction: column-reverse;
}
}