what2watch/scss/plugins/card/_class.scss

// Card
// This represents a self-contained, replicable entity

// Variables
$picnic-card-shadow: none !default;
$picnic-card-border: $picnic-border !default;
$picnic-card-radius: $picnic-radius !default;



// Styles

// http://8gramgorilla.com/mastering-sass-extends-and-placeholders/
%card {

  position: relative;
  box-shadow: $picnic-card-shadow;
  border-radius: $picnic-card-radius;
  border: $picnic-card-border;
  overflow: hidden;
  text-align: left;
  background: $picnic-white;
  margin-bottom: $picnic-separation;
  padding: 0;
  transition: all .3s ease;

  &.hidden,
  :checked + & {
    font-size: 0;
    padding: 0;
    margin: 0;
    border: 0;
  }

  // Make sure that nothing overflows
  > * {
    max-width: 100%;
    display: block;

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

  // The first part from the card
  header,
  section,
  > p {
    padding: .6em .8em;
    }

  section {
    padding: .6em .8em 0;
  }

  hr {
    border: none;
    height: 1px;
    background-color: $picnic-dull;
  }

  header {
    font-weight: bold;
    position: relative;
    border-bottom: 1px solid $picnic-dull;

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      padding: 0;
      margin: 0 2em 0 0;
      line-height: 1;
      display: inline-block;
      vertical-align: text-bottom;
      }

    &:last-child {
      border-bottom: 0;
      }
    }

  footer {
    padding: .8em;
    }

  p {
    margin: math.div($picnic-separation, 2) 0;

    &:first-child {
      margin-top: 0;
      }

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

  > p {
    margin: 0;
    padding-right: 2.5em;
    }

  .close {
    position: absolute;
    top: .4em;
    right: .3em;
    font-size: 1.2em;
    padding: 0 .5em;
    cursor: pointer;
    width: auto;

    &:hover {
      color: $picnic-error;
      }
    }

  h1 + .close {
    margin: .2em;
    }

  h2 + .close {
    margin: .1em;
    }

  .dangerous {
    background: $picnic-error;
    float: right;
    }
  }