glax/tranga-website
1
0
Fork 0
mirror of https://github.com/C9Glax/tranga-website.git synced 2025-09-10 11:58:20 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix loading for all TInputs

Browse Source
This commit is contained in:
glax
2025-09-04 19:48:43 +02:00
parent b90a880327
commit e5c51908c4
2 changed files with 36 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
tranga-website/src/Components/Inputs/TInput.tsx
View File

@@ -71,6 +71,7 @@ export default function TInput(props: TInputProps) {
onClick={submitClicked} onClick={submitClicked}
disabled={props.disabled ?? TDisabled(state)} disabled={props.disabled ?? TDisabled(state)}
aria-disabled={props.disabled ?? TDisabled(state)} aria-disabled={props.disabled ?? TDisabled(state)}
className={'t-loadable'}
> >
{props.submitButtonText ?? 'Submit'} {props.submitButtonText ?? 'Submit'}
</Button> </Button>

71
tranga-website/src/Components/Inputs/loadingBorder.css
View File

@@ -1,56 +1,51 @@
*, @keyframes spin {
*::before, from {transform: translate(-50%, -50%) rotate(0);}
*::after { to {transform: translate(-50%, -50%) rotate(360deg);}
box-sizing: border-box;
} }
@keyframes rotate {
100% {
transform: rotate(1turn);
}
}
.t-loadable { .t-loadable[aria-disabled="true"] {
--border-radius: 5px;
--border-size: 2px;
--border-bg: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
position: relative; position: relative;
border: none;
border-radius: 4px;
overflow: hidden; overflow: hidden;
border-radius: var(--border-radius);
border: none;
z-index: 0;
&::before { &::before {
content: ''; content: '';
position: absolute !important; display: block;
z-index: -2 !important; background: var(--border-bg);
transform-origin: 50% 50%; width: calc(100% * 1.41421356237);
left: -100vw !important; padding-bottom: calc(100% * 1.41421356237);
top: -100vh !important; position: absolute;
width: 200vw !important; left: 50% !important;
height: 200vh !important; top: 50% !important;
background-repeat: no-repeat !important; transform: translate(-50%, -50%);
background-image: linear-gradient( border-radius: 100%;
var(--joy-palette-primary-200), z-index: -1 !important;
var(--joy-palette-primary-200) animation: spin 5s linear infinite;
); }
animation: rotate 4s linear infinite; &--reverse::before{
animation-direction: reverse;
} }
&::after{ &::after{
content: ''; content: '';
position: absolute; position: absolute;
inset: var(--border-size);
z-index: -1; z-index: -1;
left: 2px; border-radius: calc(var(--border-radius) - var(--border-size));
top: 2px; background: var(--joy-palette-primary-500);
width: calc(100% - 4px);
height: calc(100% - 4px);
background: black;
border-radius: 3px;
} }
} }
.t-loadable[aria-disabled='true'] { .t-loadable[aria-disabled="true"]:has(input)::after {
&::before { background: black;
background-image: linear-gradient(
var(--joy-palette-danger-300),
var(--joy-palette-success-600)
);
} }
.t-loadable[aria-disabled="true"]:is(button) {
color: var(--joy-palette-text-primary);
} }