amazeui/less/image.less

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

// Name:                     Image
//
// Description:              Defines styles for img
//
// Component:                `.am-img`
//
// Modifiers:                `.am-img-thumbnail`
//                           `.am-img-responsive`
//
// =============================================================================


/* ==========================================================================
   Component: Image
 ============================================================================ */

/* Image thumbnails */

.@{ns}img-thumbnail {
  // Keep them at most 100% wide
  display: inline-block;
  max-width: 100%;
  height: auto;
  padding: @img-thumbnail-padding;
  line-height: @line-height-base;
  background-color: @img-thumbnail-bg;
  border: 1px solid @img-thumbnail-bd-color;
  border-radius: @img-thumbnail-bd-radius;
  transition: all .2s ease-in-out;

  &.@{ns}radius {
    border-radius: @radius-normal;
  }

  .hook-img-thumbnail;
}

.@{ns}img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
  .hook-img-responsive;
}


// Hooks
// =============================================================================

.hook-img-thumbnail() {}
.hook-img-responsive() {}