TFC/tfcconnection-zola
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

done with styling of mt-form

Browse source
This commit is contained in:
Chris Cochrun 2022-11-10 06:36:54 -06:00
parent 60ad401892
commit d760bdc2d2
2 changed files with 205 additions and 124 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

252
assets/css/compiled/main.css
View file

@ -1562,6 +1562,58 @@ select {
top: 5rem; top: 5rem;
} }
.bottom-10 {
bottom: 2.5rem;
}
.right-10 {
right: 2.5rem;
}
.right-1\/4 {
right: 25%;
}
.left-1\/4 {
left: 25%;
}
.bottom-auto {
bottom: auto;
}
.bottom-1\/2 {
bottom: 50%;
}
.-bottom-10 {
bottom: -2.5rem;
}
.bottom-16 {
bottom: 4rem;
}
.bottom-48 {
bottom: 12rem;
}
.bottom-40 {
bottom: 10rem;
}
.right-4 {
right: 1rem;
}
.bottom-60 {
bottom: 15rem;
}
.bottom-64 {
bottom: 16rem;
}
.z-30 { .z-30 {
z-index: 30; z-index: 30;
} }
@ -1574,6 +1626,10 @@ select {
order: -9999; order: -9999;
} }
.float-right {
float: right;
}
.m-auto { .m-auto {
margin: auto; margin: auto;
} }
@ -1594,6 +1650,21 @@ select {
margin: 0.25rem; margin: 0.25rem;
} }
.my-4 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.my-8 {
margin-top: 2rem;
margin-bottom: 2rem;
}
.my-10 {
margin-top: 2.5rem;
margin-bottom: 2.5rem;
}
.my-0 { .my-0 {
margin-top: 0px; margin-top: 0px;
margin-bottom: 0px; margin-bottom: 0px;
@ -1624,26 +1695,6 @@ select {
margin-right: 0.25rem; margin-right: 0.25rem;
} }
.my-2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.my-4 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.my-12 {
margin-top: 3rem;
margin-bottom: 3rem;
}
.my-8 {
margin-top: 2rem;
margin-bottom: 2rem;
}
.mt-0 { .mt-0 {
margin-top: 0px; margin-top: 0px;
} }
@ -1684,8 +1735,8 @@ select {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.mb-10 { .mr-4 {
margin-bottom: 2.5rem; margin-right: 1rem;
} }
.-mr-2 { .-mr-2 {
@ -1704,6 +1755,10 @@ select {
margin-bottom: 0px; margin-bottom: 0px;
} }
.mb-10 {
margin-bottom: 2.5rem;
}
.-mr-48 { .-mr-48 {
margin-right: -12rem; margin-right: -12rem;
} }
@ -1780,22 +1835,6 @@ select {
margin-bottom: 2px; margin-bottom: 2px;
} }
.mr-20 {
margin-right: 5rem;
}
.mr-12 {
margin-right: 3rem;
}
.mr-24 {
margin-right: 6rem;
}
.mr-4 {
margin-right: 1rem;
}
.block { .block {
display: block; display: block;
} }
@ -1832,6 +1871,10 @@ select {
height: 24rem; height: 24rem;
} }
.h-64 {
height: 16rem;
}
.h-24 { .h-24 {
height: 6rem; height: 6rem;
} }
@ -1876,10 +1919,6 @@ select {
height: 1000px; height: 1000px;
} }
.h-64 {
height: 16rem;
}
.max-h-\[5rem\] { .max-h-\[5rem\] {
max-height: 5rem; max-height: 5rem;
} }
@ -1900,6 +1939,10 @@ select {
width: 100%; width: 100%;
} }
.w-24 {
width: 6rem;
}
.w-screen { .w-screen {
width: 100vw; width: 100vw;
} }
@ -1908,10 +1951,6 @@ select {
width: 9rem; width: 9rem;
} }
.w-24 {
width: 6rem;
}
.w-8 { .w-8 {
width: 2rem; width: 2rem;
} }
@ -1976,14 +2015,18 @@ select {
flex: 1 1 0%; flex: 1 1 0%;
} }
.flex-none {
flex: none;
}
.flex-auto { .flex-auto {
flex: 1 1 auto; flex: 1 1 auto;
} }
.flex-initial {
flex: 0 1 auto;
}
.flex-none {
flex: none;
}
.grow { .grow {
flex-grow: 1; flex-grow: 1;
} }
@ -1996,14 +2039,6 @@ select {
flex-basis: 50%; flex-basis: 50%;
} }
.basis-1\/4 {
flex-basis: 25%;
}
.basis-1\/3 {
flex-basis: 33.333333%;
}
.-translate-y-8 { .-translate-y-8 {
--tw-translate-y: -2rem; --tw-translate-y: -2rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@ -2043,30 +2078,10 @@ select {
flex-wrap: wrap; flex-wrap: wrap;
} }
.content-center {
align-content: center;
}
.content-start {
align-content: flex-start;
}
.content-around {
align-content: space-around;
}
.items-start {
align-items: flex-start;
}
.items-center { .items-center {
align-items: center; align-items: center;
} }
.items-stretch {
align-items: stretch;
}
.justify-center { .justify-center {
justify-content: center; justify-content: center;
} }
@ -2075,10 +2090,6 @@ select {
justify-content: space-between; justify-content: space-between;
} }
.justify-items-start {
justify-items: start;
}
.gap-12 { .gap-12 {
gap: 3rem; gap: 3rem;
} }
@ -2218,6 +2229,11 @@ select {
background-color: rgba(var(--color-neutral-500), var(--tw-bg-opacity)); background-color: rgba(var(--color-neutral-500), var(--tw-bg-opacity));
} }
.bg-primary-500 {
--tw-bg-opacity: 1;
background-color: rgba(var(--color-primary-500), var(--tw-bg-opacity));
}
.bg-neutral-100\/50 { .bg-neutral-100\/50 {
background-color: rgba(var(--color-neutral-100), 0.5); background-color: rgba(var(--color-neutral-100), 0.5);
} }
@ -2250,6 +2266,16 @@ select {
background-color: rgba(var(--color-primary-600), var(--tw-bg-opacity)); background-color: rgba(var(--color-primary-600), var(--tw-bg-opacity));
} }
.bg-primary-300 {
--tw-bg-opacity: 1;
background-color: rgba(var(--color-primary-300), var(--tw-bg-opacity));
}
.bg-primary-700 {
--tw-bg-opacity: 1;
background-color: rgba(var(--color-primary-700), var(--tw-bg-opacity));
}
.bg-gradient-to-t { .bg-gradient-to-t {
background-image: linear-gradient(to top, var(--tw-gradient-stops)); background-image: linear-gradient(to top, var(--tw-gradient-stops));
} }
@ -2297,6 +2323,11 @@ select {
object-fit: cover; object-fit: cover;
} }
.object-none {
-o-object-fit: none;
object-fit: none;
}
.object-scale-down { .object-scale-down {
-o-object-fit: scale-down; -o-object-fit: scale-down;
object-fit: scale-down; object-fit: scale-down;
@ -2307,6 +2338,11 @@ select {
object-position: top; object-position: top;
} }
.object-right-bottom {
-o-object-position: right bottom;
object-position: right bottom;
}
.object-left { .object-left {
-o-object-position: left; -o-object-position: left;
object-position: left; object-position: left;
@ -2464,10 +2500,6 @@ select {
padding-right: 24px; padding-right: 24px;
} }
.pr-2 {
padding-right: 0.5rem;
}
.text-center { .text-center {
text-align: center; text-align: center;
} }
@ -3477,8 +3509,13 @@ body:has(#menu-controller:checked) {
} }
} }
.file\:m-4::file-selector-button { .file\:my-4::file-selector-button {
margin: 1rem; margin-top: 1rem;
margin-bottom: 1rem;
}
.file\:ml-2::file-selector-button {
margin-left: 0.5rem;
} }
.file\:rounded-lg::file-selector-button { .file\:rounded-lg::file-selector-button {
@ -3556,6 +3593,11 @@ body:has(#menu-controller:checked) {
background-color: rgba(var(--color-primary-500), var(--tw-bg-opacity)) !important; background-color: rgba(var(--color-primary-500), var(--tw-bg-opacity)) !important;
} }
.hover\:bg-primary-900:hover {
--tw-bg-opacity: 1;
background-color: rgba(var(--color-primary-900), var(--tw-bg-opacity));
}
.hover\:text-primary-600:hover { .hover\:text-primary-600:hover {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgba(var(--color-primary-600), var(--tw-text-opacity)); color: rgba(var(--color-primary-600), var(--tw-text-opacity));
@ -3636,6 +3678,11 @@ body:has(#menu-controller:checked) {
background-color: rgba(var(--color-primary-100), var(--tw-bg-opacity)); background-color: rgba(var(--color-primary-100), var(--tw-bg-opacity));
} }
.focus\:bg-primary-900:focus {
--tw-bg-opacity: 1;
background-color: rgba(var(--color-primary-900), var(--tw-bg-opacity));
}
.focus\:outline-dotted:focus { .focus\:outline-dotted:focus {
outline-style: dotted; outline-style: dotted;
} }
@ -3654,11 +3701,28 @@ body:has(#menu-controller:checked) {
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
} }
.focus\:ring-1:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-primary-500:focus { .focus\:ring-primary-500:focus {
--tw-ring-opacity: 1; --tw-ring-opacity: 1;
--tw-ring-color: rgba(var(--color-primary-500), var(--tw-ring-opacity)); --tw-ring-color: rgba(var(--color-primary-500), var(--tw-ring-opacity));
} }
.focus\:ring-primary-700:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(var(--color-primary-700), var(--tw-ring-opacity));
}
.focus\:ring-offset-2:focus { .focus\:ring-offset-2:focus {
--tw-ring-offset-width: 2px; --tw-ring-offset-width: 2px;
} }
@ -4101,6 +4165,14 @@ body:has(#menu-controller:checked) {
} }
@media (min-width: 853px) { @media (min-width: 853px) {
.md\:bottom-40 {
bottom: 10rem;
}
.md\:bottom-24 {
bottom: 6rem;
}
.md\:mr-7 { .md\:mr-7 {
margin-right: 1.75rem; margin-right: 1.75rem;
} }
@ -4188,6 +4260,10 @@ body:has(#menu-controller:checked) {
left: 0px; left: 0px;
} }
.lg\:bottom-40 {
bottom: 10rem;
}
.lg\:order-last { .lg\:order-last {
order: 9999; order: 9999;
} }

77
layouts/shortcodes/mt-form.html
View file

@ -70,7 +70,7 @@
</select> </select>
</div> </div>
</div> </div>
<div class="basis-full flex flex-wrap"> <div class="basis-full flex flex-wrap my-4">
<label for="street" class="basis-full">What is your address?</label> <label for="street" class="basis-full">What is your address?</label>
<input type="text" id="street" name="street" <input type="text" id="street" name="street"
class="basis-full form-input {{ $formClasses }}" class="basis-full form-input {{ $formClasses }}"
@ -105,10 +105,10 @@
class="flex-auto form-input {{ $formClasses }}"> class="flex-auto form-input {{ $formClasses }}">
</div> </div>
</div> </div>
<label for="school" class="basis-full">What school do you go to?</label> <label for="school" class="basis-full my-4">What school do you go to?</label>
<input type="text" id="school" name="school" class="basis-full form-input {{ $formClasses }}"> <input type="text" id="school" name="school" class="basis-full form-input {{ $formClasses }}">
<div class="basis-full"> <div class="basis-full my-4">
<label for="grade" class="">Grade</label> <label for="grade" class="">Grade</label>
<br/> <br/>
<input type="radio" id="grade" name="grade" value="8" class="form-input {{ $formClasses }}"> <input type="radio" id="grade" name="grade" value="8" class="form-input {{ $formClasses }}">
@ -130,14 +130,16 @@
class="form-input {{ $formClasses }}"> class="form-input {{ $formClasses }}">
<label for="grade" class="">Senior</label> <label for="grade" class="">Senior</label>
</div> </div>
<div class="basis-full flex flex-wrap"> <div class="basis-full flex flex-wrap my-4">
<label for="pastorfirstname" class="basis-full">What is your pastor's first and last name?</label> <label for="pastorfirstname" class="basis-full">What is your pastor's first and last name?</label>
<input type="text" id="pastorfirstname" name="pastorfirstname" <input type="text" id="pastorfirstname" name="pastorfirstname"
class="flex-auto form-input {{ $formClasses }}"> class="flex-auto form-input {{ $formClasses }}"
placeholder="First Name">
<input type="text" id="pastorlastname" name="pastorlastname" <input type="text" id="pastorlastname" name="pastorlastname"
class="flex-auto form-input {{ $formClasses }}"> class="flex-auto form-input {{ $formClasses }}"
placeholder="Last Name">
</div> </div>
<div class="basis-full"> <div class="basis-full my-4">
<label for="churchattendance" class="">Do you attend church regularly?</label> <label for="churchattendance" class="">Do you attend church regularly?</label>
<br/> <br/>
<input type="radio" id="churchattendance" name="churchattendance" <input type="radio" id="churchattendance" name="churchattendance"
@ -152,36 +154,38 @@
value="other" class="form-input {{ $formClasses }}"> value="other" class="form-input {{ $formClasses }}">
<label for="churchattendance" class="">Other</label> <label for="churchattendance" class="">Other</label>
</div> </div>
<div class="basis-1/2"> <div class="basis-full flex flex-wrap my-4">
<label for="tfcgroup" class="">TFC Group</label> <div class="basis-1/2 flex flex-wrap items-center">
<select id="tfcgroup" name="tfcgroup" class="form-select {{ $formClasses }}"> <label for="tfcgroup" class="flex-initial">TFC Group</label>
<option value="phillipsburg">Phillipsburg</option> <select id="tfcgroup" name="tfcgroup" class="flex-auto form-select {{ $formClasses }}">
<option value="atwood">Atwood</option> <option value="phillipsburg">Phillipsburg</option>
<option value="northern-valley">Northern Valley</option> <option value="atwood">Atwood</option>
<option value="southern-valley">Southern Valley</option> <option value="northern-valley">Northern Valley</option>
<option value="thunder-ridge">Thunder Ridge</option> <option value="southern-valley">Southern Valley</option>
<option value="logan">Logan</option> <option value="thunder-ridge">Thunder Ridge</option>
<option value="codell">Codell</option> <option value="logan">Logan</option>
<option value="colby">Colby</option> <option value="codell">Codell</option>
</select> <option value="colby">Colby</option>
</select>
</div>
<div class="basis-1/2 flex flex-wrap items-center">
<label for="shirt" class="flex-initial">T-Shirt Size</label>
<select id="shirt" name="shirt" class="flex-auto form-select {{ $formClasses }}">
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="xl">XL</option>
<option value="xxl">2XL</option>
<option value="xxxl">3XL</option>
</select>
</div>
</div> </div>
<div class="basis-1/2"> <div class="basis-full my-4 mb-8 flex flex-wrap">
<label for="shirt" class="">T-Shirt Size</label> <label for="image" class="basis-full">
<select id="shirt" name="shirt" class="form-select {{ $formClasses }}">
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="xl">XL</option>
<option value="xxl">2XL</option>
<option value="xxxl">3XL</option>
</select>
</div>
<div class="basis-full my-12">
<label for="image" class="">
Please give us a picture you'd like to use on prayer cards. Please give us a picture you'd like to use on prayer cards.
</label> </label>
<input type="file" id="image" name="image" <input type="file" id="image" name="image"
class="file:m-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-neutral-500 file:text-neutral-100 hover:file:bg-primary-300 hover:file:ring-offset-2 hover:file:ring-2 hover:file:ring-offset-transparent hover:file:text-primary-500 hover:file:ring-primary-500"> class="file:my-4 file:ml-2 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-neutral-500 file:text-neutral-100 hover:file:bg-primary-300 hover:file:ring-offset-2 hover:file:ring-2 hover:file:ring-offset-transparent hover:file:text-primary-500 hover:file:ring-primary-500">
</div> </div>
<div class="basis-full mt-10"> <div class="basis-full mt-10">
<label for="tripnotes" class="p-4"> <label for="tripnotes" class="p-4">
@ -255,7 +259,7 @@
class="form-input w-full h-64 {{ $formClasses }}" class="form-input w-full h-64 {{ $formClasses }}"
placeholder=""></textarea> placeholder=""></textarea>
</div> </div>
<div class="basis-full mt-10"> <div class="basis-full my-10">
<label for="attitude-toward-work" class="p-4"> <label for="attitude-toward-work" class="p-4">
If we were to ask your parents/employer/or teachers about your attitudes towards work, what would they say? If we were to ask your parents/employer/or teachers about your attitudes towards work, what would they say?
</label> </label>
@ -264,11 +268,12 @@
class="form-input w-full h-64 {{ $formClasses }}" class="form-input w-full h-64 {{ $formClasses }}"
placeholder=""></textarea> placeholder=""></textarea>
</div> </div>
<div class="basis-full">
<button class="content-right rounded-lg bg-primary-700 h-12 w-24 focus:bg-primary-900 focus:ring focus:ring-primary-700 hover:bg-primary-900 float-right">Submit</button>
</div>
</form> </form>
</div> </div>
<div class="h-12" style="display: flex;"></div>
<iframe <iframe
id="form" id="form"
class="mt-form w-full h-screen" class="mt-form w-full h-screen"