dan/Portfolio
1
0
Fork 0
mirror of https://github.com/danbulant/Portfolio synced 2026-05-24 12:35:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: windicss class formatting

Browse source
This commit is contained in:
EETagent 2022-12-04 00:37:44 +01:00
parent 18f090ee57
commit e1a67bbdea
19 changed files with 105 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/lib/components/DarkModeToggle.svelte
View file

@ -26,13 +26,13 @@
<style>
svg {
@apply w-12 h-12;
@apply h-12 w-12;
}
.blue {
@apply stroke-sspsBlue fill-sspsBlue;
@apply transition-colors duration-300 hover:fill-sspsBlueDark hover:stroke-sspsBlueDark;
@apply hover:fill-sspsBlueDark hover:stroke-sspsBlueDark transition-colors duration-300;
}
.white {
@apply stroke-white fill-white;
@apply fill-white stroke-white;
}
</style>

2
frontend/src/lib/components/PageTransition.svelte
View file

@ -7,7 +7,7 @@
<div
in:fly={{ x: -5, duration: 500, delay: 500 }}
out:fly={{ x: 5, duration: 500 }}
class="absolute bg-inherit w-full h-full"
class="absolute h-full w-full bg-inherit"
>
<slot />
</div>

2
frontend/src/lib/components/dashboard/DashboardInfoCard.svelte
View file

@ -31,6 +31,6 @@
@apply m-0;
}
.card h3 {
@apply text-sspsBlue text-4xl md:text-2xl xl:text-4xl font-semibold;
@apply text-sspsBlue text-4xl font-semibold md:text-2xl xl:text-4xl;
}
</style>

22
frontend/src/lib/components/dashboard/DashboardUploadCard.svelte
View file

