Colors

Colors

Component Preview
<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>
  • Content:
    .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; }
    
  • URL: /components/raw/colors/colors.css
  • Filesystem Path: src/components/colors/colors.css
  • Size: 1.1 KB
  • Content:
    @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;
    }
    
    
  • URL: /components/raw/colors/colors.scss
  • Filesystem Path: src/components/colors/colors.scss
  • Size: 1.1 KB