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

feat(15): initial styling footer-controls section

This commit is contained in:
efim 2023-07-09 18:04:43 +00:00
parent d8e25ff95d
commit 8b62506f00
4 changed files with 150 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
15-multi-step-form/src/input.css
View File

@ -28,6 +28,6 @@ html {
font-style: normal; font-style: normal;
} }
div, p, button, ol, li, summary { /* div, p, button, ol, li, summary, article { */
outline: 1px solid red; /* outline: 1px solid red; */
} /* } */

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

@ -559,10 +559,6 @@ video {
height: 2.5rem; height: 2.5rem;
} }
.h-20 {
height: 5rem;
}
.h-24 { .h-24 {
height: 6rem; height: 6rem;
} }
@ -603,6 +599,10 @@ video {
flex-grow: 1; flex-grow: 1;
} }
.grid-cols-\[repeat\(4\2c _auto\)\] {
grid-template-columns: repeat(4, auto);
}
.flex-row { .flex-row {
flex-direction: row; flex-direction: row;
} }
@ -615,6 +615,10 @@ video {
place-content: center; place-content: center;
} }
.content-center {
align-content: center;
}
.items-center { .items-center {
align-items: center; align-items: center;
} }
@ -678,6 +682,11 @@ video {
padding-right: 1.5rem; padding-right: 1.5rem;
} }
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.py-8 { .py-8 {
padding-top: 2rem; padding-top: 2rem;
padding-bottom: 2rem; padding-bottom: 2rem;
@ -688,6 +697,19 @@ video {
line-height: 2.25rem; line-height: 2.25rem;
} }
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.font-bold {
font-weight: 700;
}
.uppercase {
text-transform: uppercase;
}
.text-white { .text-white {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity)); color: rgb(255 255 255 / var(--tw-text-opacity));
@ -735,11 +757,17 @@ html {
font-style: normal; font-style: normal;
} }
div, p, button, ol, li, summary { /* div, p, button, ol, li, summary, article { */
outline: 1px solid red;
} /* outline: 1px solid red; */
/* } */
@media (min-width: 768px) { @media (min-width: 768px) {
.md\:row-span-2 {
grid-row: span 2 / span 2;
}
.md\:mt-0 { .md\:mt-0 {
margin-top: 0px; margin-top: 0px;
} }
@ -748,15 +776,91 @@ div, p, button, ol, li, summary {
display: flex; display: flex;
} }
.md\:h-\[570px\] { .md\:grid {
height: 570px; display: grid;
} }
.md\:w-\[280px\] { .md\:hidden {
width: 280px; display: none;
}
.md\:h-\[568px\] {
height: 568px;
}
.md\:h-desktop-form {
height: 38rem;
}
.md\:h-full {
height: 100%;
}
.md\:w-\[274px\] {
width: 274px;
}
.md\:w-desktop-form {
width: 60rem;
}
.md\:grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.md\:grid-cols-\[auto_1fr\] {
grid-template-columns: auto 1fr;
}
.md\:grid-rows-\[repeat\(4\2c _auto\)\] {
grid-template-rows: repeat(4, auto);
}
.md\:flex-col {
flex-direction: column;
}
.md\:content-start {
align-content: flex-start;
}
.md\:gap-x-2 {
-moz-column-gap: 0.5rem;
column-gap: 0.5rem;
}
.md\:gap-y-7 {
row-gap: 1.75rem;
}
.md\:gap-x-3 {
-moz-column-gap: 0.75rem;
column-gap: 0.75rem;
}
.md\:gap-x-4 {
-moz-column-gap: 1rem;
column-gap: 1rem;
}
.md\:bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
} }
.md\:bg-sidebar-desktop { .md\:bg-sidebar-desktop {
background-image: url("images/bg-sidebar-desktop.svg"); background-image: url("images/bg-sidebar-desktop.svg");
} }
.md\:p-10 {
padding: 2.5rem;
}
.md\:p-5 {
padding: 1.25rem;
}
} }

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

