// *************************************
//
//   Bucket
//   -> Based on:
//      * http://jsfiddle.net/necolas/rZvEF/
//
// -------------------------------------
//   Template (Haml)
// -------------------------------------
//
// .bucket[.bucket--flag]
//   .bucket-media
//     / ...
//   .bucket-content
//     / ...
//
// *************************************

.bucket
  @extend .group

// -------------------------------------
//   Modifiers
// -------------------------------------

// ----- Flag ----- //

.bucket--flag
  display: table

  .bucket-content
    vertical-align: middle

// -------------------------------------
//   Scaffolding
// -------------------------------------

// ----- Content ----- //

.bucket-content
  display: table-cell
  width: 10000px

// ----- Media ----- //

.bucket-media
  float: left
  margin-right: $b-space

  > img
    display: block
    max-width: none

// *************************************
//
//   Bucket
//   -> Media-supported content
//      CodePen: http://codepen.io/johndjameson/pen/saEDx
//
// -------------------------------------
//   Template (Haml)
// -------------------------------------
//
// .bucket[.bucket--flag]
//   .bucket-media
//     / ...
//   .bucket-content
//     / ...
//
// *************************************

.bucket
  display: flex

// -------------------------------------
//   Modifiers
// -------------------------------------

// ----- Flag ----- //

.bucket--flag
  align-items: center

// -------------------------------------
//   Scaffolding
// -------------------------------------

// ----- Content ----- //

.bucket-content
  flex-grow: 1

// ----- Media ----- //

.bucket-media
  flex-shrink: 0
  margin-right: $b-space

  > img
    display: block

Update Bucket Component to flexbox version
Update Bucket Component to flexbox version
