Skip to content

Commit

Permalink
lightened the disabled checkboxes and disabled labels
Browse files Browse the repository at this point in the history
  • Loading branch information
@harvanchik
harvanchik committed Nov 1, 2022
1 parent 8bdd203 commit ae45339
Show file tree
Hide file tree
Showing 6 changed files with 9 additions and 9 deletions.
2 changes: 1 addition & 1 deletion assets/styles/styles.css
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions assets/styles/tailwind.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@

/* make label text color grey when input is disabled */
input[type='checkbox']:disabled + label {
@apply text-gray-600 print:text-black;
@apply text-gray-600/80 print:text-black;
}

input[type='text'],
Expand All @@ -26,7 +26,7 @@
}

input[type='checkbox'] {
@apply h-2.5 w-2.5 appearance-none transition-colors duration-150 checked:bg-indigo-500 focus-within:border-indigo-600 checked:focus-within:bg-indigo-600 hover:bg-gray-300 checked:hover:bg-indigo-600 focus:bg-gray-200 focus:ring-0 focus:ring-offset-0 focus:checked:bg-indigo-600 disabled:bg-gray-400/80 print:disabled:bg-white;
@apply h-2.5 w-2.5 appearance-none transition-colors duration-150 checked:bg-indigo-500 focus-within:border-indigo-600 checked:focus-within:bg-indigo-600 hover:bg-gray-300 checked:hover:bg-indigo-600 focus:bg-gray-200 focus:ring-0 focus:ring-offset-0 focus:checked:bg-indigo-600 disabled:bg-gray-400/70 print:disabled:bg-white;
}

/* Chrome, Safari, Edge, Opera */
Expand Down
3 changes: 3 additions & 0 deletions docs/assets/styles/styles-c0d1f5be22.css
View file

Large diffs are not rendered by default.

3 changes: 0 additions & 3 deletions docs/assets/styles/styles-efa0d037b4.css
View file

This file was deleted.

