Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="bokehs"></div>

SassMeister-input.scss

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

//////////////////////////////
// Atlas Card (.object-card)
//////////////////////////////

$color--card-background: #2a3840;
$color--card-foreground: #394952;
$color--card-border: #253139;
$color--card-content: white;
$color--card-metadata: color('blue', 30);

//////////////////////////////
// Bluemix Cards (.card)
//////////////////////////////
$white: #fff;
$bluemix-medium-grey: grey;
$bluemix-light-grey: grey;
$blue-90: blue;
$color--card: $white;
$color--card--hover: #00aed1;
$color--info--link: $bluemix-medium-grey;
$color--bindings--divider: lighten($bluemix-light-grey, 2);
$color--bindings--icon-border: #00bfe5;
$color--status: #e9f1f4;
$color--status--running: #13dd6d;
$color--status--text: darken($bluemix-medium-grey, 5);

// Move to bluemix-grids

%flex--horizontal-start {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
}

%flex--horizontal-center {
  display: flex;
  align-items: center;
  flex-direction: row;
}

%flex--horizontal-end {
  display: flex;
  align-items: flex-end;
  flex-direction: row;
}

%flex--vertical-center {
  display: flex;
  align-items: center;
  flex-direction: column;
}

//////////////////////////////
// Card List
//////////////////////////////
// Keep this in cards or move to lists?

%card-list {
  list-style-type: none;

  &__card {

    display: inline-block;
    width: em(245px);
    height: em(250px);
    background-color: $color--card;
  }

  &__object-card {
    width: 100%;
    margin-bottom: 2em;

    @media screen and (min-width: em(400px)) {
      width: 80%;
    }

    @media screen and (min-width: em(500px)) {
      width: 70%;
    }

    @media screen and (min-width: em(600px)) {
      width: 45%;
      margin: 0 10% em(35px) 0;

      &:nth-child(2n) {
        margin-right: 0;
      }
    }

    @media screen and (min-width: em(950px)) {
      width: 32%;

      &:nth-child(n) {
        margin: 0 2% em(35px) 0;
      }

      &:nth-child(3n) {
        margin-right: 0;
      }
    }

    @media screen and (min-width: em(1240px)) {
      width: 23.5%;

      &:nth-child(n) {
        margin: 0 2% em(35px) 0;
      }

      &:nth-child(4n) {
        margin-right: 0;
      }
    }

    @media screen and (min-width: em(1700px)) {
      width: 18%;

      &:nth-child(n) {
        margin: 0 2.5% em(35px) 0;
      }

      &:nth-child(5n) {
        margin-right: 0;
      }
    }

    @media screen and (min-width: 2100px) {
      width: 15%;

      &:nth-child(n) {
        margin: 0 2% em(35px) 0;
      }

      &:nth-child(6n) {
        margin-right: 0;
      }
    }
  }

  &__link-wrapper {
    @extend %flex--horizontal-start;

    flex-wrap: wrap;
    width: 100%;
    border: 1px $color--card-border solid;
    background-color: $color--card-background;
    text-decoration: none;
    transition: transform .2s;

    &:focus,
    &:hover {
      transform: scale(1.02);
    }
  }
}

//////////////////////////////
// Atlas Card (.object-card)
//////////////////////////////

