diff --git a/_dev/elegance.css b/_dev/elegance.css index 5925f28..9d0b97c 100644 --- a/_dev/elegance.css +++ b/_dev/elegance.css @@ -69,6 +69,7 @@ input[type="radio"],input[type="checkbox"] { cursor: pointer; top: 0; transition: all 0.25s; + border-bottom: #000000; } .tab-label:hover { top: -0.25rem; @@ -99,13 +100,3 @@ input[type="radio"],input[type="checkbox"] { opacity: 1; transition: all 0.35s; } -/* For Webkit-based browsers (Chrome, Safari and Opera) */ -.scrollbar-hide::-webkit-scrollbar { - display: none; -} - -/* For IE, Edge and Firefox */ -.scrollbar-hide { - -ms-overflow-style: none; /* IE and Edge */ - scrollbar-width: none; /* Firefox */ -} \ No newline at end of file diff --git a/assets/css/theme.css b/assets/css/theme.css index 4075cc9..8e527db 100644 --- a/assets/css/theme.css +++ b/assets/css/theme.css @@ -871,6 +871,11 @@ select { margin-bottom: 0.125rem; } +.my-12 { + margin-top: 3rem; + margin-bottom: 3rem; +} + .my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; @@ -1117,10 +1122,6 @@ select { width: 220px; } -.w-\[95px\] { - width: 95px; -} - .w-full { width: 100%; } @@ -1130,6 +1131,10 @@ select { width: max-content; } +.w-56 { + width: 14rem; +} + .max-w-6xl { max-width: 72rem; } @@ -1439,6 +1444,11 @@ select { background-color: rgb(75 85 99 / var(--tw-bg-opacity)); } +.bg-gray-700 { + --tw-bg-opacity: 1; + background-color: rgb(55 65 81 / var(--tw-bg-opacity)); +} + .bg-green-500 { --tw-bg-opacity: 1; background-color: rgb(34 197 94 / var(--tw-bg-opacity)); @@ -1463,11 +1473,6 @@ select { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.bg-gray-700 { - --tw-bg-opacity: 1; - background-color: rgb(55 65 81 / var(--tw-bg-opacity)); -} - .stroke-black { stroke: #000; } @@ -1627,14 +1632,6 @@ select { padding-top: 1.5rem; } -.pl-8 { - padding-left: 2rem; -} - -.pl-9 { - padding-left: 2.25rem; -} - .text-left { text-align: left; } @@ -1929,6 +1926,7 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { cursor: pointer; top: 0; transition: all 0.25s; + border-bottom: #000000; } .tab-label:hover { @@ -1964,21 +1962,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { transition: all 0.35s; } -/* For Webkit-based browsers (Chrome, Safari and Opera) */ - -.scrollbar-hide::-webkit-scrollbar { - display: none; -} - -/* For IE, Edge and Firefox */ - -.scrollbar-hide { - -ms-overflow-style: none; - /* IE and Edge */ - scrollbar-width: none; - /* Firefox */ -} - .file\:mr-4::file-selector-button { margin-right: 1rem; } @@ -2225,6 +2208,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { .sm\:flex { display: flex; } + + .sm\:w-1\/2 { + width: 50%; + } } @media (min-width: 768px) { @@ -2397,6 +2384,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { width: 100%; } + .lg\:w-44 { + width: 11rem; + } + .lg\:max-w-full { max-width: 100%; } @@ -2453,4 +2444,4 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { .xl\:w-1\/4 { width: 25%; } -} \ No newline at end of file +} diff --git a/modules/thobbodymeasurements/views/templates/hook/set-measurements-button.tpl b/modules/thobbodymeasurements/views/templates/hook/set-measurements-button.tpl index d66a2e0..8dc7236 100644 --- a/modules/thobbodymeasurements/views/templates/hook/set-measurements-button.tpl +++ b/modules/thobbodymeasurements/views/templates/hook/set-measurements-button.tpl @@ -9,13 +9,13 @@ </a> <!-- Modal --> -<div class="modal modal-set-measurements scrollbar-hide lg:w-[600px]" id="measurements-modal" tabindex="-1" role="dialog" style="display: none;;overflow-x:auto ;position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 80%; background-color: white; border: 1px solid black; padding: 20px; z-index: 9999;"> +<div class="modal modal-set-measurements lg:w-[600px]" id="measurements-modal" tabindex="-1" role="dialog" style="display: none;;overflow-x:auto ;position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 80%; background-color: white; border: 1px solid black; padding: 20px; z-index: 9999;"> <div class="wrapper"> <div class="tabs"> <div class="tab"> <input type="radio" name="css-tabs" id="tab-1" checked class="tab-switch"> <label for="tab-1" class="tab-label">Tab One</label> - <div class="tab-content"> + <div class="tab-content my-12"> {if isset($currentForm)} <h2 class="font-semibold mb-4">{$currentForm.label_form}</h2> <form id="measurements-form" name="measurements-form" class="form-horizontal" action="#" method="POST"> @@ -23,12 +23,12 @@ {foreach from=json_decode($currentForm.attributes, true) item=$attribute} <div class="mb-4 flex flex-row form-group "> <label for="{$attribute.id}" class="form-control-label md:w-1/4 pr-4 pl-4 required">{$attribute.name}</label> - <div class="md:w-1/2 pr-4 pl-4 js-input-column"> + <div class=" pr-4 pl-4 js-input-column"> <input type="text" id="{$attribute.id}" name="{$attribute.id}" - class=" block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" + class=" block appearance-none w-56 py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" pattern="[0-9]+" title="Please enter a positive number" required @@ -49,24 +49,23 @@ <p>No form data available.</p> {/if} <button type="submit" class=" hover:text-white hover:no-underline px-6 py-2 bg-blue-950 disabled:bg-gray-700 text-white text-base font-light" id="submit-measurements-button">{l s='Submit' mod='thobbodymeasurements'}</button> - <button type="button" class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline bg-gray-600 text-white hover:bg-gray-700" data-dismiss="modal">Close</button> + <button type="button" class="hover:text-white hover:no-underline px-6 py-2 bg-gray-700 text-white text-base font-light" data-dismiss="modal">Close</button> </div> </div> - <div class="tab"> + <div class="tab mb-8"> <input type="radio" name="css-tabs" id="tab-2" class="tab-switch"> <label for="tab-2" class="tab-label">Tab Two</label> - <div class="tab-content"> - <div class="tab-pane" id="mirror-size-measurements" role="tabpanel" aria-labelledby="mirror-size-measurements-tab"> + <div class="tab-content gap-mb-8"> + <div class="tab-pane mb-8" id="mirror-size-measurements" role="tabpanel" aria-labelledby="mirror-size-measurements-tab"> {if $qrCode} <img src="{$qrCode}" alt="Mirror Size QR Code" class="max-w-full h-auto"> - <p> Scan the above QR code to begin our easy 2 photo custom measurement collection.</p> - <p> Click on 'Photos Completed' button once your above process is finished. </p> - <button type="button" class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline bg-green-500 text-white hover:green-600" id="photos-completed-button" name="photos-completed-button">Photos Completed</button> + <p class="mt-3"> Scan the above QR code to begin our easy 2 photo custom measurement collection.</p> + <p class="mt-3"> Click on 'Photos Completed' button once your above process is finished. </p> + <button type="button" class=" mt-3 mb-8 inline-block text-center select-none font-normal whitespace-no-wrap px-6 py-2 leading-normal no-underline bg-green-500 text-white hover:green-600" id="photos-completed-button" name="photos-completed-button">Photos Completed</button> + <button type="button" class=" mt-3 mb-8 hover:text-white hover:no-underline px-6 py-2 bg-gray-700 text-white text-base font-light " data-dismiss="modal">Close</button> {/if} </div> - <div class="modal-footer"> - <button type="button" class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline bg-gray-600 text-white hover:bg-gray-700" data-dismiss="modal">Close</button> </div> </div> </div>