Loading screen on editor / source init state
This commit is contained in:
NGPixel
@@ -34,5 +34,6 @@ $primary: 'indigo';
|
||||
@import 'components/_editor';
|
||||
|
||||
@import 'layout/_header';
|
||||
@import 'layout/_loader';
|
||||
|
||||
@import 'pages/_welcome';
|
||||
|
||||
@@ -1,145 +0,0 @@
|
||||
|
||||
|
||||
#page-type-view > section {
|
||||
transition: background-color .5s ease;
|
||||
|
||||
&.blurred {
|
||||
background-color: mc('grey', '50');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.sd-menus {
|
||||
|
||||
width: 300px;
|
||||
|
||||
}
|
||||
|
||||
.menu {
|
||||
.menu-list a, .menu-nav a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.menu-list .icon {
|
||||
margin-right: 8px
|
||||
}
|
||||
}
|
||||
|
||||
.section.is-small {
|
||||
padding: 20px 20px;
|
||||
}
|
||||
|
||||
.mkcontent {
|
||||
|
||||
h1 {
|
||||
border-bottom: 1px dotted mc('blue', '500');
|
||||
padding-bottom: 4px;
|
||||
font-weight: 400;
|
||||
color: desaturate(mc('blue', '500'), 20%);
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 1px dotted mc('grey', '100');
|
||||
padding-bottom: 4px;
|
||||
font-weight: 400;
|
||||
color: desaturate(mc('purple', '500'), 20%);
|
||||
}
|
||||
|
||||
a.toc-anchor {
|
||||
font-size: 80%;
|
||||
color: mc('blue', '500');
|
||||
border-bottom: none;
|
||||
|
||||
&:visited {
|
||||
color: mc('purple', '500') !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
a.external-link {
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
|
||||
&:before {
|
||||
content: "\f08e";
|
||||
font-family: FontAwesome;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
text-decoration: inherit;
|
||||
color: mc('grey', '500');
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 0;
|
||||
font-family: $core-font-monospace;
|
||||
|
||||
> code {
|
||||
box-shadow: inset 0 0 5px 0 mc('grey', '100');
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
pre + p {
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
img.right {
|
||||
float:right;
|
||||
}
|
||||
|
||||
img.pagelogo {
|
||||
float: right;
|
||||
margin-top: -75px;
|
||||
max-width: 200px;
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: mc('grey', '700');
|
||||
}
|
||||
|
||||
.twa {
|
||||
font-size: 120%;
|
||||
}
|
||||
|
||||
table thead th {
|
||||
background-color: mc('blue', '500');
|
||||
color: #FFF;
|
||||
border-color: #FFF;
|
||||
border-bottom-color: mc('blue', '500');
|
||||
border-top-color: mc('blue', '500');
|
||||
|
||||
&:first-child {
|
||||
border-left-color: mc('blue', '500');
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-right-color: mc('blue', '500');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.content a:not(.button):visited {
|
||||
color: mc('teal', '500');
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
code {
|
||||
font-weight: 500;
|
||||
color: mc('purple', '500');
|
||||
}
|
||||
|
||||
p code {
|
||||
padding: 2px 5px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
54
client/scss/layout/_loader.scss
Normal file
54
client/scss/layout/_loader.scss
Normal file
@@ -0,0 +1,54 @@
|
||||
#page-loader {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: mc('blue-grey', '800');
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: mc('blue-grey', '100');
|
||||
font-weight: 300;
|
||||
font-size: 18px;
|
||||
flex-direction: column;
|
||||
|
||||
> i {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 25px;
|
||||
|
||||
&::before {
|
||||
content: " ";
|
||||
@include spinner(mc('blue-grey', '200'), 0.4s, 48px);
|
||||
}
|
||||
}
|
||||
|
||||
@include keyframes(pageLoaderExit) {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
99% {
|
||||
display: flex;
|
||||
opacity: 0;
|
||||
transform: scale(1.1, 1.1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-loaded {
|
||||
animation: pageLoaderExit 1s ease forwards;
|
||||
}
|
||||
|
||||
&.is-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,85 +0,0 @@
|
||||
/**
|
||||
* Clearfix
|
||||
*
|
||||
* @return {string} Clearfix attribute
|
||||
*/
|
||||
@mixin clearfix {
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Placeholder attribute for inputs
|
||||
*
|
||||
* @return {string} Placeholder attributes
|
||||
*/
|
||||
@mixin placeholder {
|
||||
&::-webkit-input-placeholder {@content};
|
||||
&::-moz-placeholder {@content}
|
||||
&:-ms-input-placeholder {@content}
|
||||
&:placeholder-shown {@content};
|
||||
}
|
||||
|
||||
/**
|
||||
* Spinner element
|
||||
*
|
||||
* @param {string} $color - Color
|
||||
* @param {string} $dur - Animation Duration
|
||||
* @param {int} $width - Width
|
||||
* @param {int} $height [$width] - height
|
||||
*
|
||||
* @return {string} Spinner element
|
||||
*/
|
||||
@mixin spinner($color,$dur,$width,$height:$width) {
|
||||
width: $width;
|
||||
height: $height;
|
||||
border-radius: 50%;
|
||||
box-shadow:0 0 0 1px rgba(0,0,0,0.1), 2px 1px 0 $color;
|
||||
@include prefix(animation, spin $dur linear infinite);
|
||||
@include keyframes(spin) {
|
||||
100%{
|
||||
@include prefix(transform, rotate(360deg));
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Prefixes for keyframes
|
||||
*
|
||||
* @param {string} $animation-name - The animation name
|
||||
*
|
||||
* @return {string} Prefixed keyframes attributes
|
||||
*/
|
||||
@mixin keyframes($animation-name) {
|
||||
@-webkit-keyframes #{$animation-name} {
|
||||
@content;
|
||||
}
|
||||
@-moz-keyframes #{$animation-name} {
|
||||
@content;
|
||||
}
|
||||
@-o-keyframes #{$animation-name} {
|
||||
@content;
|
||||
}
|
||||
@keyframes #{$animation-name} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Prefix function for browser compatibility
|
||||
*
|
||||
* @param {string} $property - Property name
|
||||
* @param {any} $value - Property value
|
||||
*
|
||||
* @return {string} Prefixed attributes
|
||||
*/
|
||||
@mixin prefix($property, $value) {
|
||||
-webkit-#{$property}: #{$value};
|
||||
-moz-#{$property}: #{$value};
|
||||
-ms-#{$property}: #{$value};
|
||||
-o-#{$property}: #{$value};
|
||||
#{$property}: #{$value};
|
||||
}
|
||||
Reference in New Issue
Block a user