Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2025-01-30 23:32:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix margin for body

Browse Source
This commit is contained in:
Sebastien Chopin 2017-08-18 15:43:50 +02:00
parent c628097862
commit 775c9d0850
11 changed files with 78 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
lib/app/views/loading/circle.html
View File

@ -6,6 +6,8 @@ body, html, #__nuxt {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
}
.sk-circle {
@ -146,4 +148,4 @@ body, html, #__nuxt {
<div class="sk-circle12 sk-child"></div>
</div>
<!-- http://tobiasahlin.com/spinkit -->
<!-- http://tobiasahlin.com/spinkit -->

10
lib/app/views/loading/cube-grid.html
View File

@ -6,6 +6,8 @@ body, html, #__nuxt {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
}
.sk-cube-grid {
@ -20,7 +22,7 @@ body, html, #__nuxt {
background-color: <%= options.color %>;
float: left;
-webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
}
.sk-cube-grid .sk-cube1 {
-webkit-animation-delay: 0.2s;
@ -56,7 +58,7 @@ body, html, #__nuxt {
transform: scale3D(1, 1, 1);
} 35% {
-webkit-transform: scale3D(0, 0, 1);
transform: scale3D(0, 0, 1);
transform: scale3D(0, 0, 1);
}
}
@ -67,7 +69,7 @@ body, html, #__nuxt {
} 35% {
-webkit-transform: scale3D(0, 0, 1);
transform: scale3D(0, 0, 1);
}
}
}
</style>
@ -83,4 +85,4 @@ body, html, #__nuxt {
<div class="sk-cube sk-cube9"></div>
</div>
<!-- http://tobiasahlin.com/spinkit -->
<!-- http://tobiasahlin.com/spinkit -->

24
lib/app/views/loading/fading-circle.html
View File

@ -6,6 +6,8 @@ body, html, #__nuxt {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
}
.sk-fading-circle {
@ -82,40 +84,40 @@ body, html, #__nuxt {
.sk-fading-circle .sk-circle11 {
-webkit-transform: rotate(300deg);
-ms-transform: rotate(300deg);
transform: rotate(300deg);
transform: rotate(300deg);
}
.sk-fading-circle .sk-circle12 {
-webkit-transform: rotate(330deg);
-ms-transform: rotate(330deg);
transform: rotate(330deg);
transform: rotate(330deg);
}
.sk-fading-circle .sk-circle2:before {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
animation-delay: -1.1s;
}
.sk-fading-circle .sk-circle3:before {
-webkit-animation-delay: -1s;
animation-delay: -1s;
animation-delay: -1s;
}
.sk-fading-circle .sk-circle4:before {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
animation-delay: -0.9s;
}
.sk-fading-circle .sk-circle5:before {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
animation-delay: -0.8s;
}
.sk-fading-circle .sk-circle6:before {
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s;
animation-delay: -0.7s;
}
.sk-fading-circle .sk-circle7:before {
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
animation-delay: -0.6s;
}
.sk-fading-circle .sk-circle8:before {
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
animation-delay: -0.5s;
}
.sk-fading-circle .sk-circle9:before {
-webkit-animation-delay: -0.4s;
@ -141,7 +143,7 @@ body, html, #__nuxt {
@keyframes sk-circleFadeDelay {
0%, 39%, 100% { opacity: 0; }
40% { opacity: 1; }
40% { opacity: 1; }
}
</style>
@ -160,4 +162,4 @@ body, html, #__nuxt {
<div class="sk-circle12 sk-circle"></div>
</div>
<!-- http://tobiasahlin.com/spinkit -->
<!-- http://tobiasahlin.com/spinkit -->

22
lib/app/views/loading/folding-cube.html
View File

@ -6,6 +6,8 @@ body, html, #__nuxt {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
}
.sk-folding-cube {
@ -24,7 +26,7 @@ body, html, #__nuxt {
position: relative;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
transform: scale(1.1);
}
.sk-folding-cube .sk-cube:before {
content: '';
@ -58,7 +60,7 @@ body, html, #__nuxt {
}
.sk-folding-cube .sk-cube3:before {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
animation-delay: 0.6s;
}
.sk-folding-cube .sk-cube4:before {
-webkit-animation-delay: 0.9s;
@ -68,31 +70,31 @@ body, html, #__nuxt {
0%, 10% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
opacity: 0;
} 25%, 75% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
opacity: 1;
} 90%, 100% {
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
opacity: 0;
}
}
@keyframes sk-foldCubeAngle {
0%, 10% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
opacity: 0;
} 25%, 75% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
opacity: 1;
} 90%, 100% {
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
opacity: 0;
}
}
</style>
@ -104,4 +106,4 @@ body, html, #__nuxt {
<div class="sk-cube3 sk-cube"></div>
</div>
<!-- http://tobiasahlin.com/spinkit -->
<!-- http://tobiasahlin.com/spinkit -->

12
lib/app/views/loading/hasing-dots.html
View File