@ -26,7 +26,7 @@
} }
</style> </style>
</head> </head>
<body> <body class="grid place-content-center h-screen bg-light-gray">
<!--[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
@ -36,54 +36,54 @@
<![endif]--> <![endif]-->
<article <article
class="flex flex-col items-center w-screen h-screen bg-light-gray" class="flex flex-col items-center w-screen h-screen md:grid md:grid-cols-2 md:p-5 md:bg-white md:w-desktop-form md:h-desktop-form"
id="form-step" id="form-step"
> >
<summary <summary
class="w-full h-44 bg-no-repeat bg-sidebar-mobile md:bg-sidebar-desktop md:h-[570px] md:w-[280px]" class="w-full h-44 bg-no-repeat md:row-span-2 bg-sidebar-mobile md:bg-sidebar-desktop md:h-[568px] md:w-[274px]"
id="sidebar" id="sidebar"
> >
<ol <ol
class="flex flex-row gap-x-5 items-center place-content-center h-24" class="grid grid-cols-[repeat(4,_auto)] gap-x-5 content-center items-center place-content-center h-24 md:flex-col md:h-full md:grid-rows-[repeat(4,_auto)] md:grid-cols-1 md:content-start md:p-10 md:gap-y-7 text-white text-sm uppercase"
> >
<li> <li class="items-center md:grid md:gap-x-4 md:grid-cols-[auto_1fr]">
<div <div
class="grid place-content-center w-8 h-8 text-white rounded-full border border-white" class="grid place-content-center w-8 h-8 text-white rounded-full border border-white"
> >
1 1
</div> </div>
<p class="hidden md:flex"> <p class="hidden md:flex md:flex-col">
<span>Step 1</span><span>Your info</span> <span>Step 1</span><span class="font-bold">Your info</span>
</p> </p>
</li> </li>
<li> <li class="items-center md:grid md:gap-x-4 md:grid-cols-[auto_1fr]">
<div <div
class="grid place-content-center w-8 h-8 text-white rounded-full border border-white" class="grid place-content-center w-8 h-8 text-white rounded-full border border-white"
> >
2 2
</div> </div>
<p class="hidden md:flex"> <p class="hidden md:flex md:flex-col">
<span>Step 2</span><span>Select plan</span> <span>Step 2</span><span class="font-bold">Select plan</span>
</p> </p>
</li> </li>
<li> <li class="items-center md:grid md:gap-x-4 md:grid-cols-[auto_1fr]">
<div <div
class="grid place-content-center w-8 h-8 text-white rounded-full border border-white" class="grid place-content-center w-8 h-8 text-white rounded-full border border-white"
> >
3 3
</div> </div>
<p class="hidden md:flex"> <p class="hidden md:flex md:flex-col">
<span>Step 3</span><span>Add-ons</span> <span>Step 3</span><span class="font-bold">Add-ons</span>
</p> </p>
</li> </li>
<li> <li class="items-center md:grid md:gap-x-4 md:grid-cols-[auto_1fr]">
<div <div
class="grid place-content-center w-8 h-8 text-white rounded-full border border-white" class="grid place-content-center w-8 h-8 text-white rounded-full border border-white"
> >
4 4
</div> </div>
<p class="hidden md:flex"> <p class="hidden md:flex md:flex-col">
<span>Step 4</span><span>summary</span> <span>Step 4</span><span class="font-bold">summary</span>
</p> </p>
</li> </li>
</ol> </ol>
@ -96,22 +96,25 @@
<h1>Personal info</h1> <h1>Personal info</h1>
<p>Please provide your name, email address, and phone number.</p> <p>Please provide your name, email address, and phone number.</p>
<label for="name">Name</label> <label for="name">Name</label>
<input id="name" placeholder="e.g. Stephen King"></input> <input id="name" placeholder="e.g. Stephen King" />
<label for="email">Email Address</label> <label for="email">Email Address</label>
<input id="email" placeholder="e.g. stephenking@lorem.com"></input> <input id="email" placeholder="e.g. stephenking@lorem.com" />
<label for="phone">Phone Number</label> <label for="phone">Phone Number</label>
<input id="phone" placeholder="e.g. +1 234 567 890 Next Step"></input> <input id="phone" placeholder="e.g. +1 234 567 890 Next Step" />
<!-- Step 1 end --> <!-- Step 1 end -->
</section> </section>
<div class="grow"></div> <div class="md:hidden grow"></div>
<section id="footer-controls" <section
class="flex flex-row items-center w-full h-20 bg-white" id="footer-controls"
class="flex flex-row items-center py-4 w-full bg-white"
> >
<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">Next Step</a> class="grid place-content-center mr-3 w-24 h-10 text-white rounded bg-marine-blue"
>Next Step</a
>
</section> </section>
</article> </article>
<div class="fixed inset-x-0 bottom-0 attribution"> <div class="fixed inset-x-0 bottom-0 attribution">

6
15-multi-step-form/tailwind.config.js
View File

@ -29,6 +29,12 @@ module.exports = {
'semibold': 600, 'semibold': 600,
'bold': 700, 'bold': 700,
}, },
width: {
'desktop-form': '60rem',
},
height: {
'desktop-form': '38rem',
},
}, },
}, },
plugins: [], plugins: [],