fix: edit styling on pop up
apurvabangali
parent
85035f2768
commit
7df21e3c07
|
|
@ -35,3 +35,77 @@ ul {
|
||||||
input[type="radio"],input[type="checkbox"] {
|
input[type="radio"],input[type="checkbox"] {
|
||||||
@apply focus:ring-transparent;
|
@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;
|
visibility: collapse;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.static {
|
||||||
|
position: static;
|
||||||
|
}
|
||||||
|
|
||||||
.fixed {
|
.fixed {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
}
|
}
|
||||||
|
|
@ -787,10 +791,6 @@ select {
|
||||||
left: 0px;
|
left: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.left-1\/2 {
|
|
||||||
left: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left-\[100\%\] {
|
.left-\[100\%\] {
|
||||||
left: 100%;
|
left: 100%;
|
||||||
}
|
}
|
||||||
|
|
@ -846,6 +846,11 @@ select {
|
||||||
margin-bottom: -0.75rem;
|
margin-bottom: -0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mx-1 {
|
||||||
|
margin-left: 0.25rem;
|
||||||
|
margin-right: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
.mx-4 {
|
.mx-4 {
|
||||||
margin-left: 1rem;
|
margin-left: 1rem;
|
||||||
margin-right: 1rem;
|
margin-right: 1rem;
|
||||||
|
|
@ -876,12 +881,20 @@ select {
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.-mb-px {
|
||||||
|
margin-bottom: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb-0 {
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
.mb-1 {
|
.mb-1 {
|
||||||
margin-bottom: 0.25rem;
|
margin-bottom: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mb-16 {
|
.mb-12 {
|
||||||
margin-bottom: 4rem;
|
margin-bottom: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mb-2 {
|
.mb-2 {
|
||||||
|
|
@ -960,6 +973,10 @@ select {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.inline-block {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
.inline {
|
.inline {
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
|
|
@ -984,8 +1001,8 @@ select {
|
||||||
aspect-ratio: 342/513;
|
aspect-ratio: 342/513;
|
||||||
}
|
}
|
||||||
|
|
||||||
.aspect-square {
|
.h-1\/2 {
|
||||||
aspect-ratio: 1 / 1;
|
height: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-12 {
|
.h-12 {
|
||||||
|
|
@ -1012,6 +1029,10 @@ select {
|
||||||
height: 2rem;
|
height: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.h-\[40px\] {
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
.h-auto {
|
.h-auto {
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
@ -1044,6 +1065,10 @@ select {
|
||||||
width: 3.5rem;
|
width: 3.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.w-2\/5 {
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
|
|
||||||
.w-24 {
|
.w-24 {
|
||||||
width: 6rem;
|
width: 6rem;
|
||||||
}
|
}
|
||||||
|
|
@ -1052,6 +1077,10 @@ select {
|
||||||
width: 75%;
|
width: 75%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.w-3\/5 {
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
.w-32 {
|
.w-32 {
|
||||||
width: 8rem;
|
width: 8rem;
|
||||||
}
|
}
|
||||||
|
|
@ -1080,14 +1109,18 @@ select {
|
||||||
width: 2rem;
|
width: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w-\[150px\] {
|
|
||||||
width: 150px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.w-\[160px\] {
|
.w-\[160px\] {
|
||||||
width: 160px;
|
width: 160px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.w-\[220px\] {
|
||||||
|
width: 220px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-\[95px\] {
|
||||||
|
width: 95px;
|
||||||
|
}
|
||||||
|
|
||||||
.w-full {
|
.w-full {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
@ -1097,10 +1130,6 @@ select {
|
||||||
width: max-content;
|
width: max-content;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w-px {
|
|
||||||
width: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.max-w-6xl {
|
.max-w-6xl {
|
||||||
max-width: 72rem;
|
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: 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 {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.select-none {
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
.list-\[square\] {
|
.list-\[square\] {
|
||||||
list-style-type: square;
|
list-style-type: square;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.list-none {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.appearance-none {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
.flex-row {
|
.flex-row {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
|
@ -1242,6 +1291,10 @@ select {
|
||||||
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
|
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.overflow-auto {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.overflow-y-auto {
|
.overflow-y-auto {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
@ -1256,22 +1309,43 @@ select {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.rounded {
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
.rounded-lg {
|
.rounded-lg {
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.rounded-t {
|
||||||
|
border-top-left-radius: 0.25rem;
|
||||||
|
border-top-right-radius: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
.border {
|
.border {
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.border-b {
|
.border-b-0 {
|
||||||
border-bottom-width: 1px;
|
border-bottom-width: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-l-0 {
|
||||||
|
border-left-width: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-r-0 {
|
||||||
|
border-right-width: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.border-t {
|
.border-t {
|
||||||
border-top-width: 1px;
|
border-top-width: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.border-t-0 {
|
||||||
|
border-top-width: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
.border-none {
|
.border-none {
|
||||||
border-style: none;
|
border-style: none;
|
||||||
}
|
}
|
||||||
|
|
@ -1331,10 +1405,6 @@ select {
|
||||||
border-color: rgb(252 165 165 / var(--tw-border-opacity));
|
border-color: rgb(252 165 165 / var(--tw-border-opacity));
|
||||||
}
|
}
|
||||||
|
|
||||||
.border-transparent {
|
|
||||||
border-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-black\/70 {
|
.bg-black\/70 {
|
||||||
background-color: rgb(0 0 0 / 0.7);
|
background-color: rgb(0 0 0 / 0.7);
|
||||||
}
|
}
|
||||||
|
|
@ -1344,6 +1414,11 @@ select {
|
||||||
background-color: rgb(219 234 254 / var(--tw-bg-opacity));
|
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 {
|
.bg-blue-950 {
|
||||||
--tw-bg-opacity: 1;
|
--tw-bg-opacity: 1;
|
||||||
background-color: rgb(23 37 84 / var(--tw-bg-opacity));
|
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));
|
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 {
|
.bg-red-100 {
|
||||||
--tw-bg-opacity: 1;
|
--tw-bg-opacity: 1;
|
||||||
background-color: rgb(254 226 226 / var(--tw-bg-opacity));
|
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));
|
background-color: rgb(254 242 242 / var(--tw-bg-opacity));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bg-transparent {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
.bg-white {
|
.bg-white {
|
||||||
--tw-bg-opacity: 1;
|
--tw-bg-opacity: 1;
|
||||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||||
|
|
@ -1378,10 +1467,6 @@ select {
|
||||||
stroke: #000;
|
stroke: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stroke-blue-900 {
|
|
||||||
stroke: #1e3a8a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stroke-gray-500 {
|
.stroke-gray-500 {
|
||||||
stroke: #6b7280;
|
stroke: #6b7280;
|
||||||
}
|
}
|
||||||
|
|
@ -1398,26 +1483,21 @@ select {
|
||||||
stroke: inherit;
|
stroke: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stroke-2 {
|
|
||||||
stroke-width: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stroke-\[3px\] {
|
.stroke-\[3px\] {
|
||||||
stroke-width: 3px;
|
stroke-width: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.object-contain {
|
|
||||||
-o-object-fit: contain;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
|
|
||||||
.object-cover {
|
.object-cover {
|
||||||
-o-object-fit: cover;
|
-o-object-fit: cover;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-0 {
|
.p-1 {
|
||||||
padding: 0px;
|
padding: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-10 {
|
||||||
|
padding: 2.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-2 {
|
.p-2 {
|
||||||
|
|
@ -1441,6 +1521,11 @@ select {
|
||||||
padding-right: 0.5rem;
|
padding-right: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.px-3 {
|
||||||
|
padding-left: 0.75rem;
|
||||||
|
padding-right: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
.px-4 {
|
.px-4 {
|
||||||
padding-left: 1rem;
|
padding-left: 1rem;
|
||||||
padding-right: 1rem;
|
padding-right: 1rem;
|
||||||
|
|
@ -1485,6 +1570,10 @@ select {
|
||||||
padding-bottom: 3rem;
|
padding-bottom: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pl-0 {
|
||||||
|
padding-left: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
.pl-12 {
|
.pl-12 {
|
||||||
padding-left: 3rem;
|
padding-left: 3rem;
|
||||||
}
|
}
|
||||||
|
|
@ -1493,6 +1582,10 @@ select {
|
||||||
padding-left: 0.5rem;
|
padding-left: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pl-4 {
|
||||||
|
padding-left: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
.pl-6 {
|
.pl-6 {
|
||||||
padding-left: 1.5rem;
|
padding-left: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
@ -1545,6 +1638,18 @@ select {
|
||||||
text-align: justify;
|
text-align: justify;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.text-start {
|
||||||
|
text-align: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-end {
|
||||||
|
text-align: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-middle {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
.text-2xl {
|
.text-2xl {
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
line-height: 2rem;
|
line-height: 2rem;
|
||||||
|
|
@ -1607,6 +1712,10 @@ select {
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.leading-normal {
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
.text-blue-900 {
|
.text-blue-900 {
|
||||||
--tw-text-opacity: 1;
|
--tw-text-opacity: 1;
|
||||||
color: rgb(30 58 138 / var(--tw-text-opacity));
|
color: rgb(30 58 138 / var(--tw-text-opacity));
|
||||||
|
|
@ -1632,6 +1741,16 @@ select {
|
||||||
color: rgb(75 85 99 / var(--tw-text-opacity));
|
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 {
|
.text-gray-900 {
|
||||||
--tw-text-opacity: 1;
|
--tw-text-opacity: 1;
|
||||||
color: rgb(17 24 39 / var(--tw-text-opacity));
|
color: rgb(17 24 39 / var(--tw-text-opacity));
|
||||||
|
|
@ -1675,16 +1794,34 @@ select {
|
||||||
text-decoration-line: line-through;
|
text-decoration-line: line-through;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.no-underline {
|
||||||
|
text-decoration-line: none;
|
||||||
|
}
|
||||||
|
|
||||||
.underline-offset-2 {
|
.underline-offset-2 {
|
||||||
text-underline-offset: 2px;
|
text-underline-offset: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.opacity-0 {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.opacity-100 {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
.shadow-lg {
|
.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: 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);
|
--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);
|
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 {
|
.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: 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);
|
--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;
|
--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 {
|
.file\:mr-4::file-selector-button {
|
||||||
margin-right: 1rem;
|
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));
|
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 {
|
.hover\:bg-blue-900:hover {
|
||||||
--tw-bg-opacity: 1;
|
--tw-bg-opacity: 1;
|
||||||
background-color: rgb(30 58 138 / var(--tw-bg-opacity));
|
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 {
|
.hover\:stroke-blue-900:hover {
|
||||||
stroke: #1e3a8a;
|
stroke: #1e3a8a;
|
||||||
}
|
}
|
||||||
|
|
@ -1918,26 +2154,9 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
|
||||||
}
|
}
|
||||||
|
|
||||||
@media not all and (min-width: 1024px) {
|
@media not all and (min-width: 1024px) {
|
||||||
.max-lg\:hidden {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.max-lg\:w-full {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.max-lg\:flex-col {
|
.max-lg\:flex-col {
|
||||||
flex-direction: column;
|
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) {
|
@media not all and (min-width: 768px) {
|
||||||
|
|
@ -1953,10 +2172,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.max-md\:max-w-full {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.max-md\:flex-col {
|
.max-md\:flex-col {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
@ -1982,17 +2197,9 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
|
||||||
padding-left: 1rem;
|
padding-left: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.max-md\:pr-2 {
|
|
||||||
padding-right: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.max-md\:text-center {
|
.max-md\:text-center {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.max-md\:leading-5 {
|
|
||||||
line-height: 1.25rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media not all and (min-width: 640px) {
|
@media not all and (min-width: 640px) {
|
||||||
|
|
@ -2012,14 +2219,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
.md\:left-1\/2 {
|
|
||||||
left: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md\:mb-4 {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md\:block {
|
.md\:block {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
@ -2044,6 +2243,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
|
||||||
width: 33.333333%;
|
width: 33.333333%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.md\:w-1\/4 {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
.md\:w-1\/6 {
|
.md\:w-1\/6 {
|
||||||
width: 16.666667%;
|
width: 16.666667%;
|
||||||
}
|
}
|
||||||
|
|
@ -2080,11 +2283,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.md\:object-cover {
|
|
||||||
-o-object-fit: cover;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md\:p-2 {
|
.md\:p-2 {
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
@ -2109,11 +2307,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
|
||||||
padding-right: 12rem;
|
padding-right: 12rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.md\:text-3xl {
|
|
||||||
font-size: 1.875rem;
|
|
||||||
line-height: 2.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md\:text-base {
|
.md\:text-base {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
|
|
@ -2151,8 +2344,8 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lg\:h-screen {
|
.lg\:h-\[90vh\] {
|
||||||
height: 100vh;
|
height: 90vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lg\:w-1\/3 {
|
.lg\:w-1\/3 {
|
||||||
|
|
@ -2175,18 +2368,22 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
|
||||||
width: 60%;
|
width: 60%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lg\:w-\[850px\] {
|
.lg\:w-\[450px\] {
|
||||||
width: 850px;
|
width: 450px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg\:w-\[500px\] {
|
||||||
|
width: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg\:w-\[600px\] {
|
||||||
|
width: 600px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lg\:w-full {
|
.lg\:w-full {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lg\:max-w-\[850px\] {
|
|
||||||
max-width: 850px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lg\:max-w-full {
|
.lg\:max-w-full {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
@ -2220,13 +2417,16 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
|
||||||
padding-bottom: 0px;
|
padding-bottom: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lg\:pt-24 {
|
.lg\:pr-11 {
|
||||||
padding-top: 6rem;
|
padding-right: 2.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lg\:text-4xl {
|
.lg\:pr-4 {
|
||||||
font-size: 2.25rem;
|
padding-right: 1rem;
|
||||||
line-height: 2.5rem;
|
}
|
||||||
|
|
||||||
|
.lg\:pt-24 {
|
||||||
|
padding-top: 6rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lg\:shadow-none {
|
.lg\:shadow-none {
|
||||||
|
|
@ -2240,9 +2440,4 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
|
||||||
.xl\:w-1\/4 {
|
.xl\:w-1\/4 {
|
||||||
width: 25%;
|
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">
|
<section class=" h-34 p-10 flex flex-col">
|
||||||
{if isset($selectedForm)}
|
{if isset($selectedForm)}
|
||||||
<h2 class="text-lg font-bold">{l s='Form:' mod='thobbodymeasurements'} {$selectedForm.label_form}</h2>
|
<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}
|
{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=" 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>
|
<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
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="{$attribute.id}"
|
id="{$attribute.id}"
|
||||||
name="{$attribute.id}"
|
name="{$attribute.id}"
|
||||||
class=" w-full"
|
class=" lg:w-[450px]"
|
||||||
pattern="[0-9]+"
|
pattern="[0-9]+"
|
||||||
title="Please enter a positive number"
|
title="Please enter a positive number"
|
||||||
required
|
required
|
||||||
|
|
@ -48,7 +50,7 @@
|
||||||
{/if}
|
{/if}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-1">
|
<div class="mt-1 w-24 mt-2 text-start ">
|
||||||
{$attribute.unit}
|
{$attribute.unit}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -57,7 +59,7 @@
|
||||||
</section>
|
</section>
|
||||||
{/foreach}
|
{/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>
|
<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>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
|
||||||
|
|
@ -9,8 +9,78 @@
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- Modal -->
|
<!-- 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 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-dialog" role="document">
|
<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-content">
|
||||||
<div class="modal-header">
|
<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">
|
<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>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue