AToaster/AToaster.less at master · arca-computing/AToaster · GitHub

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
.clearfix:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
}
.clearfix {display: block;}
html[xmlns] .clearfix {display: block;}
* html .clearfix {height: 1%;}

.toaster-container{
  position: fixed;
  top: 10px;
  right: 20px;
  z-index: 999999;

  > div.ng-leave.ng-leave-active, div.ng-enter{
    opacity: 0;
  }
  > div.ng-enter.ng-enter-active, div.ng-leave{
    opacity: 0.9;
  }
  > div.ng-enter, div.ng-leave{
    -webkit-transition: 1000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -moz-transition: 1000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -ms-transition: 1000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -o-transition: 1000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    transition: 1000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  }
  > div.fast.ng-enter, div.fast.ng-leave{
    -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  }
  > div.success{
    background-color: #2B803E;
  }
  > div.error{
    background-color: #801F15;
  }
  > div.warning{
    background-color: #AA7039;
  }
  > div.wait{
    background-color: #255E69;
  }
  > div:hover{
    cursor: pointer;
  }
  > div{
    color: #fff;
    padding: 10px 20px 10px 10px;
    opacity: 0.9;
    margin-bottom: 10px;

    .icon{
      float: left;
      margin: 0 10px;
      font-size:20px;
      padding-top: 10px;

      i.spin{
        @keyframes spin {
          from {transform:rotate(0deg);}
          to {transform:rotate(360deg);}
        }

        animation: spin 2s infinite linear;
      }
    }

    .infos{
      float: left;
      .title{
        font-weight: bold;
        font-size: 1.2em;
      }
    }
  }
}