_toast.scss
1.33 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
.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;
}