diff --git a/15-multi-step-form/src/input.css b/15-multi-step-form/src/input.css
index a137815..83c5a70 100644
--- a/15-multi-step-form/src/input.css
+++ b/15-multi-step-form/src/input.css
@@ -28,6 +28,6 @@ html {
font-style: normal;
}
-div, p, button, ol, li, summary {
- outline: 1px solid red;
-}
+/* div, p, button, ol, li, summary, article { */
+/* outline: 1px solid red; */
+/* } */
diff --git a/15-multi-step-form/src/main/resources/public/out.css b/15-multi-step-form/src/main/resources/public/out.css
index 4d20fdb..5c5883f 100644
--- a/15-multi-step-form/src/main/resources/public/out.css
+++ b/15-multi-step-form/src/main/resources/public/out.css
@@ -559,10 +559,6 @@ video {
height: 2.5rem;
}
-.h-20 {
- height: 5rem;
-}
-
.h-24 {
height: 6rem;
}
@@ -603,6 +599,10 @@ video {
flex-grow: 1;
}
+.grid-cols-\[repeat\(4\2c _auto\)\] {
+ grid-template-columns: repeat(4, auto);
+}
+
.flex-row {
flex-direction: row;
}
@@ -615,6 +615,10 @@ video {
place-content: center;
}
+.content-center {
+ align-content: center;
+}
+
.items-center {
align-items: center;
}
@@ -678,6 +682,11 @@ video {
padding-right: 1.5rem;
}
+.py-4 {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+}
+
.py-8 {
padding-top: 2rem;
padding-bottom: 2rem;
@@ -688,6 +697,19 @@ video {
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 {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -735,11 +757,17 @@ html {
font-style: normal;
}
-div, p, button, ol, li, summary {
- outline: 1px solid red;
-}
+/* div, p, button, ol, li, summary, article { */
+
+/* outline: 1px solid red; */
+
+/* } */
@media (min-width: 768px) {
+ .md\:row-span-2 {
+ grid-row: span 2 / span 2;
+ }
+
.md\:mt-0 {
margin-top: 0px;
}
@@ -748,15 +776,91 @@ div, p, button, ol, li, summary {
display: flex;
}
- .md\:h-\[570px\] {
- height: 570px;
+ .md\:grid {
+ display: grid;
}
- .md\:w-\[280px\] {
- width: 280px;
+ .md\:hidden {
+ 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 {
background-image: url("images/bg-sidebar-desktop.svg");
}
+
+ .md\:p-10 {
+ padding: 2.5rem;
+ }
+
+ .md\:p-5 {
+ padding: 1.25rem;
+ }
}
diff --git a/15-multi-step-form/src/main/resources/templates/step1.html b/15-multi-step-form/src/main/resources/templates/step1.html
index 3aea528..32cfc04 100644
--- a/15-multi-step-form/src/main/resources/templates/step1.html
+++ b/15-multi-step-form/src/main/resources/templates/step1.html
@@ -26,7 +26,7 @@
}
-
+
diff --git a/15-multi-step-form/tailwind.config.js b/15-multi-step-form/tailwind.config.js
index 9104994..569d999 100644
--- a/15-multi-step-form/tailwind.config.js
+++ b/15-multi-step-form/tailwind.config.js
@@ -29,6 +29,12 @@ module.exports = {
'semibold': 600,
'bold': 700,
},
+ width: {
+ 'desktop-form': '60rem',
+ },
+ height: {
+ 'desktop-form': '38rem',
+ },
},
},
plugins: [],