Contents

.flex-boxes {
  $base-border-radius: 3px !default;
  $base-background-color: white !default;
  $dark-gray: #333 !default;
  $light-gray: #DDD !default;
  $base-font-color: $dark-gray !default;
  $flex-box-border-color: $light-gray;
  $flex-box-border: 1px solid $flex-box-border-color;
  $flex-box-background: lighten($light-gray, 10%);
  $flex-box-gutter: 0.4em;
  $flex-box-width: 18em;
  $flex-box-color: transparentize($base-font-color, 0.3);
  $flex-box-top-colors:
    tomato,
    #72BFBF,
    #92B1E3,
    #E3D743,
    #CCC,
    #F6C05C;

  @include clearfix;
  align-items: stretch;
  clear: both;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;

  .flex-box {
    align-self: stretch;
    background: $flex-box-background;
    border-radius: $base-border-radius;
    box-shadow: inset 0 0 1px $flex-box-border-color, 0 2px 4px darken($base-background-color, 10%);
    display: block;
    flex: 2 2 15em;
    margin: $flex-box-gutter;
    padding: 2em 2em 3em 2em;
    text-decoration: none;
    transition: all 0.2s ease-in-out;

    @for $i from 1 to 7 { // assign colors from $flex-box-top-colors list
      &:nth-child(#{$i}) {
        $color-from-list: nth($flex-box-top-colors, $i);
        border-top: 6px solid $color-from-list;

        &:focus,
        &:hover {
          background-color: transparentize($color-from-list, 0.9);
        }
      }
    }

    img {
      display: block;
      height: 3em;
      margin: 0 auto 1em;
      opacity: 0.4;
    }

    .flex-title {
      color: $flex-box-color;
      font-size: 1.2em;
      margin-bottom: 0.5em;
    }

    p {
      color: transparentize($flex-box-color, 0.1);
      line-height: 1.5em;
      margin: auto;
    }
  }

  .flex-box-big {
    flex: 1 1 40em;
  }
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
refills-0.2.0	source/stylesheets/refills/_flex-boxes.scss