angular-cn/public/resources/css/module/_hover-card.scss

.hover-card {
  position: relative;
  display: block;
  cursor: pointer;
  box-shadow: 0px 2px 2px rgba($coal, 0.24), 0px 0px 2px rgba($coal, 0.12);
  border-radius: 2px;
  background: $snow;
  transition: all .3s;
  padding: ($unit * 2) - 1;
  margin: 0px 0px ($unit * 2) 0px;
  border: $snow solid 1px;
  text-decoration: none;

  @media handheld and (max-width: $phone-breakpoint),
  screen and (max-device-width: $phone-breakpoint),
  screen and (max-width: $tablet-breakpoint) {
    margin: ($unit * 2) 0px;
    display: block;
  }

  /*
  * Hover Transitions
  *
  */

  &:hover {
    transform: translate3d(0,-2px,0);
    box-shadow: 0px 4px 4px rgba($coal, 0.24), 0px 0px 4px rgba($coal, 0.12), 0px 6px 18px rgba($blueberry, 0.12);
    border: rgba($blueberry, 0.56) solid 1px;

    .hover-card-icon {
      color: rgba($blueberry, .87);
      border-color: rgba($blueberry, .87);
    }

    h3 {
      color: $silver;
    }

    .icon-ruby {
      background: url('/resources/images/icons/languages/ruby-icon-large-hover.png') 0px 0px no-repeat;
    }
    .icon-go {
      background: url('/resources/images/icons/languages/go-icon-large-hover.png') 0px 0px no-repeat;
    }
  }


  /*
  * Icon Styles
  *
  */

  &.has-icon {
    padding-left: ($unit * 9) - 1;
  }

  .hover-card-icon {
    transition: all .4s;
    position: absolute;
    top:  18px;
    left: 18px;
    z-index: $layer-1;
    font-size: 36px;
    color: rgba($cloud, .56);
  }

  .icon-number {
    top: 16px;
    left: $unit * 2;
    font-size: 24px;
    line-height: 36px;
    height: 40px;
    width: 40px;
    text-align: center;
    border: 2px solid $mist;
    border-radius: 200px;
    padding: 0px;
  }


  /*
  * Text Styles
  *
  */

  h3,
  p {
    transition: all .4s;
    line-height: 24px;
    margin: 0;
    padding: 0px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  h3 {
    color: $metal;
    text-transform: none;
    font-size: 20px;
  }

  p {
    font-size: 11px;
    text-transform: uppercase;
    color: $blueberry;
  }


  /*
  * Material Button Overrides
  *
  */

  .md-ripple-container {
    opacity: .48;
  }

  &.md-button.md-default-theme:not([disabled]):hover,
  &.md-button.md-default-theme:not([disabled]):focus {
    background-color: $snow;
  }
}