<div class="bg--black--pattern--brain container--padded">
<h2 class="headline headline--serif">Black - Brain pattern</h2>
</div>
<div class="bg--black--pattern--community container--padded">
<h2 class="headline headline--serif">Black - Community pattern</h2>
</div>
<div class="bg--black--pattern--particle container--padded">
<h2 class="headline headline--serif">Black - Particle pattern</h2>
</div>
<div class="bg--black container--padded">
<h2 class="headline headline--serif">Black</h2>
</div>
<div class="bg--gold--pattern--brain container--padded">
<h2 class="headline headline--serif">Gold - Brain pattern</h2>
</div>
<div class="bg--gold--pattern--community container--padded">
<h2 class="headline headline--serif">Gold - Community pattern</h2>
</div>
<div class="bg--gold--pattern--particle container--padded">
<h2 class="headline headline--serif">Gold - Particle pattern</h2>
</div>
<div class="bg--gold container--padded">
<h2 class="headline headline--serif">Gold</h2>
</div>
<div class="bg--gray--pattern--brain container--padded">
<h2 class="headline headline--serif">Gray - Brain pattern</h2>
</div>
<div class="bg--gray--pattern--community container--padded">
<h2 class="headline headline--serif">Gray - Community pattern</h2>
</div>
<div class="bg--gray--pattern--particle container--padded">
<h2 class="headline headline--serif">Gray - Particle pattern</h2>
</div>
<div class="bg--gray container--padded">
<h2 class="headline headline--serif">Gray</h2>
</div>
<div class="bg--white--pattern--brain container--padded">
<h2 class="headline headline--serif">White - Brain pattern</h2>
</div>
<div class="bg--white--pattern--community container--padded">
<h2 class="headline headline--serif">White - Community pattern</h2>
</div>
<div class="bg--white--pattern--particle container--padded">
<h2 class="headline headline--serif">White - Particle pattern</h2>
</div>
<div class="bg--white container--padded">
<h2 class="headline headline--serif">White</h2>
</div>
<style>
[class*="bg--"] {
min-height: 600px;
}
.container--padded {
padding: 40px;
}
</style>
@import '../../assets/scss/variables';
@import '../../assets/scss/placeholders';
$backgrounds: (
'bg--black--pattern--brain': (
'type': 'dark',
'background-color': $secondary,
'background-image': '#{$imgpath}/brain-pattern-black.svg',
),
// @todo Remove in future version
'bg-pattern--brain-black': (
'type': 'dark',
'background-color': $secondary,
'background-image': '#{$imgpath}/brain-pattern-black.svg',
),
'bg--black--pattern--community': (
'type': 'dark',
'background-color': $secondary,
'background-image': '#{$imgpath}/community-pattern--black.png',
),
'bg--black--pattern--particle': (
'type': 'dark',
'background-color': $secondary,
'background-image': '#{$imgpath}/particle-pattern--black.png',
),
'bg--black': (
'type': 'dark',
'background-color': $secondary,
),
'bg--gold--pattern--brain': (
'type': 'light',
'background-color': $primary,
'background-image': '#{$imgpath}/brain-pattern-reversed.svg',
),
// @todo Remove in future version
'bg-pattern--brain-reversed': (
'type': 'light',
'background-color': $primary,
'background-image': '#{$imgpath}/brain-pattern-reversed.svg',
),
'bg--gold--pattern--community': (
'type': 'light',
'background-color': $primary,
'background-image': '#{$imgpath}/community-pattern--white.png',
),
'bg--gold--pattern--particle': (
'type': 'light',
'background-color': $primary,
'background-image': '#{$imgpath}/particle-pattern.png',
),
'bg--gold': (
'type': 'light',
'background-color': $primary,
),
'bg--gray--pattern--brain': (
'type': 'light',
'background-color': $light,
'background-image': '#{$imgpath}/brain-pattern-white.svg',
),
'bg--gray--pattern--community': (
'type': 'light',
'background-color': $light,
'background-image': '#{$imgpath}/community-pattern--gray.png',
),
'bg--gray--pattern--particle': (
'type': 'light',
'background-color': $light,
'background-image': '#{$imgpath}/particle-pattern--white.png',
),
'bg--gray': (
'type': 'light',
'background-color': $light,
),
'bg--white--pattern--brain': (
'type': 'light',
'background-color': $white,
'background-image': '#{$imgpath}/brain-pattern.svg',
),
// @todo Remove in future version
'bg-pattern--brain': (
'type': 'light',
'background-color': $white,
'background-image': '#{$imgpath}/brain-pattern.svg',
),
'bg--white--pattern--community': (
'type': 'light',
'background-color': $white,
'background-image': '#{$imgpath}/community-pattern--gray.png',
),
'bg--white--pattern--particle': (
'type': 'light',
'background-color': $white,
'background-image': '#{$imgpath}/particle-pattern--gold.png',
),
'bg--white': (
'type': 'light',
'background-color': $white,
),
);
$bg-to-fg-color-map: (
'default': 'dark',
'black': 'light',
'gold': 'dark',
'gray': 'dark',
'white': 'dark',
);
@mixin bg-fg-colors($bg, $shade: 'light', $extend: true) {
@if $extend == true {
@include uids-dynamic-extend($bg) {
@include bg-fg-colors($bg, $shade, false);
}
}
@else {
@if $shade == 'light' {
color: $secondary;
a {
color: $secondary;
}
}
@else {
color: $white;
a {
color: $primary;
}
}
}
}
@mixin add-backgrounds($before: '', $after: '', $extend: true) {
// Loop through $backgrounds
@each $bg-class, $background in $backgrounds {
$background-color: map-get($background, 'background-color');
$background-image: map-get($background, 'background-image');
$type: map-get($background, 'type');
$text_color: map-get($bg-to-fg-color-map, $type);
@if $text_color == null {
$text_color: map-get($bg-to-fg-color-map, 'default');
}
#{$before}.#{$bg-class}#{$after} {
@if $background-color {
background-color: $background-color;
}
@if $background-image {
background-image: url($background-image);
}
}
#{$before}.#{$bg-class}#{$after} {
@include bg-fg-colors($bg-class, $type, $extend);
}
}
}
//@mixin add-color-for-bgs($before: '', $after: '') {
// // Loop through $backgrounds
// @each $bg-class, $background in $backgrounds {
// $type: map-get($background, 'type');
// $text_color: map-get($bg-to-fg-color-map, $type);
// @if $text_color == null {
// $text_color: map-get($bg-to-fg-color-map, 'default');
// }
// #{$before}.#{$bg-class}#{$after} {
// color: unquote($text_color);
// }
// }
//}
@mixin background-treatments($before: '', $after: '') {
@each $bg-class, $background in $backgrounds {
.#{$bg-class} {
@content
}
}
}
[class*="bg-"] a,
[class*="bg-"] [class*="bg-"] a,
[class*="bg-"] [class*="bg--"] a,
[class*="bg--"] a,
[class*="bg--"] [class*="bg-"] a,
[class*="bg--"] [class*="bg--"] a {
color: inherit; }
[class*="bg-pattern"],
[class*="bg--"][class*="--pattern--"] {
background-size: auto auto;
background-position: center center; }
[class*="--pattern--particle"],
[class*="bg--"][class*="--pattern--particle"] {
background-size: 1400px; }
[class*="--pattern--community"],
[class*="bg--"][class*="--pattern--community"] {
background-size: 1000px; }
.bg--black--pattern--brain {
background-color: #151515;
background-image: url("../../assets/images/brain-pattern-black.svg"); }
.bg--black--pattern--brain {
color: #fff; }
.bg--black--pattern--brain a {
color: #FFCD00; }
.bg-pattern--brain-black {
background-color: #151515;
background-image: url("../../assets/images/brain-pattern-black.svg"); }
.bg-pattern--brain-black {
color: #fff; }
.bg-pattern--brain-black a {
color: #FFCD00; }
.bg--black--pattern--community {
background-color: #151515;
background-image: url("../../assets/images/community-pattern--black.png"); }
.bg--black--pattern--community {
color: #fff; }
.bg--black--pattern--community a {
color: #FFCD00; }
.bg--black--pattern--particle {
background-color: #151515;
background-image: url("../../assets/images/particle-pattern--black.png"); }
.bg--black--pattern--particle {
color: #fff; }
.bg--black--pattern--particle a {
color: #FFCD00; }
.bg--black {
background-color: #151515; }
.bg--black {
color: #fff; }
.bg--black a {
color: #FFCD00; }
.bg--gold--pattern--brain {
background-color: #FFCD00;
background-image: url("../../assets/images/brain-pattern-reversed.svg"); }
.bg--gold--pattern--brain {
color: #151515; }
.bg--gold--pattern--brain a {
color: #151515; }
.bg-pattern--brain-reversed {
background-color: #FFCD00;
background-image: url("../../assets/images/brain-pattern-reversed.svg"); }
.bg-pattern--brain-reversed {
color: #151515; }
.bg-pattern--brain-reversed a {
color: #151515; }
.bg--gold--pattern--community {
background-color: #FFCD00;
background-image: url("../../assets/images/community-pattern--white.png"); }
.bg--gold--pattern--community {
color: #151515; }
.bg--gold--pattern--community a {
color: #151515; }
.bg--gold--pattern--particle {
background-color: #FFCD00;
background-image: url("../../assets/images/particle-pattern.png"); }
.bg--gold--pattern--particle {
color: #151515; }
.bg--gold--pattern--particle a {
color: #151515; }
.bg--gold {
background-color: #FFCD00; }
.bg--gold {
color: #151515; }
.bg--gold a {
color: #151515; }
.bg--gray--pattern--brain {
background-color: #f3f3f3;
background-image: url("../../assets/images/brain-pattern-white.svg"); }
.bg--gray--pattern--brain {
color: #151515; }
.bg--gray--pattern--brain a {
color: #151515; }
.bg--gray--pattern--community {
background-color: #f3f3f3;
background-image: url("../../assets/images/community-pattern--gray.png"); }
.bg--gray--pattern--community {
color: #151515; }
.bg--gray--pattern--community a {
color: #151515; }
.bg--gray--pattern--particle {
background-color: #f3f3f3;
background-image: url("../../assets/images/particle-pattern--white.png"); }
.bg--gray--pattern--particle {
color: #151515; }
.bg--gray--pattern--particle a {
color: #151515; }
.bg--gray {
background-color: #f3f3f3; }
.bg--gray {
color: #151515; }
.bg--gray a {
color: #151515; }
.bg--white--pattern--brain {
background-color: #fff;
background-image: url("../../assets/images/brain-pattern.svg"); }
.bg--white--pattern--brain {
color: #151515; }
.bg--white--pattern--brain a {
color: #151515; }
.bg-pattern--brain {
background-color: #fff;
background-image: url("../../assets/images/brain-pattern.svg"); }
.bg-pattern--brain {
color: #151515; }
.bg-pattern--brain a {
color: #151515; }
.bg--white--pattern--community {
background-color: #fff;
background-image: url("../../assets/images/community-pattern--gray.png"); }
.bg--white--pattern--community {
color: #151515; }
.bg--white--pattern--community a {
color: #151515; }
.bg--white--pattern--particle {
background-color: #fff;
background-image: url("../../assets/images/particle-pattern--gold.png"); }
.bg--white--pattern--particle {
color: #151515; }
.bg--white--pattern--particle a {
color: #151515; }
.bg--white {
background-color: #fff; }
.bg--white {
color: #151515; }
.bg--white a {
color: #151515; }
[class*="bg--"] *,
[class*="bg--"] [class*="bg--"] * {
border-color: inherit; }
[class*="bg--"] *:before, [class*="bg--"] *:after,
[class*="bg--"] [class*="bg--"] *:before,
[class*="bg--"] [class*="bg--"] *:after {
color: inherit;
border-color: inherit; }
[class*="bg--gray"],
[class*="bg--white"],
[class*="bg--gold"],
.bg-pattern--brain-reversed,
.bg-pattern--brain {
border-color: rgba(0, 0, 0, 0.125); }
.bg--black--pattern--brain,
.bg-pattern--brain-black,
[class*="bg--black"] {
border-color: rgba(255, 255, 255, 0.325); }
[class*="bg--white"] :where(p, ul, ol, dl, cite, tbody, figcaption) a:not(.bttn),
[class*="bg-"] [class*="bg--white"] :where(p, ul, ol, dl, cite, tbody, figcaption) a:not(.bttn),
[class*="bg--gray"] :where(p, ul, ol, dl, cite, tbody, figcaption) a:not(.bttn),
[class*="bg-"] [class*="bg--gray"] :where(p, ul, ol, dl, cite, tbody, figcaption) a:not(.bttn) {
color: #00558C; }
[class*="bg--white"] [class*="bg--gold"] :where(p, ul, ol, dl, cite, tbody, figcaption) a:not(.bttn),
[class*="bg--white"] [class*="bg--black"] :where(p, ul, ol, dl, cite, tbody, figcaption) a:not(.bttn),
[class*="bg--gray"] [class*="bg--gold"] :where(p, ul, ol, dl, cite, tbody, figcaption) a:not(.bttn),
[class*="bg--gray"] [class*="bg--black"] :where(p, ul, ol, dl, cite, tbody, figcaption) a:not(.bttn) {
color: inherit; }
@import 'background-mixins';
[class*="bg-"],
[class*="bg--"] {
a,
[class*="bg-"] a,
[class*="bg--"] a {
color: inherit;
}
}
// @todo Remove just the next line in a future release.
[class*="bg-pattern"],
[class*="bg--"][class*="--pattern--"] {
background-size: auto auto;
background-position: center center;
}
[class*="--pattern--particle"],
[class*="bg--"][class*="--pattern--particle"] {
background-size: 1400px;
}
[class*="--pattern--community"],
[class*="bg--"][class*="--pattern--community"] {
background-size: 1000px;
}
// Add background rules
@include add-backgrounds();
[class*="bg--"] {
*,
& [class*="bg--"] * {
border-color: inherit;
&:before,
&:after {
color: inherit;
border-color: inherit;
}
}
}
// border color overrides for certain background colors
[class*="bg--gray"],
[class*="bg--white"],
[class*="bg--gold"],
.bg-pattern--brain-reversed,
.bg-pattern--brain {
border-color: rgba(0,0,0,.125);
}
.bg--black--pattern--brain,
.bg-pattern--brain-black,
[class*="bg--black"] {
border-color: rgba(255,255,255,.325);
}
// override gray link color.
[class*="bg--white"] :where(p, ul, ol, dl, cite, tbody, figcaption) a:not(.bttn),
[class*="bg-"] [class*="bg--white"] :where(p, ul, ol, dl, cite, tbody, figcaption) a:not(.bttn),
[class*="bg--gray"] :where(p, ul, ol, dl, cite, tbody, figcaption) a:not(.bttn),
[class*="bg-"] [class*="bg--gray"] :where(p, ul, ol, dl, cite, tbody, figcaption) a:not(.bttn) {
color: $link-color;
}
// set link color for black and gold nesting.
[class*="bg--white"] [class*="bg--gold"] :where(p, ul, ol, dl, cite, tbody, figcaption) a:not(.bttn),
[class*="bg--white"] [class*="bg--black"] :where(p, ul, ol, dl, cite, tbody, figcaption) a:not(.bttn),
[class*="bg--gray"] [class*="bg--gold"] :where(p, ul, ol, dl, cite, tbody, figcaption) a:not(.bttn),
[class*="bg--gray"] [class*="bg--black"] :where(p, ul, ol, dl, cite, tbody, figcaption) a:not(.bttn) {
color: inherit;
}