feat: improve dimensions

This commit is contained in:
EETagent 2022-12-16 13:36:16 +01:00
parent 9d8be9875e
commit 570dcfb9e5

View file

@ -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>