ehmorris/cardslap

View on GitHub
app/assets/stylesheets/_base-extends.css.scss

Summary

Maintainability
Test Coverage
%cards-bincards-decks-shared {
  position: relative;

  li {
    display: block;
    float: left;
    height: $card-size;
    margin: 0 0 25px 0;
    overflow: hidden;
    @include perspective(1000px);
    position: relative;
    @include transition;
    width: $card-size;
    z-index: 1;

    .actions {
      background: rgba(0,0,0,.25);
      border: 1px solid rgba(255,255,255,.2);
      bottom: 0;
      @include box-sizing(border-box);
      left: 0;
      padding: 1em;
      position: absolute;
      right: 0;

      a.share, a.edit, a.delete {
        color: #fff;
        margin-right: .4em;
        opacity: .65;
        text-decoration: none;

        &:hover {
          opacity: 1;
        }
      }

      a.delete {
        float: right;
        margin-right: 0;
      }

      @include media($smallandtouch) {
        background: none;
        border: 0;
        display: block;
        padding-right: .5em;
        @include position(absolute, 0px 0px 0 auto);
        text-align: right;
        width: 100px;
      }
    }
  }
}

%dropdown {
  background: #fff;
  border-radius: 2px;
  @include box-shadow(0 2px 12px rgba(0, 0, 0, .25));
  display: none;
  padding: .5em 0;
  padding: 0 20px;
  @include position(absolute, 0 0 0 0);
  z-index: 2;

  &.active {
    display: block;
  }
}