amazeui/less/article.less

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

// Name:            Article
//
// Description:     Define style for article
//
// Component:       `.am-article`
//
// Sub-objects:     `.am-article-title`
//                  `.am-article-meta`
//                  `.am-article-lead`
//                  `.am-article-divider`
//
// =============================================================================


/* ==========================================================================
   Component: Article
 ============================================================================ */

.@{ns}article {
  .clearfix();

  & > :last-child {
    margin-bottom: 0; // Remove margin from last-child
  }

  & + .@{ns}article {
    margin-top: @article-margin-top;
  }
}


/* Sub-object `.@{ns}article-title` */

.@{ns}article-title {
  // overflow-x: hidden;
  font-size: @article-title-font-size;
  line-height: @article-title-line-height;
  font-weight: @article-title-font-weight;

  a {
    color: inherit;
    text-decoration: none;
  }

  .hook-article-title;
}


/* Sub-object `.@{ns}article-meta` */

.@{ns}article-meta {
  font-size: @article-meta-font-size;
  line-height: @article-meta-line-height;
  color: @article-meta-color;
  .hook-article-meta;
}


/* Sub-object `.@{ns}article-lead` */

.@{ns}article-lead {
  color: @article-lead-color;
  font-size: @article-lead-font-size;
  line-height: @article-lead-line-height;
  border: 1px solid #dedede;
  border-radius: 2px;
  background: #f9f9f9;
  padding: 10px;
  .hook-article-lead;
}


/* Sub-object `.@{ns}article-divider` */

.@{ns}article-divider {
  margin-bottom: @article-divider-margin;
  border-color: @article-divider-border;
  .hook-article-divider;

  * + & {
    margin-top: @article-divider-margin;
  }
}


/* Sub-object `.@{ns}article-bd` */

.@{ns}article-bd {
  blockquote {
    font-family: @font-family-kai;
  }

  img {
    display: block;
    max-width: 100%;
  }
}


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

.hook-article-title() {}
.hook-article-meta() {}
.hook-article-lead() {}
.hook-article-divider() {}