There are no notes for this item.

Media: Circle w/ gold bg

Component Preview
<div class="bg--gold">
    <img alt="" class="media--border media--circle" sizes="(min-width:1310px) 1310px, 100vw" srcset="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/bg-image-square.jpg 384w,https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/bg-image-square.jpg 768w,https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/bg-image-square.jpg 1024w,https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/bg-image-square.jpg 1312w,https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/bg-image-square.jpg 1920w,https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/bg-image-square.jpg 2592w," src="" typeof="foaf:Image">
</div>
  • Content:
    @mixin media-border {
      @include breakpoint(sm) {
        padding: 8px;
        border: 1px solid rgba(0, 0, 0, 0.125);
        //background: #fff;
    
        .bg--black &,
        .bg-pattern--brain-black &,
        .bg--white .bg--black &,
        .bg-pattern--brain .bg--black &,
        .bg--white .bg-pattern--brain-black &,
        .bg-pattern--brain .bg-pattern--brain-black &,
        .bg--gold .bg--black &,
        .bg--gold .bg-pattern--brain-black &,
        .bg-pattern--brain--gold .bg--black &,
        .bg-pattern--brain--gold .bg-pattern--brain-black & {
          border: 1px solid $primary;
          //background-color: inherit;
        }
    
        .bg--gray &,
        .bg--gold .bg--gray &,
        .bg-pattern--brain--gold .bg--gray &,
        .bg--white .bg--gray &,
        .bg-pattern--brain .bg--gray & {
          border: 1px solid $brand-cool-gray;
          //background-color: inherit;
        }
    
        .bg--white &,
        .bg-pattern--brain &,
        .bg--gold .bg--white &,
        .bg--gold .bg-pattern--brain &,
        .bg-pattern--brain--gold .bg--white &,
        .bg-pattern--brain--gold .bg-pattern--brain & {
          border: 1px solid rgba(0, 0, 0, 0.125);
          //background-color: inherit;
        }
    
        .bg--gold &,
        .bg-pattern--brain-reversed &,
        .bg-pattern--brain--gold & {
          border: 1px solid white;
          //background-color: inherit;
        }
      }
    }
    
    @mixin media-circle {
      @include breakpoint(sm) {
        border-radius: 50%;
        margin-top: 0;
        height: auto;
      }
    }
    
  • URL: /components/raw/media/_media-mixins.scss
  • Filesystem Path: src/components/media/_media-mixins.scss
  • Size: 1.4 KB
  • Content:
    @media (min-width: 768px) {
      .media--border {
        padding: 8px;
        border: 1px solid rgba(0, 0, 0, 0.125); }
        .bg--black .media--border,
        .bg-pattern--brain-black .media--border,
        .bg--white .bg--black .media--border,
        .bg-pattern--brain .bg--black .media--border,
        .bg--white .bg-pattern--brain-black .media--border,
        .bg-pattern--brain .bg-pattern--brain-black .media--border,
        .bg--gold .bg--black .media--border,
        .bg--gold .bg-pattern--brain-black .media--border,
        .bg-pattern--brain--gold .bg--black .media--border,
        .bg-pattern--brain--gold .bg-pattern--brain-black .media--border {
          border: 1px solid #FFCD00; }
        .bg--gray .media--border,
        .bg--gold .bg--gray .media--border,
        .bg-pattern--brain--gold .bg--gray .media--border,
        .bg--white .bg--gray .media--border,
        .bg-pattern--brain .bg--gray .media--border {
          border: 1px solid #63666A; }
        .bg--white .media--border,
        .bg-pattern--brain .media--border,
        .bg--gold .bg--white .media--border,
        .bg--gold .bg-pattern--brain .media--border,
        .bg-pattern--brain--gold .bg--white .media--border,
        .bg-pattern--brain--gold .bg-pattern--brain .media--border {
          border: 1px solid rgba(0, 0, 0, 0.125); }
        .bg--gold .media--border,
        .bg-pattern--brain-reversed .media--border,
        .bg-pattern--brain--gold .media--border {
          border: 1px solid white; } }
    
    @media (min-width: 768px) {
      .media--border img {
        padding: 8px;
        border: 1px solid rgba(0, 0, 0, 0.125); }
        .bg--black .media--border img,
        .bg-pattern--brain-black .media--border img,
        .bg--white .bg--black .media--border img,
        .bg-pattern--brain .bg--black .media--border img,
        .bg--white .bg-pattern--brain-black .media--border img,
        .bg-pattern--brain .bg-pattern--brain-black .media--border img,
        .bg--gold .bg--black .media--border img,
        .bg--gold .bg-pattern--brain-black .media--border img,
        .bg-pattern--brain--gold .bg--black .media--border img,
        .bg-pattern--brain--gold .bg-pattern--brain-black .media--border img {
          border: 1px solid #FFCD00; }
        .bg--gray .media--border img,
        .bg--gold .bg--gray .media--border img,
        .bg-pattern--brain--gold .bg--gray .media--border img,
        .bg--white .bg--gray .media--border img,
        .bg-pattern--brain .bg--gray .media--border img {
          border: 1px solid #63666A; }
        .bg--white .media--border img,
        .bg-pattern--brain .media--border img,
        .bg--gold .bg--white .media--border img,
        .bg--gold .bg-pattern--brain .media--border img,
        .bg-pattern--brain--gold .bg--white .media--border img,
        .bg-pattern--brain--gold .bg-pattern--brain .media--border img {
          border: 1px solid rgba(0, 0, 0, 0.125); }
        .bg--gold .media--border img,
        .bg-pattern--brain-reversed .media--border img,
        .bg-pattern--brain--gold .media--border img {
          border: 1px solid white; } }
    
    @media (min-width: 768px) {
      .media--circle {
        border-radius: 50%;
        margin-top: 0;
        height: auto; } }
    
    @media (min-width: 768px) {
      .media--circle img {
        border-radius: 50%;
        margin-top: 0;
        height: auto; } }
    
  • URL: /components/raw/media/media.css
  • Filesystem Path: src/components/media/media.css
  • Size: 3.1 KB
  • Content:
    @import '../../assets/scss/variables';
    @import '../../assets/scss/utilities';
    @import '_media-mixins.scss';
    
    .media {
      &--border {
        @include media-border;
        img {
          @include media-border;
        }
      }
    
      &--circle {
        @include media-circle;
        img {
          @include media-circle;
        }
      }
    }
    
  • URL: /components/raw/media/media.scss
  • Filesystem Path: src/components/media/media.scss
  • Size: 301 Bytes