fix: change styling on pop up
apurvabangali
parent
10fb36a888
commit
f6aeae158d
|
|
@ -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 */
|
||||
}
|
||||
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue