fix: edit styling on pop up
apurvabangali
parent
85035f2768
commit
7df21e3c07
|
|
@ -35,3 +35,77 @@ ul {
|
|||
input[type="radio"],input[type="checkbox"] {
|
||||
@apply focus:ring-transparent;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
max-width: 50rem;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.tabs {
|
||||
position: relative;
|
||||
height: 14.75rem;
|
||||
}
|
||||
.tabs::before,
|
||||
.tabs::after {
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
.tabs::after {
|
||||
clear: both;
|
||||
}
|
||||
.tab {
|
||||
float: left;
|
||||
}
|
||||
.tab-switch {
|
||||
display: none;
|
||||
}
|
||||
.tab-label {
|
||||
position: relative;
|
||||
display: block;
|
||||
line-height: 2.75em;
|
||||
height: 3em;
|
||||
padding: 0 1.618em;
|
||||
color: #000000;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
transition: all 0.25s;
|
||||
}
|
||||
.tab-label:hover {
|
||||
top: -0.25rem;
|
||||
transition: top 0.25s;
|
||||
}
|
||||
.tab-content {
|
||||
height: 12rem;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 2.75em;
|
||||
left: 0;
|
||||
padding: 1.618rem;
|
||||
background: #fff;
|
||||
color: #2c3e50;
|
||||
opacity: 0;
|
||||
transition: all 0.35s;
|
||||
}
|
||||
.tab-switch:checked + .tab-label {
|
||||
background: #fff;
|
||||
color: #2c3e50;
|
||||
border-bottom: 0;
|
||||
transition: all 0.35s;
|
||||
z-index: 1;
|
||||
top: -0.0625rem;
|
||||
}
|
||||
.tab-switch:checked + label + .tab-content {
|
||||
z-index: 2;
|
||||
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 */
|
||||
}
|
||||
|
|
@ -759,6 +759,10 @@ select {
|
|||
visibility: collapse;
|
||||
}
|
||||
|
||||
.static {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
|
@ -787,10 +791,6 @@ select {
|
|||
left: 0px;
|
||||
}
|
||||
|
||||
.left-1\/2 {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.left-\[100\%\] {
|
||||
left: 100%;
|
||||
}
|
||||
|
|
@ -846,6 +846,11 @@ select {
|
|||
margin-bottom: -0.75rem;
|
||||
}
|
||||
|
||||
.mx-1 {
|
||||
margin-left: 0.25rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.mx-4 {
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
|
|
@ -876,12 +881,20 @@ select {
|
|||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.-mb-px {
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
.mb-0 {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.mb-1 {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.mb-16 {
|
||||
margin-bottom: 4rem;
|
||||
.mb-12 {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.mb-2 {
|
||||
|
|
@ -960,6 +973,10 @@ select {
|
|||
display: block;
|
||||
}
|
||||
|
||||
.inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.inline {
|
||||
display: inline;
|
||||
}
|
||||
|
|
@ -984,8 +1001,8 @@ select {
|
|||
aspect-ratio: 342/513;
|
||||
}
|
||||
|
||||
.aspect-square {
|
||||
aspect-ratio: 1 / 1;
|
||||
.h-1\/2 {
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.h-12 {
|
||||
|
|
@ -1012,6 +1029,10 @@ select {
|
|||
height: 2rem;
|
||||
}
|
||||
|
||||
.h-\[40px\] {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.h-auto {
|
||||
height: auto;
|
||||
}
|
||||
|
|
@ -1044,6 +1065,10 @@ select {
|
|||
width: 3.5rem;
|
||||
}
|
||||
|
||||
.w-2\/5 {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.w-24 {
|
||||
width: 6rem;
|
||||
}
|
||||
|
|
@ -1052,6 +1077,10 @@ select {
|
|||
width: 75%;
|
||||
}
|
||||
|
||||
.w-3\/5 {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.w-32 {
|
||||
width: 8rem;
|
||||
}
|
||||
|
|
@ -1080,14 +1109,18 @@ select {
|
|||
width: 2rem;
|
||||
}
|
||||
|
||||
.w-\[150px\] {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.w-\[160px\] {
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
.w-\[220px\] {
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
.w-\[95px\] {
|
||||
width: 95px;
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -1097,10 +1130,6 @@ select {
|
|||
width: max-content;
|
||||
}
|
||||
|
||||
.w-px {
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.max-w-6xl {
|
||||
max-width: 72rem;
|
||||
}
|
||||
|
|
@ -1156,14 +1185,34 @@ select {
|
|||
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 {
|
||||
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));
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.select-none {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.list-\[square\] {
|
||||
list-style-type: square;
|
||||
}
|
||||
|
||||
.list-none {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.appearance-none {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
|
@ -1242,6 +1291,10 @@ select {
|
|||
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
|
||||
}
|
||||
|
||||
.overflow-auto {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.overflow-y-auto {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
|
@ -1256,22 +1309,43 @@ select {
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.rounded-lg {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.rounded-t {
|
||||
border-top-left-radius: 0.25rem;
|
||||
border-top-right-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.border {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.border-b {
|
||||
border-bottom-width: 1px;
|
||||
.border-b-0 {
|
||||
border-bottom-width: 0px;
|
||||
}
|
||||
|
||||
.border-l-0 {
|
||||
border-left-width: 0px;
|
||||
}
|
||||
|
||||
.border-r-0 {
|
||||
border-right-width: 0px;
|
||||
}
|
||||
|
||||
.border-t {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.border-t-0 {
|
||||
border-top-width: 0px;
|
||||
}
|
||||
|
||||
.border-none {
|
||||
border-style: none;
|
||||
}
|
||||
|
|
@ -1331,10 +1405,6 @@ select {
|
|||
border-color: rgb(252 165 165 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-transparent {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.bg-black\/70 {
|
||||
background-color: rgb(0 0 0 / 0.7);
|
||||
}
|
||||
|
|
@ -1344,6 +1414,11 @@ select {
|
|||
background-color: rgb(219 234 254 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-blue-600 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(37 99 235 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-blue-950 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(23 37 84 / var(--tw-bg-opacity));
|
||||
|
|
@ -1359,6 +1434,16 @@ select {
|
|||
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-gray-600 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-green-500 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(34 197 94 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-red-100 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(254 226 226 / var(--tw-bg-opacity));
|
||||
|
|
@ -1369,6 +1454,10 @@ select {
|
|||
background-color: rgb(254 242 242 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||
|
|
@ -1378,10 +1467,6 @@ select {
|
|||
stroke: #000;
|
||||
}
|
||||
|
||||
.stroke-blue-900 {
|
||||
stroke: #1e3a8a;
|
||||
}
|
||||
|
||||
.stroke-gray-500 {
|
||||
stroke: #6b7280;
|
||||
}
|
||||
|
|
@ -1398,26 +1483,21 @@ select {
|
|||
stroke: inherit;
|
||||
}
|
||||
|
||||
.stroke-2 {
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.stroke-\[3px\] {
|
||||
stroke-width: 3px;
|
||||
}
|
||||
|
||||
.object-contain {
|
||||
-o-object-fit: contain;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.object-cover {
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.p-0 {
|
||||
padding: 0px;
|
||||
.p-1 {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.p-10 {
|
||||
padding: 2.5rem;
|
||||
}
|
||||
|
||||
.p-2 {
|
||||
|
|
@ -1441,6 +1521,11 @@ select {
|
|||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.px-3 {
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
|
|
@ -1485,6 +1570,10 @@ select {
|
|||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
.pl-0 {
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.pl-12 {
|
||||
padding-left: 3rem;
|
||||
}
|
||||
|
|
@ -1493,6 +1582,10 @@ select {
|
|||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.pl-4 {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.pl-6 {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
|
@ -1545,6 +1638,18 @@ select {
|
|||
text-align: justify;
|
||||
}
|
||||
|
||||
.text-start {
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.text-end {
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.align-middle {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.text-2xl {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
|
|
@ -1607,6 +1712,10 @@ select {
|
|||
line-height: 1;
|
||||
}
|
||||
|
||||
.leading-normal {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.text-blue-900 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(30 58 138 / var(--tw-text-opacity));
|
||||
|
|
@ -1632,6 +1741,16 @@ select {
|
|||
color: rgb(75 85 99 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-gray-700 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(55 65 81 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-gray-800 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(31 41 55 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-gray-900 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity));
|
||||
|
|
@ -1675,16 +1794,34 @@ select {
|
|||
text-decoration-line: line-through;
|
||||
}
|
||||
|
||||
.no-underline {
|
||||
text-decoration-line: none;
|
||||
}
|
||||
|
||||
.underline-offset-2 {
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
.opacity-0 {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.opacity-100 {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.shadow-lg {
|
||||
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.shadow-md {
|
||||
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.shadow-xl {
|
||||
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
|
||||
|
|
@ -1740,6 +1877,95 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
|
|||
--tw-ring-color: transparent;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
max-width: 50rem;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
position: relative;
|
||||
height: 14.75rem;
|
||||
}
|
||||
|
||||
.tabs::before,
|
||||
.tabs::after {
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
|
||||
.tabs::after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.tab {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.tab-switch {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-label {
|
||||
position: relative;
|
||||
display: block;
|
||||
line-height: 2.75em;
|
||||
height: 3em;
|
||||
padding: 0 1.618em;
|
||||
color: #000000;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
transition: all 0.25s;
|
||||
}
|
||||
|
||||
.tab-label:hover {
|
||||
top: -0.25rem;
|
||||
transition: top 0.25s;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
height: 12rem;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 2.75em;
|
||||
left: 0;
|
||||
padding: 1.618rem;
|
||||
background: #fff;
|
||||
color: #2c3e50;
|
||||
opacity: 0;
|
||||
transition: all 0.35s;
|
||||
}
|
||||
|
||||
.tab-switch:checked + .tab-label {
|
||||
background: #fff;
|
||||
color: #2c3e50;
|
||||
border-bottom: 0;
|
||||
transition: all 0.35s;
|
||||
z-index: 1;
|
||||
top: -0.0625rem;
|
||||
}
|
||||
|
||||
.tab-switch:checked + label + .tab-content {
|
||||
z-index: 2;
|
||||
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 */
|
||||
}
|
||||
|
||||
.file\:mr-4::file-selector-button {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
|
@ -1803,11 +2029,21 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
|
|||
border-color: rgb(30 58 138 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.hover\:bg-blue-600:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(37 99 235 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.hover\:bg-blue-900:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(30 58 138 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.hover\:bg-gray-700:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.hover\:stroke-blue-900:hover {
|
||||
stroke: #1e3a8a;
|
||||
}
|
||||
|
|
@ -1918,26 +2154,9 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
|
|||
}
|
||||
|
||||
@media not all and (min-width: 1024px) {
|
||||
.max-lg\:hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.max-lg\:w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.max-lg\:flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.max-lg\:items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.max-lg\:text-sm {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media not all and (min-width: 768px) {
|
||||
|
|
@ -1953,10 +2172,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.max-md\:max-w-full {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.max-md\:flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
@ -1982,17 +2197,9 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
|
|||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.max-md\:pr-2 {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.max-md\:text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.max-md\:leading-5 {
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media not all and (min-width: 640px) {
|
||||
|
|
@ -2012,14 +2219,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
|
|||
position: absolute;
|
||||
}
|
||||
|
||||
.md\:left-1\/2 {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.md\:mb-4 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.md\:block {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -2044,6 +2243,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
|
|||
width: 33.333333%;
|
||||
}
|
||||
|
||||
.md\:w-1\/4 {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.md\:w-1\/6 {
|
||||
width: 16.666667%;
|
||||
}
|
||||
|
|
@ -2080,11 +2283,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
|
|||
gap: 1rem;
|
||||
}
|
||||
|
||||
.md\:object-cover {
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.md\:p-2 {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
|
@ -2109,11 +2307,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
|
|||
padding-right: 12rem;
|
||||
}
|
||||
|
||||
.md\:text-3xl {
|
||||
font-size: 1.875rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
|
||||
.md\:text-base {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
|
|
@ -2151,8 +2344,8 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.lg\:h-screen {
|
||||
height: 100vh;
|
||||
.lg\:h-\[90vh\] {
|
||||
height: 90vh;
|
||||
}
|
||||
|
||||
.lg\:w-1\/3 {
|
||||
|
|
@ -2175,18 +2368,22 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
|
|||
width: 60%;
|
||||
}
|
||||
|
||||
.lg\:w-\[850px\] {
|
||||
width: 850px;
|
||||
.lg\:w-\[450px\] {
|
||||
width: 450px;
|
||||
}
|
||||
|
||||
.lg\:w-\[500px\] {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.lg\:w-\[600px\] {
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
.lg\:w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.lg\:max-w-\[850px\] {
|
||||
max-width: 850px;
|
||||
}
|
||||
|
||||
.lg\:max-w-full {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
|
@ -2220,13 +2417,16 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
|
|||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
.lg\:pt-24 {
|
||||
padding-top: 6rem;
|
||||
.lg\:pr-11 {
|
||||
padding-right: 2.75rem;
|
||||
}
|
||||
|
||||
.lg\:text-4xl {
|
||||
font-size: 2.25rem;
|
||||
line-height: 2.5rem;
|
||||
.lg\:pr-4 {
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.lg\:pt-24 {
|
||||
padding-top: 6rem;
|
||||
}
|
||||
|
||||
.lg\:shadow-none {
|
||||
|
|
@ -2240,9 +2440,4 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
|
|||
.xl\:w-1\/4 {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.xl\:text-6xl {
|
||||
font-size: 3.75rem;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -27,17 +27,19 @@
|
|||
<section class=" h-34 p-10 flex flex-col">
|
||||
{if isset($selectedForm)}
|
||||
<h2 class="text-lg font-bold">{l s='Form:' mod='thobbodymeasurements'} {$selectedForm.label_form}</h2>
|
||||
<form action="#" method="post" class="flex flex-col ">
|
||||
<form action="#" method="post" class="flex flex-col items-center justify-center ">
|
||||
{foreach from=$selectedForm.attributes item=attribute}
|
||||
<section class="flex flex-row mx-auto p-4">
|
||||
<section class="flex flex-row p-4">
|
||||
<div class=" flex flex-row gap-4">
|
||||
<div class="w-24 lg:pr-4 text-end mt-2">
|
||||
<label for="{$attribute.id}" class="text-base font-semibold mt-1 ">{$attribute.name}:</label>
|
||||
<div class="w-[500px]">
|
||||
</div>
|
||||
<div class="lg:w-[500px]">
|
||||
<input
|
||||
type="text"
|
||||
id="{$attribute.id}"
|
||||
name="{$attribute.id}"
|
||||
class=" w-full"
|
||||
class=" lg:w-[450px]"
|
||||
pattern="[0-9]+"
|
||||
title="Please enter a positive number"
|
||||
required
|
||||
|
|
@ -48,7 +50,7 @@
|
|||
{/if}
|
||||
/>
|
||||
</div>
|
||||
<div class="mt-1">
|
||||
<div class="mt-1 w-24 mt-2 text-start ">
|
||||
{$attribute.unit}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -57,7 +59,7 @@
|
|||
</section>
|
||||
{/foreach}
|
||||
|
||||
<div class="">
|
||||
<div class="lg:pr-11">
|
||||
<button name="measurements_submit_form" 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">{l s='Save Measurements' mod='thobbodymeasurements'}</button>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -9,8 +9,78 @@
|
|||
</a>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal modal-set-measurements" id="measurements-modal" tabindex="-1" role="dialog" style="display: none;;overflow-x:auto ;position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 80%; background-color: white; border: 1px solid black; padding: 20px; z-index: 9999;">
|
||||
<div class="modal-dialog" role="document">
|
||||
<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="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">
|
||||
{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">
|
||||
<section class="form-fields">
|
||||
{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">
|
||||
<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"
|
||||
pattern="[0-9]+"
|
||||
title="Please enter a positive number"
|
||||
required
|
||||
{if isset($customerMeasurements) && isset($customerMeasurements[$attribute.id])}
|
||||
value="{$customerMeasurements[$attribute.id]}"
|
||||
{/if}>
|
||||
</div>
|
||||
<div class="md:w-1/4 pr-4 pl-4 form-control-comment">
|
||||
<small class="block mt-1 text-gray-700">{$attribute.unit}</small>
|
||||
</div>
|
||||
</div>
|
||||
{/foreach}
|
||||
<input type="hidden" name="current_form_id" id="current_form_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" value="{$currentForm.id_form}">
|
||||
<input type="hidden" name="current_form_label" id="current_form_label" 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" value="{$currentForm.label_form}">
|
||||
</section>
|
||||
</form>
|
||||
{else}
|
||||
<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>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab">
|
||||
<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">
|
||||
{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>
|
||||
{/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>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- <div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<ul class="flex flex-wrap list-none pl-0 mb-0 border border-t-0 border-r-0 border-l-0 border-b-1 border-gray-200" id="measurementTabs" role="tablist">
|
||||
|
|
@ -73,4 +143,4 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
|
|
|||
Loading…
Reference in New Issue