Background

Background

Component Preview
<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>
  • Content:
    @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
        }
      }
    }
    
  • URL: /components/raw/background/_background-mixins.scss
  • Filesystem Path: src/components/background/_background-mixins.scss
  • Size: 4.8 KB
  • 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--gray"],
    [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); }
    
  • URL: /components/raw/background/background.css
  • Filesystem Path: src/components/background/background.css
  • Size: 5.2 KB
  • Content:
    @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--gray"],
    [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);
    }
    
  • URL: /components/raw/background/background.scss
  • Filesystem Path: src/components/background/background.scss
  • Size: 1.1 KB