Permalink
Fetching contributors…
Cannot retrieve contributors at this time
137 lines (112 sloc) 3.23 KB
/**
* @copyright 2010-2015, The Titon Project
* @license http://opensource.org/licenses/BSD-3-Clause
* @link http://titon.io
*/
@import "../common";
@include export("toast") {
#{$toast-class-wrapper} {
position: fixed;
padding: $margin;
width: 20%;
z-index: $toast-zindex;
@include if-max(nth($breakpoint-range-small, 1)) {
width: 100%;
}
@if index($toast-position, "top-left") {
&.top-left {
top: 0;
left: 0;
}
}
@if index($toast-position, "top-center") {
&.top-center {
top: 0;
left: 50%;
}
}
@if index($toast-position, "top-right") {
&.top-right {
top: 0;
right: 0;
}
}
@if index($toast-position, "center-left") {
&.center-left {
top: 50%;
left: 0;
}
}
@if index($toast-position, "center-right") {
&.center-right {
top: 50%;
right: 0;
}
}
@if index($toast-position, "bottom-left") {
&.bottom-left {
bottom: 0;
left: 0;
}
}
@if index($toast-position, "bottom-center") {
&.bottom-center {
bottom: 0;
left: 50%;
}
}
@if index($toast-position, "bottom-right") {
&.bottom-right {
bottom: 0;
right: 0;
}
}
@if index($toast-position, "top-center") or index($toast-position, "bottom-center") {
&.top-center,
&.bottom-center {
transform: translateX(-50%);
}
}
@if index($toast-position, "center-left") or index($toast-position, "center-right") {
&.center-left,
&.center-right {
transform: translateY(-50%);
}
}
}
#{$toast-class} {
margin-top: 1rem;
transition: opacity $toast-transition, visibility $toast-transition, transform $toast-transition;
opacity: 0;
visibility: hidden;
&.show { opacity: 1; }
&:first-child { margin-top: 0; }
}
//-------------------- Animations --------------------//
#{$toast-class} {
@if index($toast-animations, "slide-up") {
&.slide-up {
transform: translateY(50%);
&.show { transform: translateY(0); }
}
}
@if index($toast-animations, "slide-down") {
&.slide-down {
transform: translateY(-50%);
&.show { transform: translateY(0); }
}
}
@if index($toast-animations, "slide-left") {
&.slide-left {
transform: translateX(25%);
&.show { transform: translateX(0); }
}
}
@if index($toast-animations, "slide-right") {
&.slide-right {
transform: translateX(-25%);
&.show { transform: translateX(0); }
}
}
}
}