mirror of
https://github.com/danbulant/Portfolio
synced 2026-07-05 02:50:47 +00:00
feat: improve dimensions
This commit is contained in:
parent
9d8be9875e
commit
570dcfb9e5
1 changed files with 13 additions and 12 deletions
|
|
@ -102,15 +102,15 @@
|
||||||
{/each}
|
{/each}
|
||||||
<span class="separater" />
|
<span class="separater" />
|
||||||
{#each [9, 10, 11, 12] as value}
|
{#each [9, 10, 11, 12] as value}
|
||||||
<input
|
<input
|
||||||
class="codeInputDesktop"
|
class="codeInputDesktop"
|
||||||
bind:this={codeElementArray[value - 1]}
|
bind:this={codeElementArray[value - 1]}
|
||||||
bind:value={codeValueArray[value - 1]}
|
bind:value={codeValueArray[value - 1]}
|
||||||
on:keydown={(e) => inputDesktopOnKeyDown(value - 1, e)}
|
on:keydown={(e) => inputDesktopOnKeyDown(value - 1, e)}
|
||||||
on:paste|preventDefault={(e) => onPaste(e)}
|
on:paste|preventDefault={(e) => onPaste(e)}
|
||||||
type="text"
|
type="text"
|
||||||
/>
|
/>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
<h3 class="text-sspsBlue mx-8 mt-8 text-center text-xl font-semibold">
|
<h3 class="text-sspsBlue mx-8 mt-8 text-center text-xl font-semibold">
|
||||||
Zadejte 8místný kód pro aktivaci účtu
|
Zadejte 8místný kód pro aktivaci účtu
|
||||||
|
|
@ -129,10 +129,11 @@
|
||||||
}
|
}
|
||||||
input {
|
input {
|
||||||
@apply text-sspsBlue text-center font-semibold;
|
@apply text-sspsBlue text-center font-semibold;
|
||||||
@apply focus:border-sspsBlue hover:border-sspsBlue rounded-xl border border-2 bg-[#f8fafb] p-3 caret-transparent shadow-lg outline-none transition-colors duration-300;
|
@apply transition-colors duration-300;
|
||||||
|
@apply focus:border-sspsBlue hover:border-sspsBlue rounded-xl border border-2 bg-[#f8fafb] p-3 caret-transparent shadow-lg outline-none;
|
||||||
}
|
}
|
||||||
.separater {
|
.separater {
|
||||||
@apply bg-sspsBlue mr-2 hidden h-2 w-8 md:block
|
@apply bg-sspsBlue mr-2 hidden h-2 w-8 md:block;
|
||||||
}
|
}
|
||||||
.codeInputMobile {
|
.codeInputMobile {
|
||||||
@apply md:hidden;
|
@apply md:hidden;
|
||||||
|
|
@ -141,6 +142,6 @@
|
||||||
.codeInputDesktop {
|
.codeInputDesktop {
|
||||||
@apply hidden;
|
@apply hidden;
|
||||||
@apply mr-1 md:mr-2;
|
@apply mr-1 md:mr-2;
|
||||||
@apply sm:h-15 xl:w-18 xl:h-22 md:block sm:w-12 sm:text-xl md:h-20 md:w-16 md:text-4xl xl:p-0 xl:text-4xl;
|
@apply sm:h-15 2xl:w-18 2xl:h-22 sm:w-12 sm:text-xl md:block md:h-20 md:w-16 md:text-4xl xl:h-20 xl:w-16 xl:p-0;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue