barecss-power/less/_card.less

A classless CSS framework (power) http://barecss.com

@import (reference) "config";


// config
@card-back: @def-back;
@card-pad: 1.2 * @pad-s;
@card-marginb: @card-pad;
@card-radius: @radius-s;
@card-hr: @card-pad / 2;
@card-shadow: @box-shadow;


card {
  display: block;
  margin-bottom: @card-marginb;
  box-shadow: @card-shadow;
  border-radius: @card-radius;
  padding: @card-pad;
  background: @card-back;
  
  hr { margin: @card-hr 0; }
  
  &:last-child { margin-bottom: 0 }
  
  // sets the image to full width
  > img {
    display: block;
    width: ~"calc(100% + " 2 * @card-pad ~")";
    max-width: none;
    margin: 0 0 @card-pad -@card-pad;
    
    // applies if image is first item in card
    &:first-child {
      margin: -@card-pad 0 @card-pad -@card-pad;
      border-top-left-radius: @card-radius;
      border-top-right-radius: @card-radius;
    }
    
    // applies if image is last item in card
    &:last-child {
      margin: 0 0 -@card-pad -@card-pad;
      border-bottom-left-radius: @card-radius;
      border-bottom-right-radius: @card-radius;
    }
  }
}