tonyair/webpack-bootstrap-ui-kit
1
0
Fork 0
mirror of https://github.com/a2nt/webpack-bootstrap-ui-kit.git synced 2024-10-22 11:05:45 +02:00
Code Issues Projects Releases Wiki Activity

IMPR: Minor loading improvements

Browse Source
This commit is contained in:
Tony Air 2023-11-22 02:19:16 +02:00
parent c674bf539d
commit d2a2513837
3 changed files with 72 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
src/scss/_animations.scss
View File

@ -1,51 +1,62 @@
// pulse // pulse
@keyframes pulse { @keyframes pulse {
0% { 0% {
transform: scale(1); transform: scale(1);
} }
50% { 50% {
transform: scale(.8); transform: scale(.8);
} }
100% { 100% {
transform: scale(1); transform: scale(1);
} }
} }
@keyframes fade { @keyframes fade {
0% { 0% {
filter: grayscale(0); filter: grayscale(0);
opacity: 1; opacity: 1;
} }
50% { 50% {
filter: grayscale(1); filter: grayscale(1);
opacity: .5; opacity: .5;
} }
100% { 100% {
filter: grayscale(0); filter: grayscale(0);
opacity: 1; opacity: 1;
} }
} }
@keyframes expand { @keyframes expand {
from { from {
max-height: 0; max-height: 0;
overflow: hidden; overflow: hidden;
} }
to { to {
max-height: 500rem; max-height: 100vh;
max-height: 200vh; overflow: visible;
overflow: visible; }
} }
@keyframes shrink {
to {
max-height: 0;
overflow: hidden;
}
from {
max-height: 100vh;
overflow: visible;
}
} }
.no-transition { .no-transition {
transition: none!important; transition: none !important;
} }

17
src/scss/layout/main/base.scss
View File

@ -4,6 +4,10 @@ body {
min-height: 100vh; min-height: 100vh;
} }
html {
overflow-y: scroll; // prevent content jumps produced by scroll bar
}
// sticky footer // sticky footer
body { body {
display: flex; display: flex;
@ -16,6 +20,7 @@ body {
--body-gutter-reduced-y: #{inspect($body-gutter-reduced-y)}; --body-gutter-reduced-y: #{inspect($body-gutter-reduced-y)};
--body-gutter-reduced-d-x: #{inspect($body-gutter-reduced-d-x)}; --body-gutter-reduced-d-x: #{inspect($body-gutter-reduced-d-x)};
--body-gutter-reduced-d-y: #{inspect($body-gutter-reduced-d-y)}; --body-gutter-reduced-d-y: #{inspect($body-gutter-reduced-d-y)};
overflow-y: hidden; // prevent content jumps produced by scroll bar
.wrapper { .wrapper {
flex: 1 0 auto; flex: 1 0 auto;
@ -29,6 +34,7 @@ body {
} }
@media (min-width: $extra-large-screen) { @media (min-width: $extra-large-screen) {
html, html,
body { body {
font-size: 0.9vw !important; font-size: 0.9vw !important;
@ -95,12 +101,13 @@ option,
a, a,
.a, .a,
.btn { .btn {
&:hover, &:hover,
&.active { &.active {
opacity: 0.8; opacity: 0.8;
> .fa, >.fa,
> .svg-inline--fa { >.svg-inline--fa {
transform: scale(1.5); transform: scale(1.5);
} }
} }
@ -114,8 +121,8 @@ a,
[data-toggle][aria-expanded="true"] { [data-toggle][aria-expanded="true"] {
opacity: 0.8; opacity: 0.8;
> .fa, >.fa,
> .svg-inline--fa { >.svg-inline--fa {
transform: scale(1.5); transform: scale(1.5);
} }
} }

18
src/scss/layout/main/states/network.scss
View File

@ -6,6 +6,22 @@
animation: fade 0.5s linear infinite; animation: fade 0.5s linear infinite;
} }
// slower animation speed for big objects
.carousel__img.loading {
animation: fade 3s linear infinite;
}
main.loading {
animation: shrink 0.5s linear 1;
max-height: 0;
overflow: hidden;
}
main.loaded {
animation: expand 0.5s linear 1;
max-height: fit-content;
}
.graphql-page { .graphql-page {
&.response-404 { &.response-404 {
cursor: not-allowed; cursor: not-allowed;
@ -36,4 +52,4 @@ body.ajax-loading {
position: relative; position: relative;
z-index: 2001; z-index: 2001;
} }
} }