Responsiveness and tabs #179

Merged
enes merged 23 commits from 177-sticky-side-columns into staging 2024-09-05 07:30:55 +00:00
2 changed files with 21 additions and 9 deletions
Showing only changes of commit d627db5ac0 - Show all commits

View File

@ -23,7 +23,9 @@ export const LoadingSpinner = (props: Props) => {
<div className={styles.loadingSpinnerOverlay}>
<div className={styles.loadingSpinnerContainer}>
<div className={styles.loadingSpinner}></div>
{desc && <span className={styles.loadingSpinnerDesc}>{desc}</span>}
{desc && (
<p className={styles.loadingSpinnerDesc}>{'Loading...'}</p>
)}
</div>
</div>
)

View File

@ -2,23 +2,29 @@
.loadingSpinnerOverlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
backdrop-filter: blur(10px);
}
.loadingSpinnerContainer {
width: 100%;
max-width: 500px;
margin: 25px 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: $overlay-background-color;
box-shadow: 0 0 4px 0 rgb(0, 0, 0, 0.1);
border-radius: 4px;
&.withHeight {
min-height: 250px;
}
@ -26,14 +32,18 @@
.loadingSpinner {
background: url('/favicon.png') no-repeat center / cover;
width: 40px;
height: 40px;
margin: 40px 25px;
width: 65px;
height: 65px;
animation: spin 1s linear infinite;
}
.loadingSpinnerDesc {
color: white;
margin-top: 13px;
width: 100%;
padding: 15px;
border-top: solid 1px rgba(0, 0, 0, 0.1);
text-align: center;
color: rgba(0, 0, 0, 0.5);
font-size: 16px;
font-weight: 400;