complete Complete User Request Submission section RAD-1
This commit is contained in:
@@ -0,0 +1,144 @@
|
||||
.page-transition-enter-active,
|
||||
.page-transition-leave-active {
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.page-transition-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px) scale(0.95);
|
||||
}
|
||||
|
||||
.page-transition-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px) scale(1.05);
|
||||
}
|
||||
|
||||
.page-transition-enter-to,
|
||||
.page-transition-leave-from {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
|
||||
.fade-transition-enter-active,
|
||||
.fade-transition-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-transition-enter-from,
|
||||
.fade-transition-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.slide-transition-enter-active,
|
||||
.slide-transition-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.slide-transition-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
|
||||
.slide-transition-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-30px);
|
||||
}
|
||||
|
||||
.scale-transition-enter-active,
|
||||
.scale-transition-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.scale-transition-enter-from {
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
.scale-transition-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.rotate-transition-enter-active,
|
||||
.rotate-transition-leave-active {
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
|
||||
.rotate-transition-enter-from {
|
||||
opacity: 0;
|
||||
transform: rotate(-10deg) scale(0.9);
|
||||
}
|
||||
|
||||
.rotate-transition-leave-to {
|
||||
opacity: 0;
|
||||
transform: rotate(10deg) scale(1.1);
|
||||
}
|
||||
|
||||
.bounce-transition-enter-active {
|
||||
animation: bounce-in 0.6s ease;
|
||||
}
|
||||
|
||||
.bounce-transition-leave-active {
|
||||
animation: bounce-out 0.4s ease;
|
||||
}
|
||||
|
||||
@keyframes bounce-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.3);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
70% {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounce-out {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
25% {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.zoom-transition-enter-active,
|
||||
.zoom-transition-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.zoom-transition-enter-from {
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
|
||||
.zoom-transition-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
.flip-transition-enter-active,
|
||||
.flip-transition-leave-active {
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
|
||||
.flip-transition-enter-from {
|
||||
opacity: 0;
|
||||
transform: rotateY(90deg);
|
||||
}
|
||||
|
||||
.flip-transition-leave-to {
|
||||
opacity: 0;
|
||||
transform: rotateY(-90deg);
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
.p-panelmenu-panel{
|
||||
border: none !important;
|
||||
border-width: 0 !important;
|
||||
padding: 0 !important;
|
||||
background: none !important;
|
||||
}
|
||||
.p-panelmenu-panel :hover{
|
||||
background: none !important;
|
||||
}
|
||||
.p-panelmenu{
|
||||
margin-top: 1rem !important;
|
||||
.p-panelmenu-header{
|
||||
border: none !important;
|
||||
border-width: 0 !important;
|
||||
position: relative;
|
||||
}
|
||||
.p-panelmenu-content{
|
||||
border: none !important;
|
||||
border-width: 0 !important;
|
||||
}
|
||||
}
|
||||
.p-panelmenu .p-panelmenu-header .active:before{
|
||||
content: "" !important;
|
||||
width: .23rem;
|
||||
height: 100%;
|
||||
transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
right: 0;
|
||||
@apply bg-dominant-500;
|
||||
transform: scaleY(0);
|
||||
transform-origin: center;
|
||||
animation: slideIn 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
0% {
|
||||
transform: scaleY(0);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
.ui-button {
|
||||
@apply transition-all duration-200;
|
||||
}
|
||||
|
||||
.ui-button--full-width {
|
||||
@apply !w-full;
|
||||
}
|
||||
|
||||
.ui-button--dominant.p-button {
|
||||
@apply !bg-dominant-500 border-dominant-500 font-normal text-sm !text-white;
|
||||
}
|
||||
|
||||
.ui-button--dominant.p-button:hover {
|
||||
@apply !bg-dominant-600 !border-dominant-600;
|
||||
}
|
||||
|
||||
.ui-button--dominant.p-button:active {
|
||||
@apply !bg-dominant-600 !border-dominant-600;
|
||||
}
|
||||
|
||||
.ui-button--dominant.p-button:focus {
|
||||
box-shadow: 0 0 0 2px rgb(128 14 19 / 0.2);
|
||||
}
|
||||
|
||||
.ui-button--dominant.p-button.p-button-outlined {
|
||||
@apply bg-transparent text-dominant-500 border-dominant-500;
|
||||
}
|
||||
|
||||
.ui-button--dominant.p-button.p-button-outlined:hover {
|
||||
@apply bg-dominant-500 text-white;
|
||||
}
|
||||
|
||||
.ui-button--dominant.p-button.p-button-text {
|
||||
@apply bg-transparent text-dominant-500 border-transparent;
|
||||
}
|
||||
|
||||
.ui-button--dominant.p-button.p-button-text:hover {
|
||||
background-color: rgba(128, 14, 19, 0.1);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ui-button-icon {
|
||||
@apply transition-all duration-200;
|
||||
}
|
||||
|
||||
.ui-button--with-end-icon .p-button-label {
|
||||
@apply relative;
|
||||
}
|
||||
|
||||
.ui-button-icon-end {
|
||||
@apply transition-all duration-200 ml-2;
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
.ui-card {
|
||||
@apply bg-white rounded-lg overflow-hidden;
|
||||
}
|
||||
|
||||
.ui-card--small {
|
||||
@apply p-4;
|
||||
}
|
||||
|
||||
.ui-card--default {
|
||||
@apply p-0;
|
||||
}
|
||||
|
||||
.ui-card--large {
|
||||
@apply p-8;
|
||||
}
|
||||
|
||||
.ui-card--elevated {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.ui-card--outlined {
|
||||
@apply border-2 border-gray-200;
|
||||
}
|
||||
|
||||
.ui-card--filled {
|
||||
@apply bg-gray-50;
|
||||
}
|
||||
|
||||
.ui-card--shadow-sm {
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.ui-card--shadow {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.ui-card--shadow-md {
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.ui-card--shadow-lg {
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.ui-card--shadow-xl {
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.ui-card--no-border {
|
||||
@apply border-0;
|
||||
}
|
||||
|
||||
.ui-card--rounded {
|
||||
@apply rounded-lg;
|
||||
}
|
||||
|
||||
.ui-card--hover {
|
||||
@apply transition-all duration-200 ease-in-out;
|
||||
}
|
||||
|
||||
.ui-card--hover:hover {
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.ui-card-header {
|
||||
@apply px-6 pb-2 pt-6;
|
||||
}
|
||||
|
||||
.ui-card-title {
|
||||
@apply flex flex-col;
|
||||
}
|
||||
|
||||
.ui-card-title-text {
|
||||
@apply text-lg font-semibold text-gray-900 m-0;
|
||||
}
|
||||
|
||||
.ui-card-subtitle {
|
||||
@apply text-sm text-gray-600 mt-1 m-0;
|
||||
}
|
||||
|
||||
.ui-card-content {
|
||||
@apply min-h-0;
|
||||
}
|
||||
|
||||
.ui-card-footer {
|
||||
@apply border-t border-gray-200 pt-4 mt-4;
|
||||
}
|
||||
|
||||
.ui-card .p-card {
|
||||
@apply bg-white;
|
||||
}
|
||||
|
||||
.ui-card .p-card .p-card-body {
|
||||
@apply p-0;
|
||||
}
|
||||
|
||||
.ui-card .p-card .p-card-content {
|
||||
@apply p-0;
|
||||
}
|
||||
|
||||
.ui-card .p-card .p-card-footer {
|
||||
@apply p-0;
|
||||
}
|
||||
.title-generic{
|
||||
@apply grid relative grid-cols-2a before:content-[''] before:w-[30%] before:h-1 after:bg-complement-100 before:absolute before:top-full after:mt-[1px] before:right-0 after:content-[''] after:w-[75%] after:h-0.5 before:!bg-dominant-400 before:!shadow-sm before:!shadow-dominant-100 after:absolute after:top-full after:right-[38%] pb-3
|
||||
}
|
||||
@@ -0,0 +1,207 @@
|
||||
/* Flag Icons using Emoji */
|
||||
.fi {
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.fi:before {
|
||||
content: attr(data-flag);
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
/* Country Flags */
|
||||
.fi.fi-af:before { content: "🇦🇫"; }
|
||||
.fi.fi-al:before { content: "🇦🇱"; }
|
||||
.fi.fi-dz:before { content: "🇩🇿"; }
|
||||
.fi.fi-ad:before { content: "🇦🇩"; }
|
||||
.fi.fi-ao:before { content: "🇦🇴"; }
|
||||
.fi.fi-ag:before { content: "🇦🇬"; }
|
||||
.fi.fi-ar:before { content: "🇦🇷"; }
|
||||
.fi.fi-am:before { content: "🇦🇲"; }
|
||||
.fi.fi-au:before { content: "🇦🇺"; }
|
||||
.fi.fi-at:before { content: "🇦🇹"; }
|
||||
.fi.fi-az:before { content: "🇦🇿"; }
|
||||
.fi.fi-bs:before { content: "🇧🇸"; }
|
||||
.fi.fi-bh:before { content: "🇧🇭"; }
|
||||
.fi.fi-bd:before { content: "🇧🇩"; }
|
||||
.fi.fi-bb:before { content: "🇧🇧"; }
|
||||
.fi.fi-by:before { content: "🇧🇾"; }
|
||||
.fi.fi-be:before { content: "🇧🇪"; }
|
||||
.fi.fi-bz:before { content: "🇧🇿"; }
|
||||
.fi.fi-bj:before { content: "🇧🇯"; }
|
||||
.fi.fi-bt:before { content: "🇧🇹"; }
|
||||
.fi.fi-bo:before { content: "🇧🇴"; }
|
||||
.fi.fi-ba:before { content: "🇧🇦"; }
|
||||
.fi.fi-bw:before { content: "🇧🇼"; }
|
||||
.fi.fi-br:before { content: "🇧🇷"; }
|
||||
.fi.fi-bn:before { content: "🇧🇳"; }
|
||||
.fi.fi-bg:before { content: "🇧🇬"; }
|
||||
.fi.fi-bf:before { content: "🇧🇫"; }
|
||||
.fi.fi-bi:before { content: "🇧🇮"; }
|
||||
.fi.fi-kh:before { content: "🇰🇭"; }
|
||||
.fi.fi-cm:before { content: "🇨🇲"; }
|
||||
.fi.fi-ca:before { content: "🇨🇦"; }
|
||||
.fi.fi-cv:before { content: "🇨🇻"; }
|
||||
.fi.fi-cf:before { content: "🇨🇫"; }
|
||||
.fi.fi-td:before { content: "🇹🇩"; }
|
||||
.fi.fi-cl:before { content: "🇨🇱"; }
|
||||
.fi.fi-cn:before { content: "🇨🇳"; }
|
||||
.fi.fi-co:before { content: "🇨🇴"; }
|
||||
.fi.fi-km:before { content: "🇰🇲"; }
|
||||
.fi.fi-cg:before { content: "🇨🇬"; }
|
||||
.fi.fi-cr:before { content: "🇨🇷"; }
|
||||
.fi.fi-hr:before { content: "🇭🇷"; }
|
||||
.fi.fi-cu:before { content: "🇨🇺"; }
|
||||
.fi.fi-cy:before { content: "🇨🇾"; }
|
||||
.fi.fi-cz:before { content: "🇨🇿"; }
|
||||
.fi.fi-dk:before { content: "🇩🇰"; }
|
||||
.fi.fi-dj:before { content: "🇩🇯"; }
|
||||
.fi.fi-dm:before { content: "🇩🇲"; }
|
||||
.fi.fi-do:before { content: "🇩🇴"; }
|
||||
.fi.fi-ec:before { content: "🇪🇨"; }
|
||||
.fi.fi-eg:before { content: "🇪🇬"; }
|
||||
.fi.fi-sv:before { content: "🇸🇻"; }
|
||||
.fi.fi-gq:before { content: "🇬🇶"; }
|
||||
.fi.fi-er:before { content: "🇪🇷"; }
|
||||
.fi.fi-ee:before { content: "🇪🇪"; }
|
||||
.fi.fi-et:before { content: "🇪🇹"; }
|
||||
.fi.fi-fj:before { content: "🇫🇯"; }
|
||||
.fi.fi-fi:before { content: "🇫🇮"; }
|
||||
.fi.fi-fr:before { content: "🇫🇷"; }
|
||||
.fi.fi-ga:before { content: "🇬🇦"; }
|
||||
.fi.fi-gm:before { content: "🇬🇲"; }
|
||||
.fi.fi-ge:before { content: "🇬🇪"; }
|
||||
.fi.fi-de:before { content: "🇩🇪"; }
|
||||
.fi.fi-gh:before { content: "🇬🇭"; }
|
||||
.fi.fi-gr:before { content: "🇬🇷"; }
|
||||
.fi.fi-gd:before { content: "🇬🇩"; }
|
||||
.fi.fi-gt:before { content: "🇬🇹"; }
|
||||
.fi.fi-gn:before { content: "🇬🇳"; }
|
||||
.fi.fi-gw:before { content: "🇬🇼"; }
|
||||
.fi.fi-gy:before { content: "🇬🇾"; }
|
||||
.fi.fi-ht:before { content: "🇭🇹"; }
|
||||
.fi.fi-hn:before { content: "🇭🇳"; }
|
||||
.fi.fi-hu:before { content: "🇭🇺"; }
|
||||
.fi.fi-is:before { content: "🇮🇸"; }
|
||||
.fi.fi-in:before { content: "🇮🇳"; }
|
||||
.fi.fi-id:before { content: "🇮🇩"; }
|
||||
.fi.fi-iq:before { content: "🇮🇶"; }
|
||||
.fi.fi-ie:before { content: "🇮🇪"; }
|
||||
.fi.fi-il:before { content: "🇮🇱"; }
|
||||
.fi.fi-it:before { content: "🇮🇹"; }
|
||||
.fi.fi-jm:before { content: "🇯🇲"; }
|
||||
.fi.fi-jp:before { content: "🇯🇵"; }
|
||||
.fi.fi-jo:before { content: "🇯🇴"; }
|
||||
.fi.fi-kz:before { content: "🇰🇿"; }
|
||||
.fi.fi-ke:before { content: "🇰🇪"; }
|
||||
.fi.fi-ki:before { content: "🇰🇮"; }
|
||||
.fi.fi-kw:before { content: "🇰🇼"; }
|
||||
.fi.fi-kg:before { content: "🇰🇬"; }
|
||||
.fi.fi-la:before { content: "🇱🇦"; }
|
||||
.fi.fi-lv:before { content: "🇱🇻"; }
|
||||
.fi.fi-lb:before { content: "🇱🇧"; }
|
||||
.fi.fi-ls:before { content: "🇱🇸"; }
|
||||
.fi.fi-lr:before { content: "🇱🇷"; }
|
||||
.fi.fi-ly:before { content: "🇱🇾"; }
|
||||
.fi.fi-li:before { content: "🇱🇮"; }
|
||||
.fi.fi-lt:before { content: "🇱🇹"; }
|
||||
.fi.fi-lu:before { content: "🇱🇺"; }
|
||||
.fi.fi-mg:before { content: "🇲🇬"; }
|
||||
.fi.fi-mw:before { content: "🇲🇼"; }
|
||||
.fi.fi-my:before { content: "🇲🇾"; }
|
||||
.fi.fi-mv:before { content: "🇲🇻"; }
|
||||
.fi.fi-ml:before { content: "🇲🇱"; }
|
||||
.fi.fi-mt:before { content: "🇲🇹"; }
|
||||
.fi.fi-mh:before { content: "🇲🇭"; }
|
||||
.fi.fi-mr:before { content: "🇲🇷"; }
|
||||
.fi.fi-mu:before { content: "🇲🇺"; }
|
||||
.fi.fi-mx:before { content: "🇲🇽"; }
|
||||
.fi.fi-fm:before { content: "🇫🇲"; }
|
||||
.fi.fi-md:before { content: "🇲🇩"; }
|
||||
.fi.fi-mc:before { content: "🇲🇨"; }
|
||||
.fi.fi-mn:before { content: "🇲🇳"; }
|
||||
.fi.fi-me:before { content: "🇲🇪"; }
|
||||
.fi.fi-ma:before { content: "🇲🇦"; }
|
||||
.fi.fi-mz:before { content: "🇲🇿"; }
|
||||
.fi.fi-mm:before { content: "🇲🇲"; }
|
||||
.fi.fi-na:before { content: "🇳🇦"; }
|
||||
.fi.fi-nr:before { content: "🇳🇷"; }
|
||||
.fi.fi-np:before { content: "🇳🇵"; }
|
||||
.fi.fi-nl:before { content: "🇳🇱"; }
|
||||
.fi.fi-nz:before { content: "🇳🇿"; }
|
||||
.fi.fi-ni:before { content: "🇳🇮"; }
|
||||
.fi.fi-ne:before { content: "🇳🇪"; }
|
||||
.fi.fi-ng:before { content: "🇳🇬"; }
|
||||
.fi.fi-no:before { content: "🇳🇴"; }
|
||||
.fi.fi-om:before { content: "🇴🇲"; }
|
||||
.fi.fi-pk:before { content: "🇵🇰"; }
|
||||
.fi.fi-pw:before { content: "🇵🇼"; }
|
||||
.fi.fi-pa:before { content: "🇵🇦"; }
|
||||
.fi.fi-pg:before { content: "🇵🇬"; }
|
||||
.fi.fi-py:before { content: "🇵🇾"; }
|
||||
.fi.fi-pe:before { content: "🇵🇪"; }
|
||||
.fi.fi-ph:before { content: "🇵🇭"; }
|
||||
.fi.fi-pl:before { content: "🇵🇱"; }
|
||||
.fi.fi-pt:before { content: "🇵🇹"; }
|
||||
.fi.fi-qa:before { content: "🇶🇦"; }
|
||||
.fi.fi-ro:before { content: "🇷🇴"; }
|
||||
.fi.fi-ru:before { content: "🇷🇺"; }
|
||||
.fi.fi-rw:before { content: "🇷🇼"; }
|
||||
.fi.fi-kn:before { content: "🇰🇳"; }
|
||||
.fi.fi-lc:before { content: "🇱🇨"; }
|
||||
.fi.fi-vc:before { content: "🇻🇨"; }
|
||||
.fi.fi-ws:before { content: "🇼🇸"; }
|
||||
.fi.fi-sm:before { content: "🇸🇲"; }
|
||||
.fi.fi-st:before { content: "🇸🇹"; }
|
||||
.fi.fi-sa:before { content: "🇸🇦"; }
|
||||
.fi.fi-sn:before { content: "🇸🇳"; }
|
||||
.fi.fi-rs:before { content: "🇷🇸"; }
|
||||
.fi.fi-sc:before { content: "🇸🇨"; }
|
||||
.fi.fi-sl:before { content: "🇸🇱"; }
|
||||
.fi.fi-sg:before { content: "🇸🇬"; }
|
||||
.fi.fi-sk:before { content: "🇸🇰"; }
|
||||
.fi.fi-si:before { content: "🇸🇮"; }
|
||||
.fi.fi-sb:before { content: "🇸🇧"; }
|
||||
.fi.fi-so:before { content: "🇸🇴"; }
|
||||
.fi.fi-za:before { content: "🇿🇦"; }
|
||||
.fi.fi-kr:before { content: "🇰🇷"; }
|
||||
.fi.fi-es:before { content: "🇪🇸"; }
|
||||
.fi.fi-lk:before { content: "🇱🇰"; }
|
||||
.fi.fi-sd:before { content: "🇸🇩"; }
|
||||
.fi.fi-sr:before { content: "🇸🇷"; }
|
||||
.fi.fi-sz:before { content: "🇸🇿"; }
|
||||
.fi.fi-se:before { content: "🇸🇪"; }
|
||||
.fi.fi-ch:before { content: "🇨🇭"; }
|
||||
.fi.fi-sy:before { content: "🇸🇾"; }
|
||||
.fi.fi-tw:before { content: "🇹🇼"; }
|
||||
.fi.fi-tj:before { content: "🇹🇯"; }
|
||||
.fi.fi-tz:before { content: "🇹🇿"; }
|
||||
.fi.fi-th:before { content: "🇹🇭"; }
|
||||
.fi.fi-tl:before { content: "🇹🇱"; }
|
||||
.fi.fi-tg:before { content: "🇹🇬"; }
|
||||
.fi.fi-to:before { content: "🇹🇴"; }
|
||||
.fi.fi-tt:before { content: "🇹🇹"; }
|
||||
.fi.fi-tn:before { content: "🇹🇳"; }
|
||||
.fi.fi-tr:before { content: "🇹🇷"; }
|
||||
.fi.fi-tm:before { content: "🇹🇲"; }
|
||||
.fi.fi-tv:before { content: "🇹🇻"; }
|
||||
.fi.fi-ug:before { content: "🇺🇬"; }
|
||||
.fi.fi-ua:before { content: "🇺🇦"; }
|
||||
.fi.fi-ae:before { content: "🇦🇪"; }
|
||||
.fi.fi-gb:before { content: "🇬🇧"; }
|
||||
.fi.fi-us:before { content: "🇺🇸"; }
|
||||
.fi.fi-uy:before { content: "🇺🇾"; }
|
||||
.fi.fi-uz:before { content: "🇺🇿"; }
|
||||
.fi.fi-vu:before { content: "🇻🇺"; }
|
||||
.fi.fi-va:before { content: "🇻🇦"; }
|
||||
.fi.fi-ve:before { content: "🇻🇪"; }
|
||||
.fi.fi-vn:before { content: "🇻🇳"; }
|
||||
.fi.fi-ye:before { content: "🇾🇪"; }
|
||||
.fi.fi-zm:before { content: "🇿🇲"; }
|
||||
.fi.fi-zw:before { content: "🇿🇼"; }
|
||||
.fi.fi-ir:before { content: "🇮🇷"; }
|
||||
@@ -0,0 +1,227 @@
|
||||
.ui-input-dropdown-wrapper {
|
||||
@apply relative overflow-visible w-full;
|
||||
}
|
||||
|
||||
.ui-input-prefix-dropdown-button {
|
||||
@apply flex items-center px-3 py-2 pr-2 text-sm font-medium bg-transparent border-0 cursor-pointer transition-all duration-300 gap-1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.ui-input-prefix-icon {
|
||||
@apply text-base w-5 h-4;
|
||||
}
|
||||
|
||||
.ui-input-prefix-text {
|
||||
@apply font-normal text-dominant-700 text-[13px];
|
||||
direction: ltr
|
||||
}
|
||||
|
||||
.ui-input-dropdown-menu {
|
||||
@apply absolute bg-white h-[16rem] overflow-y-hidden border border-dominant-100 rounded-xl z-[9999] overflow-visible w-full;
|
||||
transform-origin: top center;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
@keyframes dropdownSlideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-8px) scale(0.96);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dropdownSlideOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateY(-4px) scale(0.98);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-enter-active {
|
||||
animation: dropdownSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.dropdown-leave-active {
|
||||
animation: dropdownSlideOut 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
.dropdown-enter-from,
|
||||
.dropdown-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-4px) scale(0.98);
|
||||
}
|
||||
|
||||
.ui-input-dropdown-menu--bottom {
|
||||
@apply top-full mt-3;
|
||||
}
|
||||
|
||||
.ui-input-dropdown-menu--top {
|
||||
@apply bottom-full mb-3;
|
||||
}
|
||||
|
||||
.ui-input-dropdown--rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.ui-input-dropdown--ltr {
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
.ui-input-dropdown-search {
|
||||
@apply p-3;
|
||||
}
|
||||
|
||||
.ui-input-dropdown-search-input {
|
||||
@apply w-full text-sm !font-normal border border-dominant-200 rounded px-3 !h-[2.2rem] !pb-2.5 focus:outline-none focus:ring-2 focus:ring-dominant-500 focus:border-transparent placeholder:!text-dominant-200;
|
||||
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
animation: searchInputSlideIn 0.5s ease-out;
|
||||
}
|
||||
|
||||
@keyframes searchInputSlideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.ui-input-dropdown-list {
|
||||
@apply max-h-60 overflow-y-auto relative pl-4 pr-2;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #d1d5db transparent;
|
||||
}
|
||||
|
||||
.ui-input-dropdown-list::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.ui-input-dropdown-list::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.ui-input-dropdown-list::-webkit-scrollbar-thumb {
|
||||
background: #d1d5db;
|
||||
border-radius: 3px;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.ui-input-dropdown-list::-webkit-scrollbar-thumb:hover {
|
||||
background: #9ca3af;
|
||||
}
|
||||
|
||||
.ui-input-dropdown-item {
|
||||
@apply w-full flex items-center content-center gap-1 text-sm bg-transparent border-0 cursor-pointer transition-all duration-300 mb-3 relative;
|
||||
animation: itemFadeIn 0.3s ease-out;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.ui-input-dropdown-item:nth-child(1) { animation-delay: 0.05s; }
|
||||
.ui-input-dropdown-item:nth-child(2) { animation-delay: 0.1s; }
|
||||
.ui-input-dropdown-item:nth-child(3) { animation-delay: 0.15s; }
|
||||
.ui-input-dropdown-item:nth-child(4) { animation-delay: 0.2s; }
|
||||
.ui-input-dropdown-item:nth-child(5) { animation-delay: 0.25s; }
|
||||
.ui-input-dropdown-item:nth-child(6) { animation-delay: 0.3s; }
|
||||
.ui-input-dropdown-item:nth-child(7) { animation-delay: 0.35s; }
|
||||
.ui-input-dropdown-item:nth-child(8) { animation-delay: 0.4s; }
|
||||
.ui-input-dropdown-item:nth-child(9) { animation-delay: 0.45s; }
|
||||
.ui-input-dropdown-item:nth-child(10) { animation-delay: 0.5s; }
|
||||
|
||||
@keyframes itemFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-5px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.ui-input-dropdown-item-selected {
|
||||
@apply text-dominant-700 relative flex items-center content-center h-[1.8rem];
|
||||
animation: selectedItemPulse 0.3s ease-out;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@keyframes selectedItemPulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.ui-input-dropdown-item-selected::before {
|
||||
content: '';
|
||||
@apply rounded-l-2xl flex items-center justify-center w-1 h-[1.6rem] bg-dominant-500;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.ui-input-dropdown-item-selected::after {
|
||||
content: '';
|
||||
@apply absolute top-1/2 !right-0 w-2 h-2 bg-dominant-500 rounded-full;
|
||||
transform: translateY(-50%);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.ui-input-dropdown-item-icon {
|
||||
@apply text-base flex-shrink-0 w-5 h-4;
|
||||
}
|
||||
|
||||
.ui-input-dropdown-item-prefix {
|
||||
@apply font-normal text-dominant-600 flex-shrink-0 mt-0.5;
|
||||
}
|
||||
|
||||
.ui-input-dropdown-item-label {
|
||||
@apply text-gray-700 mt-0.5;
|
||||
}
|
||||
|
||||
.ui-input-dropdown-item-en-label {
|
||||
@apply text-gray-500 text-xs mt-0.5;
|
||||
}
|
||||
|
||||
.ui-input-dropdown-loading {
|
||||
@apply flex items-center justify-center py-8;
|
||||
animation: loadingPulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes loadingPulse {
|
||||
0%, 100% {
|
||||
opacity: 0.6;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-input-dropdown-empty {
|
||||
@apply flex items-center justify-center py-8 text-gray-500 text-sm;
|
||||
animation: emptyStateFadeIn 0.5s ease-out;
|
||||
}
|
||||
|
||||
@keyframes emptyStateFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,190 @@
|
||||
.ui-input-wrapper {
|
||||
@apply w-full;
|
||||
}
|
||||
|
||||
.ui-input-label {
|
||||
@apply block text-sm font-medium !text-dominant-700 mb-2;
|
||||
}
|
||||
|
||||
.ui-input-required-indicator {
|
||||
@apply text-red-500 ml-1;
|
||||
}
|
||||
|
||||
.ui-input-error-message {
|
||||
@apply text-red-500 text-sm mt-1 block;
|
||||
}
|
||||
|
||||
.ui-input-hint-message {
|
||||
@apply !text-dominant-700 text-sm mt-1 block;
|
||||
}
|
||||
|
||||
.ui-input .p-inputtext {
|
||||
@apply transition-all py-3 duration-200 ease-in-out w-full !border-dominant-500 !text-dominant-700 pt-3.5 !text-sm !bg-transparent;
|
||||
border-radius: 8px;
|
||||
line-height: 1.5;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.ui-input .p-inputtext:focus {
|
||||
@apply outline-none !border-dominant-700;
|
||||
}
|
||||
|
||||
.ui-input .p-inputtext:hover {
|
||||
@apply border-dominant-200;
|
||||
}
|
||||
|
||||
.ui-input .p-inputtext.p-disabled {
|
||||
@apply !cursor-not-allowed !bg-none;
|
||||
}
|
||||
|
||||
.ui-input--filled .p-inputtext:focus {
|
||||
@apply bg-white !border-dominant-700;
|
||||
}
|
||||
|
||||
.ui-input--error .p-inputtext:focus {
|
||||
box-shadow: 0 0 0 2px rgb(239 68 68 / 0.2) !important;
|
||||
}
|
||||
|
||||
.ui-input-with-prefix {
|
||||
@apply relative;
|
||||
}
|
||||
|
||||
.ui-input-prefix {
|
||||
@apply absolute top-1/2 transform -translate-y-1/2 z-10 !text-dominant-200 text-sm !font-light;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ui-input-with-prefix .p-inputtext {
|
||||
@apply pr-10 !text-dominant-200;
|
||||
}
|
||||
|
||||
.ui-input-wrapper-border {
|
||||
@apply flex items-center border border-dominant-500 rounded-lg overflow-visible;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.ui-input-wrapper-border:focus-within {
|
||||
@apply outline-none !border-dominant-700;
|
||||
}
|
||||
|
||||
.ui-input-wrapper-border:hover {
|
||||
@apply border-dominant-500;
|
||||
}
|
||||
|
||||
.ui-input-prefix-start,
|
||||
.ui-input-prefix-end {
|
||||
@apply text-sm px-2 !font-normal text-dominant-200;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ui-input-icon-start,
|
||||
.ui-input-icon-end {
|
||||
@apply text-lg px-2 text-dominant-700;
|
||||
pointer-events: none;
|
||||
}
|
||||
.ui-input-icon-end.has-svg {
|
||||
@apply !text-dominant-700 ;
|
||||
}
|
||||
.ui-input-icon-start.has-svg {
|
||||
@apply !text-dominant-700 !w-10 !h-10 leading-10;
|
||||
}
|
||||
|
||||
.ui-input-icon-end.has-svg , .ui-input-icon-start.has-svg {
|
||||
@apply !flex h-full items-center justify-center;
|
||||
}
|
||||
.ui-input-icon-end.has-svg svg , .ui-input-icon-start.has-svg svg {
|
||||
@apply !w-6 !h-6;
|
||||
}
|
||||
|
||||
:has(.ui-input-icon-start) .ui-input-icon-start {
|
||||
@apply !ps-4 !pe-0;
|
||||
}
|
||||
|
||||
:has(.ui-input-icon-end) .ui-input-icon-end {
|
||||
@apply pe-4;
|
||||
}
|
||||
|
||||
.ui-input-wrapper-border .p-inputtext {
|
||||
@apply flex-1 border-0 shadow-none px-3;
|
||||
}
|
||||
|
||||
.ui-input--ltr {
|
||||
@apply text-left;
|
||||
}
|
||||
|
||||
.ui-input--ltr .ui-input-label {
|
||||
@apply text-left;
|
||||
}
|
||||
|
||||
.ui-input--ltr .ui-input-prefix {
|
||||
@apply left-3 right-auto;
|
||||
}
|
||||
|
||||
.ui-input--ltr.ui-input-with-prefix .p-inputtext {
|
||||
@apply ps-10 pe-3;
|
||||
}
|
||||
|
||||
.ui-input--ltr .p-inputtext {
|
||||
@apply text-left;
|
||||
}
|
||||
|
||||
.ui-input--ltr .ui-input-prefix-left {
|
||||
@apply left-3 right-auto !text-dominant-200;
|
||||
}
|
||||
|
||||
.ui-input--ltr .ui-input-prefix-right {
|
||||
@apply right-3 left-auto !text-dominant-200;
|
||||
}
|
||||
|
||||
.ui-input--ltr .ui-input-icon-left {
|
||||
@apply left-3 right-auto;
|
||||
}
|
||||
|
||||
.ui-input--ltr .ui-input-icon-right {
|
||||
@apply right-3 left-auto;
|
||||
}
|
||||
|
||||
.ui-input--ltr.ui-input-with-prefixes .p-inputtext {
|
||||
@apply ps-10 pe-10;
|
||||
}
|
||||
|
||||
.ui-input--ltr .p-inputtext {
|
||||
@apply text-left;
|
||||
}
|
||||
|
||||
.ui-input--ltr.ui-input-wrapper-border {
|
||||
@apply flex-row;
|
||||
}
|
||||
|
||||
.ui-input--rtl {
|
||||
@apply text-right;
|
||||
}
|
||||
|
||||
.ui-input--rtl .ui-input-label {
|
||||
@apply text-right;
|
||||
}
|
||||
|
||||
.ui-input--rtl .p-inputtext {
|
||||
@apply text-right;
|
||||
}
|
||||
|
||||
.ui-input--rtl.ui-input-wrapper-border {
|
||||
@apply flex-row-reverse;
|
||||
}
|
||||
|
||||
.ui-input-password-toggle {
|
||||
@apply text-lg px-4 text-dominant-700 transition-all duration-200 ease-in-out;
|
||||
}
|
||||
|
||||
.ui-input-password-toggle:hover {
|
||||
@apply text-dominant-900;
|
||||
}
|
||||
|
||||
.ui-input-with-password-toggle .p-inputtext {
|
||||
@apply pl-2;
|
||||
}
|
||||
|
||||
.ui-input--ltr.ui-input-with-password-toggle .p-inputtext {
|
||||
@apply !pr-6;
|
||||
}
|
||||
@@ -0,0 +1,360 @@
|
||||
.ui-select-wrapper {
|
||||
@apply !mb-4 relative overflow-visible w-full;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
.p-select {
|
||||
@apply !bg-transparent truncate;
|
||||
}
|
||||
|
||||
.ui-select-label {
|
||||
@apply block text-sm font-medium !text-dominant-700 mb-2;
|
||||
}
|
||||
|
||||
.ui-select-required-indicator {
|
||||
@apply text-red-500 ml-1;
|
||||
}
|
||||
|
||||
.ui-select-error-message {
|
||||
@apply text-red-500 text-sm mt-1 block;
|
||||
}
|
||||
|
||||
.ui-select-hint-message {
|
||||
@apply !text-dominant-700 text-sm mt-1 block;
|
||||
}
|
||||
|
||||
.ui-select-dropdown {
|
||||
@apply !w-full !border-none !h-12;
|
||||
user-select: none !important;
|
||||
-webkit-user-select: none !important;
|
||||
-moz-user-select: none !important;
|
||||
-ms-user-select: none !important;
|
||||
}
|
||||
|
||||
.ui-select-wrapper-border {
|
||||
@apply flex items-center border border-dominant-500 rounded-lg overflow-visible;
|
||||
transition: all 0.2s ease-in-out;
|
||||
user-select: none !important;
|
||||
-webkit-user-select: none !important;
|
||||
-moz-user-select: none !important;
|
||||
-ms-user-select: none !important;
|
||||
}
|
||||
|
||||
.ui-select-wrapper-border:focus-within {
|
||||
@apply outline-none !border-dominant-700;
|
||||
}
|
||||
|
||||
.ui-select-wrapper-border:hover {
|
||||
@apply border-dominant-500;
|
||||
}
|
||||
|
||||
.ui-select-prefix-start,
|
||||
.ui-select-prefix-end {
|
||||
@apply text-sm px-2 !font-normal text-dominant-200;
|
||||
pointer-events: none;
|
||||
user-select: none !important;
|
||||
-webkit-user-select: none !important;
|
||||
-moz-user-select: none !important;
|
||||
-ms-user-select: none !important;
|
||||
}
|
||||
|
||||
.ui-select-icon-start,
|
||||
.ui-select-icon-end {
|
||||
@apply text-lg px-2 text-dominant-700;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ui-select-icon-start {
|
||||
@apply ps-0;
|
||||
}
|
||||
|
||||
.ui-select-icon-end {
|
||||
@apply pe-0;
|
||||
}
|
||||
|
||||
.ui-select-wrapper-border .p-dropdown {
|
||||
@apply !flex-1 !border-0 !shadow-none !px-0;
|
||||
}
|
||||
|
||||
.ui-select-wrapper-border .p-dropdown .p-dropdown-label {
|
||||
@apply !py-3 !text-dominant-700 !text-sm;
|
||||
line-height: 1.5;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
user-select: none !important;
|
||||
-webkit-user-select: none !important;
|
||||
-moz-user-select: none !important;
|
||||
-ms-user-select: none !important;
|
||||
}
|
||||
|
||||
.ui-select-wrapper-border .p-dropdown .p-dropdown-trigger {
|
||||
@apply !text-dominant-700 !border-none;
|
||||
}
|
||||
|
||||
.ui-select-wrapper-border .p-dropdown:focus {
|
||||
@apply !outline-none !border-dominant-700;
|
||||
}
|
||||
|
||||
.ui-select-wrapper-border .p-dropdown:hover {
|
||||
@apply !border-dominant-200;
|
||||
}
|
||||
|
||||
.ui-select-wrapper-border .p-dropdown.p-disabled {
|
||||
@apply !opacity-50 !cursor-not-allowed;
|
||||
}
|
||||
|
||||
.ui-select--ltr {
|
||||
@apply text-left;
|
||||
}
|
||||
|
||||
.ui-select--ltr .ui-select-label {
|
||||
@apply text-left;
|
||||
}
|
||||
|
||||
.ui-select--ltr .p-dropdown {
|
||||
@apply text-left;
|
||||
}
|
||||
|
||||
.ui-select--ltr.ui-select-wrapper-border {
|
||||
@apply flex-row;
|
||||
}
|
||||
|
||||
.ui-select--rtl {
|
||||
@apply text-right;
|
||||
}
|
||||
|
||||
.ui-select--rtl .ui-select-label {
|
||||
@apply text-right;
|
||||
}
|
||||
|
||||
.ui-select--rtl .p-dropdown {
|
||||
@apply text-right;
|
||||
}
|
||||
|
||||
.ui-select--rtl.ui-select-wrapper-border {
|
||||
@apply flex-row-reverse;
|
||||
}
|
||||
|
||||
.p-select-overlay {
|
||||
@apply absolute !shadow-none bg-white overflow-y-hidden border !border-dominant-100 rounded-xl z-[9999] overflow-visible pb-1;
|
||||
transform-origin: top center;
|
||||
width: auto !important;
|
||||
min-width: auto !important;
|
||||
user-select: none !important;
|
||||
-webkit-user-select: none !important;
|
||||
-moz-user-select: none !important;
|
||||
-ms-user-select: none !important;
|
||||
}
|
||||
|
||||
.p-select-overlay .p-dropdown-items .p-dropdown-item {
|
||||
@apply w-full flex items-center content-center gap-1 text-sm bg-transparent border-0 cursor-pointer transition-all duration-300 mb-3 relative;
|
||||
animation: itemFadeIn 0.3s ease-out;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.p-select-overlay .p-dropdown-items .p-dropdown-item:nth-child(1) { animation-delay: 0.05s; }
|
||||
.p-select-overlay .p-dropdown-items .p-dropdown-item:nth-child(2) { animation-delay: 0.1s; }
|
||||
.p-select-overlay .p-dropdown-items .p-dropdown-item:nth-child(3) { animation-delay: 0.15s; }
|
||||
.p-select-overlay .p-dropdown-items .p-dropdown-item:nth-child(4) { animation-delay: 0.2s; }
|
||||
.p-select-overlay .p-dropdown-items .p-dropdown-item:nth-child(5) { animation-delay: 0.25s; }
|
||||
.p-select-overlay .p-dropdown-items .p-dropdown-item:nth-child(6) { animation-delay: 0.3s; }
|
||||
.p-select-overlay .p-dropdown-items .p-dropdown-item:nth-child(7) { animation-delay: 0.35s; }
|
||||
.p-select-overlay .p-dropdown-items .p-dropdown-item:nth-child(8) { animation-delay: 0.4s; }
|
||||
.p-select-overlay .p-dropdown-items .p-dropdown-item:nth-child(9) { animation-delay: 0.45s; }
|
||||
.p-select-overlay .p-dropdown-items .p-dropdown-item:nth-child(10) { animation-delay: 0.5s; }
|
||||
|
||||
.p-select-overlay .p-dropdown-items .p-dropdown-item:hover {
|
||||
@apply text-dominant-700 relative flex items-center content-center h-[1.8rem];
|
||||
animation: selectedItemPulse 0.3s ease-out;
|
||||
}
|
||||
|
||||
.p-select-overlay .p-dropdown-items .p-dropdown-item.p-highlight {
|
||||
@apply text-dominant-700 relative flex items-center content-center h-[1.8rem];
|
||||
animation: selectedItemPulse 0.3s ease-out;
|
||||
}
|
||||
|
||||
.p-select-overlay .p-dropdown-items .p-dropdown-item.p-highlight::before {
|
||||
content: '';
|
||||
@apply rounded-l-2xl flex items-center justify-center w-1 h-[1.6rem] bg-dominant-500;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.p-select-overlay .p-dropdown-items .p-dropdown-item.p-highlight::after {
|
||||
content: '';
|
||||
@apply absolute top-1/2 !right-0 w-2 h-2 bg-dominant-500 rounded-full;
|
||||
transform: translateY(-50%);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.p-select-header {
|
||||
@apply p-3;
|
||||
}
|
||||
|
||||
.p-select-list-container {
|
||||
@apply max-h-60 overflow-y-auto relative pl-4 pr-2;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #d1d5db transparent;
|
||||
}
|
||||
|
||||
.p-select-list-container::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.p-select-list-container::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.p-select-list-container::-webkit-scrollbar-thumb {
|
||||
background: #d1d5db;
|
||||
border-radius: 3px;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.p-select-list-container::-webkit-scrollbar-thumb:hover {
|
||||
background: #9ca3af;
|
||||
}
|
||||
|
||||
.p-select-list-container .p-dropdown-items .p-dropdown-item {
|
||||
@apply w-full flex items-center content-center gap-1 text-sm bg-transparent border-0 cursor-pointer transition-all duration-300 mb-3 relative;
|
||||
animation: itemFadeIn 0.3s ease-out;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.p-select-list-container .p-dropdown-items .p-dropdown-item:nth-child(1) { animation-delay: 0.05s; }
|
||||
.p-select-list-container .p-dropdown-items .p-dropdown-item:nth-child(2) { animation-delay: 0.1s; }
|
||||
.p-select-list-container .p-dropdown-items .p-dropdown-item:nth-child(3) { animation-delay: 0.15s; }
|
||||
.p-select-list-container .p-dropdown-items .p-dropdown-item:nth-child(4) { animation-delay: 0.2s; }
|
||||
.p-select-list-container .p-dropdown-items .p-dropdown-item:nth-child(5) { animation-delay: 0.25s; }
|
||||
.p-select-list-container .p-dropdown-items .p-dropdown-item:nth-child(6) { animation-delay: 0.3s; }
|
||||
.p-select-list-container .p-dropdown-items .p-dropdown-item:nth-child(7) { animation-delay: 0.35s; }
|
||||
.p-select-list-container .p-dropdown-items .p-dropdown-item:nth-child(8) { animation-delay: 0.4s; }
|
||||
.p-select-list-container .p-dropdown-items .p-dropdown-item:nth-child(9) { animation-delay: 0.45s; }
|
||||
.p-select-list-container .p-dropdown-items .p-dropdown-item:nth-child(10) { animation-delay: 0.5s; }
|
||||
|
||||
.p-select-list-container .p-dropdown-items .p-dropdown-item:hover {
|
||||
@apply text-dominant-700 relative flex items-center content-center h-[1.8rem];
|
||||
animation: selectedItemPulse 0.3s ease-out;
|
||||
}
|
||||
|
||||
.p-select-list-container .p-dropdown-items .p-dropdown-item.p-highlight {
|
||||
@apply text-dominant-700 relative flex items-center content-center h-[1.8rem];
|
||||
animation: selectedItemPulse 0.3s ease-out;
|
||||
}
|
||||
|
||||
.p-select-list-container .p-dropdown-items .p-dropdown-item.p-highlight::before {
|
||||
content: '';
|
||||
@apply rounded-l-2xl flex items-center justify-center w-1 h-[1.6rem] bg-dominant-500;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.p-select-list-container .p-dropdown-items .p-dropdown-item.p-highlight::after {
|
||||
content: '';
|
||||
@apply absolute top-1/2 !right-0 w-2 h-2 bg-dominant-500 rounded-full;
|
||||
transform: translateY(-50%);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.ui-select-wrapper.has-error .ui-select-wrapper-border {
|
||||
@apply border-red-500;
|
||||
}
|
||||
|
||||
.ui-select-wrapper.has-error .p-dropdown {
|
||||
@apply border-red-500;
|
||||
}
|
||||
|
||||
.ui-select-wrapper .p-dropdown .p-dropdown-clear-icon {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
.ui-select-wrapper .p-dropdown .p-dropdown-trigger-icon {
|
||||
@apply !text-dominant-700;
|
||||
}
|
||||
|
||||
.ui-select-wrapper .p-dropdown .p-dropdown-filter {
|
||||
@apply w-full text-sm !font-normal border border-dominant-200 rounded px-3 !h-[2.2rem] focus:outline-none focus:ring-2 focus:ring-dominant-500 focus:border-transparent placeholder:!text-dominant-200 !text-dominant-700 !bg-white;
|
||||
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
animation: searchInputSlideIn 0.5s ease-out;
|
||||
}
|
||||
|
||||
.p-select-overlay .p-dropdown-filter {
|
||||
@apply !w-full text-sm !font-normal border border-dominant-200 rounded px-3 !pb-2.5 focus:outline-none focus:ring-2 focus:ring-dominant-500 focus:border-transparent placeholder:!text-dominant-200 !text-dominant-700 !bg-white;
|
||||
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
animation: searchInputSlideIn 0.5s ease-out;
|
||||
}
|
||||
|
||||
.ui-select-wrapper .p-dropdown .p-dropdown-filter:focus {
|
||||
@apply shadow-none border-0;
|
||||
}
|
||||
.p-select-label{
|
||||
@apply !text-dominant-700 !text-sm leading-8;
|
||||
user-select: none !important;
|
||||
-webkit-user-select: none !important;
|
||||
-moz-user-select: none !important;
|
||||
-ms-user-select: none !important;
|
||||
}
|
||||
.p-iconfield input{
|
||||
@apply !text-dominant-700 !bg-dominant-50 !text-[12px] leading-8 !border-none !h-9 mt-1 mb-1 placeholder:!text-dominant-200;
|
||||
}
|
||||
.p-iconfield .p-icon{
|
||||
@apply !text-dominant-500/70;
|
||||
}
|
||||
.p-select-list-container{
|
||||
@apply px-0
|
||||
}
|
||||
.p-select-list-container ul li{
|
||||
@apply !text-dominant-700 !text-[12px] hover:!bg-transparent;
|
||||
}
|
||||
.p-select-list-container ul li.p-select-option.p-select-option-selected{
|
||||
@apply !text-dominant-700 !text-[12px] hover:!bg-transparent !bg-transparent relative ;
|
||||
}
|
||||
|
||||
.p-select-list-container ul li.p-select-option.p-select-option-selected::before {
|
||||
content: '';
|
||||
@apply rounded-r-2xl flex items-center justify-center w-1 h-[1.2rem] bg-dominant-500 ml-1;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.p-select-list-container ul li.p-select-option.p-select-option-selected::after {
|
||||
content: '';
|
||||
@apply absolute top-1/2 !left-4 w-2 h-2 bg-dominant-500 rounded-full;
|
||||
transform: translateY(-50%);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@keyframes itemFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-5px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes selectedItemPulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes searchInputSlideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
.p-datatable-header-cell{
|
||||
@apply !px-0
|
||||
}
|
||||
.p-datatable-table thead th{
|
||||
@apply !bg-complement-100 text-[10px] font-semibold !border-r-[1px] !border-r-complement-100 !py-5
|
||||
}
|
||||
.p-datatable-table thead th:first-child .p-datatable-column-header-content{
|
||||
@apply !border-r-0
|
||||
}
|
||||
.p-datatable-column-header-content{
|
||||
@apply !border-r-[1px] !border-r-complement-700/30 !ps-4
|
||||
}
|
||||
.p-datatable-table td{
|
||||
@apply text-[10px] font-semibold !py-4 text-complement-900
|
||||
}
|
||||
|
||||
.p-datatable-table thead th:first-child{
|
||||
@apply !rounded-r-lg
|
||||
}
|
||||
|
||||
.p-datatable-table thead th:last-child{
|
||||
@apply !rounded-l-lg
|
||||
}
|
||||
.p-datatable-table tbody tr{
|
||||
@apply !overflow-hidden
|
||||
}
|
||||
.p-datatable-table tbody tr td span{
|
||||
@apply !border-r-[1px] !border-r-complement-100 !ps-4
|
||||
}
|
||||
.p-datatable-table tbody tr td:last-child span{
|
||||
@apply !border-r-0
|
||||
}
|
||||
.p-datatable-table tbody tr td:first-child span{
|
||||
@apply !border-r-0
|
||||
}
|
||||
.p-datatable-table tbody tr:nth-child(even) td{
|
||||
@apply !bg-complement-50
|
||||
}
|
||||
.p-datatable-table tbody tr td:first-child{
|
||||
@apply !rounded-r-lg !border-r-0
|
||||
}
|
||||
.p-datatable-table tbody tr td:last-child{
|
||||
@apply !rounded-l-lg !border-r-0
|
||||
}
|
||||
.p-datatable-tbody > tr > td {
|
||||
@apply !ps-0
|
||||
}
|
||||
.p-datatable-tbody > tr > td{
|
||||
@apply !border-0
|
||||
}
|
||||
Reference in New Issue
Block a user