.toast { position: fixed; right: 0; bottom: 0; left: 0; z-index: ($content-base + 1); a { color: lighten($link-color, 30%); cursor: pointer; &:focus, &:hover { color: lighten($link-color, 15%); text-decoration: none; } } .tooltip { position: static !important; } // 768 @include responsive(sm) { margin-right: ($grid-gutter * 2 + $line-height * 2); // position right: auto; bottom: $line-height; left: $grid-gutter !important; } } .toast-inner { background-color: $black-text; color: $white; font-size: floor($font-size * 0.9); padding: ($line-height / 2) $grid-gutter; @include backface(hidden); @include box-shadow(0 1px 10px rgba(0, 0, 0, 0.5)); @include clearfix(); @include transform(translate3d(0, 200%, 0)); @include transition(all 0.3s $timing); -webkit-transition-property: -webkit-transform; transition-property: transform; .toast-show & { @include transform(translate3d(0, 0, 0)); } // 768 @include responsive(sm) { border-radius: 2px; float: left; } // no transform3d .no-csstransforms3d & { @include opacity(0); } .no-csstransforms3d .toast-show & { @include opacity(1); } } .toast-text { overflow: hidden; } [data-dismiss="toast"] { cursor: pointer; float: right; font-weight: 700; margin-left: $grid-gutter; text-transform: uppercase; }