4 changes: 2 additions & 2 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html><html lang=en><head><meta charset=UTF-8><title>Football Game Card</title><meta name=viewport content="width=device-width,initial-scale=1,viewport-fit=cover"><meta name=apple-mobile-web-app-capable content=yes><meta name=mobile-web-app-capable content=yes><link rel=apple-touch-icon href=./assets/img/app-ed73e78a4b.png><link rel=stylesheet href=./assets/styles/styles-efa0d037b4.css><script defer=defer src=https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js></script></head><body class=relative><section class="mx-auto mt-10 flex w-max lg:mt-0 lg:h-screen lg:items-center"><div class="flex max-h-[4.9in] max-w-[3.65in] flex-col space-y-1.5 rounded-xl border-2 border-black bg-gray-500/10 p-3 shadow-lg print:scale-100 print:shadow-none lg:h-[4.9in] lg:w-[3.65in] lg:scale-[1.8]"><div class="flex flex-col space-y-2"><div class="flex flex-row space-x-2"><div x-data="{ isHome: true }" class="flex w-3/5 flex-row space-x-1"><label @click="isHome = !isHome" for=team x-text="isHome ? 'home' : 'visitor'" class="cursor-pointer uppercase"></label> <input id=team type=text spellcheck=false></div><div class="flex w-2/5 flex-row space-x-1"><label for=color>COLOR</label> <input id=color type=text spellcheck=false class=!uppercase></div></div><div class="flex flex-row space-x-1"><label for=color>HEAD COACH</label> <input id=color type=text spellcheck=false></div></div><div x-data="{
<!DOCTYPE html><html lang=en><head><meta charset=UTF-8><title>Football Game Card</title><meta name=viewport content="width=device-width,initial-scale=1,viewport-fit=cover"><meta name=apple-mobile-web-app-capable content=yes><meta name=mobile-web-app-capable content=yes><link rel=apple-touch-icon href=./assets/img/app-ed73e78a4b.png><link rel=stylesheet href=./assets/styles/styles-c0d1f5be22.css><script defer=defer src=https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js></script></head><body class=relative><section class="mx-auto mt-10 flex w-max lg:mt-0 lg:h-screen lg:items-center"><div class="flex max-h-[4.9in] max-w-[3.65in] flex-col space-y-1.5 rounded-xl border-2 border-black bg-gray-500/10 p-3 shadow-lg print:scale-100 print:shadow-none lg:h-[4.9in] lg:w-[3.65in] lg:scale-[1.8]"><div class="flex flex-col space-y-2"><div class="flex flex-row space-x-2"><div x-data="{ isHome: true }" class="flex w-3/5 flex-row space-x-1"><label @click="isHome = !isHome" for=team x-text="isHome ? 'home' : 'visitor'" class="cursor-pointer uppercase"></label> <input id=team type=text spellcheck=false></div><div class="flex w-2/5 flex-row space-x-1"><label for=color>COLOR</label> <input id=color type=text spellcheck=false class=!uppercase></div></div><div class="flex flex-row space-x-1"><label for=color>HEAD COACH</label> <input id=color type=text spellcheck=false></div></div><div x-data="{
lostToss: false,
first_half_option: null,
get isDefer() { return this.first_half_option === 'defer' },
Expand All @@ -13,4 +13,4 @@
set isReceive(val) { this.second_half_option = this.second_half_option === 'receive' ? null : 'receive' },
get isDefend() { return this.second_half_option === 'defend' && this.isDefer },
set isDefend(val) { this.second_half_option = this.second_half_option === 'defend' ? null : 'defend' }
}" class="flex flex-row"><div class="relative mt-[-2px] flex w-max border-2 border-black px-[3px] py-[1px]"><label for=2nd-half-opt class="flex flex-col" :class="isDefer || 'text-gray-600 print:text-black'"><span>SECOND HALF</span> <span class=ml-4>OPTION</span></label> <input id=2nd-half-opt type=checkbox :disabled=!isDefer x-model=isDefer class="absolute bottom-[2px] left-[2px]"></div><div class="relative ml-[-2px] mt-[-2px] flex w-full border-2 border-black p-[3px]"><div class="mx-auto flex w-max flex-row items-center space-x-1"><div class="5 item-center flex flex-row space-x-2"><div class="flex flex-row items-center space-x-1"><input id=receive-2 type=checkbox :disabled=!isDefer x-model=isReceive> <label for=receive-2 :disabled=!isDefer class="m-0 mb-[-1px]">RECEIVE</label></div><div class="flex flex-row items-center space-x-1"><input id=defend-2 type=checkbox :disabled=!isDefer x-model=isDefend> <label for=defend-2 :disabled=!isDefer class="m-0 mb-[-1px]">DEFEND</label></div></div><input id=goal-2 type=text spellcheck=false class="!w-7 text-center !uppercase" maxlength=2> <label for=goal-2 class="m-0 mb-[-1px]">GOAL</label></div></div></div></div><table x-data="{ captains: ['cap', 'alt'] }" class="flex flex-col space-y-1"><template x-for="captain in captains"><tr class="flex flex-row space-x-1" :style="captain === 'cap' && { marginTop: 0 }"><td class="flex flex-row space-x-1"><label for=captain-1><span x-text=captain class="font-mono uppercase"></span>.</label> <input id=captain-1 type=text spellcheck=false class=flex-1></td><td class="flex flex-row space-x-1"><label for=number-1>NO.</label><input id=number-1 type=number class="!w-10 text-center" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength=2 min=0 max=99></td><td class="flex flex-row space-x-1"><label for=position-1>POS.</label> <input id=position-1 type=text spellcheck=false class="!w-10 text-center !uppercase" maxlength=2></td></tr></template></table><div x-data class="flex flex-col space-y-3 border-2 border-black px-[3px] pt-[3px] pb-[2px]"><div class="flex flex-row space-x-1"><h2><span class="font-mono font-medium tracking-tighter">1ST</span> HALF T.O.</h2><div class="mt-auto !-ml-1 flex flex-row space-x-2"><template x-for="i in 3"><input type=text pattern=[0-9]{1,2}:[0-9]{2} spellcheck=false class="!h-4 text-center" maxlength=5></template></div></div><div class="flex flex-row space-x-1"><h2><span class="font-mono font-medium tracking-tighter">2ND</span> HALF T.O.</h2><div class="mt-auto !-ml-1 flex flex-row space-x-2"><template x-for="i in 3"><input type=text pattern=[0-9]{1,2}:[0-9]{2} spellcheck=false class="!h-4 text-center" maxlength=5></template></div></div></div><div class="flex flex-col space-y-2 border-2 border-black px-[3px] pt-[3px] pb-[2px]"><div class="flex flex-col space-y-1"><div class="flex flex-row space-x-1"><div class="flex flex-row space-x-1"><label for=date>DATE</label> <input id=date type=text pattern="^(([0-9])|([0-2][0-9])|([3][0-1])) (jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec) \d{4}$" spellcheck=false class="!w-[5rem] text-center !uppercase"></div><div class="flex flex-row space-x-1"><label for=start>START</label> <input id=start type=text pattern="((1[0-2]|0?[1-9]):([0-5][0-9]) ?([AaPp][Mm]))" spellcheck=false class="text-center !uppercase"></div><div class="flex flex-row space-x-1"><label for=end>END</label> <input id=end type=text pattern="((1[0-2]|0?[1-9]):([0-5][0-9]) ?([AaPp][Mm]))" spellcheck=false class="text-center !uppercase"></div></div></div><div class="flex flex-row space-x-1"><label for=date>GAME<br>NOTES</label> <textarea id=date class="scrollbar-hide !h-14 resize-none !normal-case"></textarea></div></div><div class="flex flex-col space-y-0.5"><h2 class="mx-auto w-max">SCORING SUMMARY</h2><div class="flex flex-row"><div class="grid w-full grid-cols-2 grid-rows-2"><div class="group relative h-8 border-2 border-black bg-white"><label for=first class="absolute top-0.5 left-0.5 font-mono text-[8px] group-focus-within:font-semibold group-focus-within:text-indigo-600">1ST</label> <input id=first type=number class="!border-0 !bg-transparent pl-0.5 text-center" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength=3 min=0 max=999></div><div class="group relative h-8 border-2 border-l-0 border-black bg-white"><label for=second class="absolute top-0.5 left-0.5 font-mono text-[8px] group-focus-within:font-semibold group-focus-within:text-indigo-600">2ND</label> <input id=second type=number class="!border-0 !bg-transparent pl-0.5 text-center" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength=3 min=0 max=999></div><div class="group relative h-8 border-2 border-t-0 border-black bg-white"><label for=third class="absolute top-0.5 left-0.5 font-mono text-[8px] group-focus-within:font-semibold group-focus-within:text-indigo-600">3RD</label> <input id=third type=number class="!border-0 !bg-transparent pl-0.5 text-center" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength=3 min=0 max=999></div><div class="group relative h-8 border-2 border-l-0 border-t-0 border-black bg-white"><label for=fourth class="absolute top-0.5 left-0.5 font-mono text-[8px] group-focus-within:font-semibold group-focus-within:text-indigo-600">4TH</label> <input id=fourth type=number class="!border-0 !bg-transparent pl-0.5 text-center" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength=3 min=0 max=999></div></div><div class="group relative flex h-16 w-12 border-2 border-l-0 border-black bg-white"><label for=final-score class="absolute top-0.5 left-[3px] group-focus-within:font-semibold group-focus-within:text-indigo-600">FINAL</label> <input id=final-score type=number class="!border-0 !bg-transparent pl-0.5 text-center" :placeholder=final_score oninput="this.value=this.value.slice(0,this.maxLength)" maxlength=3 min=0 max=999></div></div></div><div x-data class="flex flex-col space-y-3 border-2 border-black px-[3px] pt-[3px] pb-[2px]"><div class="flex flex-row space-x-1 font-mono font-medium"><h2>UNSPORTSMANLIKES</h2><div class="mt-auto flex w-full flex-row space-x-2" style=margin-right:.5rem><template x-for="i in 4"><input type=number spellcheck=false class="!h-4 text-center" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength=2 min=0 max=99></template></div></div></div><h3 class="mx-auto flex w-max flex-col space-y-0.5"><span class="text-[8px] font-medium uppercase">Game Card Created by Jake Harvanchik</span> <span class="!select-all text-center text-[7px] font-medium lowercase selection:bg-indigo-400 selection:text-white">https://jake.harvanchik.me/game-card</span></h3></div></section><a href=./assets/img/game-cards-21dbb9f2cc.pdf download class="absolute right-0 bottom-0 m-5 hidden h-12 w-12 rounded-xl bg-black/20 transition-colors duration-150 hover:bg-black/40 lg:block"><img src=./assets/img/svg/printer-13bef530c0.svg alt=printer class=p-1.5></a></body></html>
}" class="flex flex-row"><div class="relative mt-[-2px] flex w-max border-2 border-black px-[3px] py-[1px]"><label for=2nd-half-opt class="flex flex-col" :class="isDefer || 'text-gray-600/80 print:text-black'"><span>SECOND HALF</span> <span class=ml-4>OPTION</span></label> <input id=2nd-half-opt type=checkbox :disabled=!isDefer x-model=isDefer class="absolute bottom-[2px] left-[2px]"></div><div class="relative ml-[-2px] mt-[-2px] flex w-full border-2 border-black p-[3px]"><div class="mx-auto flex w-max flex-row items-center space-x-1"><div class="5 item-center flex flex-row space-x-2"><div class="flex flex-row items-center space-x-1"><input id=receive-2 type=checkbox :disabled=!isDefer x-model=isReceive> <label for=receive-2 :disabled=!isDefer class="m-0 mb-[-1px]">RECEIVE</label></div><div class="flex flex-row items-center space-x-1"><input id=defend-2 type=checkbox :disabled=!isDefer x-model=isDefend> <label for=defend-2 :disabled=!isDefer class="m-0 mb-[-1px]">DEFEND</label></div></div><input id=goal-2 type=text spellcheck=false class="!w-7 text-center !uppercase" maxlength=2> <label for=goal-2 class="m-0 mb-[-1px]">GOAL</label></div></div></div></div><table x-data="{ captains: ['cap', 'alt'] }" class="flex flex-col space-y-1"><template x-for="captain in captains"><tr class="flex flex-row space-x-1" :style="captain === 'cap' && { marginTop: 0 }"><td class="flex flex-row space-x-1"><label for=captain-1><span x-text=captain class="font-mono uppercase"></span>.</label> <input id=captain-1 type=text spellcheck=false class=flex-1></td><td class="flex flex-row space-x-1"><label for=number-1>NO.</label><input id=number-1 type=number class="!w-10 text-center" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength=2 min=0 max=99></td><td class="flex flex-row space-x-1"><label for=position-1>POS.</label> <input id=position-1 type=text spellcheck=false class="!w-10 text-center !uppercase" maxlength=2></td></tr></template></table><div x-data class="flex flex-col space-y-3 border-2 border-black px-[3px] pt-[3px] pb-[2px]"><div class="flex flex-row space-x-1"><h2><span class="font-mono font-medium tracking-tighter">1ST</span> HALF T.O.</h2><div class="mt-auto !-ml-1 flex flex-row space-x-2"><template x-for="i in 3"><input type=text pattern=[0-9]{1,2}:[0-9]{2} spellcheck=false class="!h-4 text-center" maxlength=5></template></div></div><div class="flex flex-row space-x-1"><h2><span class="font-mono font-medium tracking-tighter">2ND</span> HALF T.O.</h2><div class="mt-auto !-ml-1 flex flex-row space-x-2"><template x-for="i in 3"><input type=text pattern=[0-9]{1,2}:[0-9]{2} spellcheck=false class="!h-4 text-center" maxlength=5></template></div></div></div><div class="flex flex-col space-y-2 border-2 border-black px-[3px] pt-[3px] pb-[2px]"><div class="flex flex-col space-y-1"><div class="flex flex-row space-x-1"><div class="flex flex-row space-x-1"><label for=date>DATE</label> <input id=date type=text pattern="^(([0-9])|([0-2][0-9])|([3][0-1])) (jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec) \d{4}$" spellcheck=false class="!w-[5rem] text-center !uppercase"></div><div class="flex flex-row space-x-1"><label for=start>START</label> <input id=start type=text pattern="((1[0-2]|0?[1-9]):([0-5][0-9]) ?([AaPp][Mm]))" spellcheck=false class="text-center !uppercase"></div><div class="flex flex-row space-x-1"><label for=end>END</label> <input id=end type=text pattern="((1[0-2]|0?[1-9]):([0-5][0-9]) ?([AaPp][Mm]))" spellcheck=false class="text-center !uppercase"></div></div></div><div class="flex flex-row space-x-1"><label for=date>GAME<br>NOTES</label> <textarea id=date class="scrollbar-hide !h-14 resize-none !normal-case"></textarea></div></div><div class="flex flex-col space-y-0.5"><h2 class="mx-auto w-max">SCORING SUMMARY</h2><div class="flex flex-row"><div class="grid w-full grid-cols-2 grid-rows-2"><div class="group relative h-8 border-2 border-black bg-white"><label for=first class="absolute top-0.5 left-0.5 font-mono text-[8px] group-focus-within:font-semibold group-focus-within:text-indigo-600">1ST</label> <input id=first type=number class="!border-0 !bg-transparent pl-0.5 text-center" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength=3 min=0 max=999></div><div class="group relative h-8 border-2 border-l-0 border-black bg-white"><label for=second class="absolute top-0.5 left-0.5 font-mono text-[8px] group-focus-within:font-semibold group-focus-within:text-indigo-600">2ND</label> <input id=second type=number class="!border-0 !bg-transparent pl-0.5 text-center" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength=3 min=0 max=999></div><div class="group relative h-8 border-2 border-t-0 border-black bg-white"><label for=third class="absolute top-0.5 left-0.5 font-mono text-[8px] group-focus-within:font-semibold group-focus-within:text-indigo-600">3RD</label> <input id=third type=number class="!border-0 !bg-transparent pl-0.5 text-center" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength=3 min=0 max=999></div><div class="group relative h-8 border-2 border-l-0 border-t-0 border-black bg-white"><label for=fourth class="absolute top-0.5 left-0.5 font-mono text-[8px] group-focus-within:font-semibold group-focus-within:text-indigo-600">4TH</label> <input id=fourth type=number class="!border-0 !bg-transparent pl-0.5 text-center" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength=3 min=0 max=999></div></div><div class="group relative flex h-16 w-12 border-2 border-l-0 border-black bg-white"><label for=final-score class="absolute top-0.5 left-[3px] group-focus-within:font-semibold group-focus-within:text-indigo-600">FINAL</label> <input id=final-score type=number class="!border-0 !bg-transparent pl-0.5 text-center" :placeholder=final_score oninput="this.value=this.value.slice(0,this.maxLength)" maxlength=3 min=0 max=999></div></div></div><div x-data class="flex flex-col space-y-3 border-2 border-black px-[3px] pt-[3px] pb-[2px]"><div class="flex flex-row space-x-1 font-mono font-medium"><h2>UNSPORTSMANLIKES</h2><div class="mt-auto flex w-full flex-row space-x-2" style=margin-right:.5rem><template x-for="i in 4"><input type=number spellcheck=false class="!h-4 text-center" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength=2 min=0 max=99></template></div></div></div><h3 class="mx-auto flex w-max flex-col space-y-0.5"><span class="text-[8px] font-medium uppercase">Game Card Created by Jake Harvanchik</span> <span class="!select-all text-center text-[7px] font-medium lowercase selection:bg-indigo-400 selection:text-white">https://jake.harvanchik.me/game-card</span></h3></div></section><a href=./assets/img/game-cards-21dbb9f2cc.pdf download class="absolute right-0 bottom-0 m-5 hidden h-12 w-12 rounded-xl bg-black/20 transition-colors duration-150 hover:bg-black/40 lg:block"><img src=./assets/img/svg/printer-13bef530c0.svg alt=printer class=p-1.5></a></body></html>
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@
<label
for="2nd-half-opt"
class="flex flex-col"
:class="isDefer || 'text-gray-600 print:text-black'">
:class="isDefer || 'text-gray-600/80 print:text-black'">
<span>SECOND HALF</span>
<span class="ml-4">OPTION</span>
</label>
Expand Down

0 comments on commit ae45339

Please sign in to comment.