Impaczus/2048
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add app notice

Browse Source
This commit is contained in:
Gabriele Cirulli
2014-04-27 13:04:48 +02:00
parent b56159b5da
commit 3793755010
6 changed files with 224 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style/main.css
+121 -1
View File
@@ -919,7 +919,7 @@ hr {
opacity: 1;
top: -45px;
pointer-events: auto; }
@media screen and (max-width: 480px) {
@media screen and (max-width: 520px) {
.btc-donate {
width: 120px; }
.btc-donate .address {
@@ -930,3 +930,123 @@ hr {
.btc-donate .address:after {
left: 50%;
bottom: 2px; } }
@-webkit-keyframes pop-in-big {
0% {
-webkit-transform: scale(0) translateZ(0);
-moz-transform: scale(0) translateZ(0);
transform: scale(0) translateZ(0);
opacity: 0;
margin-top: -56px; }
100% {
-webkit-transform: scale(1) translateZ(0);
-moz-transform: scale(1) translateZ(0);
transform: scale(1) translateZ(0);
opacity: 1;
margin-top: 30px; } }
@-moz-keyframes pop-in-big {
0% {
-webkit-transform: scale(0) translateZ(0);
-moz-transform: scale(0) translateZ(0);
transform: scale(0) translateZ(0);
opacity: 0;
margin-top: -56px; }
100% {
-webkit-transform: scale(1) translateZ(0);
-moz-transform: scale(1) translateZ(0);
transform: scale(1) translateZ(0);
opacity: 1;
margin-top: 30px; } }
@keyframes pop-in-big {
0% {
-webkit-transform: scale(0) translateZ(0);
-moz-transform: scale(0) translateZ(0);
transform: scale(0) translateZ(0);
opacity: 0;
margin-top: -56px; }
100% {
-webkit-transform: scale(1) translateZ(0);
-moz-transform: scale(1) translateZ(0);
transform: scale(1) translateZ(0);
opacity: 1;
margin-top: 30px; } }
@-webkit-keyframes pop-in-small {
0% {
-webkit-transform: scale(0) translateZ(0);
-moz-transform: scale(0) translateZ(0);
transform: scale(0) translateZ(0);
opacity: 0;
margin-top: -76px; }
100% {
-webkit-transform: scale(1) translateZ(0);
-moz-transform: scale(1) translateZ(0);
transform: scale(1) translateZ(0);
opacity: 1;
margin-top: 10px; } }
@-moz-keyframes pop-in-small {
0% {
-webkit-transform: scale(0) translateZ(0);
-moz-transform: scale(0) translateZ(0);
transform: scale(0) translateZ(0);
opacity: 0;
margin-top: -76px; }
100% {
-webkit-transform: scale(1) translateZ(0);
-moz-transform: scale(1) translateZ(0);
transform: scale(1) translateZ(0);
opacity: 1;
margin-top: 10px; } }
@keyframes pop-in-small {
0% {
-webkit-transform: scale(0) translateZ(0);
-moz-transform: scale(0) translateZ(0);
transform: scale(0) translateZ(0);
opacity: 0;
margin-top: -76px; }
100% {
-webkit-transform: scale(1) translateZ(0);
-moz-transform: scale(1) translateZ(0);
transform: scale(1) translateZ(0);
opacity: 1;
margin-top: 10px; } }
.app-notice {
position: relative;
-webkit-animation: pop-in-big 700ms ease 2s both;
-moz-animation: pop-in-big 700ms ease 2s both;
animation: pop-in-big 700ms ease 2s both;
background: #edc53f;
color: white;
padding: 18px;
margin-top: 30px;
height: 56px;
box-sizing: border-box;
border-radius: 3px; }
.app-notice:after {
content: "";
display: block;
clear: both; }
.app-notice .notice-close-button {
float: right;
font-weight: bold;
cursor: pointer;
margin-left: 10px;
opacity: 0.7; }
.app-notice p {
margin-bottom: 0; }
.app-notice, .app-notice p {
line-height: 20px; }
.app-notice a {
color: white; }
@media screen and (max-width: 520px) {
.app-notice {
-webkit-animation: pop-in-small 700ms ease 2s both;
-moz-animation: pop-in-small 700ms ease 2s both;
animation: pop-in-small 700ms ease 2s both;
margin-top: 10px;
height: 76px; } }
style/main.scss
+74 -1
View File
@@ -752,7 +752,7 @@ hr {
}
// Styles for small screens
@include smaller(480px) {
@include smaller($mobile-threshold) {
width: 120px;
.address {
@@ -771,3 +771,76 @@ hr {
}
}
}
@include keyframes(pop-in-big) {
0% {
@include transform(scale(0) translateZ(0));
opacity: 0;
margin-top: -56px;
}
100% {
@include transform(scale(1) translateZ(0));
opacity: 1;
margin-top: 30px;
}
}
@include keyframes(pop-in-small) {
0% {
@include transform(scale(0) translateZ(0));
opacity: 0;
margin-top: -76px;
}
100% {
@include transform(scale(1) translateZ(0));
opacity: 1;
margin-top: 10px;
}
}
.app-notice {
position: relative;
@include animation(pop-in-big 700ms ease 2s both);
background: #edc53f;
color: white;
padding: 18px;
margin-top: 30px;
height: 56px;
box-sizing: border-box;
border-radius: $tile-border-radius;
&:after {
content: "";
display: block;
clear: both;
}
.notice-close-button {
float: right;
font-weight: bold;
cursor: pointer;
margin-left: 10px;
opacity: 0.7;
}
p {
margin-bottom: 0;
// float: left;
}
&, p {
line-height: 20px;
}
a {
color: white;
}
@include smaller($mobile-threshold) {
@include animation(pop-in-small 700ms ease 2s both);
margin-top: 10px;
height: 76px;
}
}