data8/_sass/inuitcss/objects/_objects.media.scss

/* ==========================================================================
   #MEDIA
   ========================================================================== */

/**
 * Place any image- and text-like content side-by-side, as per:
 * http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code
 */

.o-media {
  @include inuit-clearfix();
  display: block;
}

  .o-media__img {
    float: left;
    margin-right: $inuit-global-spacing-unit;

    > img {
      display: block;
    }

  }

  .o-media__body {
    overflow: hidden;
    display: block;

    &,
    > :last-child {
      margin-bottom: 0;
    }

  }





/* Size variants
   ========================================================================== */

/**
 * Modify the amount of space between our image and our text. We also have
 * reversible options for all available sizes.
 */

.o-media--flush {

  > .o-media__img {
    margin-right: 0;
    margin-left: 0;
 }

}


.o-media--tiny {

  > .o-media__img {
    margin-right: $inuit-global-spacing-unit-tiny;
  }

  &.o-media--reverse {

    > .o-media__img {
      margin-right: 0;
      margin-left: $inuit-global-spacing-unit-tiny;
    }

  }

}


.o-media--small {

  > .o-media__img {
    margin-right: $inuit-global-spacing-unit-small;
  }

  &.o-media--reverse {

    > .o-media__img {
      margin-right: 0;
      margin-left: $inuit-global-spacing-unit-small;
    }

  }

}


.o-media--large {

  > .o-media__img {
    margin-right: $inuit-global-spacing-unit-large;
  }

  &.o-media--reverse {

    > .o-media__img {
      margin-right: 0;
      margin-left: $inuit-global-spacing-unit-large;
    }

  }

}


.o-media--huge {

  > .o-media__img {
    margin-right: $inuit-global-spacing-unit-huge;
  }

  &.o-media--reverse {

    > .o-media__img {
      margin-right: 0;
      margin-left: $inuit-global-spacing-unit-huge;
    }

  }

}





/* Reversed media objects
   ========================================================================== */

.o-media--reverse {

  > .o-media__img {
    float: right;
    margin-right: 0;
    margin-left: $inuit-global-spacing-unit;
  }

}