<h2>Primary Colors</h2>
<div class="bg-primary">Primary: #FFCD00</div>
<div class="bg-secondary text-white">Secondary: #151515</div>
<h2>Secondary colors</h2>
<div class="bg-cool-gray text-white">#63666A</div>
<div class="bg-blue text-white">#00558C</div>
<div class="bg-green text-white">#00664F</div>
<div class="bg-orange text-white">#BD472A</div>
<style>
div {
width: 400px;
padding: 10px;
margin-bottom: 10px;
}
</style>
.bg-primary {
background: #FFCD00; }
.bg-secondary {
background: #151515; }
.bg-cool-gray {
background: #63666A; }
.bg-blue {
background: #00558C; }
.bg-green {
background: #00664F; }
.bg-orange {
background: #BD472A; }
.text-white {
color: #fff; }
.text--gray {
color: #63666A; }
.text--gold {
color: #FFCD00; }
.text--black {
color: #151515; }
a.text--black {
color: #151515; }
[class*="bg-"] a.text--black,
[class*="bg-"] [class*="bg-"] a.text--black {
color: #151515; }
.text--white {
color: #fff; }
.bg--gold {
background: #FFCD00; }
.bg--black {
background: #151515; }
.bg--gray {
background: #f3f3f3; }
.bg--light {
background: #fff; }
.bg-pattern--brain {
background: #fff url("../../assets/images/brain-pattern.svg");
background-size: auto auto; }
.bg-pattern--brain-reversed {
background: #FFCD00 url("../../assets/images/brain-pattern-reversed.svg");
background-size: auto auto; }
.bg-pattern--brain-black {
background: #151515 url("../../assets/images/brain-pattern-black.svg");
background-size: auto auto; }
@import '../../assets/scss/variables';
.bg-primary {
background: $primary;
}
.bg-secondary {
background: $secondary;
}
.bg-cool-gray {
background: $brand-cool-gray;
}
.bg-blue {
background: $info;
}
.bg-green {
background: $success;
}
.bg-orange {
background: $danger;
}
.text-white {
color: $white;
}
// uids classes
.text--gray {
color: $brand-cool-gray;
}
.text--gold {
color: $primary;
}
.text--black {
color: $secondary;
}
a.text--black {
color: $secondary;
[class*="bg-"] &,
[class*="bg-"] [class*="bg-"] & {
color: $secondary;
}
}
.text--white {
color: $white;
}
.bg--gold {
background: $primary;
}
.bg--black {
background: $secondary;
}
.bg--gray {
background: $light;
}
.bg--light {
background: $white;
}
.bg-pattern--brain {
background: #fff url("#{$imgpath}/brain-pattern.svg");
background-size: auto auto;
}
.bg-pattern--brain-reversed {
background: $primary url("#{$imgpath}/brain-pattern-reversed.svg");
background-size: auto auto;
}
.bg-pattern--brain-black {
background: $secondary url("#{$imgpath}/brain-pattern-black.svg");
background-size: auto auto;
}