A simple badge that shows your Rails environment.

_dev_badge.html.slim

/ In app/views/shared/

#dev-badge
  span= Rails.env
  span It ain't production!

application.html.slim

html
  = render 'layouts/head'
  body
    == render partial: 'shared/dev_badge' unless Rails.env.production?

dev-badge.scss

/* Be sure to `@import "dev-badge"` from your application.css.scss */

#dev-badge {
  left: -65px;
  height: 30px;
  top: 40px;
  position: absolute;
  text-decoration: none;
  width: 250px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);

  span {
    background: #073642;
    color: #839496;
    font-size: 14px;
    left: 0;
    padding: 5px 0;
    position: absolute;
    text-align: center;
    width: 250px;
    -webkit-box-shadow: rgba(255, 255, 255, 0.3) 1px 1px 10px;
    -moz-box-shadow: rgba(255, 255, 255, 0.3) 1px 1px 10px;
    box-shadow: rgba(255, 255, 255, 0.3) 1px 1px 10px;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;

    &:last-child {
      /* this is the backside */
      background: #0087FF;
      color: #eee8d5;
      opacity: 0;
    }
  }

  :hover span {
    &:first-child { opacity: 0; }
    &:last-child { opacity: 1; }
  }
}

@media all and (-webkit-transform-3d) {
  #dev-badge {
    span {
      opacity: 1 !important;
      -webkit-backface-visibility: hidden;
      -webkit-transition: -webkit-transform 1s;

      &:last-child {
        -webkit-transform: rotateX(180deg);
      }
    }

    &:hover span {

      &:first-child {
        -webkit-transform: rotateX(180deg);
      }
      &:last-child {
        -webkit-transform: rotateX(360deg);
      }
    }

  }
}