Diffstat (limited to 'frontend/delta/scss/web/overlay.scss') (more/less context) (ignore whitespace changes)
-rw-r--r-- | frontend/delta/scss/web/overlay.scss | 115 |
1 files changed, 115 insertions, 0 deletions
diff --git a/frontend/delta/scss/web/overlay.scss b/frontend/delta/scss/web/overlay.scss new file mode 100644 index 0000000..f94d62e --- a/dev/null +++ b/frontend/delta/scss/web/overlay.scss | |||
@@ -0,0 +1,115 @@ | |||
1 | @import "mixin"; | ||
2 | |||
3 | div.overlay { | ||
4 | z-index: 99999; | ||
5 | position: fixed; | ||
6 | top: 50%; | ||
7 | left: 50%; | ||
8 | width: 200px; | ||
9 | height: 200px; | ||
10 | margin-left: -100px; | ||
11 | margin-top: -100px; | ||
12 | background: rgba(0,0,0,0.8); | ||
13 | @include border-radius(20px); | ||
14 | |||
15 | .title { | ||
16 | color: #FFF; | ||
17 | font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; | ||
18 | font-weight: bold; | ||
19 | text-align: center; | ||
20 | display: block; | ||
21 | font-size: 26px; | ||
22 | position: absolute; | ||
23 | bottom: 30px; | ||
24 | left: 0; | ||
25 | width: 100%; | ||
26 | } | ||
27 | |||
28 | .icon { | ||
29 | position: relative; | ||
30 | display: inline-block; | ||
31 | width: 128px; | ||
32 | height: 128px; | ||
33 | top: 40%; | ||
34 | left: 50%; | ||
35 | margin-left: -64px; | ||
36 | margin-top: -64px; | ||
37 | |||
38 | text-align: center; | ||
39 | vertical-align: middle; | ||
40 | |||
41 | @include icon-font(); | ||
42 | font-size: 96pt; | ||
43 | color: white; | ||
44 | text-shadow: none; | ||
45 | } | ||
46 | |||
47 | &.ios-overlay-show { | ||
48 | @include animation(ios-overlay-show, 750ms); | ||
49 | } | ||
50 | |||
51 | |||
52 | &.ios-overlay-hide { | ||
53 | @include animation(ios-overlay-hide, 750ms, linear, 1, forwards); | ||
54 | } | ||
55 | |||
56 | //http://37signals.com/svn/posts/2577-loading-spinner-animation-using-css-and-webkit | ||
57 | div.spinner { | ||
58 | position: relative; | ||
59 | width: 100px; | ||
60 | height: 100px; | ||
61 | left: 50% !important; | ||
62 | top: 40% !important; | ||
63 | |||
64 | margin-left: -50px; | ||
65 | margin-top: -50px; | ||
66 | |||
67 | // display: inline-block; | ||
68 | display: block; | ||
69 | |||
70 | div { | ||
71 | width: 12%; | ||
72 | height: 26%; | ||
73 | background: #ffffff; | ||
74 | position: absolute; | ||
75 | left: 44.5%; | ||
76 | top: 37%; | ||
77 | opacity: 0; | ||
78 | @include animation(overlay-spin, 1s, linear, infinite); | ||
79 | @include border-radius(50px); | ||
80 | @include box-shadow(0, 0, 3px, rgba(0,0,0,0.2)); | ||
81 | } | ||
82 | |||
83 | div.bar01 {@include transform( 0deg, 0, -142%); @include animation-delay(-0.00000s);} | ||
84 | div.bar02 {@include transform( 30deg, 0, -142%); @include animation-delay(-0.91670s);} | ||
85 | div.bar03 {@include transform( 60deg, 0, -142%); @include animation-delay(-0.83300s);} | ||
86 | div.bar04 {@include transform( 90deg, 0, -142%); @include animation-delay(-0.75000s);} | ||
87 | div.bar05 {@include transform(120deg, 0, -142%); @include animation-delay(-0.66700s);} | ||
88 | div.bar06 {@include transform(150deg, 0, -142%); @include animation-delay(-0.58330s);} | ||
89 | div.bar07 {@include transform(180deg, 0, -142%); @include animation-delay(-0.50000s);} | ||
90 | div.bar08 {@include transform(210deg, 0, -142%); @include animation-delay(-0.41667s);} | ||
91 | div.bar09 {@include transform(240deg, 0, -142%); @include animation-delay(-0.33300s);} | ||
92 | div.bar10 {@include transform(270deg, 0, -142%); @include animation-delay(-0.25000s);} | ||
93 | div.bar11 {@include transform(300deg, 0, -142%); @include animation-delay(-0.16670s);} | ||
94 | div.bar12 {@include transform(330deg, 0, -142%); @include animation-delay(-0.08330s);} | ||
95 | } | ||
96 | } | ||
97 | |||
98 | //======================================================== | ||
99 | |||
100 | @include keyframes(overlay-spin) { | ||
101 | from {opacity: 1;} | ||
102 | to {opacity: 0.25;} | ||
103 | } | ||
104 | |||
105 | @include keyframes(ios-overlay-show) { | ||
106 | 0% { opacity: 0; } | ||
107 | 100% { opacity: 1; } | ||
108 | } | ||
109 | |||
110 | @include keyframes(ios-overlay-hide) { | ||
111 | 0% { opacity: 1; } | ||
112 | 100% { opacity: 0; } | ||
113 | } | ||
114 | |||
115 | //======================================================== | ||