%object-card {

  &__card-header {
    @extend %flex--horizontal-center;

    justify-content: center;
    width: 100%;
    padding-right: .5em;
    border-bottom: 3px color('blue', 40) solid;
  }

  &__graph {
    width: 100%;
    height: 66px;

    background-color: $color--card-foreground;
  }

  &__card-metric {
    @extend %flex--horizontal-end;

    flex-wrap: wrap;
    width: 50%;
    padding: .8em 0;
    border-right: 1px $color--card-border solid;
    border-bottom: 1px $color--card-border solid;

    &:last-child {
      border-right: none;
    }
  }

  &__card-metadata {
    @extend %flex--horizontal-center;

    width: 100%;
    padding: 0 1em;
    border-bottom: 1px $color--card-border solid;

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

%card-header {

  &__title {

    padding: 1.2em 0;
    color: $color--card-content;
    font-size: .95rem;
    letter-spacing: .035em;
  }

  &__icon {
    margin-right: 1em;
  }
}

%card-metric {

  &__figure {

    width: 100%;
    color: $color--card-content;
    font-size: 2.661rem;
    text-align: center;
  }

  &__unit {

    margin-left: .1em;
    font-size: 1.3rem;
    font-weight: 100;
  }

  &__label {

    width: 100%;
    color: $color--card-content;
    font-size: .8rem;
    text-align: center;
    letter-spacing: .015em;
    text-transform: uppercase;
    transform: scaleX(.9);
  }
}

%card-metadata {

  &__icon {
    width: 1.125em;
  }

  &__value {
    flex: 1;
    overflow: hidden;
    padding: .8em;
    color: $color--card-metadata;
    font-size: .8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

//////////////////////////////
// Bluemix Cards (.card)
//////////////////////////////

%transition--card {
  transition: box-shadow .1s;

  &:focus,
  &:hover {
    cursor: pointer;
    box-shadow: 0 0 .25em .25em $color--card--hover;
  }
}

%card {
  &__link-wrapper {
    text-decoration: none;
  }

  &__info {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: em(28px) em(10px) em(14px);
  }

  &__bindings {
    display: flex;
    justify-content: center;
    padding: em(14px) em(10px);
    border-top: 1px solid $color--bindings--divider;
    list-style-type: none;
  }

  &__status {
    display: flex;
    align-items: center;
    flex-direction: row;
    height: em(35px);
    padding: 0 em(10px);
    background-color: $color--status;
  }
}

%info {
  &__icon {
    display: block;
    margin: 0 auto em(14px);
  }

  &__name {
    color: $blue-90;
    font-size: 1.25em;
    line-height: 1.5;
    text-transform: lowercase;
  }

  &__link {
    color: $color--info--link;
    font-size: em(12px);
    line-height: 1.5;
    text-decoration: none;
  }
}

%bindings {
  &__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: em(36px);
    height: em(36px);
    padding: em(3px);
    border: 3px solid $color--bindings--icon-border;
    border-radius: 50%;
    margin: 0 em(2px);
  }
}

%status {
  &__icon {
    &--running {
      width: em(17px);
      height: em(17px);
      border-radius: 50%;
      margin-right: em(10px);
      background-color: $color--status--running;
    }
  }

  &__text {
    &--running {
      color: $color--status--text;
      font-size: em(14px);
    }
  }
}



.card-list {
  @extend %card-list;

  &__card {
    @extend %card-list__card;
  }

  &__object-card {
    @extend %card-list__object-card;
  }

  &__link-wrapper {
    @extend %card-list__link-wrapper;
  }
}

SassMeister-output.css

.card-list__link-wrapper {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
}

.card-list {
  list-style-type: none;
}
.card-list__card {
  display: inline-block;
  width: em(245px);
  height: em(250px);
  background-color: #fff;
}
.card-list__object-card {
  width: 100%;
  margin-bottom: 2em;
}
@media screen and (min-width: em(400px)) {
  .card-list__object-card {
    width: 80%;
  }
}
@media screen and (min-width: em(500px)) {
  .card-list__object-card {
    width: 70%;
  }
}
@media screen and (min-width: em(600px)) {
  .card-list__object-card {
    width: 45%;
    margin: 0 10% em(35px) 0;
  }
  .card-list__object-card:nth-child(2n) {
    margin-right: 0;
  }
}
@media screen and (min-width: em(950px)) {
  .card-list__object-card {
    width: 32%;
  }
  .card-list__object-card:nth-child(n) {
    margin: 0 2% em(35px) 0;
  }
  .card-list__object-card:nth-child(3n) {
    margin-right: 0;
  }
}
@media screen and (min-width: em(1240px)) {
  .card-list__object-card {
    width: 23.5%;
  }
  .card-list__object-card:nth-child(n) {
    margin: 0 2% em(35px) 0;
  }
  .card-list__object-card:nth-child(4n) {
    margin-right: 0;
  }
}
@media screen and (min-width: em(1700px)) {
  .card-list__object-card {
    width: 18%;
  }
  .card-list__object-card:nth-child(n) {
    margin: 0 2.5% em(35px) 0;
  }
  .card-list__object-card:nth-child(5n) {
    margin-right: 0;
  }
}
@media screen and (min-width: 2100px) {
  .card-list__object-card {
    width: 15%;
  }
  .card-list__object-card:nth-child(n) {
    margin: 0 2% em(35px) 0;
  }
  .card-list__object-card:nth-child(6n) {
    margin-right: 0;
  }
}
.card-list__link-wrapper {
  flex-wrap: wrap;
  width: 100%;
  border: 1px #253139 solid;
  background-color: #2a3840;
  text-decoration: none;
  transition: transform .2s;
}
.card-list__link-wrapper:focus, .card-list__link-wrapper:hover {
  transform: scale(1.02);
}

SassMeister-rendered.html

<div class="bokehs"></div>