.fade-in-element { /////////////////////////////////////////////////////////////////////////////////// $base-border-color: gainsboro !default; $base-border-radius: 3px !default; $base-background-color: white !default; $base-line-height: 1.5em !default; $base-spacing: 1.5em !default; $dark-gray: #333 !default; $base-font-color: $dark-gray !default; line-height: $base-line-height; p { color: $base-font-color; line-height: $base-line-height; } ////////////////////////////////////////////////////////////////////////////////// @include clearfix; background: $base-background-color; border-radius: $base-border-radius; border: 1px solid silver; box-shadow: 0 2px 2px transparentize(black, 0.8); margin-bottom: 4em; padding: $base-spacing; text-align: center; width: 100%; } .js-fade-element-hide { opacity: 0; } .js-fade-element-show { @include transition (all 0.4s ease-in-out); opacity: 1; }