CSS File

1@charset "UTF-8";/*!

2 * smallPop 0.1.2 | https://github.com/silvio-r/spop

3 * Copyright (c) 2015 Sílvio Rosa @silvior_

4 * MIT license

5 */.spop-container{z-index:2000;position:fixed}

6.spop-container,.spop-container *,.spop-container :after,.spop-container :before{box-sizing:border-box}

7.spop--top-left{top:0;left:0}

8.spop--top-left .spop{-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0}

9.spop--top-center{top:0;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}

10.spop--top-center .spop{-webkit-transform-origin:50% 0;-ms-transform-origin:50% 0;transform-origin:50% 0}

11.spop--top-right{top:0;right:0}

12.spop--top-right .spop{-webkit-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0}

13.spop--center{top:50%;left:50%;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}

14.spop--center .spop{-webkit-transform-origin:50% 0;-ms-transform-origin:50% 0;transform-origin:50% 0}

15.spop--bottom-left{bottom:0;left:0}

16.spop--bottom-left .spop{-webkit-transform-origin:0 100%;-ms-transform-origin:0 100%;transform-origin:0 100%}

17.spop--bottom-center{bottom:0;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}

18.spop--bottom-center .spop{-webkit-transform-origin:50% 100%;-ms-transform-origin:50% 100%;transform-origin:50% 100%}

19.spop--bottom-right{bottom:0;right:0}

20.spop--bottom-right .spop{-webkit-transform-origin:100% 100%;-ms-transform-origin:100% 100%;transform-origin:100% 100%}

21@media screen and (max-width:30em){.spop--bottom-center,.spop--bottom-left,.spop--bottom-right,.spop--top-center,.spop--top-left,.spop--top-right{top:auto;bottom:0;left:0;right:0;margin-left:0;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}

22.spop--bottom-center .spop,.spop--bottom-left .spop,.spop--bottom-right .spop,.spop--top-center .spop,.spop--top-left .spop,.spop--top-right .spop{-webkit-transform-origin:50% 100%;-ms-transform-origin:50% 100%;transform-origin:50% 100%}

23.spop{border-bottom:1px solid rgba(0,0,0,.15)}

24}

25.spop{position:relative;min-height:56px;line-height:1.25;

font-size:14px;-webkit-transform:translateZ(0);transform:translateZ(0)}

26@media screen and (min-width:30em){.spop{border-radius:2px;width:320px;margin:.7em}

27}

28.spop--error,.spop--info,.spop--success,.spop--warning{color:#fff;background-color:#454A56}

29@-webkit-keyframes spopIn{0%{-webkit-transform:scale(.2,.2);transform:scale(.2,.2)}

3095%{-webkit-transform:scale(1.1,1.1);transform:scale(1.1,1.1)}

31100%{-webkit-transform:scale(1,1);transform:scale(1,1)}

32}

33@keyframes spopIn{0%{-webkit-transform:scale(.2,.2);transform:scale(.2,.2)}

3495%{-webkit-transform:scale(1.1,1.1);transform:scale(1.1,1.1)}

35100%{-webkit-transform:scale(1,1);transform:scale(1,1)}

36}

37@-webkit-keyframes spopOut{0%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}

3820%{-webkit-transform:scale(1.1,1.1);transform:scale(1.1,1.1)}

39100%{opacity:0;-webkit-transform:scale(0,0);transform:scale(0,0)}

40}

41@keyframes spopOut{0%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}

4220%{-webkit-transform:scale(1.1,1.1);transform:scale(1.1,1.1)}

43100%{opacity:0;-webkit-transform:scale(0,0);transform:scale(0,0)}

44}

45.spop--out{-webkit-animation:spopOut .4s ease-in-out;animation:spopOut .4s ease-in-out}

46.spop--in{-webkit-animation:spopIn .4s ease-in-out;animation:spopIn .4s ease-in-out}

47.spop-body{padding:1.4em}

48.spop-body p{margin:0}

49.spop-body a{color:#fff;text-decoration:underline}

50.spop-body a:hover{color:rgba(255,255,255,.8);text-decoration:none}

51.spop-title{margin-top:0;margin-bottom:.25em;color:#fff}

52.spop-close{position:absolute;right:0;top:0;height:32px;width:32px;padding-top:7px;padding-right:7px;font-size:22px;font-weight:700;text-align:right;line-height:.6;color:#fff;opacity:.5}

53.spop-close:hover{opacity:.7;cursor:pointer}

54.spop-icon{position:absolute;top:13px;left:16px;width:30px;height:30px;border-radius:50%;-webkit-animation:spopIn .4s .4s ease-in-out;animation:spopIn .4s .4s ease-in-out}

55.spop-icon:after,.spop-icon:before{content:"";position:absolute;display:block}

56.spop-icon+.spop-body{padding-left:4.2em}

57.spop-icon--error,.spop-icon--info{border:2px solid #3a95ed}

58.spop-icon--error:before,.spop-icon--info:before{top:5px;left:11px;width:4px;height:4px;background-color:#3a95ed}

59.spop-icon--error:after,.spop-icon--info:after{top:12px;left:11px;width:4px;height:9px;background-color:#3a95ed}

60.spop-icon--error{border-color:#ff5656}

61.spop-icon--error:before{top:16px;background-color:#ff5656}

62.spop-icon--error:after{top:5px;background-color:#ff5656}

63.spop-icon--success{border:2px solid #2ecc54}

64.spop-icon--success:before{top:7px;left:7px;width:13px;height:8px;border-bottom:3px solid #2ecc54;border-left:3px solid #2ecc54;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}

65.spop-icon--warning{border:2px solid #fcd000}

66.spop-icon--warning:before{top:7px;left:7px;width:0;height:0;border-style:solid;border-color:transparent transparent #fcd000;border-width:0 6px 10px}