Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A simple badge that shows your Rails environment.
/ In app/views/shared/
#dev-badge
span= Rails.env
span It ain't production!
html
= render 'layouts/head'
body
== render partial: 'shared/dev_badge' unless Rails.env.production?
/* 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);
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.