@ -6,6 +6,8 @@ body, html, #__nuxt {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
}
.spinner {
@ -14,7 +16,7 @@ body, html, #__nuxt {
height: 40px;
position: relative;
text-align: center;
-webkit-animation: sk-rotate 2.0s infinite linear;
animation: sk-rotate 2.0s infinite linear;
}
@ -27,7 +29,7 @@ body, html, #__nuxt {
top: 0;
background-color: <%= options.color %>;
border-radius: 100%;
-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
animation: sk-bounce 2.0s infinite ease-in-out;
}
@ -48,10 +50,10 @@ body, html, #__nuxt {
}
@keyframes sk-bounce {
0%, 100% {
0%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 50% {
} 50% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
@ -63,4 +65,4 @@ body, html, #__nuxt {
<div class="dot2"></div>
</div>
<!-- http://tobiasahlin.com/spinkit -->
<!-- http://tobiasahlin.com/spinkit -->

4
lib/app/views/loading/nuxt.html
View File

@ -6,6 +6,8 @@ body, html, #__nuxt {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
}
.logo {
@ -79,4 +81,4 @@ body, html, #__nuxt {
</div>
<!-- https://codepen.io/alexchopin/pen/jBWrej -->
<!-- https://codepen.io/alexchopin/pen/jBWrej -->

8
lib/app/views/loading/pulse.html
View File

@ -6,6 +6,8 @@ body, html, #__nuxt {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
}
.spinner {
@ -14,7 +16,7 @@ body, html, #__nuxt {
margin: 100px auto;
background-color: <%= options.color %>;
border-radius: 100%;
border-radius: 100%;
-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
animation: sk-scaleout 1.0s infinite ease-in-out;
}
@ -28,7 +30,7 @@ body, html, #__nuxt {
}
@keyframes sk-scaleout {
0% {
0% {
-webkit-transform: scale(0);
transform: scale(0);
} 100% {
@ -44,4 +46,4 @@ body, html, #__nuxt {
<div class="double-bounce2"></div>
</div>
<!-- http://tobiasahlin.com/spinkit -->
<!-- http://tobiasahlin.com/spinkit -->

12
lib/app/views/loading/rectangle-bounce.html
View File

@ -6,6 +6,8 @@ body, html, #__nuxt {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
}
.spinner {
@ -21,7 +23,7 @@ body, html, #__nuxt {
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
@ -47,15 +49,15 @@ body, html, #__nuxt {
}
@-webkit-keyframes sk-stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}
@keyframes sk-stretchdelay {
0%, 40%, 100% {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
} 20% {
} 20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
@ -70,4 +72,4 @@ body, html, #__nuxt {
<div class="rect5"></div>
</div>
<!-- http://tobiasahlin.com/spinkit -->
<!-- http://tobiasahlin.com/spinkit -->

14
lib/app/views/loading/rotating-plane.html
View File

@ -6,6 +6,8 @@ body, html, #__nuxt {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
}
.spinner {
@ -25,13 +27,13 @@ body, html, #__nuxt {
}
@keyframes sk-rotateplane {
0% {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
} 50% {
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
} 50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
} 100% {
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
} 100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
@ -40,4 +42,4 @@ body, html, #__nuxt {
<div class="spinner"></div>
<!-- http://tobiasahlin.com/spinkit -->
<!-- http://tobiasahlin.com/spinkit -->

8
lib/app/views/loading/three-bounce.html
View File

@ -6,6 +6,8 @@ body, html, #__nuxt {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
}
.spinner {
@ -41,10 +43,10 @@ body, html, #__nuxt {
}
@keyframes sk-bouncedelay {
0%, 80%, 100% {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
} 40% {
} 40% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
@ -57,4 +59,4 @@ body, html, #__nuxt {
<div class="bounce3"></div>
</div>
<!-- http://tobiasahlin.com/spinkit -->
<!-- http://tobiasahlin.com/spinkit -->

16
lib/app/views/loading/wandering-cubes .html
View File

@ -6,6 +6,8 @@ body, html, #__nuxt {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
}
.spinner {
@ -22,7 +24,7 @@ body, html, #__nuxt {
position: absolute;
top: 0;
left: 0;
-webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
animation: sk-cubemove 1.8s infinite ease-in-out;
}
@ -40,19 +42,19 @@ body, html, #__nuxt {
}
@keyframes sk-cubemove {
25% {
25% {
transform: translateX(42px) rotate(-90deg) scale(0.5);
-webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
} 50% {
} 50% {
transform: translateX(42px) translateY(42px) rotate(-179deg);
-webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
} 50.1% {
} 50.1% {
transform: translateX(42px) translateY(42px) rotate(-180deg);
-webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
} 75% {
} 75% {
transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
-webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
} 100% {
} 100% {
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
}
@ -64,4 +66,4 @@ body, html, #__nuxt {
<div class="cube2"></div>
</div>
<!-- http://tobiasahlin.com/spinkit -->
<!-- http://tobiasahlin.com/spinkit -->