efim
/
Learning-HTMX
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(15): styling of mobile step 1

This commit is contained in:
efim 2023-07-09 18:22:14 +00:00
parent 8b62506f00
commit 7b2060c5d0
2 changed files with 113 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
15-multi-step-form/src/main/resources/public/out.css
View File

@ -669,6 +669,16 @@ video {
background-color: rgb(255 255 255 / var(--tw-bg-opacity)); background-color: rgb(255 255 255 / var(--tw-bg-opacity));
} }
.bg-magnolia {
--tw-bg-opacity: 1;
background-color: hsl(217 100% 97% / var(--tw-bg-opacity));
}
.bg-alabaster {
--tw-bg-opacity: 1;
background-color: hsl(231 100% 99% / var(--tw-bg-opacity));
}
.bg-sidebar-mobile { .bg-sidebar-mobile {
background-image: url("images/bg-sidebar-mobile.svg"); background-image: url("images/bg-sidebar-mobile.svg");
} }
@ -677,6 +687,10 @@ video {
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.p-1 {
padding: 0.25rem;
}
.px-6 { .px-6 {
padding-left: 1.5rem; padding-left: 1.5rem;
padding-right: 1.5rem; padding-right: 1.5rem;
@ -692,6 +706,34 @@ video {
padding-bottom: 2rem; padding-bottom: 2rem;
} }
.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.pt-2 {
padding-top: 0.5rem;
}
.pt-3 {
padding-top: 0.75rem;
}
.text-3xl { .text-3xl {
font-size: 1.875rem; font-size: 1.875rem;
line-height: 2.25rem; line-height: 2.25rem;
@ -702,10 +744,19 @@ video {
line-height: 1.25rem; line-height: 1.25rem;
} }
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.font-bold { .font-bold {
font-weight: 700; font-weight: 700;
} }
.font-semibold {
font-weight: 600;
}
.uppercase { .uppercase {
text-transform: uppercase; text-transform: uppercase;
} }
@ -715,6 +766,26 @@ video {
color: rgb(255 255 255 / var(--tw-text-opacity)); color: rgb(255 255 255 / var(--tw-text-opacity));
} }
.text-cool-gray {
--tw-text-opacity: 1;
color: hsl(231 11% 63% / var(--tw-text-opacity));
}
.text-marine-blue {
--tw-text-opacity: 1;
color: hsl(213 96% 18% / var(--tw-text-opacity));
}
.drop-shadow-lg {
--tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-xl {
--tw-drop-shadow: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
html { html {
font-size: 16px; font-size: 16px;
} }
@ -763,6 +834,16 @@ html {
/* } */ /* } */
.placeholder\:text-cool-gray::-moz-placeholder {
--tw-text-opacity: 1;
color: hsl(231 11% 63% / var(--tw-text-opacity));
}
.placeholder\:text-cool-gray::placeholder {
--tw-text-opacity: 1;
color: hsl(231 11% 63% / var(--tw-text-opacity));
}
@media (min-width: 768px) { @media (min-width: 768px) {
.md\:row-span-2 { .md\:row-span-2 {
grid-row: span 2 / span 2; grid-row: span 2 / span 2;

43
15-multi-step-form/src/main/resources/templates/step1.html
View File

@ -26,7 +26,7 @@
} }
</style> </style>
</head> </head>
<body class="grid place-content-center h-screen bg-light-gray"> <body class="grid place-content-center h-screen bg-magnolia">
<!--[if lt IE 8]> <!--[if lt IE 8]>
<p class="browserupgrade"> <p class="browserupgrade">
You are using an <strong>outdated</strong> browser. Please You are using an <strong>outdated</strong> browser. Please
@ -90,17 +90,38 @@
</summary> </summary>
<section <section
id="multipage-form-container" id="multipage-form-container"
class="flex flex-col py-8 px-6 -mt-20 w-11/12 bg-white rounded-xl md:mt-0" class="flex flex-col py-8 px-6 -mt-20 w-11/12 bg-white rounded-xl md:mt-0 drop-shadow-xl"
> >
<!-- Step 1 start --> <!-- Step 1 start -->
<h1>Personal info</h1> <h1 class="text-2xl font-bold text-marine-blue">Personal info</h1>
<p>Please provide your name, email address, and phone number.</p> <p class="py-3 text-cool-gray">
<label for="name">Name</label> Please provide your name, email address, and phone number.
<input id="name" placeholder="e.g. Stephen King" /> </p>
<label for="email">Email Address</label> <label for="name" class="pt-3 text-sm text-marine-blue">Name</label>
<input id="email" placeholder="e.g. stephenking@lorem.com" /> <input
<label for="phone">Phone Number</label> id="name"
<input id="phone" placeholder="e.g. +1 234 567 890 Next Step" /> type="text"
placeholder="e.g. Stephen King"
class="p-1 px-4 h-10 text-sm font-semibold rounded border placeholder:text-cool-gray"
/>
<label for="email" class="pt-3 text-sm text-marine-blue"
>Email Address</label
>
<input
id="email"
type="email"
placeholder="e.g. stephenking@lorem.com"
class="p-1 px-4 h-10 text-sm font-semibold rounded border placeholder:text-cool-gray"
/>
<label for="phone" class="pt-3 text-sm text-marine-blue"
>Phone Number</label
>
<input
id="phone"
type="tel"
placeholder="e.g. +1 234 567 890"
class="p-1 px-4 h-10 text-sm font-semibold rounded border placeholder:text-cool-gray"
/>
<!-- Step 1 end --> <!-- Step 1 end -->
</section> </section>
@ -112,7 +133,7 @@
<div class="grow"></div> <div class="grow"></div>
<a <a
href="step2.html" href="step2.html"
class="grid place-content-center mr-3 w-24 h-10 text-white rounded bg-marine-blue" class="grid place-content-center mr-3 w-24 h-10 text-sm font-semibold text-white rounded bg-marine-blue"
>Next Step</a >Next Step</a
> >
</section> </section>