@ -87,18 +87,18 @@
};
</script>
<div class="relative card uploadCard">
<div class="card uploadCard relative">
<div class="header">
<h3 class="mb-4 sm:mb-0">{title}</h3>
<div class="mb-4 sm:mb-0 mt-1 sm:mt-0">
<div class="mb-4 mt-1 sm:mb-0 sm:mt-0">
<FileType {filetype} filesize={filesize + ' MB'} />
</div>
<div class="absolute px-7 right-0 top-4">
<div class="absolute right-0 top-4 px-7">
<StatusNotificationDot {status} />
</div>
</div>
{#if fileDropped}
<div class="body flex content-around justify-between items-center">
<div class="body flex content-around items-center justify-between">
<div class="w-24">
<img
class="w-full object-scale-down"
@ -106,7 +106,7 @@
alt="Icon"
/>
</div>
<svg class="hidden xl:block h-25" viewBox="0 0 2 40" xmlns="http://www.w3.org/2000/svg"
<svg class="h-25 hidden xl:block" viewBox="0 0 2 40" xmlns="http://www.w3.org/2000/svg"
><line
x1="0"
y="0"
@ -117,12 +117,12 @@
stroke-dasharray="3"
/></svg
>
<div class="hidden xl:block items-center">
<div class="hidden items-center xl:block">
{#if bytesTotal === 0 || Math.round(progress * 100) === 100}
<h2 class="text-xl font-bold">{status === 'submitted' ? 'Odesláno' : 'Nahráno'}</h2>
{:else}
<h2 class="text-xl">Nahráno {((bytesTotal / 1_000_000) * progress).toFixed(1)} MB</h2>
<h2 class="text-xl self-center">z {(bytesTotal / 1_000_000).toFixed(1)} MB</h2>
<h2 class="self-center text-xl">z {(bytesTotal / 1_000_000).toFixed(1)} MB</h2>
{/if}
</div>
<svg class="h-25" viewBox="0 0 2 40" xmlns="http://www.w3.org/2000/svg"
@ -137,7 +137,7 @@
/></svg
>
<div class="items-center text-center">
<h2 class="text-2xl text-sspsBlueDark font-bold mb-2">{Math.round(progress * 100)} %</h2>
<h2 class="text-sspsBlueDark mb-2 text-2xl font-bold">{Math.round(progress * 100)} %</h2>
<ProgressBar {progress} />
</div>
</div>
@ -189,7 +189,7 @@
backdrop-filter: blur(15px) saturate(0.86);
-webkit-backdrop-filter: blur(15px) saturate(0.86);
@apply flex flex-col sm:flex-row justify-between sm:items-center;
@apply flex flex-col justify-between sm:flex-row sm:items-center;
}
.body {
@apply bg-[#f8fbfc];
@ -198,10 +198,10 @@
@apply p-7;
}
.card h3 {
@apply text-sspsBlue text-2xl xl:text-4xl font-semibold;
@apply text-sspsBlue text-2xl font-semibold xl:text-4xl;
}
.card span {
@apply opacity-60 text-sm;
@apply text-sm opacity-60;
@apply transition-all duration-300;
}
.card .drag {

8
frontend/src/lib/components/dashboard/FileType.svelte
View file

@ -4,16 +4,16 @@
</script>
<div>
<span class="text-sspsBlue italic text-lg">{filetype}</span>
<span class="mx-2 text-sspsGray">/</span>
<span class="text-sspsBlue italic text-lg">Max {filesize}</span>
<span class="text-sspsBlue text-lg italic">{filetype}</span>
<span class="text-sspsGray mx-2">/</span>
<span class="text-sspsBlue text-lg italic">Max {filesize}</span>
</div>
<style>
div {
@apply flex items-center justify-between;
@apply py-1 px-4;
@apply bg-white rounded-xl shadow-md;
@apply rounded-xl bg-white shadow-md;
@apply hover:bg-sspsBlue;
@apply hover:cursor-pointer;

6
frontend/src/lib/components/dashboard/StatusNotificationBig.svelte
View file

@ -18,10 +18,10 @@
}
</script>
<div class="bg-white rounded-full flex mb-8">
<div class="mb-8 flex rounded-full bg-white">
<div class="mt-3 mb-3 ml-3 flex flex-row">
<h2 class="ml-2 text-2xl text-sspsBlueDark font-bold">{title}</h2>
<span class="ml-32 w-8 h-8 rounded-full self-center {status}" />
<h2 class="text-sspsBlueDark ml-2 text-2xl font-bold">{title}</h2>
<span class="ml-32 h-8 w-8 self-center rounded-full {status}" />
<!-- <StatusNotificationDot {status} /> -->
</div>
</div>

4
frontend/src/lib/components/dashboard/StatusNotificationDot.svelte
View file

@ -18,8 +18,8 @@
</script>
<!-- make red dot -->
<div class="flex flex-row justify-between animate-pulse div-{status}">
<span class="mt-1 w-6 h-6 rounded-full {status}" />
<div class="flex animate-pulse flex-row justify-between div-{status}">
<span class="mt-1 h-6 w-6 rounded-full {status}" />
<!-- <h3 class="ml-8 font-bold text-xl">{title}</h3> -->
</div>

8
frontend/src/lib/components/icons/Circles.svelte
View file

@ -1,7 +1,7 @@
<div>
<span class="left-20 top-10 w-20 h-20 rounded-full bg-black bg-[#f8fbfc] opacity-100" />
<span class="left-14 -top-6 w-24 h-24 rounded-full bg-black bg-[#558cbd] opacity-50" />
<span class="w-28 h-28 bg-black bg-[#55b1bd] opacity-60" />
<span class="left-20 top-10 h-20 w-20 rounded-full bg-black bg-[#f8fbfc] opacity-100" />
<span class="left-14 -top-6 h-24 w-24 rounded-full bg-black bg-[#558cbd] opacity-50" />
<span class="h-28 w-28 bg-black bg-[#55b1bd] opacity-60" />
</div>
<style>
@ -9,6 +9,6 @@
@apply relative;
}
span {
@apply shadow-md absolute rounded-full p-1;
@apply absolute rounded-full p-1 shadow-md;
}
</style>

2
frontend/src/lib/components/icons/Email.svelte
View file

@ -3,7 +3,7 @@
<style>
span {
@apply flex items-center justify-center;
@apply text-center text-2xl text-sspsBlue;
@apply text-sspsBlue text-center text-2xl;
@apply pb-1;
@apply select-none;

2
frontend/src/lib/components/icons/SchoolBadge.svelte
View file

@ -3,7 +3,7 @@
</script>
<div
class="py-3 px-6 md:py-4 md:px-8 rounded-[999px] shadow-2xl flex items-center justify-center transition-all duration-700 hover:shadow-md"
class="flex items-center justify-center rounded-[999px] py-3 px-6 shadow-2xl transition-all duration-700 hover:shadow-md md:py-4 md:px-8"
>
<img class="object-cover" src={lion} alt="" />
</div>

2
frontend/src/lib/components/icons/Telephone.svelte
View file

@ -1,5 +1,5 @@
<svg
class="fill-transparent stroke-sspsBlue"
class="stroke-sspsBlue fill-transparent"
height="24"
width="24"
xmlns="http://www.w3.org/2000/svg"

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 621 B

After

Width:  |  Height:  |  Size: 621 B

12
frontend/src/lib/components/layout/FullLayout.svelte
View file

@ -21,23 +21,23 @@
<style>
.logo {
@apply w-[200px] h-[200px];
@apply h-[200px] w-[200px];
}
.bgImage {
@apply -z-20;
@apply absolute min-w-screen min-w-full min-h-screen;
@apply min-w-screen absolute min-h-screen min-w-full;
@apply bg-no-repeat;
background-position: 55%;
}
.bgOverlay {
@apply -z-10 absolute min-w-screen min-h-screen;
@apply min-w-screen absolute -z-10 min-h-screen;
background: linear-gradient(45deg, rgba(18, 48, 75, 1), rgba(119, 173, 224, 0.443));
@apply bg-cover;
}
.bgOverlay .logo {
@apply absolute top-0 left-0;
@apply hidden md:inline-block;
@apply h-auto max-w-72;
@apply max-w-72 h-auto;
@apply p-7;
}
.bgOverlay .darkModeToggle {
@ -47,10 +47,10 @@
}
.view {
@apply z-10 overflow-scroll;
@apply w-screen h-screen top-0 right-0 bottom-0 left-0 m-auto;
@apply top-0 right-0 bottom-0 left-0 m-auto h-screen w-screen;
}
.content {
@apply w-full h-full;
@apply h-full w-full;
@apply flex items-center justify-center;
}
</style>

12
frontend/src/lib/components/layout/SplitLayout.svelte
View file

@ -28,18 +28,18 @@
<style>
.bgImage {
@apply -z-20;
@apply absolute min-w-screen md:min-w-[50vw] min-h-screen;
@apply min-w-screen absolute min-h-screen md:min-w-[50vw];
@apply bg-no-repeat;
}
.bgOverlay {
@apply -z-10 absolute min-w-screen md:min-w-[50vw] min-h-screen;
@apply min-w-screen absolute -z-10 min-h-screen md:min-w-[50vw];
background: linear-gradient(45deg, rgba(18, 48, 75, 1), rgba(119, 173, 224, 0.443));
@apply bg-cover;
}
.bgOverlay .logo {
@apply absolute top-0 left-0;
@apply hidden md:inline-block;
@apply h-auto max-w-56;
@apply max-w-56 h-auto;
@apply p-7;
}
.darkModeToggle {
@ -50,12 +50,12 @@
.view {
@apply z-10 overflow-scroll;
@apply rounded-3xl md:rounded-none;
@apply absolute w-[90vw] h-[90vh] top-0 md:top-auto right-0 bottom-0 md:bottom-auto left-0 md:left-auto m-auto md:m-0;
@apply md:w-[50vw] md:h-screen;
@apply absolute top-0 right-0 bottom-0 left-0 m-auto h-[90vh] w-[90vw] md:top-auto md:bottom-auto md:left-auto md:m-0;
@apply md:h-screen md:w-[50vw];
@apply md:my-auto;
@apply bg-white;
}
.content {
@apply w-full h-full;
@apply h-full w-full;
}
</style>

6
frontend/src/lib/components/textfield/TextField.svelte
View file

@ -10,7 +10,7 @@
export let error: string = '';
</script>
<div class="relative flex justify-center items-center">
<div class="relative flex items-center justify-center">
<input
class:error
bind:value
@ -19,12 +19,12 @@
on:keyup
on:change
class:withIcon={icon}
class="bg-[#f8fafb] w-full shadow-lg p-3 rounded-lg text-xl outline-none border transition-colors duration-300 hover:border-sspsBlue border-2"
class="hover:border-sspsBlue w-full rounded-lg border border-2 bg-[#f8fafb] p-3 text-xl shadow-lg outline-none transition-colors duration-300"
use:typeAction
{placeholder}
/>
{#if icon}
<span class="flex absolute right-0 top-0 bottom-0 my-auto bg-transparent p-3">
<span class="absolute right-0 top-0 bottom-0 my-auto flex bg-transparent p-3">
<slot name="icon" />
</span>
{/if}

12
frontend/src/routes/(admin)/admin/auth/login/+page.svelte
View file

@ -13,15 +13,15 @@
<SplitLayout backgroundImage={background} backgroundPosition="30%">
<div class="form">
<div
class="py-3 px-6 md:py-4 md:px-8 rounded-[999px] shadow-2xl flex items-center justify-center"
class="flex items-center justify-center rounded-[999px] py-3 px-6 shadow-2xl md:py-4 md:px-8"
>
<img class="object-cover" src={lion} alt="" />
</div>
<h1 class="mt-8 text-4xl text-sspsBlue font-semibold">Přihlášení</h1>
<p class="mt-8 font-light text-sspsGray text-center">
<h1 class="text-sspsBlue mt-8 text-4xl font-semibold">Přihlášení</h1>
<p class="text-sspsGray mt-8 text-center font-light">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> Fusce suscipit libero eget elit.
</p>
<div class="w-3/5 mt-8 flex flex-col">
<div class="mt-8 flex w-3/5 flex-col">
<span>
<TextField bind:value={adminIdValue} placeholder="Admin id" type="number" />
</span>
@ -34,7 +34,7 @@
</span>
</div>
<input
class="mt-8 w-3/5 p-3 rounded-lg font-semibold text-xl transition-colors duration-300 bg-sspsBlue hover:bg-sspsBlueDark text-white"
class="bg-sspsBlue hover:bg-sspsBlueDark mt-8 w-3/5 rounded-lg p-3 text-xl font-semibold text-white transition-colors duration-300"
type="submit"
value="Odeslat"
/>
@ -44,7 +44,7 @@
<style>
.form {
@apply flex flex-col;
@apply mx-auto w-[90%] h-full;
@apply mx-auto h-full w-[90%];
@apply items-center justify-center;
}
</style>

22
frontend/src/routes/(candidate)/(authenticated)/dashboard/+page.svelte
View file

@ -25,8 +25,8 @@
<div class="dashboard dashboardDesktop">
<div class="name col-span-3">
<DashboardInfoCard title={$candidateData.name + ' ' + $candidateData.surname ?? ''}>
<span class="mt-3 text-sspsBlue truncate">{$candidateData.email}</span>
<span class="mt-3 text-sspsGray text-xs">Uchazeč na SSPŠ</span>
<span class="text-sspsBlue mt-3 truncate">{$candidateData.email}</span>
<span class="text-sspsGray mt-3 text-xs">Uchazeč na SSPŠ</span>
</DashboardInfoCard>
</div>
<div class="coverletter col-span-5">
@ -40,25 +40,25 @@
</div>
</div>
<div class="dashboard dashboardMobile">
<div class="my-10 name w-[90%] mx-auto">
<div class="name my-10 mx-auto w-[90%]">
<DashboardInfoCard title={$candidateData.name + ' ' + $candidateData.surname ?? ''}>
<span class="mt-3 text-sspsBlue truncate">{$candidateData.email}</span>
<span class="mt-3 text-sspsGray text-xs">Uchazeč na SSPŠ</span>
<span class="text-sspsBlue mt-3 truncate">{$candidateData.email}</span>
<span class="text-sspsGray mt-3 text-xs">Uchazeč na SSPŠ</span>
</DashboardInfoCard>
</div>
<Swiper slidesPerView={1} spaceBetween={20}>
<SwiperSlide>
<div class="w-[90%] mx-auto">
<div class="mx-auto w-[90%]">
<CoverLetterUploadCard />
</div>
</SwiperSlide>
<SwiperSlide>
<div class="w-[90%] mx-auto">
<div class="mx-auto w-[90%]">
<PortfolioLetterUploadCard />
</div>
</SwiperSlide>
<SwiperSlide>
<div class="w-[90%] mx-auto">
<div class="mx-auto w-[90%]">
<PortfolioZipUploadCard />
</div>
</SwiperSlide>
@ -68,12 +68,12 @@
<style>
.dashboardDesktop {
@apply w-[85vw] h-[85vh];
@apply hidden md:grid grid-cols-8 grid-rows-2 gap-10;
@apply h-[85vh] w-[85vw];
@apply hidden grid-cols-8 grid-rows-2 gap-10 md:grid;
}
.dashboardMobile {
@apply w-[100vw] h-[90vh];
@apply h-[90vh] w-[100vw];
@apply md:hidden;
}

56
frontend/src/routes/(candidate)/(authenticated)/register/+page.svelte
View file

@ -121,18 +121,18 @@
<SplitLayout>
<div class="form">
<div class="w-24 h-24 md:w-auto md:h-auto">
<div class="h-24 w-24 md:h-auto md:w-auto">
<SchoolBadge />
</div>
{#if pageIndex === 0}
<form on:submit={handleSubmit}>
<h1 class="mt-8 text-4xl text-sspsBlue font-semibold">Registrace</h1>
<p class="block mt-8 font-light text-sspsGray text-center">
<h1 class="text-sspsBlue mt-8 text-4xl font-semibold">Registrace</h1>
<p class="text-sspsGray mt-8 block text-center font-light">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> Fusce suscipit libero eget
elit.
</p>
<div class="flex md:flex-col items-center justify-center w-full">
<span class="w-full mt-8">
<div class="flex w-full items-center justify-center md:flex-col">
<span class="mt-8 w-full">
<TextField
error={$errors.name}
on:change={handleChange}
@ -141,7 +141,7 @@
placeholder="Jméno a příjmení"
/>
</span>
<span class="w-full mt-8 ml-2 md:ml-0">
<span class="mt-8 ml-2 w-full md:ml-0">
<EmailField
error={$errors.email}
on:change={handleChange}
@ -161,15 +161,15 @@
</form>
{/if}
{#if pageIndex === 1}
<h1 class="mt-8 text-4xl text-sspsBlue font-semibold">Něco o tobě</h1>
<p class="block mt-8 font-light text-sspsGray text-center">
<h1 class="text-sspsBlue mt-8 text-4xl font-semibold">Něco o tobě</h1>
<p class="text-sspsGray mt-8 block text-center font-light">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> Fusce suscipit libero eget elit.
</p>
<div class="flex flex-row md:flex-col w-full">
<span class="w-full mt-8">
<div class="flex w-full flex-row md:flex-col">
<span class="mt-8 w-full">
<TextField type="text" placeholder="Rodné příjmení" on:change={handleChange} />
</span>
<span class="w-full mt-8 ml-2 md:ml-0">
<span class="mt-8 ml-2 w-full md:ml-0">
<TextField
error={$errors.birthplace}
on:change={handleChange}
@ -185,7 +185,7 @@
</span>
</div>
<div class="mt-8 flex items-center w-full">
<div class="mt-8 flex w-full items-center">
<TextField
error={$errors.birthdate}
on:change={handleChange}
@ -205,12 +205,12 @@
</div>
{/if}
{#if pageIndex === 2}
<h1 class="mt-8 text-4xl text-sspsBlue font-semibold">Už jen kousek!</h1>
<p class="block mt-8 font-light text-sspsGray text-center">
<h1 class="text-sspsBlue mt-8 text-4xl font-semibold">Už jen kousek!</h1>
<p class="text-sspsGray mt-8 block text-center font-light">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> Fusce suscipit libero eget elit.
</p>
<div class="flex flex-col w-full">
<span class="w-full mt-8">
<div class="flex w-full flex-col">
<span class="mt-8 w-full">
<TextField
error={$errors.address}
on:change={handleChange}
@ -228,7 +228,7 @@
placeholder="E-mail zákonného zástupce"
/>
</span>
<span class="w-full ml-2 md:ml-0 md:mt-8">
<span class="ml-2 w-full md:ml-0 md:mt-8">
<TelephoneField
error={$errors.parentTelephone}
on:change={handleChange}
@ -240,12 +240,12 @@
</div>
{/if}
{#if pageIndex === 3}
<h1 class="mt-8 text-4xl text-sspsBlue font-semibold">Poslední krok</h1>
<p class="block mt-8 font-light text-sspsGray text-center">
<h1 class="text-sspsBlue mt-8 text-4xl font-semibold">Poslední krok</h1>
<p class="text-sspsGray mt-8 block text-center font-light">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> Fusce suscipit libero eget elit.
</p>
<div class="flex flex-row md:flex-col w-full">
<span class="w-full mt-8">
<div class="flex w-full flex-row md:flex-col">
<span class="mt-8 w-full">
<TextField
error={$errors.citizenship}
on:change={handleChange}
@ -254,11 +254,11 @@
placeholder="Občanství"
/>
</span>
<span class="w-full mt-8 ml-2 md:ml-0">
<span class="mt-8 ml-2 w-full md:ml-0">
<TextField on:change={handleChange} type="text" placeholder="Evidenční číslo přihlášky" />
</span>
</div>
<div class="mt-8 flex items-center justify-center w-full">
<div class="mt-8 flex w-full items-center justify-center">
<IdField
error={$errors.personalIdNumber}
on:change={handleChange}
@ -288,7 +288,7 @@
}
errors.set(formInitialValues);
}}
class="w-full mt-8 p-3 rounded-lg font-semibold text-xl transition-colors duration-300 bg-sspsBlue hover:bg-sspsBlueDark text-white hover:cursor-pointer"
class="bg-sspsBlue hover:bg-sspsBlueDark mt-8 w-full rounded-lg p-3 text-xl font-semibold text-white transition-colors duration-300 hover:cursor-pointer"
type="submit"
value={pageIndex === pageCount ? 'Odeslat' : 'Pokračovat'}
/>
@ -320,7 +320,7 @@
<style>
.form {
@apply flex flex-col;
@apply mx-auto w-[90%] h-full;
@apply mx-auto h-full w-[90%];
@apply items-center justify-center;
}
.form > form {
@ -329,9 +329,9 @@
@apply items-center justify-center;
}
.dot {
@apply ml-2 w-4 h-4
@apply hover:cursor-pointer hover:bg-sspsBlue
@apply rounded-full bg-sspsGray;
@apply @apply hover:bg-sspsBlue @apply
bg-sspsGray ml-2 h-4
w-4 rounded-full hover:cursor-pointer;
}
.dotActive {
@apply bg-sspsBlue;

8
frontend/src/routes/(candidate)/auth/login/+page.svelte
View file

@ -18,8 +18,8 @@
<SplitLayout>
<div class="form">
<SchoolBadge />
<h1 class="mt-8 text-4xl text-sspsBlue font-semibold">Přihlášení</h1>
<p class="my-8 font-light text-sspsGray text-center">
<h1 class="text-sspsBlue mt-8 text-4xl font-semibold">Přihlášení</h1>
<p class="text-sspsGray my-8 text-center font-light">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> Fusce suscipit libero eget elit.
</p>
<div class="w-3/5">
@ -27,7 +27,7 @@
</div>
<input
on:click={redirectToCode}
class="mt-8 w-3/5 p-3 rounded-lg font-semibold text-xl transition-colors duration-300 bg-sspsBlue hover:bg-sspsBlueDark text-white"
class="bg-sspsBlue hover:bg-sspsBlueDark mt-8 w-3/5 rounded-lg p-3 text-xl font-semibold text-white transition-colors duration-300"
type="submit"
value="Odeslat"
/>
@ -37,7 +37,7 @@
<style>
.form {
@apply flex flex-col;
@apply mx-auto w-[90%] h-full;
@apply mx-auto h-full w-[90%];
@apply items-center justify-center;
}
</style>

18
frontend/src/routes/(candidate)/auth/login/[code=application]/+page.svelte
View file

@ -74,7 +74,7 @@
<FullLayout>
<div class="modal">
<img class="mx-auto" src={woman} alt="" />
<div class="flex justify-center items-center">
<div class="flex items-center justify-center">
<input bind:value={codeValueMobile} type="text" class="codeInputMobile" />
{#each [1, 2, 3, 4] as value}
<input
@ -86,7 +86,7 @@
type="text"
/>
{/each}
<span class="hidden sm:block mr-2 w-8 h-2 bg-sspsBlue" />
<span class="bg-sspsBlue mr-2 hidden h-2 w-8 sm:block" />
{#each [5, 6, 7, 8] as value}
<input
class="codeInputDesktop"
@ -98,10 +98,10 @@
/>
{/each}
</div>
<h3 class="mt-8 mx-8 text-sspsBlue font-semibold text-xl text-center">
<h3 class="text-sspsBlue mx-8 mt-8 text-center text-xl font-semibold">
Zadejte 8místný kód pro aktivaci účtu
</h3>
<p class="mt-8 mx-8 text-sspsGray text-center">Nevíte si rady? Klikněte <u>zde</u></p>
<p class="text-sspsGray mx-8 mt-8 text-center">Nevíte si rady? Klikněte <u>zde</u></p>
</div>
</FullLayout>
@ -109,21 +109,21 @@
.modal {
@apply flex flex-col items-center justify-center;
@apply mx-auto my-auto;
@apply w-[90vw] h-[90vh] md:w-4/5 md:h-4/5;
@apply h-[90vh] w-[90vw] md:h-4/5 md:w-4/5;
@apply rounded-3xl;
@apply bg-white;
}
input {
@apply text-center font-semibold text-sspsBlue;
@apply caret-transparent bg-[#f8fafb] shadow-lg p-3 rounded-xl outline-none border transition-colors duration-300 focus:border-sspsBlue hover:border-sspsBlue border-2;
@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;
}
.codeInputMobile {
@apply sm:hidden;
@apply w-full mx-5;
@apply mx-5 w-full;
}
.codeInputDesktop {
@apply hidden;
@apply mr-1 md:mr-2;
@apply sm:block sm:text-xl sm:w-12 sm:h-15 md:text-4xl md:w-16 md:h-20 xl:text-4xl xl:w-18 xl:h-22 xl:p-0;
@apply sm:h-15 xl:w-18 xl:h-22 sm:block sm:w-12 sm:text-xl md:h-20 md:w-16 md:text-4xl xl:p-0 xl:text-4xl;
}
</style>