Remove legacy css
Cagatay Civici
parent
5d8684ce81
commit
b9c1d6628c
|
|
@ -1,58 +0,0 @@
|
|||
.p-accordionpanel {
|
||||
@apply flex flex-col border-b border-surface-200 dark:border-surface-700
|
||||
}
|
||||
|
||||
.p-accordionheader {
|
||||
@apply cursor-pointer disabled:cursor-auto flex items-center justify-between p-[1.125rem] font-semibold
|
||||
bg-surface-0 dark:bg-surface-900
|
||||
text-surface-500 dark:text-surface-400
|
||||
transition-colors duration-200
|
||||
}
|
||||
|
||||
.p-accordionpanel:first-child > .p-accordionheader {
|
||||
@apply rounded-ss-md rounded-se-md
|
||||
}
|
||||
|
||||
.p-accordionpanel:last-child > .p-accordionheader {
|
||||
@apply rounded-ee-md rounded-es-md
|
||||
}
|
||||
|
||||
.p-accordionpanel:last-child.p-accordionpanel-active > .p-accordionheader {
|
||||
@apply rounded-ee-md rounded-es-md
|
||||
}
|
||||
|
||||
.p-accordionheader-toggle-icon {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-accordionpanel:not(.p-disabled) .p-accordionheader:focus-visible {
|
||||
@apply outline outline-1 outline-offset-[-1px] outline-primary
|
||||
}
|
||||
|
||||
.p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled) > .p-accordionheader:hover {
|
||||
@apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled) .p-accordionheader:hover .p-accordionheader-toggle-icon {
|
||||
@apply text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader {
|
||||
@apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader .p-accordionheader-toggle-icon {
|
||||
@apply text-surface-700 dark:text-surface-0;
|
||||
}
|
||||
|
||||
.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader:hover {
|
||||
@apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader:hover .p-accordionheader-toggle-icon {
|
||||
@apply text-surface-700 dark:text-surface-0;
|
||||
}
|
||||
|
||||
.p-accordioncontent-content {
|
||||
@apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 pt-0 px-[1.125rem] pb-[1.125rem]
|
||||
}
|
||||
|
|
@ -1,143 +0,0 @@
|
|||
@import './inputtext';
|
||||
@import './chip';
|
||||
|
||||
.p-autocomplete {
|
||||
@apply inline-flex
|
||||
}
|
||||
|
||||
.p-autocomplete.p-disabled {
|
||||
@apply opacity-100
|
||||
}
|
||||
|
||||
.p-autocomplete-loader {
|
||||
@apply absolute top-1/2 -mt-2 end-3
|
||||
}
|
||||
|
||||
.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-loader {
|
||||
@apply end-[3.25rem]
|
||||
}
|
||||
|
||||
.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input {
|
||||
@apply flex-auto w-[1%]
|
||||
}
|
||||
|
||||
.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input,
|
||||
.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input-multiple {
|
||||
@apply rounded-e-none
|
||||
}
|
||||
|
||||
.p-autocomplete-dropdown {
|
||||
@apply cursor-pointer inline-flex items-center justify-center select-none overflow-hidden relative w-10 rounded-e-md
|
||||
bg-surface-100 enabled:hover:bg-surface-200 enabled:active:bg-surface-300
|
||||
text-surface-600 enabled:hover:text-surface-700 enabled:hover:active:text-surface-800
|
||||
dark:bg-surface-800 dark:enabled:hover:bg-surface-700 dark:enabled:active:bg-surface-600
|
||||
dark:text-surface-300 dark:enabled:hover:text-surface-200 dark:enabled:active:text-surface-100
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
|
||||
transition-colors duration-200
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-overlay {
|
||||
@apply min-w-full
|
||||
}
|
||||
|
||||
.p-autocomplete-overlay {
|
||||
@apply absolute top-0 left-0 rounded-md
|
||||
bg-surface-0 dark:bg-surface-900
|
||||
border border-surface-200 dark:border-surface-700
|
||||
text-surface-700 dark:text-surface-0
|
||||
shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
|
||||
}
|
||||
|
||||
.p-autocomplete-list-container {
|
||||
@apply overflow-auto
|
||||
}
|
||||
|
||||
.p-autocomplete-list {
|
||||
@apply m-0 p-1 list-none flex flex-col gap-[2px]
|
||||
}
|
||||
|
||||
.p-autocomplete-option {
|
||||
@apply cursor-pointer whitespace-nowrap relative overflow-hidden flex items-center px-3 py-2 rounded-sm
|
||||
text-surface-700 dark:text-surface-0 bg-transparent border-none
|
||||
transition-colors duration-200
|
||||
}
|
||||
|
||||
.p-autocomplete-option:not(.p-autocomplete-option-selected):not(.p-disabled).p-focus {
|
||||
@apply bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-autocomplete-option-selected {
|
||||
@apply bg-highlight
|
||||
}
|
||||
|
||||
.p-autocomplete-option-selected.p-focus {
|
||||
@apply bg-highlight-emphasis
|
||||
}
|
||||
|
||||
.p-autocomplete-option-group {
|
||||
@apply m-0 px-3 py-2 text-surface-500 dark:text-surface-400 font-semibold bg-transparent
|
||||
}
|
||||
|
||||
.p-autocomplete-input-multiple {
|
||||
@apply m-0 list-none cursor-text overflow-hidden flex items-center flex-wrap
|
||||
px-3 py-1 gap-1 text-surface-700 dark:text-surface-0 bg-surface-0 dark:bg-surface-950
|
||||
border border-surface-300 dark:border-surface-700 rounded-md w-full
|
||||
shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
|
||||
transition-colors duration-200 outline-none
|
||||
}
|
||||
|
||||
.p-autocomplete:not(.p-disabled):hover .p-autocomplete-input-multiple {
|
||||
@apply border-surface-400 dark:border-surface-600
|
||||
}
|
||||
|
||||
.p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-input-multiple {
|
||||
@apply border-primary
|
||||
}
|
||||
|
||||
.p-autocomplete.p-invalid .p-autocomplete-input-multiple {
|
||||
@apply border-red-400 dark:border-red-300
|
||||
}
|
||||
|
||||
.p-variant-filled.p-autocomplete-input-multiple {
|
||||
@apply bg-surface-50 dark:bg-surface-800
|
||||
}
|
||||
|
||||
.p-autocomplete.p-disabled .p-autocomplete-input-multiple {
|
||||
@apply opacity-100 cursor-default bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-autocomplete-chip.p-chip {
|
||||
@apply py-1 rounded-sm
|
||||
}
|
||||
|
||||
.p-autocomplete-input-multiple:has(.p-autocomplete-chip) {
|
||||
@apply px-1
|
||||
}
|
||||
|
||||
.p-autocomplete-chip-item.p-focus .p-autocomplete-chip {
|
||||
@apply bg-surface-200 text-surface-800 dark:bg-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-autocomplete-input-chip {
|
||||
@apply flex-auto inline-flex py-1
|
||||
}
|
||||
|
||||
.p-autocomplete-input-chip input {
|
||||
@apply border-none outline-none bg-transparent m-0 p-0 shadow-none rounded-none w-full text-inherit
|
||||
}
|
||||
|
||||
.p-autocomplete-input-chip input::placeholder {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-autocomplete-empty-message {
|
||||
@apply px-3 py-2
|
||||
}
|
||||
|
||||
.p-autocomplete-fluid {
|
||||
@apply flex
|
||||
}
|
||||
|
||||
.p-autocomplete-fluid:has(.p-autocomplete-dropdown) .p-autocomplete-input {
|
||||
@apply w-[1%]
|
||||
}
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
.p-avatar {
|
||||
@apply inline-flex items-center justify-center
|
||||
w-8 h-8 text-base rounded-md
|
||||
bg-surface-200 dark:bg-surface-700
|
||||
}
|
||||
|
||||
.p-avatar-image {
|
||||
@apply bg-transparent
|
||||
}
|
||||
|
||||
.p-avatar-circle,
|
||||
.p-avatar-circle img {
|
||||
@apply rounded-full
|
||||
}
|
||||
|
||||
.p-avatar-icon {
|
||||
@apply text-base
|
||||
}
|
||||
|
||||
.p-avatar img {
|
||||
@apply w-full h-full
|
||||
}
|
||||
|
||||
.p-avatar-lg {
|
||||
@apply w-12 h-12 text-2xl
|
||||
}
|
||||
|
||||
.p-avatar-lg .p-avatar-icon {
|
||||
@apply text-2xl
|
||||
}
|
||||
|
||||
.p-avatar-xl {
|
||||
@apply w-16 h-16 text-[2rem]
|
||||
}
|
||||
|
||||
.p-avatar-xl .p-avatar-icon {
|
||||
@apply text-[2rem]
|
||||
}
|
||||
|
||||
.p-avatar-group {
|
||||
@apply flex items-center
|
||||
}
|
||||
|
||||
.p-avatar-group .p-avatar + .p-avatar {
|
||||
@apply -ms-4
|
||||
}
|
||||
|
||||
.p-avatar-group .p-avatar {
|
||||
@apply border-2 border-surface-200 dark:border-surface-700
|
||||
}
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
.p-badge {
|
||||
@apply inline-flex items-center justify-center rounded-md
|
||||
py-0 px-2 text-xs font-bold min-w-6 h-6
|
||||
bg-primary text-primary-contrast
|
||||
}
|
||||
|
||||
.p-badge-dot {
|
||||
@apply min-w-2 h-2 rounded-full p-0
|
||||
}
|
||||
|
||||
.p-badge-circle {
|
||||
@apply p-0 rounded-full
|
||||
}
|
||||
|
||||
.p-badge-secondary {
|
||||
@apply bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300
|
||||
}
|
||||
|
||||
.p-badge-success {
|
||||
@apply bg-green-500 dark:bg-green-400 text-white dark:text-green-950
|
||||
}
|
||||
|
||||
.p-badge-info {
|
||||
@apply bg-sky-500 dark:bg-sky-400 text-white dark:text-sky-950
|
||||
}
|
||||
|
||||
.p-badge-warn {
|
||||
@apply bg-orange-500 dark:bg-orange-400 text-white dark:text-orange-950
|
||||
}
|
||||
|
||||
.p-badge-danger {
|
||||
@apply bg-red-500 dark:bg-red-400 text-white dark:text-red-950
|
||||
}
|
||||
|
||||
.p-badge-contrast {
|
||||
@apply bg-surface-950 dark:bg-white text-white dark:text-surface-950
|
||||
}
|
||||
|
||||
.p-badge-sm {
|
||||
@apply text-[0.625rem] min-w-5 h-5
|
||||
}
|
||||
|
||||
.p-badge-lg {
|
||||
@apply text-sm min-w-7 h-7
|
||||
}
|
||||
|
||||
.p-badge-xl {
|
||||
@apply text-base min-w-8 h-8
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
.p-blockui {
|
||||
@apply relative
|
||||
}
|
||||
|
||||
.p-blockui-mask {
|
||||
@apply rounded-md
|
||||
}
|
||||
|
||||
.p-blockui-mask.p-overlay-mask {
|
||||
@apply absolute
|
||||
}
|
||||
|
||||
.p-blockui-mask-document.p-overlay-mask {
|
||||
@apply fixed
|
||||
}
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
.p-breadcrumb {
|
||||
@apply bg-surface-0 dark:bg-surface-900 p-4 overflow-x-auto
|
||||
}
|
||||
|
||||
.p-breadcrumb-list {
|
||||
@apply m-0 p-0 list-none flex items-center flex-nowrap gap-2
|
||||
}
|
||||
|
||||
.p-breadcrumb-separator {
|
||||
@apply flex items-center text-surface-400 dark:text-surface-500
|
||||
}
|
||||
|
||||
.p-breadcrumb-separator-icon:dir(rtl) {
|
||||
@apply rotate-180
|
||||
}
|
||||
|
||||
.p-breadcrumb::-webkit-scrollbar {
|
||||
@apply hidden
|
||||
}
|
||||
|
||||
.p-breadcrumb-item-link {
|
||||
@apply no-underline flex items-center gap-2 transition-colors duration-200 rounded-md
|
||||
text-surface-500 dark:text-surface-400
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
|
||||
}
|
||||
|
||||
.p-breadcrumb-item-link:hover .p-breadcrumb-item-label {
|
||||
@apply text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-breadcrumb-item-label {
|
||||
@apply transition-colors duration-200
|
||||
}
|
||||
|
||||
.p-breadcrumb-item-icon {
|
||||
@apply text-surface-400 dark:text-surface-500 transition-colors duration-200
|
||||
}
|
||||
|
||||
.p-breadcrumb-item-link:hover .p-breadcrumb-item-icon {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
|
@ -1,331 +0,0 @@
|
|||
@import './badge';
|
||||
|
||||
.p-button {
|
||||
@apply inline-flex cursor-pointer select-none items-center justify-center overflow-hidden relative
|
||||
bg-primary enabled:hover:bg-primary-emphasis enabled:active:bg-primary-emphasis-alt text-primary-contrast
|
||||
border border-primary enabled:hover:border-primary-emphasis enabled:active:border-primary-emphasis-alt
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
|
||||
px-3 py-2 transition-colors duration-200 gap-2 rounded-md
|
||||
disabled:cursor-default
|
||||
}
|
||||
|
||||
.p-button-icon-right {
|
||||
@apply order-1
|
||||
}
|
||||
|
||||
.p-button-icon-right:dir(rtl) {
|
||||
@apply order-[-1]
|
||||
}
|
||||
|
||||
.p-button:not(.p-button-vertical) .p-button-icon:not(.p-button-icon-right):dir(rtl) {
|
||||
@apply order-1
|
||||
}
|
||||
|
||||
.p-button-icon-bottom {
|
||||
@apply order-2
|
||||
}
|
||||
|
||||
.p-button-icon-only {
|
||||
@apply w-10 px-0 gap-0
|
||||
}
|
||||
|
||||
.p-button-icon-only.p-button-rounded {
|
||||
@apply rounded-full h-10
|
||||
}
|
||||
|
||||
.p-button-icon-only .p-button-label {
|
||||
@apply invisible w-0
|
||||
}
|
||||
|
||||
.p-button-sm {
|
||||
@apply text-sm px-[0.625rem] py-[0.375rem]
|
||||
}
|
||||
|
||||
.p-button-sm .p-button-icon {
|
||||
@apply text-sm
|
||||
}
|
||||
|
||||
.p-button-lg {
|
||||
@apply text-[1.125rem] px-[0.875rem] py-[0.625rem]
|
||||
}
|
||||
|
||||
.p-button-lg .p-button-icon {
|
||||
@apply text-[1.125rem]
|
||||
}
|
||||
|
||||
.p-button-vertical {
|
||||
@apply flex-col
|
||||
}
|
||||
|
||||
.p-button-label {
|
||||
@apply font-medium
|
||||
}
|
||||
|
||||
.p-button-fluid {
|
||||
@apply w-full
|
||||
}
|
||||
|
||||
.p-button-fluid.p-button-icon-only {
|
||||
@apply w-10
|
||||
}
|
||||
|
||||
.p-button .p-badge {
|
||||
@apply min-w-4 h-4 leading-4
|
||||
}
|
||||
|
||||
.p-button-raised {
|
||||
@apply shadow-[0_3px_1px_-2px_rgba(0,0,0,0.2),0_2px_2px_0_rgba(0,0,0,0.14),0_1px_5px_0_rgba(0,0,0,0.12)]
|
||||
}
|
||||
|
||||
.p-button-rounded {
|
||||
@apply rounded-[2rem]
|
||||
}
|
||||
|
||||
.p-button-secondary {
|
||||
@apply bg-surface-100 enabled:hover:bg-surface-200 enabled:active:bg-surface-300
|
||||
border-surface-100 enabled:hover:border-surface-200 enabled:active:border-surface-300
|
||||
text-surface-600 enabled:hover:text-surface-700 enabled:active:text-surface-800
|
||||
dark:bg-surface-800 dark:enabled:hover:bg-surface-700 dark:enabled:active:bg-surface-600
|
||||
dark:border-surface-800 dark:enabled:hover:border-surface-700 dark:enabled:active:border-surface-600
|
||||
dark:text-surface-300 dark:enabled:hover:text-surface-200 dark:enabled:active:text-surface-100
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
|
||||
focus-visible:outline-surface-600 dark:focus-visible:outline-surface-300
|
||||
}
|
||||
|
||||
.p-button-success {
|
||||
@apply bg-green-500 enabled:hover:bg-green-600 enabled:active:bg-green-700
|
||||
border-green-500 enabled:hover:border-green-600 enabled:active:border-green-700
|
||||
text-white enabled:hover:text-white enabled:active:text-white
|
||||
dark:bg-green-400 dark:enabled:hover:bg-green-300 dark:enabled:active:bg-green-200
|
||||
dark:border-green-400 dark:enabled:hover:border-green-300 dark:enabled:active:border-green-200
|
||||
dark:text-green-950 dark:enabled:hover:text-green-950 dark:enabled:active:text-green-950
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
|
||||
focus-visible:outline-green-500 dark:focus-visible:outline-green-400
|
||||
}
|
||||
|
||||
.p-button-info {
|
||||
@apply bg-sky-500 enabled:hover:bg-sky-600 enabled:active:bg-sky-700
|
||||
border-sky-500 enabled:hover:border-sky-600 enabled:active:border-sky-700
|
||||
text-white enabled:hover:text-white enabled:active:text-white
|
||||
dark:bg-sky-400 dark:enabled:hover:bg-sky-300 dark:enabled:active:bg-sky-200
|
||||
dark:border-sky-400 dark:enabled:hover:border-sky-300 dark:enabled:active:border-sky-200
|
||||
dark:text-sky-950 dark:enabled:hover:text-sky-950 dark:enabled:active:text-sky-950
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
|
||||
focus-visible:outline-sky-500 dark:focus-visible:outline-sky-400
|
||||
}
|
||||
|
||||
.p-button-warn {
|
||||
@apply bg-orange-500 enabled:hover:bg-orange-600 enabled:active:bg-orange-700
|
||||
border-orange-500 enabled:hover:border-orange-600 enabled:active:border-orange-700
|
||||
text-white enabled:hover:text-white enabled:active:text-white
|
||||
dark:bg-orange-400 dark:enabled:hover:bg-orange-300 dark:enabled:active:bg-orange-200
|
||||
dark:border-orange-400 dark:enabled:hover:border-orange-300 dark:enabled:active:border-orange-200
|
||||
dark:text-orange-950 dark:enabled:hover:text-orange-950 dark:enabled:active:text-orange-950
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
|
||||
focus-visible:outline-orange-500 dark:focus-visible:outline-orange-400
|
||||
}
|
||||
|
||||
.p-button-help {
|
||||
@apply bg-purple-500 enabled:hover:bg-purple-600 enabled:active:bg-purple-700
|
||||
border-purple-500 enabled:hover:border-purple-600 enabled:active:border-purple-700
|
||||
text-white enabled:hover:text-white enabled:active:text-white
|
||||
dark:bg-purple-400 dark:enabled:hover:bg-purple-300 dark:enabled:active:bg-purple-200
|
||||
dark:border-purple-400 dark:enabled:hover:border-purple-300 dark:enabled:active:border-purple-200
|
||||
dark:text-purple-950 dark:enabled:hover:text-purple-950 dark:enabled:active:text-purple-950
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
|
||||
focus-visible:outline-purple-500 dark:focus-visible:outline-purple-400
|
||||
}
|
||||
|
||||
.p-button-danger {
|
||||
@apply bg-red-500 enabled:hover:bg-red-600 enabled:active:bg-red-700
|
||||
border-red-500 enabled:hover:border-red-600 enabled:active:border-red-700
|
||||
text-white enabled:hover:text-white enabled:active:text-white
|
||||
dark:bg-red-400 dark:enabled:hover:bg-red-300 dark:enabled:active:bg-red-200
|
||||
dark:border-red-400 dark:enabled:hover:border-red-300 dark:enabled:active:border-red-200
|
||||
dark:text-red-950 dark:enabled:hover:text-red-950 dark:enabled:active:text-red-950
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
|
||||
focus-visible:outline-red-500 dark:focus-visible:outline-red-400
|
||||
}
|
||||
|
||||
.p-button-contrast {
|
||||
@apply bg-surface-950 enabled:hover:bg-surface-900 enabled:active:bg-surface-800
|
||||
border-surface-950 enabled:hover:border-surface-900 enabled:active:border-surface-800
|
||||
text-white enabled:hover:text-white enabled:active:text-white
|
||||
dark:bg-surface-0 dark:enabled:hover:bg-surface-100 dark:enabled:active:bg-surface-200
|
||||
dark:border-surface-100 dark:enabled:hover:border-surface-200 dark:enabled:active:border-surface-300
|
||||
dark:text-surface-950 dark:enabled:hover:text-surface-950 dark:enabled:active:text-surface-950
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
|
||||
focus-visible:outline-surface-950 dark:focus-visible:outline-surface-0
|
||||
}
|
||||
|
||||
.p-button-outlined {
|
||||
@apply bg-transparent enabled:hover:bg-primary-50 enabled:active:bg-primary-100
|
||||
border-primary-200 enabled:hover:border-primary-200 enabled:active:border-primary-200
|
||||
text-primary enabled:hover:text-primary enabled:active:text-primary
|
||||
dark:bg-transparent dark:enabled:hover:bg-primary/5 dark:enabled:active:bg-primary/15
|
||||
dark:border-primary-700 dark:enabled:hover:border-primary-700 dark:enabled:active:border-primary-700
|
||||
dark:text-primary dark:enabled:hover:text-primary dark:enabled:active:text-primary
|
||||
}
|
||||
|
||||
.p-button-outlined.p-button-secondary {
|
||||
@apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100
|
||||
border-surface-200 enabled:hover:border-surface-200 enabled:active:border-surface-200
|
||||
text-surface-500 enabled:hover:text-surface-500 enabled:active:text-surface-500
|
||||
dark:bg-transparent dark:enabled:hover:bg-white/5 dark:enabled:active:bg-white/15
|
||||
dark:border-surface-700 dark:enabled:hover:border-surface-700 dark:enabled:active:border-surface-700
|
||||
dark:text-surface-400 dark:enabled:hover:text-surface-400 dark:enabled:active:text-surface-400
|
||||
}
|
||||
|
||||
.p-button-outlined.p-button-success {
|
||||
@apply bg-transparent enabled:hover:bg-green-50 enabled:active:bg-green-100
|
||||
border-green-200 enabled:hover:border-green-200 enabled:active:border-green-200
|
||||
text-green-500 enabled:hover:text-green-500 enabled:active:text-green-500
|
||||
dark:bg-transparent dark:enabled:hover:bg-green-400/5 dark:enabled:active:bg-green-400/15
|
||||
dark:border-green-700 dark:enabled:hover:border-green-700 dark:enabled:active:border-green-700
|
||||
dark:text-green-400 dark:enabled:hover:text-green-400 dark:enabled:active:text-green-400
|
||||
}
|
||||
|
||||
.p-button-outlined.p-button-info {
|
||||
@apply bg-transparent enabled:hover:bg-sky-50 enabled:active:bg-sky-100
|
||||
border-sky-200 enabled:hover:border-sky-200 enabled:active:border-sky-200
|
||||
text-sky-500 enabled:hover:text-sky-500 enabled:active:text-sky-500
|
||||
dark:bg-transparent dark:enabled:hover:bg-sky-400/5 dark:enabled:active:bg-sky-400/15
|
||||
dark:border-sky-700 dark:enabled:hover:border-sky-700 dark:enabled:active:border-sky-700
|
||||
dark:text-sky-400 dark:enabled:hover:text-sky-400 dark:enabled:active:text-sky-400
|
||||
}
|
||||
|
||||
.p-button-outlined.p-button-warn {
|
||||
@apply bg-transparent enabled:hover:bg-orange-50 enabled:active:bg-orange-100
|
||||
border-orange-200 enabled:hover:border-orange-200 enabled:active:border-orange-200
|
||||
text-orange-500 enabled:hover:text-orange-500 enabled:active:text-orange-500
|
||||
dark:bg-transparent dark:enabled:hover:bg-orange-400/5 dark:enabled:active:bg-orange-400/15
|
||||
dark:border-orange-700 dark:enabled:hover:border-orange-700 dark:enabled:active:border-orange-700
|
||||
dark:text-orange-400 dark:enabled:hover:text-orange-400 dark:enabled:active:text-orange-400
|
||||
}
|
||||
|
||||
.p-button-outlined.p-button-help {
|
||||
@apply bg-transparent enabled:hover:bg-purple-50 enabled:active:bg-purple-100
|
||||
border-purple-200 enabled:hover:border-purple-200 enabled:active:border-purple-200
|
||||
text-purple-500 enabled:hover:text-purple-500 enabled:active:text-purple-500
|
||||
dark:bg-transparent dark:enabled:hover:bg-purple-400/5 dark:enabled:active:bg-purple-400/15
|
||||
dark:border-purple-700 dark:enabled:hover:border-purple-700 dark:enabled:active:border-purple-700
|
||||
dark:text-purple-400 dark:enabled:hover:text-purple-400 dark:enabled:active:text-purple-400
|
||||
}
|
||||
|
||||
.p-button-outlined.p-button-danger {
|
||||
@apply bg-transparent enabled:hover:bg-red-50 enabled:active:bg-red-100
|
||||
border-red-200 enabled:hover:border-red-200 enabled:active:border-red-200
|
||||
text-red-500 enabled:hover:text-red-500 enabled:active:text-red-500
|
||||
dark:bg-transparent dark:enabled:hover:bg-red-400/5 dark:enabled:active:bg-red-400/15
|
||||
dark:border-red-700 dark:enabled:hover:border-red-700 dark:enabled:active:border-red-700
|
||||
dark:text-red-400 dark:enabled:hover:text-red-400 dark:enabled:active:text-red-400
|
||||
}
|
||||
|
||||
.p-button-outlined.p-button-contrast {
|
||||
@apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100
|
||||
border-surface-700 enabled:hover:border-surface-700 enabled:active:border-surface-700
|
||||
text-surface-950 enabled:hover:text-surface-950 enabled:active:text-surface-950
|
||||
dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700
|
||||
dark:border-surface-500 dark:enabled:hover:border-surface-500 dark:enabled:active:border-surface-500
|
||||
dark:text-surface-0 dark:enabled:hover:text-surface-0 dark:enabled:active:text-surface-0
|
||||
}
|
||||
|
||||
.p-button-outlined.p-button-plain {
|
||||
@apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100
|
||||
border-surface-200 enabled:hover:border-surface-200 enabled:active:border-surface-200
|
||||
text-surface-700 enabled:hover:text-surface-700 enabled:active:text-surface-700
|
||||
dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700
|
||||
dark:border-surface-600 dark:enabled:hover:border-surface-600 dark:enabled:active:border-surface-600
|
||||
dark:text-surface-0 dark:enabled:hover:text-surface-0 dark:enabled:active:text-surface-0
|
||||
}
|
||||
|
||||
.p-button-text {
|
||||
@apply bg-transparent enabled:hover:bg-primary-50 enabled:active:bg-primary-100
|
||||
border-transparent enabled:hover:border-transparent enabled:active:border-transparent
|
||||
text-primary enabled:hover:text-primary enabled:active:text-primary
|
||||
dark:bg-transparent dark:enabled:hover:bg-primary/5 dark:enabled:active:bg-primary/15
|
||||
dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent
|
||||
dark:text-primary dark:enabled:hover:text-primary dark:enabled:active:text-primary
|
||||
}
|
||||
|
||||
.p-button-text.p-button-secondary {
|
||||
@apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100
|
||||
border-transparent enabled:hover:border-transparent enabled:active:border-transparent
|
||||
text-surface-500 enabled:hover:text-surface-500 enabled:active:text-surface-500
|
||||
dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700
|
||||
dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent
|
||||
dark:text-surface-400 dark:enabled:hover:text-surface-400 dark:enabled:active:text-surface-400
|
||||
}
|
||||
|
||||
.p-button-text.p-button-success {
|
||||
@apply bg-transparent enabled:hover:bg-green-50 enabled:active:bg-green-100
|
||||
border-transparent enabled:hover:border-transparent enabled:active:border-transparent
|
||||
text-green-500 enabled:hover:text-green-500 enabled:active:text-green-500
|
||||
dark:bg-transparent dark:enabled:hover:bg-green-400/5 dark:enabled:active:bg-green-400/15
|
||||
dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent
|
||||
dark:text-green-400 dark:enabled:hover:text-green-400 dark:enabled:active:text-green-400
|
||||
}
|
||||
|
||||
.p-button-text.p-button-info {
|
||||
@apply bg-transparent enabled:hover:bg-sky-50 enabled:active:bg-sky-100
|
||||
border-transparent enabled:hover:border-transparent enabled:active:border-transparent
|
||||
text-sky-500 enabled:hover:text-sky-500 enabled:active:text-sky-500
|
||||
dark:bg-transparent dark:enabled:hover:bg-sky-400/5 dark:enabled:active:bg-sky-400/15
|
||||
dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent
|
||||
dark:text-sky-400 dark:enabled:hover:text-sky-400 dark:enabled:active:text-sky-400
|
||||
}
|
||||
|
||||
.p-button-text.p-button-warn {
|
||||
@apply bg-transparent enabled:hover:bg-orange-50 enabled:active:bg-orange-100
|
||||
border-transparent enabled:hover:border-transparent enabled:active:border-transparent
|
||||
text-orange-500 enabled:hover:text-orange-500 enabled:active:text-orange-500
|
||||
dark:bg-transparent dark:enabled:hover:bg-orange-400/5 dark:enabled:active:bg-orange-400/15
|
||||
dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent
|
||||
dark:text-orange-400 dark:enabled:hover:text-orange-400 dark:enabled:active:text-orange-400
|
||||
}
|
||||
|
||||
.p-button-text.p-button-help {
|
||||
@apply bg-transparent enabled:hover:bg-purple-50 enabled:active:bg-purple-100
|
||||
border-transparent enabled:hover:border-transparent enabled:active:border-transparent
|
||||
text-purple-500 enabled:hover:text-purple-500 enabled:active:text-purple-500
|
||||
dark:bg-transparent dark:enabled:hover:bg-purple-400/5 dark:enabled:active:bg-purple-400/15
|
||||
dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent
|
||||
dark:text-purple-400 dark:enabled:hover:text-purple-400 dark:enabled:active:text-purple-400
|
||||
}
|
||||
|
||||
.p-button-text.p-button-danger {
|
||||
@apply bg-transparent enabled:hover:bg-red-50 enabled:active:bg-red-100
|
||||
border-transparent enabled:hover:border-transparent enabled:active:border-transparent
|
||||
text-red-500 enabled:hover:text-red-500 enabled:active:text-red-500
|
||||
dark:bg-transparent dark:enabled:hover:bg-red-400/5 dark:enabled:active:bg-red-400/15
|
||||
dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent
|
||||
dark:text-red-400 dark:enabled:hover:text-red-400 dark:enabled:active:text-red-400
|
||||
}
|
||||
|
||||
.p-button-text.p-button-contrast {
|
||||
@apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100
|
||||
border-transparent enabled:hover:border-transparent enabled:active:border-transparent
|
||||
text-surface-500 enabled:hover:text-surface-500 enabled:active:text-surface-500
|
||||
dark:bg-transparent dark:enabled:hover:bg-surface-400/5 dark:enabled:active:bg-surface-400/15
|
||||
dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent
|
||||
dark:text-surface-400 dark:enabled:hover:text-surface-400 dark:enabled:active:text-surface-400
|
||||
}
|
||||
|
||||
.p-button-text.p-button-plain {
|
||||
@apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100
|
||||
border-transparent enabled:hover:border-transparent enabled:active:border-transparent
|
||||
text-surface-700 enabled:hover:text-surface-700 enabled:active:text-surface-700
|
||||
dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700
|
||||
dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent
|
||||
dark:text-surface-0 dark:enabled:hover:text-surface-0 dark:enabled:active:text-surface-0
|
||||
}
|
||||
|
||||
.p-button-link {
|
||||
@apply bg-transparent enabled:hover:bg-transparent enabled:active:bg-transparent
|
||||
border-transparent enabled:hover:border-transparent enabled:active:border-transparent
|
||||
text-primary enabled:hover:text-primary enabled:active:text-primary
|
||||
}
|
||||
|
||||
.p-button-link:not(:disabled):hover .p-button-label {
|
||||
@apply underline
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
.p-buttongroup .p-button {
|
||||
@apply m-0 focus-visible:relative focus-visible:z-10
|
||||
}
|
||||
|
||||
.p-buttongroup .p-button:not(:last-child) {
|
||||
@apply border-r-0
|
||||
}
|
||||
|
||||
.p-buttongroup .p-button:not(:first-of-type):not(:last-of-type) {
|
||||
@apply rounded-none
|
||||
}
|
||||
|
||||
.p-buttongroup .p-button:first-of-type:not(:only-of-type) {
|
||||
@apply rounded-e-none
|
||||
}
|
||||
|
||||
.p-buttongroup .p-button:last-of-type:not(:only-of-type) {
|
||||
@apply rounded-s-none
|
||||
}
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
.p-card {
|
||||
@apply flex flex-col rounded-xl
|
||||
bg-surface-0 dark:bg-surface-900
|
||||
text-surface-700 dark:text-surface-0
|
||||
shadow-[0_1px_3px_0_rgba(0,0,0,0.1),0_1px_2px_-1px_rgba(0,0,0,0.1)]
|
||||
}
|
||||
|
||||
.p-card-caption {
|
||||
@apply flex flex-col gap-2
|
||||
}
|
||||
|
||||
.p-card-body {
|
||||
@apply p-5 flex flex-col gap-2
|
||||
}
|
||||
|
||||
.p-card-title {
|
||||
@apply font-medium text-xl
|
||||
}
|
||||
|
||||
.p-card-subtitle {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
@import './button';
|
||||
|
||||
.p-carousel {
|
||||
@apply flex flex-col
|
||||
}
|
||||
|
||||
.p-carousel-content-container {
|
||||
@apply flex flex-col overflow-auto
|
||||
}
|
||||
|
||||
.p-carousel-content {
|
||||
@apply flex flex-row gap-1
|
||||
}
|
||||
|
||||
.p-carousel-content:dir(rtl) {
|
||||
@apply flex-row-reverse
|
||||
}
|
||||
|
||||
.p-carousel-viewport {
|
||||
@apply overflow-hidden w-full
|
||||
}
|
||||
|
||||
.p-carousel-item-list {
|
||||
@apply flex flex-row
|
||||
}
|
||||
|
||||
.p-carousel-prev-button,
|
||||
.p-carousel-next-button {
|
||||
@apply self-center flex-shrink-0
|
||||
}
|
||||
|
||||
.p-carousel-indicator-list {
|
||||
@apply flex flex-row justify-center flex-wrap p-4 gap-2 m-0 list-none
|
||||
}
|
||||
|
||||
.p-carousel-indicator-list:dir(rtl) {
|
||||
@apply rtl:flex-row-reverse
|
||||
}
|
||||
|
||||
.p-carousel-indicator-button {
|
||||
@apply flex items-center justify-center w-8 h-2 border-none rounded-md p-0 m-0 select-none cursor-pointer transition-colors duration-200
|
||||
bg-surface-200 hover:bg-surface-300 dark:bg-surface-700 dark:hover:bg-surface-600
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
|
||||
}
|
||||
|
||||
.p-carousel-indicator-active .p-carousel-indicator-button {
|
||||
@apply bg-primary
|
||||
}
|
||||
|
||||
.p-carousel-vertical .p-carousel-content {
|
||||
@apply flex-col
|
||||
}
|
||||
|
||||
.p-carousel-vertical .p-carousel-item-list {
|
||||
@apply flex-col h-full
|
||||
}
|
||||
|
||||
.p-items-hidden .p-carousel-item {
|
||||
@apply invisible
|
||||
}
|
||||
|
||||
.p-items-hidden .p-carousel-item.p-carousel-item-active {
|
||||
@apply visible
|
||||
}
|
||||
|
|
@ -1,169 +0,0 @@
|
|||
.p-cascadeselect {
|
||||
@apply inline-flex cursor-pointer relative select-none rounded-md
|
||||
bg-surface-0 dark:bg-surface-950
|
||||
border border-surface-300 dark:border-surface-700
|
||||
shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
|
||||
transition-colors duration-200
|
||||
}
|
||||
|
||||
.p-cascadeselect:not(.p-disabled):hover {
|
||||
@apply border-surface-400 dark:border-surface-600
|
||||
}
|
||||
|
||||
.p-cascadeselect:not(.p-disabled).p-focus {
|
||||
@apply border-primary
|
||||
}
|
||||
|
||||
.p-cascadeselect.p-variant-filled {
|
||||
@apply bg-surface-50 dark:bg-surface-800
|
||||
}
|
||||
|
||||
.p-cascadeselect.p-invalid {
|
||||
@apply border-red-400 dark:border-red-300
|
||||
}
|
||||
|
||||
.p-cascadeselect.p-disabled {
|
||||
@apply bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400 opacity-100 cursor-default
|
||||
}
|
||||
|
||||
.p-cascadeselect-dropdown {
|
||||
@apply flex items-center justify-center shrink-0 bg-transparent
|
||||
text-surface-500 dark:text-surface-400 w-10 rounded-e-md
|
||||
}
|
||||
|
||||
.p-cascadeselect-clear-icon {
|
||||
@apply absolute top-1/2 -mt-2 text-surface-500 dark:text-surface-400 end-10
|
||||
}
|
||||
|
||||
.p-cascadeselect-label {
|
||||
@apply block whitespace-nowrap overflow-hidden flex-auto w-[1%]
|
||||
py-2 px-3 overflow-ellipsis
|
||||
text-surface-700 dark:text-surface-0 bg-transparent border-none outline-none
|
||||
}
|
||||
|
||||
.p-cascadeselect-label.p-placeholder {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-cascadeselect.p-disabled .p-cascadeselect-label {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-cascadeselect-label-empty {
|
||||
@apply overflow-hidden opacity-0
|
||||
}
|
||||
|
||||
.p-cascadeselect-fluid {
|
||||
@apply flex
|
||||
}
|
||||
|
||||
.p-cascadeselect-fluid .p-cascadeselect-label {
|
||||
@apply w-[1%]
|
||||
}
|
||||
|
||||
.p-cascadeselect-overlay {
|
||||
@apply absolute top-0 left-0 rounded-md
|
||||
bg-surface-0 dark:bg-surface-900
|
||||
border border-surface-200 dark:border-surface-700
|
||||
text-surface-700 dark:text-surface-0
|
||||
shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
|
||||
}
|
||||
|
||||
.p-cascadeselect .p-cascadeselect-overlay {
|
||||
@apply min-w-full
|
||||
}
|
||||
|
||||
.p-cascadeselect-option-list {
|
||||
@apply hidden min-w-full absolute z-10
|
||||
}
|
||||
|
||||
.p-cascadeselect-list {
|
||||
@apply min-w-full m-0 list-none p-1 flex flex-col gap-[2px]
|
||||
}
|
||||
|
||||
.p-cascadeselect-option {
|
||||
@apply cursor-pointer font-normal whitespace-nowrap
|
||||
text-surface-700 dark:text-surface-0 bg-transparent border-none
|
||||
transition-colors duration-200 rounded-sm
|
||||
}
|
||||
|
||||
.p-cascadeselect-option-active {
|
||||
@apply overflow-visible
|
||||
}
|
||||
|
||||
.p-cascadeselect-option-active > .p-cascadeselect-option-content {
|
||||
@apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-cascadeselect-option:not(.p-cascadeselect-option-selected):not(.p-disabled).p-focus > .p-cascadeselect-option-content {
|
||||
@apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-cascadeselect-option:not(.p-cascadeselect-option-selected):not(.p-disabled).p-focus .p-cascadeselect-group-icon {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-cascadeselect-option-selected .p-cascadeselect-option-content {
|
||||
@apply bg-highlight
|
||||
}
|
||||
|
||||
.p-cascadeselect-option-selected.p-focus {
|
||||
@apply bg-highlight-emphasis
|
||||
}
|
||||
|
||||
.p-cascadeselect-option-active > .p-cascadeselect-option-list {
|
||||
@apply block start-full top-0
|
||||
}
|
||||
|
||||
.p-cascadeselect-option-content {
|
||||
@apply flex items-center justify-between overflow-hidden relative px-3 py-2
|
||||
}
|
||||
|
||||
.p-cascadeselect-group-icon {
|
||||
@apply text-sm w-[0.875rem] h-[0.875rem] text-surface-400 dark:text-surface-500
|
||||
}
|
||||
|
||||
.p-cascadeselect-group-icon:dir(rtl) {
|
||||
@apply rotate-180
|
||||
}
|
||||
|
||||
|
||||
.p-cascadeselect-mobile-active .p-cascadeselect-option-content {
|
||||
@apply rounded-sm
|
||||
}
|
||||
|
||||
.p-cascadeselect-mobile-active-active .p-cascadeselect-list {
|
||||
@apply flex flex-col top-full start-0 z-10
|
||||
}
|
||||
|
||||
.p-cascadeselect-mobile-active .p-cascadeselect-list > .p-cascadeselect-option > .p-cascadeselect-option-content .p-cascadeselect-group-icon {
|
||||
@apply ms-auto transition-transform duration-200
|
||||
}
|
||||
|
||||
.p-cascadeselect-mobile-active .p-cascadeselect-list .p-cascadeselect-group-icon {
|
||||
@apply transition-transform duration-200 rotate-90
|
||||
}
|
||||
|
||||
.p-cascadeselect-mobile-active .p-cascadeselect-option-active > .p-cascadeselect-option-content .p-cascadeselect-group-icon {
|
||||
@apply -rotate-90
|
||||
}
|
||||
|
||||
.p-cascadeselect-mobile-active .p-cascadeselect-option-list {
|
||||
@apply static shadow-none border-none ps-4
|
||||
}
|
||||
|
||||
.p-cascadeselect-sm .p-cascadeselect-label {
|
||||
@apply text-sm px-[0.625rem] py-[0.375rem]
|
||||
}
|
||||
|
||||
.p-cascadeselect-sm .p-cascadeselect-dropdown .p-icon {
|
||||
@apply text-sm w-[0.875rem] h-[0.875rem]
|
||||
}
|
||||
|
||||
.p-cascadeselect-lg .p-cascadeselect-label {
|
||||
@apply text-lg px-[0.875rem] py-[0.625rem]
|
||||
}
|
||||
|
||||
.p-cascadeselect-lg .p-cascadeselect-dropdown .p-icon {
|
||||
@apply text-lg w-[1.125rem] h-[1.125rem]
|
||||
}
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
.p-checkbox {
|
||||
@apply relative inline-flex select-none w-5 h-5 align-bottom
|
||||
}
|
||||
|
||||
.p-checkbox-input {
|
||||
@apply cursor-pointer disabled:cursor-default appearance-none absolute start-0 top-0 w-full h-full m-0 p-0 opacity-0 z-10
|
||||
border border-transparent rounded-sm
|
||||
}
|
||||
|
||||
.p-checkbox-box {
|
||||
@apply flex justify-center items-center rounded-sm w-5 h-5
|
||||
border border-surface-300 dark:border-surface-700
|
||||
bg-surface-0 dark:bg-surface-950
|
||||
transition-colors duration-200
|
||||
shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
|
||||
}
|
||||
|
||||
.p-checkbox-icon {
|
||||
@apply text-surface-700 dark:text-surface-0
|
||||
text-sm w-[0.875rem] h-[0.875rem]
|
||||
transition-colors duration-200
|
||||
}
|
||||
|
||||
.p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
|
||||
@apply border-surface-400 dark:border-surface-600
|
||||
}
|
||||
|
||||
.p-checkbox-checked .p-checkbox-box {
|
||||
@apply border-primary bg-primary
|
||||
}
|
||||
|
||||
.p-checkbox-checked .p-checkbox-icon {
|
||||
@apply text-primary-contrast
|
||||
}
|
||||
|
||||
.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
|
||||
@apply bg-primary-emphasis border-primary-emphasis
|
||||
}
|
||||
|
||||
.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-icon {
|
||||
@apply text-primary-contrast
|
||||
}
|
||||
|
||||
.p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
|
||||
@apply outline outline-1 outline-offset-2 outline-primary
|
||||
}
|
||||
|
||||
.p-checkbox.p-invalid > .p-checkbox-box {
|
||||
@apply border-red-400 dark:border-red-300
|
||||
}
|
||||
|
||||
.p-checkbox.p-variant-filled .p-checkbox-box {
|
||||
@apply bg-surface-50 dark:bg-surface-800
|
||||
}
|
||||
|
||||
.p-checkbox.p-disabled {
|
||||
@apply opacity-100
|
||||
}
|
||||
|
||||
.p-checkbox.p-disabled .p-checkbox-box {
|
||||
@apply bg-surface-200 dark:bg-surface-400 border-surface-300 dark:border-surface-700
|
||||
}
|
||||
|
||||
.p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon {
|
||||
@apply text-surface-700 dark:text-surface-900
|
||||
}
|
||||
|
||||
.p-checkbox-sm,
|
||||
.p-checkbox-sm .p-checkbox-box {
|
||||
@apply w-4 h-4
|
||||
}
|
||||
|
||||
.p-checkbox-sm .p-checkbox-icon {
|
||||
@apply w-3 h-3
|
||||
}
|
||||
|
||||
.p-checkbox-lg,
|
||||
.p-checkbox-lg .p-checkbox-box {
|
||||
@apply w-6 h-6
|
||||
}
|
||||
|
||||
.p-checkbox-lg .p-checkbox-icon {
|
||||
@apply w-4 h-4
|
||||
}
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
.p-chip {
|
||||
@apply inline-flex items-center rounded-2xl gap-2 px-3 py-2
|
||||
bg-surface-100 dark:bg-surface-800
|
||||
text-surface-800 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-chip-icon {
|
||||
@apply text-surface-800 dark:bg-surface-0 text-base w-4 h-4
|
||||
}
|
||||
|
||||
.p-chip-image {
|
||||
@apply rounded-full w-8 h-8 -ms-2
|
||||
}
|
||||
|
||||
.p-chip:has(.p-chip-remove-icon) {
|
||||
@apply pe-2
|
||||
}
|
||||
|
||||
.p-chip:has(.p-chip-image) {
|
||||
@apply pt-1 pb-1
|
||||
}
|
||||
|
||||
.p-chip-remove-icon {
|
||||
@apply cursor-pointer text-base w-4 h-4 rounded-full
|
||||
text-surface-800 dark:text-surface-0
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
|
||||
}
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
.p-colorpicker {
|
||||
@apply inline-block relative;
|
||||
}
|
||||
|
||||
.p-colorpicker-dragging {
|
||||
@apply cursor-pointer
|
||||
}
|
||||
|
||||
.p-colorpicker-preview {
|
||||
@apply w-6 h-6 p-0 border-none rounded-md transition-colors duration-200 cursor-pointer disabled:cursor-auto
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
|
||||
}
|
||||
|
||||
.p-colorpicker-panel {
|
||||
@apply bg-surface-800 dark:bg-surface-900
|
||||
border border-surface-900 dark:border-surface-700
|
||||
rounded-md shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
|
||||
w-[193px] h-[166px] absolute top-0 start-0
|
||||
}
|
||||
|
||||
.p-colorpicker-panel-inline {
|
||||
@apply static shadow-none
|
||||
}
|
||||
|
||||
.p-colorpicker-content {
|
||||
@apply relative;
|
||||
}
|
||||
|
||||
.p-colorpicker-color-selector {
|
||||
@apply w-[150px] h-[150px] top-[8px] start-[8px] absolute
|
||||
}
|
||||
|
||||
.p-colorpicker-color-background {
|
||||
@apply w-full h-full bg-[linear-gradient(to_top,#000_0%,rgba(0,0,0,0)_100%),linear-gradient(to_right,#fff_0%,rgba(255,255,255,0)_100%)];
|
||||
}
|
||||
|
||||
.p-colorpicker-color-handle {
|
||||
@apply absolute top-0 start-[150px] rounded-full w-[10px] h-[10px] border border-surface-0 -mt-[5px] me-0 mb-0 -ms-[5px] cursor-pointer opacity-85
|
||||
}
|
||||
|
||||
.p-colorpicker-hue {
|
||||
@apply w-[17px] h-[150px] top-[8px] start-[167px] absolute opacity-85 bg-[linear-gradient(0deg,red_0,#ff0_17%,#0f0_33%,#0ff_50%,#00f_67%,#f0f_83%,red)];
|
||||
}
|
||||
|
||||
.p-colorpicker-hue-handle {
|
||||
@apply absolute top-[150px] start-0 w-[21px] -ms-[2px] -mt-[5px] h-[10px] border-2 opacity-85 border-surface-0 cursor-pointer
|
||||
}
|
||||
|
|
@ -1,81 +0,0 @@
|
|||
.p-connected-overlay-enter-from {
|
||||
@apply opacity-0 scale-y-75
|
||||
}
|
||||
|
||||
.p-connected-overlay-leave-to {
|
||||
@apply opacity-0
|
||||
}
|
||||
|
||||
.p-connected-overlay-enter-active {
|
||||
@apply transition-[opacity,transform] duration-150 ease-[cubic-bezier(0,0,0.2,1)]
|
||||
}
|
||||
|
||||
.p-connected-overlay-leave-active {
|
||||
@apply transition-opacity duration-100 ease-linear
|
||||
}
|
||||
|
||||
.p-toggleable-content-enter-from,
|
||||
.p-toggleable-content-leave-to {
|
||||
@apply max-h-0
|
||||
}
|
||||
|
||||
.p-toggleable-content-enter-to,
|
||||
.p-toggleable-content-leave-from {
|
||||
@apply max-h-[1000px]
|
||||
}
|
||||
|
||||
.p-toggleable-content-leave-active {
|
||||
@apply overflow-hidden transition-[max-height] animate-duration-[450ms] ease-[cubic-bezier(0,1,0,1)];
|
||||
}
|
||||
|
||||
.p-toggleable-content-enter-active {
|
||||
@apply overflow-hidden transition-[max-height] duration-1000 ease-in-out
|
||||
}
|
||||
|
||||
.p-disabled,
|
||||
.p-disabled * {
|
||||
@apply cursor-default pointer-events-none select-none
|
||||
}
|
||||
|
||||
.p-disabled,
|
||||
.p-component:disabled {
|
||||
@apply opacity-60
|
||||
}
|
||||
|
||||
.pi {
|
||||
@apply text-base
|
||||
}
|
||||
|
||||
.p-icon {
|
||||
@apply w-4 h-4
|
||||
}
|
||||
|
||||
.p-overlay-mask {
|
||||
@apply bg-black/50 text-surface-200 transition-colors duration-150 fixed top-0 start-0 w-full h-full
|
||||
}
|
||||
|
||||
.p-overlay-mask-enter {
|
||||
animation: p-overlay-mask-enter-animation 150ms forwards;
|
||||
}
|
||||
|
||||
.p-overlay-mask-leave {
|
||||
animation: p-overlay-mask-leave-animation 150ms forwards;
|
||||
}
|
||||
|
||||
@keyframes p-overlay-mask-enter-animation {
|
||||
from {
|
||||
background: transparent;
|
||||
}
|
||||
to {
|
||||
background: rgba(0,0,0,0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes p-overlay-mask-leave-animation {
|
||||
from {
|
||||
background: rgba(0,0,0,0.5);
|
||||
}
|
||||
to {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
@import './dialog';
|
||||
@import './button';
|
||||
|
||||
.p-confirmdialog .p-dialog-content {
|
||||
@apply flex items-center gap-4
|
||||
}
|
||||
|
||||
.p-confirmdialog-icon {
|
||||
@apply text-surface-700 dark:text-surface-0 text-[2rem] h-8 w-8
|
||||
}
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
@import './button';
|
||||
|
||||
.p-confirmpopup {
|
||||
@apply absolute mt-[10px] top-0 left-0
|
||||
border border-surface-200 dark:border-surface-700 rounded-md
|
||||
bg-surface-0 dark:bg-surface-900
|
||||
text-surface-700 dark:text-surface-0
|
||||
shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
|
||||
before:bottom-full before:left-5 before:h-0 before:w-0 before:absolute before:pointer-events-none
|
||||
before:border-[10px] before:-ms-[10px] before:border-transparent before:border-b-surface-200 dark:before:border-b-surface-700
|
||||
after:bottom-full after:left-5 after:h-0 after:w-0 after:absolute after:pointer-events-none
|
||||
after:border-[8px] after:-ms-[8px] after:border-transparent after:border-b-surface-0 dark:after:border-b-surface-900
|
||||
}
|
||||
|
||||
.p-confirmpopup-content {
|
||||
@apply flex items-center p-3 gap-4
|
||||
}
|
||||
|
||||
.p-confirmpopup-icon {
|
||||
@apply text-2xl w-6 h-6 text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-confirmpopup-footer {
|
||||
@apply flex justify-end gap-2 pt-0 px-3 pb-3
|
||||
}
|
||||
|
||||
.p-confirmpopup-footer button {
|
||||
@apply w-auto
|
||||
}
|
||||
|
||||
.p-confirmpopup-footer button:last-child {
|
||||
@apply m-0
|
||||
}
|
||||
|
||||
.p-confirmpopup-flipped {
|
||||
@apply -mt-[10px] mb-[10px]
|
||||
}
|
||||
|
||||
.p-confirmpopup-enter-from {
|
||||
@apply opacity-0 scale-y-75
|
||||
}
|
||||
|
||||
.p-confirmpopup-leave-to {
|
||||
@apply opacity-0
|
||||
}
|
||||
|
||||
.p-confirmpopup-enter-active {
|
||||
@apply [transition:transform_120ms_cubic-bezier(0,0,0.2,1),opacity_120ms_cubic-bezier(0,0,0.2,1)]
|
||||
}
|
||||
|
||||
.p-confirmpopup-leave-active {
|
||||
@apply transition-opacity duration-100 ease-linear
|
||||
}
|
||||
|
||||
.p-confirmpopup-flipped:after,
|
||||
.p-confirmpopup-flipped:before {
|
||||
@apply bottom-auto top-full
|
||||
}
|
||||
|
||||
.p-confirmpopup-flipped:after {
|
||||
@apply border-b-transparent border-t-surface-0 dark:border-t-surface-900
|
||||
}
|
||||
|
||||
.p-confirmpopup-flipped:before {
|
||||
@apply border-b-transparent border-t-surface-200 dark:border-t-surface-700
|
||||
}
|
||||
|
|
@ -1,101 +0,0 @@
|
|||
.p-contextmenu {
|
||||
@apply bg-surface-0 dark:bg-surface-900
|
||||
text-surface-700 dark:text-surface-0
|
||||
border border-surface-200 dark:border-surface-700
|
||||
rounded-md min-w-52 shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
|
||||
}
|
||||
|
||||
.p-contextmenu-root-list,
|
||||
.p-contextmenu-submenu {
|
||||
@apply m-0 p-1 list-none outline-none flex flex-col gap-[2px]
|
||||
}
|
||||
|
||||
.p-contextmenu-submenu {
|
||||
@apply absolute min-w-full z-10 rounded-md
|
||||
bg-surface-0 dark:bg-surface-900
|
||||
text-surface-700 dark:text-surface-0
|
||||
border border-surface-200 dark:border-surface-700
|
||||
shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
|
||||
}
|
||||
|
||||
.p-contextmenu-item {
|
||||
@apply relative
|
||||
}
|
||||
|
||||
.p-contextmenu-item-content {
|
||||
@apply transition-colors duration-200 rounded-sm text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-contextmenu-item-link {
|
||||
@apply cursor-pointer flex items-center no-underline overflow-hidden relative text-inherit
|
||||
px-3 py-2 gap-2 select-none outline-none
|
||||
}
|
||||
|
||||
.p-contextmenu-item-icon {
|
||||
@apply text-surface-400 dark:text-surface-500
|
||||
}
|
||||
|
||||
.p-contextmenu-submenu-icon {
|
||||
@apply text-surface-400 dark:text-surface-500 ms-auto text-sm w-[0.875rem] h-[0.875rem]
|
||||
}
|
||||
|
||||
.p-contextmenu-item.p-focus > .p-contextmenu-item-content {
|
||||
@apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-contextmenu-item.p-focus > .p-contextmenu-item-content .p-contextmenu-item-icon {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-contextmenu-item.p-focus > .p-contextmenu-item-content .p-contextmenu-submenu-icon {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover {
|
||||
@apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover .p-contextmenu-item-icon {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover .p-contextmenu-submenu-icon {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-contextmenu-item-active > .p-contextmenu-item-content {
|
||||
@apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-item-icon {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-submenu-icon {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-contextmenu-separator {
|
||||
@apply border-t border-surface-200 dark:border-surface-700
|
||||
}
|
||||
|
||||
.p-contextmenu-enter-from,
|
||||
.p-contextmenu-leave-active {
|
||||
@apply opacity-0
|
||||
}
|
||||
|
||||
.p-contextmenu-enter-active {
|
||||
@apply transition-opacity duration-[250ms]
|
||||
}
|
||||
|
||||
.p-contextmenu-mobile .p-contextmenu-submenu {
|
||||
@apply static shadow-none border-none ps-4 pe-0
|
||||
}
|
||||
|
||||
.p-contextmenu-mobile .p-contextmenu-submenu-icon {
|
||||
@apply transition-transform duration-200 rotate-90
|
||||
}
|
||||
|
||||
.p-contextmenu-mobile .p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-submenu-icon {
|
||||
@apply -rotate-90
|
||||
}
|
||||
|
|
@ -1,408 +0,0 @@
|
|||
@import './paginator';
|
||||
|
||||
.p-datatable {
|
||||
@apply relative
|
||||
}
|
||||
|
||||
.p-datatable-table {
|
||||
@apply border-spacing-0 w-full
|
||||
}
|
||||
|
||||
.p-datatable-scrollable > .p-datatable-table-container {
|
||||
@apply relative
|
||||
}
|
||||
|
||||
.p-datatable-scrollable-table > .p-datatable-thead {
|
||||
@apply top-0 z-10
|
||||
}
|
||||
|
||||
.p-datatable-scrollable-table > .p-datatable-frozen-tbody {
|
||||
@apply sticky z-10
|
||||
}
|
||||
|
||||
.p-datatable-scrollable-table > .p-datatable-tfoot {
|
||||
@apply bottom-0 z-10
|
||||
}
|
||||
|
||||
.p-datatable-scrollable .p-datatable-frozen-column {
|
||||
@apply sticky bg-surface-0 dark:bg-surface-900
|
||||
}
|
||||
|
||||
.p-datatable-scrollable th.p-datatable-frozen-column {
|
||||
@apply z-10
|
||||
}
|
||||
|
||||
.p-datatable-scrollable > .p-datatable-table-container > .p-datatable-table > .p-datatable-thead,
|
||||
.p-datatable-scrollable > .p-datatable-table-container > .p-virtualscroller > .p-datatable-table > .p-datatable-thead {
|
||||
@apply bg-surface-0 dark:bg-surface-900
|
||||
}
|
||||
|
||||
.p-datatable-scrollable > .p-datatable-table-container > .p-datatable-table > .p-datatable-tfoot,
|
||||
.p-datatable-scrollable > .p-datatable-table-container > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
|
||||
@apply bg-surface-0 dark:bg-surface-900
|
||||
}
|
||||
|
||||
.p-datatable-flex-scrollable {
|
||||
@apply flex flex-col h-full
|
||||
}
|
||||
|
||||
.p-datatable-flex-scrollable > .p-datatable-table-container {
|
||||
@apply flex flex-col flex-1 h-full
|
||||
}
|
||||
|
||||
.p-datatable-scrollable-table > .p-datatable-tbody > .p-datatable-row-group-header {
|
||||
@apply sticky z-10
|
||||
}
|
||||
|
||||
.p-datatable-resizable-table > .p-datatable-thead > tr > th,
|
||||
.p-datatable-resizable-table > .p-datatable-tfoot > tr > td,
|
||||
.p-datatable-resizable-table > .p-datatable-tbody > tr > td {
|
||||
@apply overflow-hidden whitespace-nowrap
|
||||
}
|
||||
|
||||
.p-datatable-resizable-table > .p-datatable-thead > tr > th.p-datatable-resizable-column:not(.p-datatable-frozen-column) {
|
||||
@apply bg-clip-padding relative
|
||||
}
|
||||
|
||||
.p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-datatable-resizable-column:last-child .p-datatable-column-resizer {
|
||||
@apply hidden
|
||||
}
|
||||
|
||||
.p-datatable-column-resizer {
|
||||
@apply block absolute top-0 end-0 m-0 w-2 h-full p-0 cursor-col-resize border border-transparent
|
||||
}
|
||||
|
||||
.p-datatable-column-header-content {
|
||||
@apply flex items-center gap-2
|
||||
}
|
||||
|
||||
.p-datatable-column-resize-indicator {
|
||||
@apply w-px absolute z-10 hidden bg-primary
|
||||
}
|
||||
|
||||
.p-datatable-row-reorder-indicator-up,
|
||||
.p-datatable-row-reorder-indicator-down {
|
||||
@apply absolute hidden
|
||||
}
|
||||
|
||||
.p-datatable-reorderable-column,
|
||||
.p-datatable-reorderable-row-handle {
|
||||
@apply cursor-move
|
||||
}
|
||||
|
||||
.p-datatable-mask {
|
||||
@apply absolute flex items-center justify-center z-20
|
||||
}
|
||||
|
||||
.p-datatable-inline-filter {
|
||||
@apply flex items-center w-full gap-2
|
||||
}
|
||||
|
||||
.p-datatable-inline-filter .p-datatable-filter-element-container {
|
||||
@apply flex-auto w-[1%]
|
||||
}
|
||||
|
||||
.p-datatable-filter-overlay {
|
||||
@apply bg-surface-0 dark:bg-surface-900 rounded-md min-w-52
|
||||
border border-surface-200 dark:border-surface-700
|
||||
text-surface-700 dark:text-surface-0
|
||||
shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
|
||||
}
|
||||
|
||||
.p-datatable-filter-constraint-list {
|
||||
@apply m-0 list-none flex flex-col p-1 gap-[2px]
|
||||
}
|
||||
|
||||
.p-datatable-filter-constraint {
|
||||
@apply px-3 py-2 rounded-sm cursor-pointer transition-colors duration-200 text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-datatable-filter-constraint-selected {
|
||||
@apply bg-highlight
|
||||
}
|
||||
|
||||
.p-datatable-filter-constraint:not(.p-datatable-filter-constraint-selected):not(.p-disabled):hover
|
||||
{
|
||||
@apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-datatable-filter-constraint:focus-visible {
|
||||
@apply outline-none bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-datatable-filter-constraint-selected:focus-visible {
|
||||
@apply bg-highlight-emphasis
|
||||
}
|
||||
|
||||
.p-datatable-filter-constraint-separator {
|
||||
@apply border-t border-surface-200 dark:border-surface-700
|
||||
}
|
||||
|
||||
.p-datatable-popover-filter {
|
||||
@apply inline-flex ms-auto
|
||||
}
|
||||
|
||||
.p-datatable-filter-overlay-popover {
|
||||
@apply flex flex-col gap-2
|
||||
bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
|
||||
border border-surface-200 dark:border-surface-700 rounded-md p-3 min-w-52
|
||||
shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
|
||||
}
|
||||
|
||||
.p-datatable-filter-operator-dropdown {
|
||||
@apply w-full
|
||||
}
|
||||
|
||||
.p-datatable-filter-rule-list,
|
||||
.p-datatable-filter-rule {
|
||||
@apply flex flex-col gap-2
|
||||
}
|
||||
|
||||
.p-datatable-filter-rule {
|
||||
@apply border-b border-surface-200 dark:border-surface-700 last:border-b-0 pb-2 last:pb-0
|
||||
}
|
||||
|
||||
.p-datatable-filter-add-rule-button {
|
||||
@apply w-full
|
||||
}
|
||||
|
||||
.p-datatable-filter-remove-rule-button {
|
||||
@apply w-full
|
||||
}
|
||||
|
||||
.p-datatable-filter-buttonbar {
|
||||
@apply p-0 flex items-center justify-between
|
||||
}
|
||||
|
||||
.p-datatable-virtualscroller-spacer {
|
||||
@apply flex
|
||||
}
|
||||
|
||||
.p-datatable .p-virtualscroller .p-virtualscroller-loading {
|
||||
@apply !transform-none min-h-0 sticky top-0 start-0
|
||||
}
|
||||
|
||||
.p-datatable-paginator-top {
|
||||
@apply border-b border-surface-200 dark:border-surface-700
|
||||
}
|
||||
|
||||
.p-datatable-paginator-bottom {
|
||||
@apply border-t border-surface-200 dark:border-surface-700
|
||||
}
|
||||
|
||||
.p-datatable-header {
|
||||
@apply py-3 px-4 border-b border-surface-200 dark:border-surface-700
|
||||
bg-surface-0 dark:bg-surface-900
|
||||
text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-datatable-footer {
|
||||
@apply py-3 px-4 border-b border-surface-200 dark:border-surface-700
|
||||
bg-surface-0 dark:bg-surface-900
|
||||
text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-datatable-header-cell {
|
||||
@apply py-3 px-4 font-normal text-start transition-colors duration-200
|
||||
border-b border-surface-200 dark:border-surface-700
|
||||
bg-surface-0 dark:bg-surface-900
|
||||
text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-datatable-column-title {
|
||||
@apply font-semibold
|
||||
}
|
||||
|
||||
.p-datatable-tbody > tr {
|
||||
@apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 transition-colors duration-200
|
||||
}
|
||||
|
||||
.p-datatable-tbody > tr > td {
|
||||
@apply text-start py-3 px-4 border-b border-surface-200 dark:border-surface-800
|
||||
}
|
||||
|
||||
.p-datatable-hoverable .p-datatable-tbody > tr:not(.p-datatable-row-selected):hover {
|
||||
@apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-datatable-tbody > tr.p-datatable-row-selected {
|
||||
@apply bg-highlight
|
||||
}
|
||||
|
||||
.p-datatable-tbody > tr:has(+ .p-datatable-row-selected) > td {
|
||||
@apply border-b-primary-100 dark:border-b-primary-900
|
||||
}
|
||||
|
||||
.p-datatable-tbody > tr.p-datatable-row-selected > td {
|
||||
@apply border-b-primary-100 dark:border-b-primary-900
|
||||
}
|
||||
|
||||
.p-datatable-tbody > tr:focus-visible,
|
||||
.p-datatable-tbody > tr.p-datatable-contextmenu-row-selected {
|
||||
@apply outline outline-1 -outline-offset-1 outline-primary
|
||||
}
|
||||
|
||||
.p-datatable-tfoot > tr > td {
|
||||
@apply text-start py-3 px-4 border-b border-surface-200 dark:border-surface-800
|
||||
bg-surface-0 dark:bg-surface-900
|
||||
text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-datatable-column-footer {
|
||||
@apply font-semibold
|
||||
}
|
||||
|
||||
.p-datatable-sortable-column {
|
||||
@apply cursor-pointer select-none focus-visible:outline focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-primary
|
||||
}
|
||||
|
||||
.p-datatable-column-title,
|
||||
.p-datatable-sort-icon,
|
||||
.p-datatable-sort-badge {
|
||||
@apply align-middle
|
||||
}
|
||||
|
||||
.p-datatable-sort-icon {
|
||||
@apply text-surface-500 dark:text-surface-400 transition-colors duration-200
|
||||
}
|
||||
|
||||
.p-datatable-sortable-column:not(.p-datatable-column-sorted):hover {
|
||||
@apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-datatable-sortable-column:not(.p-datatable-column-sorted):hover .p-datatable-sort-icon {
|
||||
@apply text-surface-600 dark:text-surface-300
|
||||
}
|
||||
|
||||
.p-datatable-column-sorted {
|
||||
@apply bg-highlight
|
||||
}
|
||||
|
||||
.p-datatable-column-sorted .p-datatable-sort-icon {
|
||||
@apply bg-highlight
|
||||
}
|
||||
|
||||
.p-datatable-hoverable .p-datatable-selectable-row {
|
||||
@apply cursor-pointer
|
||||
}
|
||||
|
||||
.p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
|
||||
@apply shadow-[inset_0_2px_0_0_theme(colors.primary)]
|
||||
}
|
||||
|
||||
.p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
|
||||
@apply shadow-[inset_0_-2px_0_0_theme(colors.primary)]
|
||||
}
|
||||
|
||||
.p-datatable-loading-icon {
|
||||
@apply text-[2rem] w-8 h-8
|
||||
}
|
||||
|
||||
.p-datatable-gridlines .p-datatable-header {
|
||||
@apply border-t border-x
|
||||
}
|
||||
|
||||
.p-datatable-gridlines .p-datatable-footer {
|
||||
@apply border-b border-x
|
||||
}
|
||||
|
||||
.p-datatable-gridlines .p-datatable-paginator-top {
|
||||
@apply border-t border-x
|
||||
}
|
||||
|
||||
.p-datatable-gridlines .p-datatable-paginator-bottom {
|
||||
@apply border-b border-x
|
||||
}
|
||||
|
||||
.p-datatable-gridlines .p-datatable-thead > tr > th {
|
||||
@apply border-t border-x last:border
|
||||
}
|
||||
|
||||
.p-datatable-gridlines .p-datatable-tbody > tr > td {
|
||||
@apply border-t border-s last:border-r
|
||||
}
|
||||
|
||||
.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
|
||||
@apply border-y border-s last:border
|
||||
}
|
||||
|
||||
.p-datatable-gridlines .p-datatable-tfoot > tr > td {
|
||||
@apply border-y border-s last:border
|
||||
}
|
||||
|
||||
.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
|
||||
@apply border-b border-s last:border-r
|
||||
}
|
||||
|
||||
.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
|
||||
@apply border-b border-s last:border-r
|
||||
}
|
||||
|
||||
.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
|
||||
@apply border-s last:border-r
|
||||
}
|
||||
|
||||
.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
|
||||
@apply bg-surface-50 dark:bg-surface-950
|
||||
}
|
||||
|
||||
.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-datatable-row-selected {
|
||||
@apply bg-highlight
|
||||
}
|
||||
|
||||
.p-datatable.p-datatable-sm .p-datatable-header {
|
||||
@apply py-1 px-2
|
||||
}
|
||||
|
||||
.p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
|
||||
@apply py-1 px-2
|
||||
}
|
||||
|
||||
.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
|
||||
@apply py-1 px-2
|
||||
}
|
||||
|
||||
.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
|
||||
@apply py-1 px-2
|
||||
}
|
||||
|
||||
.p-datatable.p-datatable-sm .p-datatable-footer {
|
||||
@apply py-1 px-2
|
||||
}
|
||||
|
||||
.p-datatable.p-datatable-lg .p-datatable-header {
|
||||
@apply py-4 px-5
|
||||
}
|
||||
|
||||
.p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
|
||||
@apply py-4 px-5
|
||||
}
|
||||
|
||||
.p-datatable.p-datatable-lg .p-datatable-tbody>tr>td {
|
||||
@apply py-4 px-5
|
||||
}
|
||||
|
||||
.p-datatable.p-datatable-lg .p-datatable-tfoot>tr>td {
|
||||
@apply py-4 px-5
|
||||
}
|
||||
|
||||
.p-datatable.p-datatable-lg .p-datatable-footer {
|
||||
@apply py-4 px-5
|
||||
}
|
||||
|
||||
.p-datatable-row-toggle-button {
|
||||
@apply inline-flex items-center justify-center overflow-hidden relative w-7 h-7 cursor-pointer select-none
|
||||
transition-colors duration-200 rounded-full border-none bg-transparent
|
||||
text-surface-500 enabled:hover:bg-surface-100 enabled:hover:text-surface-700
|
||||
dark:text-surface-400 dark:enabled:hover:bg-surface-800 dark:enabled:hover:text-surface-0
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
|
||||
|
||||
}
|
||||
|
||||
.p-datatable-tbody > tr.p-datatable-row-selected .p-datatable-row-toggle-button:hover {
|
||||
@apply bg-surface-0 dark:bg-surface-900 text-primary
|
||||
}
|
||||
|
||||
.p-datatable-row-toggle-icon:dir(rtl) {
|
||||
@apply rotate-180
|
||||
}
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
@import './paginator';
|
||||
|
||||
.p-dataview {
|
||||
@apply border-none
|
||||
}
|
||||
|
||||
.p-dataview-header {
|
||||
@apply py-3 px-4 border-b border-surface-200 dark:border-surface-700
|
||||
bg-surface-0 dark:bg-surface-900
|
||||
text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-dataview-content {
|
||||
@apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-dataview-footer {
|
||||
@apply py-3 px-4 border-t border-surface-200 dark:border-surface-700
|
||||
bg-surface-0 dark:bg-surface-900
|
||||
text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-dataview-paginator-top {
|
||||
@apply border-b border-surface-200 dark:border-surface-700
|
||||
}
|
||||
|
||||
.p-dataview-paginator-bottom {
|
||||
@apply border-t border-surface-200 dark:border-surface-700
|
||||
}
|
||||
|
|
@ -1,211 +0,0 @@
|
|||
@import './button';
|
||||
@import './inputtext';
|
||||
|
||||
.p-datepicker {
|
||||
@apply inline-flex max-w-full
|
||||
}
|
||||
|
||||
.p-datepicker-input {
|
||||
@apply flex-auto w-[1%]
|
||||
}
|
||||
|
||||
.p-datepicker:has(.p-datepicker-dropdown) .p-datepicker-input {
|
||||
@apply rounded-e-none
|
||||
}
|
||||
|
||||
.p-datepicker-dropdown {
|
||||
@apply inline-flex items-center justify-center overflow-hidden relative cursor-pointer select-none
|
||||
w-10 rounded-e-md border border-s-0 border-surface-300 dark:border-surface-700
|
||||
bg-surface-100 enabled:hover:bg-surface-200 enabled:active:bg-surface-300
|
||||
text-surface-600 enabled:hover:text-surface-700 enabled:active:text-surface-800
|
||||
dark:bg-surface-800 dark:enabled:hover:bg-surface-700 dark:enabled:active:bg-surface-600
|
||||
dark:text-surface-300 dark:enabled:hover:text-surface-200 dark:enabled:active:text-surface-100
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
|
||||
transition-colors duration-200
|
||||
}
|
||||
|
||||
.p-datepicker:has(.p-datepicker-input-icon-container) {
|
||||
@apply relative
|
||||
}
|
||||
|
||||
.p-datepicker:has(.p-datepicker-input-icon-container) .p-datepicker-input {
|
||||
@apply pe-10
|
||||
}
|
||||
|
||||
.p-datepicker-input-icon-container {
|
||||
@apply cursor-pointer absolute top-1/2 end-3 -mt-2 text-surface-400
|
||||
}
|
||||
|
||||
.p-datepicker-fluid {
|
||||
@apply flex
|
||||
}
|
||||
|
||||
.p-datepicker-fluid .p-datepicker-input {
|
||||
@apply w-[1%]
|
||||
}
|
||||
|
||||
.p-datepicker .p-datepicker-panel {
|
||||
@apply min-w-full
|
||||
}
|
||||
|
||||
.p-datepicker-panel {
|
||||
@apply w-auto p-3 rounded-md
|
||||
border border-surface-200 dark:border-surface-700
|
||||
bg-surface-0 dark:bg-surface-900
|
||||
text-surface-700 dark:text-surface-0
|
||||
shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
|
||||
}
|
||||
|
||||
.p-datepicker-panel-inline {
|
||||
@apply inline-block overflow-x-auto shadow-none
|
||||
}
|
||||
|
||||
.p-datepicker-header {
|
||||
@apply flex items-center justify-between pt-0 px-0 pb-2 font-medium gap-2
|
||||
bg-surface-0 dark:bg-surface-900
|
||||
text-surface-700 dark:text-surface-0
|
||||
border-b border-surface-200 dark:border-surface-700
|
||||
}
|
||||
|
||||
.p-datepicker-next-button:dir(rtl) {
|
||||
@apply order-[-1]
|
||||
}
|
||||
.p-datepicker-prev-button:dir(rtl) {
|
||||
@apply order-1
|
||||
}
|
||||
|
||||
.p-datepicker-title {
|
||||
@apply flex items-center justify-between gap-2 font-medium
|
||||
}
|
||||
|
||||
.p-datepicker-select-year,
|
||||
.p-datepicker-select-month {
|
||||
@apply border-none bg-transparent m-0 cursor-pointer font-medium transition-colors duration-200
|
||||
py-1 px-2 rounded-md text-surface-700 dark:text-surface-0
|
||||
enabled:hover:bg-surface-100 enabled:hover:text-surface-800
|
||||
dark:enabled:hover:bg-surface-800 dark:enabled:hover:text-surface-0
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
|
||||
}
|
||||
|
||||
.p-datepicker-calendar-container {
|
||||
@apply flex
|
||||
}
|
||||
|
||||
.p-datepicker-calendar-container .p-datepicker-calendar {
|
||||
@apply flex-auto border-s border-surface-200 dark:border-surface-700 gap-3
|
||||
first:ps-0 first:border-s-0 last:pe-0
|
||||
}
|
||||
|
||||
.p-datepicker-day-view {
|
||||
@apply w-full border-collapse text-base mt-2 mx-0 mb-0
|
||||
}
|
||||
|
||||
.p-datepicker-weekday-cell {
|
||||
@apply p-1
|
||||
}
|
||||
|
||||
.p-datepicker-weekday {
|
||||
@apply font-medium text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-datepicker-day-cell {
|
||||
@apply p-1
|
||||
}
|
||||
|
||||
.p-datepicker-day {
|
||||
@apply flex items-center justify-center cursor-pointer my-0 mx-auto overflow-hidden relative w-8 h-8
|
||||
rounded-full p-1 transition-colors duration-200 border border-transparent text-surface-700 dark:text-surface-0
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
|
||||
}
|
||||
|
||||
.p-datepicker-day:not(.p-datepicker-day-selected):not(.p-disabled):hover {
|
||||
@apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-datepicker-day-selected {
|
||||
@apply bg-primary text-primary-contrast
|
||||
}
|
||||
|
||||
.p-datepicker-day-selected-range {
|
||||
@apply bg-highlight
|
||||
}
|
||||
|
||||
.p-datepicker-today > .p-datepicker-day {
|
||||
@apply bg-surface-200 text-surface-900 dark:bg-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-datepicker-today > .p-datepicker-day-selected {
|
||||
@apply bg-primary text-primary-contrast
|
||||
}
|
||||
|
||||
.p-datepicker-today > .p-datepicker-day-selected-range {
|
||||
@apply bg-highlight
|
||||
}
|
||||
|
||||
.p-datepicker-weeknumber {
|
||||
@apply text-center
|
||||
}
|
||||
|
||||
.p-datepicker-month-view {
|
||||
@apply mt-2 mb-0 mx-0
|
||||
}
|
||||
|
||||
.p-datepicker-month {
|
||||
@apply w-1/3 inline-flex items-center justify-center cursor-pointer overflow-hidden relative
|
||||
p-[0.375rem] transition-colors duration-200 rounded-md text-surface-700 dark:text-surface-0
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
|
||||
}
|
||||
|
||||
.p-datepicker-month:not(.p-disabled):not(.p-datepicker-month-selected):hover {
|
||||
@apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-datepicker-month-selected {
|
||||
@apply bg-primary text-primary-contrast
|
||||
}
|
||||
|
||||
.p-datepicker-year-view {
|
||||
@apply mt-2 mb-0 mx-0
|
||||
}
|
||||
|
||||
.p-datepicker-year {
|
||||
@apply w-1/2 inline-flex items-center justify-center cursor-pointer overflow-hidden relative
|
||||
p-[0.375rem] transition-colors duration-200 rounded-md text-surface-700 dark:text-surface-0
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
|
||||
}
|
||||
|
||||
.p-datepicker-year:not(.p-disabled):not(.p-datepicker-year-selected):hover {
|
||||
@apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-datepicker-year-selected {
|
||||
@apply bg-primary text-primary-contrast
|
||||
}
|
||||
|
||||
.p-datepicker-buttonbar {
|
||||
@apply flex justify-between items-center pt-2 pb-0 px-0 border-t border-surface-200 dark:border-surface-700
|
||||
}
|
||||
|
||||
.p-datepicker-buttonbar .p-button {
|
||||
@apply w-auto
|
||||
}
|
||||
|
||||
.p-datepicker-time-picker {
|
||||
@apply flex items-center justify-center border-t border-surface-200 dark:border-surface-700 p-0 gap-2
|
||||
}
|
||||
|
||||
.p-datepicker-calendar-container + .p-datepicker-time-picker {
|
||||
@apply pt-2 pb-0 px-0
|
||||
}
|
||||
|
||||
.p-datepicker-time-picker > div {
|
||||
@apply flex items-center flex-col gap-1
|
||||
}
|
||||
|
||||
.p-datepicker-time-picker span {
|
||||
@apply text-base
|
||||
}
|
||||
|
||||
.p-datepicker-timeonly .p-datepicker-time-picker {
|
||||
@apply border-t-0
|
||||
}
|
||||
|
|
@ -1,125 +0,0 @@
|
|||
@import './button';
|
||||
|
||||
.p-dialog {
|
||||
@apply max-h-[90%] scale-100 rounded-xl
|
||||
border border-surface-200 dark:border-surface-700
|
||||
bg-surface-0 dark:bg-surface-900
|
||||
text-surface-700 dark:text-surface-0
|
||||
shadow-[0_20px_25px_-5px_rgba(0,0,0,0.1),0_8px_10px_-6px_rgba(0,0,0,0.1)]
|
||||
}
|
||||
|
||||
.p-dialog-content {
|
||||
@apply overflow-y-auto pt-0 px-5 pb-5
|
||||
}
|
||||
|
||||
.p-dialog-header {
|
||||
@apply flex items-center justify-between shrink-0 p-5
|
||||
}
|
||||
|
||||
.p-dialog-title {
|
||||
@apply font-semibold text-xl
|
||||
}
|
||||
|
||||
.p-dialog-footer {
|
||||
@apply shrink-0 pt-0 px-5 pb-5 flex justify-end gap-2
|
||||
}
|
||||
|
||||
.p-dialog-header-actions {
|
||||
@apply flex items-center gap-2
|
||||
}
|
||||
|
||||
.p-dialog-enter-active {
|
||||
@apply transition-all duration-150 ease-[cubic-bezier(0,0,0.2,1)]
|
||||
}
|
||||
|
||||
.p-dialog-leave-active {
|
||||
@apply transition-all duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]
|
||||
}
|
||||
|
||||
.p-dialog-enter-from,
|
||||
.p-dialog-leave-to {
|
||||
@apply opacity-0 scale-75
|
||||
}
|
||||
|
||||
.p-dialog-top .p-dialog,
|
||||
.p-dialog-bottom .p-dialog,
|
||||
.p-dialog-left .p-dialog,
|
||||
.p-dialog-right .p-dialog,
|
||||
.p-dialog-topleft .p-dialog,
|
||||
.p-dialog-topright .p-dialog,
|
||||
.p-dialog-bottomleft .p-dialog,
|
||||
.p-dialog-bottomright .p-dialog {
|
||||
@apply m-3 [transform:translate3d(0,0,0)]
|
||||
}
|
||||
|
||||
.p-dialog-top .p-dialog-enter-active,
|
||||
.p-dialog-top .p-dialog-leave-active,
|
||||
.p-dialog-bottom .p-dialog-enter-active,
|
||||
.p-dialog-bottom .p-dialog-leave-active,
|
||||
.p-dialog-left .p-dialog-enter-active,
|
||||
.p-dialog-left .p-dialog-leave-active,
|
||||
.p-dialog-right .p-dialog-enter-active,
|
||||
.p-dialog-right .p-dialog-leave-active,
|
||||
.p-dialog-topleft .p-dialog-enter-active,
|
||||
.p-dialog-topleft .p-dialog-leave-active,
|
||||
.p-dialog-topright .p-dialog-enter-active,
|
||||
.p-dialog-topright .p-dialog-leave-active,
|
||||
.p-dialog-bottomleft .p-dialog-enter-active,
|
||||
.p-dialog-bottomleft .p-dialog-leave-active,
|
||||
.p-dialog-bottomright .p-dialog-enter-active,
|
||||
.p-dialog-bottomright .p-dialog-leave-active {
|
||||
@apply transition-all duration-300 ease-out
|
||||
}
|
||||
|
||||
.p-dialog-top .p-dialog-enter-from,
|
||||
.p-dialog-top .p-dialog-leave-to {
|
||||
@apply [transform:translate3d(0,-100%,0)]
|
||||
}
|
||||
|
||||
.p-dialog-bottom .p-dialog-enter-from,
|
||||
.p-dialog-bottom .p-dialog-leave-to {
|
||||
@apply [transform:translate3d(0,100%,0)]
|
||||
}
|
||||
|
||||
.p-dialog-left .p-dialog-enter-from,
|
||||
.p-dialog-left .p-dialog-leave-to,
|
||||
.p-dialog-topleft .p-dialog-enter-from,
|
||||
.p-dialog-topleft .p-dialog-leave-to,
|
||||
.p-dialog-bottomleft .p-dialog-enter-from,
|
||||
.p-dialog-bottomleft .p-dialog-leave-to {
|
||||
@apply [transform:translate3d(-100%,0,0)]
|
||||
}
|
||||
|
||||
.p-dialog-right .p-dialog-enter-from,
|
||||
.p-dialog-right .p-dialog-leave-to,
|
||||
.p-dialog-topright .p-dialog-enter-from,
|
||||
.p-dialog-topright .p-dialog-leave-to,
|
||||
.p-dialog-bottomright .p-dialog-enter-from,
|
||||
.p-dialog-bottomright .p-dialog-leave-to {
|
||||
@apply [transform:translate3d(100%,0,0)]
|
||||
}
|
||||
|
||||
.p-dialog-left:dir(rtl) .p-dialog-enter-from,
|
||||
.p-dialog-left:dir(rtl) .p-dialog-leave-to,
|
||||
.p-dialog-topleft:dir(rtl) .p-dialog-enter-from,
|
||||
.p-dialog-topleft:dir(rtl) .p-dialog-leave-to,
|
||||
.p-dialog-bottomleft:dir(rtl) .p-dialog-enter-from,
|
||||
.p-dialog-bottomleft:dir(rtl) .p-dialog-leave-to {
|
||||
@apply [transform:translate3d(100%,0,0)]
|
||||
}
|
||||
.p-dialog-right:dir(rtl) .p-dialog-enter-from,
|
||||
.p-dialog-right:dir(rtl) .p-dialog-leave-to,
|
||||
.p-dialog-topright:dir(rtl) .p-dialog-enter-from,
|
||||
.p-dialog-topright:dir(rtl) .p-dialog-leave-to,
|
||||
.p-dialog-bottomright:dir(rtl) .p-dialog-enter-from,
|
||||
.p-dialog-bottomright:dir(rtl) .p-dialog-leave-to {
|
||||
@apply [transform:translate3d(-100%,0,0)]
|
||||
}
|
||||
|
||||
.p-dialog-maximized {
|
||||
@apply !w-screen !h-screen top-0 start-0 max-h-full rounded-none
|
||||
}
|
||||
|
||||
.p-dialog-maximized .p-dialog-content {
|
||||
@apply flex-grow
|
||||
}
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
.p-divider-horizontal {
|
||||
@apply flex w-full relative items-center my-4 mx-0 py-0 px-4
|
||||
before:absolute before:block before:top-1/2 before:start-0 before:w-full
|
||||
before:border-t before:border-surface-200 dark:before:border-surface-700
|
||||
}
|
||||
|
||||
.p-divider-horizontal .p-divider-content {
|
||||
@apply py-0 px-2
|
||||
}
|
||||
|
||||
.p-divider-vertical {
|
||||
@apply min-h-full flex relative justify-center my-0 mx-4 py-2 px-0
|
||||
before:absolute before:block before:top-0 before:start-1/2 before:h-full
|
||||
before:border-s before:border-surface-200 before:dark:border-surface-700
|
||||
}
|
||||
|
||||
.p-divider.p-divider-vertical .p-divider-content {
|
||||
@apply py-2 px-0
|
||||
}
|
||||
|
||||
.p-divider-content {
|
||||
@apply z-10 bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-divider-solid.p-divider-horizontal:before {
|
||||
@apply border-solid
|
||||
}
|
||||
|
||||
.p-divider-solid.p-divider-vertical:before {
|
||||
@apply border-solid
|
||||
}
|
||||
|
||||
.p-divider-dashed.p-divider-horizontal:before {
|
||||
@apply border-dashed
|
||||
}
|
||||
|
||||
.p-divider-dashed.p-divider-vertical:before {
|
||||
@apply border-dashed
|
||||
}
|
||||
|
||||
.p-divider-dotted.p-divider-horizontal:before {
|
||||
@apply border-dotted
|
||||
}
|
||||
|
||||
.p-divider-dotted.p-divider-vertical:before {
|
||||
@apply border-dotted
|
||||
}
|
||||
|
||||
.p-divider-left:dir(rtl),
|
||||
.p-divider-right:dir(rtl) {
|
||||
@apply flex-row-reverse
|
||||
}
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
.p-dock {
|
||||
@apply absolute z-10 flex justify-center items-center pointer-events-none
|
||||
}
|
||||
|
||||
.p-dock-list-container {
|
||||
@apply flex pointer-events-auto bg-white/10 border border-white/10 p-2 rounded-xl
|
||||
}
|
||||
|
||||
.p-dock-list {
|
||||
@apply m-0 p-0 list-none flex items-center justify-center outline-none
|
||||
}
|
||||
|
||||
.p-dock-item {
|
||||
@apply transition-all duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] will-change-transform p-2 rounded-md
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
|
||||
}
|
||||
|
||||
.p-dock-item-link {
|
||||
@apply flex flex-col items-center justify-center relative cursor-default w-12 h-12
|
||||
}
|
||||
|
||||
.p-dock-top {
|
||||
@apply start-0 top-0 w-full
|
||||
}
|
||||
|
||||
.p-dock-top .p-dock-item {
|
||||
@apply origin-[center_top]
|
||||
}
|
||||
|
||||
.p-dock-bottom {
|
||||
@apply start-0 bottom-0 w-full
|
||||
}
|
||||
|
||||
.p-dock-bottom .p-dock-item {
|
||||
@apply origin-[center_bottom]
|
||||
}
|
||||
|
||||
.p-dock-right {
|
||||
@apply end-0 top-0 h-full
|
||||
}
|
||||
|
||||
.p-dock-right .p-dock-item {
|
||||
@apply origin-[center_right]
|
||||
}
|
||||
|
||||
.p-dock-right .p-dock-list {
|
||||
@apply flex-col
|
||||
}
|
||||
|
||||
.p-dock-left {
|
||||
@apply start-0 top-0 h-full
|
||||
}
|
||||
|
||||
.p-dock-left .p-dock-item {
|
||||
@apply origin-[center_left]
|
||||
}
|
||||
|
||||
.p-dock-left .p-dock-list {
|
||||
@apply flex-col
|
||||
}
|
||||
|
||||
.p-dock-mobile.p-dock-top .p-dock-list-container,
|
||||
.p-dock-mobile.p-dock-bottom .p-dock-list-container {
|
||||
@apply overflow-x-auto w-full
|
||||
}
|
||||
|
||||
.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list,
|
||||
.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
|
||||
@apply mt-0 mx-auto
|
||||
}
|
||||
|
||||
.p-dock-mobile.p-dock-left .p-dock-list-container,
|
||||
.p-dock-mobile.p-dock-right .p-dock-list-container {
|
||||
@apply overflow-y-auto h-full
|
||||
}
|
||||
|
||||
.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list,
|
||||
.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
|
||||
@apply mt-auto mx-0
|
||||
}
|
||||
|
||||
.p-dock-mobile .p-dock-list .p-dock-item {
|
||||
@apply transform-none m-0
|
||||
}
|
||||
|
|
@ -1,94 +0,0 @@
|
|||
@import './button';
|
||||
|
||||
.p-drawer {
|
||||
@apply flex flex-col pointer-events-auto relative transition-transform duration-300
|
||||
border border-surface-200 dark:border-surface-700
|
||||
bg-surface-0 dark:bg-surface-900
|
||||
text-surface-700 dark:text-surface-0
|
||||
shadow-[0_20px_25px_-5px_rgba(0,0,0,0.1),0_8px_10px_-6px_rgba(0,0,0,0.1)]
|
||||
}
|
||||
|
||||
.p-drawer {
|
||||
@apply [transform:translate3d(0,0,0)]
|
||||
}
|
||||
|
||||
.p-drawer-content {
|
||||
@apply overflow-y-auto flex-grow pt-0 pb-5 px-5
|
||||
}
|
||||
|
||||
.p-drawer-header {
|
||||
@apply flex items-center justify-between flex-shrink-0 p-5
|
||||
}
|
||||
|
||||
.p-drawer-footer {
|
||||
@apply p-5
|
||||
}
|
||||
|
||||
.p-drawer-title {
|
||||
@apply font-semibold text-2xl
|
||||
}
|
||||
|
||||
.p-drawer-full .p-drawer {
|
||||
@apply transition-none transform-none w-screen h-screen max-h-full top-0 left-0
|
||||
}
|
||||
|
||||
.p-drawer-left .p-drawer-enter-from,
|
||||
.p-drawer-left .p-drawer-leave-to {
|
||||
@apply -translate-x-full
|
||||
}
|
||||
|
||||
.p-drawer-right .p-drawer-enter-from,
|
||||
.p-drawer-right .p-drawer-leave-to {
|
||||
@apply translate-x-full
|
||||
}
|
||||
|
||||
.p-drawer-top .p-drawer-enter-from,
|
||||
.p-drawer-top .p-drawer-leave-to {
|
||||
@apply -translate-y-full
|
||||
}
|
||||
|
||||
.p-drawer-bottom .p-drawer-enter-from,
|
||||
.p-drawer-bottom .p-drawer-leave-to {
|
||||
@apply translate-y-full
|
||||
}
|
||||
|
||||
.p-drawer-full .p-drawer-enter-from,
|
||||
.p-drawer-full .p-drawer-leave-to {
|
||||
@apply opacity-0
|
||||
}
|
||||
|
||||
.p-drawer-full .p-drawer-enter-active,
|
||||
.p-drawer-full .p-drawer-leave-active {
|
||||
@apply transition-opacity animate-duration-400 ease-[cubic-bezier(0.25,0.8,0.25,1)]
|
||||
}
|
||||
|
||||
.p-drawer-left .p-drawer {
|
||||
@apply w-80 h-full border-r
|
||||
}
|
||||
|
||||
.p-drawer-right .p-drawer {
|
||||
@apply w-80 h-full border-s
|
||||
}
|
||||
|
||||
.p-drawer-top .p-drawer {
|
||||
@apply h-40 w-full border-b
|
||||
}
|
||||
|
||||
.p-drawer-bottom .p-drawer {
|
||||
@apply h-40 w-full border-t
|
||||
}
|
||||
|
||||
.p-drawer-left .p-drawer-content,
|
||||
.p-drawer-right .p-drawer-content,
|
||||
.p-drawer-top .p-drawer-content,
|
||||
.p-drawer-bottom .p-drawer-content {
|
||||
@apply w-full h-full
|
||||
}
|
||||
|
||||
.p-drawer-open {
|
||||
@apply flex
|
||||
}
|
||||
|
||||
.p-overlay-mask:dir(rtl) {
|
||||
@apply flex-row-reverse;
|
||||
}
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
.p-fieldset {
|
||||
@apply border border-surface-200 dark:border-surface-700 rounded-md
|
||||
bg-surface-0 dark:bg-surface-900
|
||||
text-surface-700 dark:text-surface-0
|
||||
px-[1.125rem] pt-0 pb-[1.125rem]
|
||||
}
|
||||
|
||||
.p-fieldset-legend {
|
||||
@apply border border-transparent rounded-md px-3 py-2
|
||||
transition-colors duration-200
|
||||
}
|
||||
|
||||
.p-fieldset-toggleable > .p-fieldset-legend {
|
||||
@apply p-0
|
||||
}
|
||||
|
||||
.p-fieldset-toggle-button {
|
||||
@apply select-none overflow-hidden relative
|
||||
flex items-center justify-center gap-2
|
||||
px-3 py-2
|
||||
border-none rounded-md
|
||||
bg-surface-0 dark:bg-surface-900
|
||||
hover:bg-surface-100 dark:hover:bg-surface-800
|
||||
text-surface-700 dark:text-surface-0
|
||||
hover:text-surface-800 dark:hover:text-surface-0
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
|
||||
transition-colors duration-200
|
||||
}
|
||||
|
||||
.p-fieldset-legend-label {
|
||||
@apply font-semibold;
|
||||
}
|
||||
|
||||
.p-fieldset-toggle-icon {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
transition-colors duration-200
|
||||
}
|
||||
|
||||
.p-fieldset-toggle-button:hover .p-fieldset-toggle-icon {
|
||||
@apply text-surface-600 dark:text-surface-300
|
||||
}
|
||||
|
||||
.p-fieldset .p-fieldset-content {
|
||||
@apply p-0
|
||||
}
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
@import './button';
|
||||
@import './message';
|
||||
@import './progressbar';
|
||||
|
||||
.p-fileupload input[type="file"] {
|
||||
@apply hidden
|
||||
}
|
||||
|
||||
.p-fileupload-advanced {
|
||||
@apply border border-surface-200 dark:border-surface-700 rounded-md
|
||||
bg-surface-0 dark:bg-surface-900
|
||||
text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-fileupload-header {
|
||||
@apply flex items-center p-[1.125rem] gap-2 text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-fileupload-content {
|
||||
@apply border border-transparent relative transition-colors duration-200 pt-0 px-[1.125rem] pb-[1.125rem]
|
||||
}
|
||||
|
||||
.p-fileupload-content .p-progressbar {
|
||||
@apply w-full absolute top-0 start-0 h-1
|
||||
}
|
||||
|
||||
.p-fileupload-file-list {
|
||||
@apply flex flex-col gap-2 mt-[1.125rem]
|
||||
}
|
||||
|
||||
.p-fileupload-file {
|
||||
@apply flex flex-wrap items-center p-4 border-b border-surface-200 dark:border-surface-700 gap-2 last:border-b-0
|
||||
}
|
||||
|
||||
.p-fileupload-file-info {
|
||||
@apply flex flex-col gap-2
|
||||
}
|
||||
|
||||
.p-fileupload-file-thumbnail {
|
||||
@apply flex-shrink-0
|
||||
}
|
||||
|
||||
.p-fileupload-file-actions {
|
||||
@apply ms-auto
|
||||
}
|
||||
|
||||
.p-fileupload-highlight {
|
||||
@apply border border-dashed border-primary
|
||||
}
|
||||
|
||||
.p-fileupload-advanced .p-message {
|
||||
@apply mt-0
|
||||
}
|
||||
|
||||
.p-fileupload-basic {
|
||||
@apply flex flex-wrap items-center justify-center gap-2
|
||||
}
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
.p-floatlabel {
|
||||
@apply block relative
|
||||
}
|
||||
|
||||
.p-floatlabel label {
|
||||
@apply absolute pointer-events-none top-1/2 -translate-y-1/2 transition-all duration-200 ease-out leading-none font-medium
|
||||
start-3 text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-floatlabel:has(.p-textarea) label {
|
||||
@apply top-2 translate-y-0
|
||||
}
|
||||
|
||||
.p-floatlabel:has(.p-inputicon:first-child) label {
|
||||
@apply start-10
|
||||
}
|
||||
|
||||
.p-floatlabel:has(.p-invalid) label {
|
||||
@apply text-red-400 dark:text-red-300
|
||||
}
|
||||
|
||||
.p-floatlabel:has(input:focus) label,
|
||||
.p-floatlabel:has(input.p-filled) label,
|
||||
.p-floatlabel:has(input:-webkit-autofill) label,
|
||||
.p-floatlabel:has(textarea:focus) label,
|
||||
.p-floatlabel:has(textarea.p-filled) label,
|
||||
.p-floatlabel:has(.p-inputwrapper-focus) label,
|
||||
.p-floatlabel:has(.p-inputwrapper-filled) label {
|
||||
@apply -top-5 translate-y-0 text-xs font-normal
|
||||
}
|
||||
|
||||
.p-floatlabel:has(input.p-filled) label,
|
||||
.p-floatlabel:has(textarea.p-filled) label,
|
||||
.p-floatlabel:has(.p-inputwrapper-filled) label {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-floatlabel:has(input:focus) label,
|
||||
.p-floatlabel:has(input:-webkit-autofill) label,
|
||||
.p-floatlabel:has(textarea:focus) label ,
|
||||
.p-floatlabel:has(.p-inputwrapper-focus) label {
|
||||
@apply text-primary
|
||||
}
|
||||
|
||||
.p-floatlabel-in .p-inputtext,
|
||||
.p-floatlabel-in .p-textarea,
|
||||
.p-floatlabel-in .p-select-label,
|
||||
.p-floatlabel-in .p-multiselect-label,
|
||||
.p-floatlabel-in .p-autocomplete-input-multiple,
|
||||
.p-floatlabel-in .p-cascadeselect-label,
|
||||
.p-floatlabel-in .p-treeselect-label {
|
||||
@apply pt-6 pb-2
|
||||
}
|
||||
|
||||
.p-floatlabel-in:has(input:focus) label,
|
||||
.p-floatlabel-in:has(input.p-filled) label,
|
||||
.p-floatlabel-in:has(input:-webkit-autofill) label,
|
||||
.p-floatlabel-in:has(textarea:focus) label,
|
||||
.p-floatlabel-in:has(textarea.p-filled) label,
|
||||
.p-floatlabel-in:has(.p-inputwrapper-focus) label,
|
||||
.p-floatlabel-in:has(.p-inputwrapper-filled) label {
|
||||
@apply top-2
|
||||
}
|
||||
|
||||
.p-floatlabel-on:has(input:focus) label,
|
||||
.p-floatlabel-on:has(input.p-filled) label,
|
||||
.p-floatlabel-on:has(input:-webkit-autofill) label,
|
||||
.p-floatlabel-on:has(textarea:focus) label,
|
||||
.p-floatlabel-on:has(textarea.p-filled) label,
|
||||
.p-floatlabel-on:has(.p-inputwrapper-focus) label,
|
||||
.p-floatlabel-on:has(.p-inputwrapper-filled) label {
|
||||
@apply top-0 -translate-y-1/2 rounded-sm bg-surface-0 dark:bg-surface-950 py-0 px-[0.125rem]
|
||||
}
|
||||
|
|
@ -1,244 +0,0 @@
|
|||
.p-galleria {
|
||||
@apply overflow-hidden border border-surface-200 dark:border-surface-700 rounded-md
|
||||
}
|
||||
|
||||
.p-galleria-content {
|
||||
@apply flex flex-col
|
||||
}
|
||||
|
||||
.p-galleria-items-container {
|
||||
@apply flex flex-col relative
|
||||
}
|
||||
|
||||
.p-galleria-items {
|
||||
@apply relative flex h-full
|
||||
}
|
||||
|
||||
.p-galleria-nav-button {
|
||||
@apply absolute top-1/2 inline-flex justify-center items-center overflow-hidden select-none border-none cursor-pointer
|
||||
w-12 h-12 transition-colors duration-200 p-0 -mt-12 mx-2 mb-0 rounded-full
|
||||
bg-white/10 text-surface-100 enabled:hover:bg-white/20 enabled:hover:text-surface-0
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
|
||||
}
|
||||
|
||||
.p-galleria-next-icon,
|
||||
.p-galleria-prev-icon {
|
||||
@apply text-2xl w-6 h-6
|
||||
}
|
||||
|
||||
.p-galleria-prev-button {
|
||||
@apply start-0
|
||||
}
|
||||
|
||||
.p-galleria-next-button {
|
||||
@apply end-0
|
||||
}
|
||||
|
||||
.p-galleria-prev-button:dir(rtl) {
|
||||
@apply start-auto end-0
|
||||
}
|
||||
.p-galleria-next-button:dir(rtl) {
|
||||
@apply end-auto start-0
|
||||
}
|
||||
|
||||
.p-galleria-item {
|
||||
@apply flex justify-center items-center h-full w-full
|
||||
}
|
||||
|
||||
.p-galleria-hover-navigators .p-galleria-nav-button {
|
||||
@apply pointer-events-none opacity-0 transition-opacity duration-200 ease-in-out
|
||||
}
|
||||
|
||||
.p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-nav-button {
|
||||
@apply pointer-events-auto opacity-100
|
||||
}
|
||||
|
||||
.p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-nav-button.p-disabled {
|
||||
@apply pointer-events-none
|
||||
}
|
||||
|
||||
.p-galleria-caption {
|
||||
@apply absolute bottom-0 left-0 w-full bg-black/5 text-surface-100 p-4
|
||||
}
|
||||
|
||||
.p-galleria-thumbnails {
|
||||
@apply flex flex-col overflow-auto flex-shrink-0
|
||||
}
|
||||
|
||||
.p-galleria-thumbnail-nav-button {
|
||||
@apply self-center flex-grow-0 flex-shrink-0 basis-auto justify-center items-center overflow-hidden relative
|
||||
my-0 mx-2 p-0 border-none select-none cursor-pointer w-8 h-8 rounded-md transition-colors duration-200 bg-transparent
|
||||
text-surface-600 hover:bg-surface-100 hover:text-surface-700
|
||||
dark:text-surface-400 dark:hover:bg-surface-800 dark:hover:text-surface-0
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
|
||||
}
|
||||
|
||||
.p-galleria-thumbnail-nav-button .p-galleria-thumbnail-next-icon,
|
||||
.p-galleria-thumbnail-nav-button .p-galleria-thumbnail-prev-icon {
|
||||
@apply text-base w-4 h-4
|
||||
}
|
||||
|
||||
.p-galleria-thumbnails-content {
|
||||
@apply flex flex-row bg-surface-0 dark:bg-surface-900 py-4 px-1
|
||||
}
|
||||
|
||||
.p-galleria-thumbnails-viewport {
|
||||
@apply overflow-hidden w-full
|
||||
}
|
||||
|
||||
.p-galleria:not(.p-galleria-thumbnails-right):not(.p-galleria-thumbnails-left) .p-galleria-thumbnail-prev-button:dir(rtl),
|
||||
.p-galleria:not(.p-galleria-thumbnails-right):not(.p-galleria-thumbnails-left) .p-galleria-thumbnail-next-button:dir(rtl) {
|
||||
@apply rotate-180
|
||||
}
|
||||
|
||||
.p-galleria-thumbnail-items {
|
||||
@apply flex
|
||||
}
|
||||
|
||||
.p-galleria-thumbnail-item {
|
||||
@apply overflow-auto flex items-center justify-center cursor-pointer opacity-50
|
||||
}
|
||||
|
||||
.p-galleria-thumbnail {
|
||||
@apply outline-transparent transition-opacity duration-300 hover:opacity-100
|
||||
}
|
||||
|
||||
.p-galleria-thumbnail-item-current {
|
||||
@apply opacity-100
|
||||
}
|
||||
|
||||
.p-galleria-thumbnails-left .p-galleria-content,
|
||||
.p-galleria-thumbnails-right .p-galleria-content {
|
||||
@apply flex-row
|
||||
}
|
||||
|
||||
.p-galleria-thumbnails-left .p-galleria-items-container,
|
||||
.p-galleria-thumbnails-right .p-galleria-items-container {
|
||||
@apply flex-row
|
||||
}
|
||||
|
||||
.p-galleria-thumbnails-left .p-galleria-items-container,
|
||||
.p-galleria-thumbnails-top .p-galleria-items-container {
|
||||
@apply order-2
|
||||
}
|
||||
|
||||
.p-galleria-thumbnails-left .p-galleria-thumbnails,
|
||||
.p-galleria-thumbnails-top .p-galleria-thumbnails {
|
||||
@apply order-1
|
||||
}
|
||||
|
||||
.p-galleria-thumbnails-left .p-galleria-thumbnails-content,
|
||||
.p-galleria-thumbnails-right .p-galleria-thumbnails-content {
|
||||
@apply flex-col flex-grow
|
||||
}
|
||||
|
||||
.p-galleria-thumbnails-left .p-galleria-thumbnail-items,
|
||||
.p-galleria-thumbnails-right .p-galleria-thumbnail-items {
|
||||
@apply flex-col h-full
|
||||
}
|
||||
|
||||
.p-galleria-indicator-list {
|
||||
@apply flex items-center justify-center p-4 gap-2 m-0 list-none
|
||||
}
|
||||
|
||||
.p-galleria-indicator-button {
|
||||
@apply inline-flex items-center w-4 h-4 rounded-full m-0 p-0 border-none select-none cursor-pointer transition-colors duration-200
|
||||
bg-surface-200 hover:bg-surface-300 dark:bg-surface-700 dark:hover:bg-surface-600
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
|
||||
}
|
||||
|
||||
.p-galleria-indicator-active .p-galleria-indicator-button {
|
||||
@apply bg-primary
|
||||
}
|
||||
|
||||
.p-galleria-indicators-left .p-galleria-items-container,
|
||||
.p-galleria-indicators-right .p-galleria-items-container {
|
||||
@apply flex-row items-center
|
||||
}
|
||||
|
||||
.p-galleria-indicators-left .p-galleria-items,
|
||||
.p-galleria-indicators-top .p-galleria-items {
|
||||
@apply order-2
|
||||
}
|
||||
|
||||
.p-galleria-indicators-left .p-galleria-indicator-list,
|
||||
.p-galleria-indicators-top .p-galleria-indicator-list {
|
||||
@apply order-1
|
||||
}
|
||||
|
||||
.p-galleria-indicators-left .p-galleria-indicator-list,
|
||||
.p-galleria-indicators-right .p-galleria-indicator-list {
|
||||
@apply flex-col
|
||||
}
|
||||
|
||||
.p-galleria-inset-indicators .p-galleria-indicator-list {
|
||||
@apply absolute flex z-10 bg-black/50
|
||||
}
|
||||
|
||||
.p-galleria-inset-indicators .p-galleria-indicator-button {
|
||||
@apply bg-white/40 hover:bg-white/60
|
||||
}
|
||||
|
||||
.p-galleria-inset-indicators .p-galleria-indicator-active .p-galleria-indicator-button {
|
||||
@apply bg-white/90
|
||||
}
|
||||
|
||||
.p-galleria-inset-indicators.p-galleria-indicators-top .p-galleria-indicator-list {
|
||||
@apply top-0 left-0 w-full items-start
|
||||
}
|
||||
|
||||
.p-galleria-inset-indicators.p-galleria-indicators-right .p-galleria-indicator-list {
|
||||
@apply right-0 top-0 h-full items-end
|
||||
}
|
||||
|
||||
.p-galleria-inset-indicators.p-galleria-indicators-bottom .p-galleria-indicator-list {
|
||||
@apply bottom-0 left-0 w-full items-end
|
||||
}
|
||||
|
||||
.p-galleria-inset-indicators.p-galleria-indicators-left .p-galleria-indicator-list {
|
||||
@apply left-0 top-0 h-full items-start
|
||||
}
|
||||
|
||||
.p-galleria-mask {
|
||||
@apply fixed top-0 left-0 w-full h-full flex items-center justify-center
|
||||
}
|
||||
|
||||
.p-galleria-close-button {
|
||||
@apply absolute top-0 right-0 flex items-center justify-center overflow-hidden m-2 rounded-full
|
||||
transition-colors duration-200 select-none cursor-pointer w-12 h-12 p-0 border-none
|
||||
bg-white/10 text-surface-50 hover:bg-white/20 hover:text-surface-0
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
|
||||
}
|
||||
|
||||
.p-galleria-close-icon {
|
||||
@apply text-2xl w-6 h-6
|
||||
}
|
||||
|
||||
.p-galleria-mask .p-galleria-nav-button {
|
||||
@apply fixed top-1/2
|
||||
}
|
||||
|
||||
.p-galleria-enter-active {
|
||||
@apply transition-all duration-150 ease-[cubic-bezier(0,0,0.2,1)]
|
||||
}
|
||||
|
||||
.p-galleria-leave-active {
|
||||
@apply transition-all duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]
|
||||
}
|
||||
|
||||
.p-galleria-enter-from,
|
||||
.p-galleria-leave-to {
|
||||
@apply opacity-0 scale-75
|
||||
}
|
||||
|
||||
.p-galleria-enter-active .p-galleria-nav-button {
|
||||
@apply opacity-0
|
||||
}
|
||||
|
||||
.p-items-hidden .p-galleria-thumbnail-item {
|
||||
@apply invisible
|
||||
}
|
||||
|
||||
.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active {
|
||||
@apply visible
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
.p-iconfield {
|
||||
@apply relative
|
||||
}
|
||||
|
||||
.p-inputicon {
|
||||
@apply absolute top-1/2 -mt-2 text-surface-400 leading-none
|
||||
}
|
||||
|
||||
.p-iconfield .p-inputicon:first-child {
|
||||
@apply start-3
|
||||
}
|
||||
|
||||
.p-iconfield .p-inputicon:last-child {
|
||||
@apply end-3
|
||||
}
|
||||
|
||||
.p-iconfield .p-inputtext:not(:first-child) {
|
||||
@apply ps-10
|
||||
}
|
||||
|
||||
.p-iconfield .p-inputtext:not(:last-child) {
|
||||
@apply pe-10
|
||||
}
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
.p-iftalabel {
|
||||
@apply block relative
|
||||
}
|
||||
|
||||
.p-iftalabel label {
|
||||
@apply absolute pointer-events-none top-2 transition-all ease-out duration-200 leading-none text-xs font-medium start-3 text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-iftalabel .p-inputtext,
|
||||
.p-iftalabel .p-textarea,
|
||||
.p-iftalabel .p-select-label,
|
||||
.p-iftalabel .p-multiselect-label,
|
||||
.p-iftalabel .p-autocomplete-input-multiple,
|
||||
.p-iftalabel .p-cascadeselect-label,
|
||||
.p-iftalabel .p-treeselect-label {
|
||||
@apply pt-6 pb-2
|
||||
}
|
||||
|
||||
.p-iftalabel:has(.p-invalid) label {
|
||||
@apply text-red-400 dark:text-red-300
|
||||
}
|
||||
|
||||
.p-iftalabel:has(input:focus) label ,
|
||||
.p-iftalabel:has(input:-webkit-autofill) label,
|
||||
.p-iftalabel:has(textarea:focus) label ,
|
||||
.p-iftalabel:has(.p-inputwrapper-focus) label {
|
||||
@apply text-primary
|
||||
}
|
||||
|
||||
.p-iftalabel .p-inputicon {
|
||||
@apply top-6 translate-y-1/4 mt-0
|
||||
}
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
.p-image-mask {
|
||||
@apply flex items-center justify-center
|
||||
}
|
||||
|
||||
.p-image-preview {
|
||||
@apply relative inline-flex leading-none
|
||||
}
|
||||
|
||||
.p-image-preview-mask {
|
||||
@apply absolute start-0 top-0 w-full h-full flex items-center justify-center opacity-0
|
||||
border-none p-0 cursor-pointer bg-transparent text-surface-200 transition-all duration-200
|
||||
}
|
||||
|
||||
.p-image-preview:hover > .p-image-preview-mask {
|
||||
@apply opacity-100 cursor-pointer bg-black/40 dark:bg-black/60
|
||||
}
|
||||
|
||||
.p-image-preview-icon {
|
||||
@apply text-2xl w-6 h-6
|
||||
}
|
||||
|
||||
.p-image-toolbar {
|
||||
@apply absolute top-4 end-4 start-auto bottom-auto flex z-10 p-2 bg-white/10 border border-white/20 rounded-3xl gap-2;
|
||||
}
|
||||
|
||||
.p-image-action {
|
||||
@apply inline-flex justify-center items-center text-surface-50 bg-transparent w-12 h-12 m-0 p-0
|
||||
border-none cursor-pointer select-none rounded-full transition-colors duration-200
|
||||
hover:text-surface-0 hover:bg-white/10
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
|
||||
}
|
||||
|
||||
.p-image-action .p-icon {
|
||||
@apply text-2xl h-6 w-6
|
||||
}
|
||||
|
||||
.p-image-action.p-disabled {
|
||||
@apply pointer-events-auto
|
||||
}
|
||||
|
||||
.p-image-original {
|
||||
@apply transition-transform duration-150 max-w-[100vw] max-h-[100vh]
|
||||
}
|
||||
|
||||
.p-image-original-enter-active {
|
||||
@apply transition-all duration-150 ease-[cubic-bezier(0,0,0.2,1)]
|
||||
}
|
||||
|
||||
.p-image-original-leave-active {
|
||||
@apply transition-all duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]
|
||||
}
|
||||
|
||||
.p-image-original-enter-from,
|
||||
.p-image-original-leave-to {
|
||||
@apply opacity-0 scale-75
|
||||
}
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
.p-imagecompare {
|
||||
@apply relative overflow-hidden w-full aspect-video
|
||||
}
|
||||
|
||||
.p-imagecompare img {
|
||||
@apply w-full h-full absolute
|
||||
}
|
||||
|
||||
.p-imagecompare img + img {
|
||||
@apply [clip-path:polygon(0_0,50%_0,50%_100%,0_100%)]
|
||||
}
|
||||
|
||||
.p-imagecompare:dir(rtl) img + img {
|
||||
@apply [clip-path:polygon(50%_0,100%_0,100%_100%,50%_100%)]
|
||||
}
|
||||
|
||||
.p-imagecompare-slider {
|
||||
@apply relative appearance-none w-[calc(100%+1rem)] h-full -ms-2 bg-transparent outline-none transition-all duration-200
|
||||
hover:w-[calc(100%+2rem)] hover:-ms-4
|
||||
}
|
||||
|
||||
.p-imagecompare-slider::-webkit-slider-thumb {
|
||||
@apply appearance-none h-4 w-4 bg-white/30 rounded-full bg-contain cursor-ew-resize transition-all duration-200
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
|
||||
}
|
||||
|
||||
.p-imagecompare-slider::-moz-range-thumb {
|
||||
@apply appearance-none h-4 w-4 bg-white/30 rounded-full bg-contain cursor-ew-resize transition-all duration-200
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
|
||||
}
|
||||
|
||||
.p-imagecompare-slider:hover::-webkit-slider-thumb {
|
||||
@apply bg-white/40 h-8 w-8
|
||||
}
|
||||
|
||||
.p-imagecompare-slider:hover::-moz-range-thumb {
|
||||
@apply bg-white/40 h-8 w-8
|
||||
}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
.p-inplace-display {
|
||||
@apply inline cursor-pointer border border-transparent px-3 py-2 rounded-md
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
|
||||
transition-colors duration-200
|
||||
}
|
||||
|
||||
.p-inplace-display:not(.p-disabled):hover {
|
||||
@apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-inplace-content {
|
||||
@apply block
|
||||
}
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
.p-inputgroup,
|
||||
.p-inputgroup .p-floatlabel,
|
||||
.p-inputgroup .p-iftalabel {
|
||||
@apply flex items-stretch w-full
|
||||
}
|
||||
|
||||
.p-inputgroup .p-inputtext,
|
||||
.p-inputgroup .p-inputwrapper {
|
||||
@apply flex-auto w-[1%]
|
||||
}
|
||||
|
||||
.p-inputgroupaddon {
|
||||
@apply flex items-center justify-center p-2 min-w-10
|
||||
border-y border-surface-300 dark:border-surface-700
|
||||
bg-surface-0 dark:bg-surface-950 text-surface-400
|
||||
}
|
||||
|
||||
.p-inputgroupaddon:first-child,
|
||||
.p-inputgroupaddon + .p-inputgroupaddon {
|
||||
@apply border-s
|
||||
}
|
||||
|
||||
.p-inputgroupaddon:last-child {
|
||||
@apply border-e
|
||||
}
|
||||
|
||||
.p-inputgroup > .p-component,
|
||||
.p-inputgroup > .p-inputwrapper > .p-component,
|
||||
.p-inputgroup > .p-floatlabel > .p-component,
|
||||
.p-inputgroup > .p-floatlabel > .p-inputwrapper > .p-component,
|
||||
.p-inputgroup > .p-iftalabel > .p-component,
|
||||
.p-inputgroup > .p-iftalabel > .p-inputwrapper > .p-component {
|
||||
@apply rounded-none m-0
|
||||
}
|
||||
|
||||
.p-inputgroupaddon:first-child,
|
||||
.p-inputgroup > .p-component:first-child,
|
||||
.p-inputgroup > .p-inputwrapper:first-child > .p-component,
|
||||
.p-inputgroup > .p-floatlabel:first-child > .p-component,
|
||||
.p-inputgroup > .p-floatlabel:first-child > .p-inputwrapper > .p-component,
|
||||
.p-inputgroup > .p-iftalabel:first-child > .p-component,
|
||||
.p-inputgroup > .p-iftalabel:first-child > .p-inputwrapper > .p-component {
|
||||
@apply rounded-s-md
|
||||
}
|
||||
|
||||
.p-inputgroupaddon:last-child,
|
||||
.p-inputgroup > .p-component:last-child,
|
||||
.p-inputgroup > .p-inputwrapper:last-child > .p-component,
|
||||
.p-inputgroup > .p-floatlabel:last-child > .p-component,
|
||||
.p-inputgroup > .p-floatlabel:last-child > .p-inputwrapper > .p-component,
|
||||
.p-inputgroup > .p-iftalabel:last-child > .p-component,
|
||||
.p-inputgroup > .p-iftalabel:last-child > .p-inputwrapper > .p-component {
|
||||
@apply rounded-e-md
|
||||
}
|
||||
|
||||
.p-inputgroup .p-component:focus,
|
||||
.p-inputgroup .p-component.p-focus,
|
||||
.p-inputgroup .p-inputwrapper-focus,
|
||||
.p-inputgroup .p-component:focus ~ label,
|
||||
.p-inputgroup .p-component.p-focus ~ label,
|
||||
.p-inputgroup .p-inputwrapper-focus ~ label {
|
||||
@apply z-10
|
||||
}
|
||||
|
||||
.p-inputgroup > .p-button:not(.p-button-icon-only) {
|
||||
@apply w-auto
|
||||
}
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
@import './inputtext';
|
||||
|
||||
.p-inputnumber {
|
||||
@apply inline-flex relative
|
||||
}
|
||||
|
||||
.p-inputnumber-button {
|
||||
@apply flex items-center justify-center flex-grow-0 flex-shrink-0 basis-auto cursor-pointer w-10
|
||||
bg-transparent enabled:hover:bg-surface-100 enabled:active:bg-surface-200
|
||||
border border-surface-300 enabled:hover:border-surface-300 enabled:active:border-surface-300
|
||||
text-surface-400 enabled:hover:text-surface-500 enabled:active:text-surface-600
|
||||
dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700
|
||||
dark:border-surface-700 dark:enabled:hover:border-surface-700 dark:enabled:active:border-surface-700
|
||||
dark:text-surface-400 dark:enabled:hover:text-surface-300 dark:enabled:active:text-surface-200
|
||||
transition-colors duration-200
|
||||
}
|
||||
|
||||
.p-inputnumber-stacked .p-inputnumber-button {
|
||||
@apply relative flex-auto border-none
|
||||
}
|
||||
|
||||
.p-inputnumber-stacked .p-inputnumber-button-group {
|
||||
@apply flex flex-col absolute top-px end-px h-[calc(100%-2px)] z-10
|
||||
}
|
||||
|
||||
.p-inputnumber-stacked .p-inputnumber-increment-button {
|
||||
@apply p-0 rounded-tr-[5px]
|
||||
}
|
||||
|
||||
.p-inputnumber-stacked .p-inputnumber-decrement-button {
|
||||
@apply p-0 rounded-br-[5px]
|
||||
}
|
||||
|
||||
.p-inputnumber-horizontal .p-inputnumber-increment-button {
|
||||
@apply order-3 rounded-e-md border-s-0
|
||||
}
|
||||
|
||||
.p-inputnumber-horizontal .p-inputnumber-input {
|
||||
@apply order-2 rounded-none
|
||||
}
|
||||
|
||||
.p-inputnumber-horizontal .p-inputnumber-decrement-button {
|
||||
@apply order-1 rounded-s-md border-r-0
|
||||
}
|
||||
|
||||
.p-floatlabel:has(.p-inputnumber-horizontal) label {
|
||||
@apply ms-10
|
||||
}
|
||||
|
||||
.p-inputnumber-vertical {
|
||||
@apply flex-col
|
||||
}
|
||||
|
||||
.p-inputnumber-vertical .p-inputnumber-button {
|
||||
@apply py-2
|
||||
}
|
||||
|
||||
.p-inputnumber-vertical .p-inputnumber-increment-button {
|
||||
@apply order-1 rounded-ss-md rounded-se-md w-full border-b-0
|
||||
}
|
||||
|
||||
.p-inputnumber-vertical .p-inputnumber-input {
|
||||
@apply order-2 rounded-none text-center
|
||||
}
|
||||
|
||||
.p-inputnumber-vertical .p-inputnumber-decrement-button {
|
||||
@apply order-3 rounded-ee-md rounded-es-md w-full border-t-0
|
||||
}
|
||||
|
||||
.p-inputnumber-input {
|
||||
@apply flex-auto
|
||||
}
|
||||
|
||||
.p-inputnumber-fluid {
|
||||
@apply w-full
|
||||
}
|
||||
|
||||
.p-inputnumber-fluid .p-inputnumber-input {
|
||||
@apply w-[1%]
|
||||
}
|
||||
|
||||
.p-inputnumber-fluid.p-inputnumber-vertical .p-inputnumber-input {
|
||||
@apply w-full
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
@import './inputtext';
|
||||
|
||||
.p-inputotp {
|
||||
@apply flex items-center gap-2
|
||||
}
|
||||
|
||||
.p-inputotp-input {
|
||||
@apply text-center w-10
|
||||
}
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
.p-inputtext {
|
||||
@apply appearance-none rounded-md
|
||||
border border-surface-300 dark:border-surface-700
|
||||
enabled:hover:border-surface-400 dark:enabled:hover:border-surface-600
|
||||
enabled:focus:border-primary dark:enabled:focus:border-primary
|
||||
bg-surface-0 dark:bg-surface-950
|
||||
text-surface-700 dark:text-surface-0
|
||||
disabled:bg-surface-200 disabled:text-surface-500 dark:disabled:bg-surface-700 dark:disabled:text-surface-400 disabled:opacity-100
|
||||
placeholder:text-surface-500 dark:placeholder:text-surface-400
|
||||
px-3 py-2
|
||||
transition-colors duration-200
|
||||
shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
|
||||
outline-none
|
||||
}
|
||||
|
||||
.p-inputtext.p-invalid {
|
||||
@apply border-red-400 dark:border-red-300
|
||||
}
|
||||
|
||||
.p-inputtext.p-variant-filled {
|
||||
@apply bg-surface-50 dark:bg-surface-800
|
||||
}
|
||||
|
||||
.p-inputtext-sm {
|
||||
@apply text-sm px-[0.625rem] py-[0.375rem]
|
||||
}
|
||||
|
||||
.p-inputtext-lg {
|
||||
@apply text-lg px-[0.875rem] py-[0.625rem]
|
||||
}
|
||||
|
||||
.p-inputtext-fluid {
|
||||
@apply w-full
|
||||
}
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
.p-knob-range {
|
||||
@apply fill-none transition-[stroke] duration-100 ease-in
|
||||
}
|
||||
|
||||
.p-knob-text {
|
||||
@apply text-xl text-center
|
||||
}
|
||||
|
||||
.p-knob svg {
|
||||
@apply rounded-full
|
||||
transition-colors duration-200
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
|
||||
}
|
||||
|
||||
.p-knob svg path:first-child {
|
||||
@apply stroke-surface-200 dark:stroke-surface-700
|
||||
}
|
||||
|
||||
.p-knob svg path + path {
|
||||
@apply stroke-primary
|
||||
}
|
||||
|
||||
.p-knob svg text {
|
||||
@apply fill-surface-500 dark:fill-surface-400
|
||||
}
|
||||
|
||||
.p-knob-value {
|
||||
animation-name: p-knob-dash-frame;
|
||||
animation-fill-mode: forwards;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
@keyframes p-knob-dash-frame {
|
||||
100% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
@import './inputtext';
|
||||
@import './iconfield';
|
||||
|
||||
.p-listbox {
|
||||
@apply bg-surface-0 dark:bg-surface-950 text-surface-700 dark:text-surface-0
|
||||
border border-surface-300 dark:border-surface-700 rounded-md
|
||||
shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
|
||||
transition-colors duration-200
|
||||
}
|
||||
|
||||
.p-listbox.p-focus {
|
||||
@apply border-primary
|
||||
}
|
||||
|
||||
.p-listbox.p-disabled {
|
||||
@apply bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400 opacity-100 cursor-default
|
||||
}
|
||||
|
||||
.p-listbox.p-disabled .p-listbox-option {
|
||||
@apply text-surface-500 dark:text-surface-400 cursor-default
|
||||
}
|
||||
|
||||
.p-listbox.p-invalid {
|
||||
@apply border-red-400 dark:border-red-300
|
||||
}
|
||||
|
||||
.p-listbox-header {
|
||||
@apply pt-2 pb-1 px-4
|
||||
}
|
||||
|
||||
.p-listbox-filter {
|
||||
@apply w-full
|
||||
}
|
||||
|
||||
.p-listbox-list-container {
|
||||
@apply overflow-auto
|
||||
}
|
||||
|
||||
.p-listbox-list {
|
||||
@apply list-none m-0 p-1 outline-none flex flex-col gap-[2px]
|
||||
}
|
||||
|
||||
.p-listbox-option {
|
||||
@apply flex items-center cursor-pointer relative overflow-hidden px-3 py-2 border-none rounded-sm
|
||||
text-surface-700 dark:text-surface-0
|
||||
transition-colors duration-200
|
||||
}
|
||||
|
||||
.p-listbox-striped li:nth-child(even of .p-listbox-option) {
|
||||
@apply bg-surface-50 dark:bg-surface-900
|
||||
}
|
||||
|
||||
.p-listbox .p-listbox-list .p-listbox-option.p-listbox-option-selected {
|
||||
@apply bg-highlight
|
||||
}
|
||||
|
||||
.p-listbox:not(.p-disabled) .p-listbox-option.p-listbox-option-selected.p-focus {
|
||||
@apply bg-highlight-emphasis
|
||||
}
|
||||
|
||||
.p-listbox:not(.p-disabled) .p-listbox-option:not(.p-listbox-option-selected):not(.p-disabled).p-focus {
|
||||
@apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-listbox:not(.p-disabled) .p-listbox-option:not(.p-listbox-option-selected):not(.p-disabled):hover {
|
||||
@apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-listbox-option-check-icon {
|
||||
@apply relative -ms-[0.375rem] me-[0.375rem] text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-listbox-option-group {
|
||||
@apply m-0 px-3 py-2 text-surface-500 dark:text-surface-400 font-semibold
|
||||
}
|
||||
|
||||
.p-listbox-empty-message {
|
||||
@apply px-3 py-2
|
||||
}
|
||||
|
|
@ -1,207 +0,0 @@
|
|||
.p-megamenu {
|
||||
@apply relative flex items-center rounded-md gap-2
|
||||
bg-surface-0 dark:bg-surface-900
|
||||
text-surface-700 dark:text-surface-0
|
||||
border border-surface-200 dark:border-surface-700
|
||||
}
|
||||
|
||||
.p-megamenu-start,
|
||||
.p-megamenu-end {
|
||||
@apply flex items-center
|
||||
}
|
||||
|
||||
.p-megamenu-root-list {
|
||||
@apply m-0 p-0 list-none outline-none flex items-center flex-wrap gap-2
|
||||
}
|
||||
|
||||
.p-megamenu-root-list > .p-megamenu-item > .p-menumegamenubar-item-content {
|
||||
@apply rounded-md
|
||||
}
|
||||
|
||||
.p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content > .p-megamenu-item-link {
|
||||
@apply px-3 py-2
|
||||
}
|
||||
|
||||
.p-megamenu-item-content {
|
||||
@apply transition-colors duration-200 rounded-sm text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-megamenu-item-link {
|
||||
@apply cursor-pointer flex items-center no-underline overflow-hidden relative text-inherit
|
||||
px-3 py-2 gap-2 select-none outline-none
|
||||
}
|
||||
|
||||
.p-megamenu-item-icon {
|
||||
@apply text-surface-400 dark:text-surface-500
|
||||
}
|
||||
|
||||
.p-megamenu-submenu-icon {
|
||||
@apply text-surface-400 dark:text-surface-500 ms-auto text-sm w-[0.875rem] h-[0.875rem]
|
||||
}
|
||||
|
||||
.p-megamenu-item.p-focus > .p-megamenu-item-content {
|
||||
@apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-megamenu-item.p-focus > .p-megamenu-item-content .p-megamenu-item-icon {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-megamenu-item.p-focus > .p-megamenu-item-content .p-megamenu-submenu-icon {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover {
|
||||
@apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover .p-megamenu-item-icon {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover .p-megamenu-submenu-icon {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-megamenu-item-active > .p-megamenu-item-content {
|
||||
@apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-item-icon {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-submenu-icon {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-megamenu-overlay {
|
||||
@apply hidden absolute w-auto z-10 start-0 min-w-full rounded-md
|
||||
bg-surface-0 dark:bg-surface-900
|
||||
border border-surface-200 dark:border-surface-700
|
||||
text-surface-700 dark:text-surface-0
|
||||
shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
|
||||
}
|
||||
|
||||
.p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-overlay {
|
||||
@apply block
|
||||
}
|
||||
|
||||
.p-megamenu-submenu {
|
||||
@apply m-0 p-1 list-none min-w-52 flex flex-col gap-[2px]
|
||||
}
|
||||
|
||||
.p-megamenu-submenu-label {
|
||||
@apply px-3 py-2 text-surface-500 dark:text-surface-400 font-semibold bg-transparent
|
||||
}
|
||||
|
||||
.p-megamenu-separator {
|
||||
@apply border-t border-surface-200 dark:border-surface-700
|
||||
}
|
||||
|
||||
.p-megamenu-horizontal {
|
||||
@apply items-center px-3 py-2
|
||||
}
|
||||
|
||||
.p-megamenu-horizontal .p-megamenu-root-list {
|
||||
@apply flex items-center flex-wrap gap-2
|
||||
}
|
||||
|
||||
.p-megamenu-horizontal .p-megamenu-end {
|
||||
@apply ms-auto self-center
|
||||
}
|
||||
|
||||
.p-megamenu-vertical {
|
||||
@apply inline-flex min-w-52 flex-col items-stretch p-1
|
||||
}
|
||||
|
||||
.p-megamenu-vertical .p-megamenu-root-list {
|
||||
@apply items-stretch flex-col gap-[2px]
|
||||
}
|
||||
|
||||
.p-megamenu-vertical .p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-overlay {
|
||||
@apply start-full top-0
|
||||
}
|
||||
|
||||
.p-megamenu-vertical .p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content .p-megamenu-submenu-icon {
|
||||
@apply ms-auto
|
||||
}
|
||||
|
||||
.p-megamenu-grid {
|
||||
@apply flex
|
||||
}
|
||||
|
||||
.p-megamenu-col-2,
|
||||
.p-megamenu-col-3,
|
||||
.p-megamenu-col-4,
|
||||
.p-megamenu-col-6,
|
||||
.p-megamenu-col-12 {
|
||||
@apply flex-grow-0 flex-shrink-0 basis-auto p-2
|
||||
}
|
||||
|
||||
.p-megamenu-col-2 {
|
||||
@apply w-1/6;
|
||||
}
|
||||
|
||||
.p-megamenu-col-3 {
|
||||
@apply w-1/4
|
||||
}
|
||||
|
||||
.p-megamenu-col-4 {
|
||||
@apply w-1/3
|
||||
}
|
||||
|
||||
.p-megamenu-col-6 {
|
||||
@apply w-1/2
|
||||
}
|
||||
|
||||
.p-megamenu-col-12 {
|
||||
@apply w-full
|
||||
}
|
||||
|
||||
.p-megamenu-button {
|
||||
@apply hidden justify-center items-center cursor-pointer w-7 h-7 relative border-none rounded-full
|
||||
text-surface-500 dark:text-surface-400 hover:text-surface-600 dark:hover:text-surface-300
|
||||
bg-transparent hover:bg-surface-100 dark:hover:bg-surface-800
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
|
||||
transition-colors duration-200
|
||||
}
|
||||
|
||||
.p-megamenu-mobile {
|
||||
@apply flex
|
||||
}
|
||||
|
||||
.p-megamenu-mobile .p-megamenu-button {
|
||||
@apply flex
|
||||
}
|
||||
|
||||
.p-megamenu-mobile .p-megamenu-root-list {
|
||||
@apply absolute hidden flex-col top-full start-0 z-10 w-full p-1 gap-[2px]
|
||||
bg-surface-0 dark:bg-surface-900
|
||||
border border-surface-200 dark:border-surface-700
|
||||
shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
|
||||
}
|
||||
|
||||
.p-megamenu-mobile-active .p-megamenu-root-list {
|
||||
@apply flex
|
||||
}
|
||||
|
||||
.p-megamenu-mobile .p-megamenu-root-list .p-megamenu-item {
|
||||
@apply w-full static
|
||||
}
|
||||
|
||||
.p-megamenu-mobile .p-megamenu-overlay {
|
||||
@apply static border-none rounded-none shadow-none
|
||||
}
|
||||
|
||||
.p-megamenu-mobile .p-megamenu-grid {
|
||||
@apply flex-wrap overflow-auto max-h-[90%]
|
||||
}
|
||||
|
||||
.p-megamenu-mobile .p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content .p-megamenu-submenu-icon {
|
||||
@apply ms-auto transition-transform duration-[200ms]
|
||||
}
|
||||
|
||||
.p-megamenu-mobile .p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-submenu-icon {
|
||||
@apply -rotate-180
|
||||
}
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
.p-menu {
|
||||
@apply bg-surface-0 dark:bg-surface-900
|
||||
text-surface-700 dark:text-surface-0
|
||||
border border-surface-200 dark:border-surface-700
|
||||
rounded-md min-w-52
|
||||
}
|
||||
|
||||
.p-menu-list {
|
||||
@apply m-0 p-1 list-none outline-none flex flex-col gap-[2px]
|
||||
}
|
||||
|
||||
.p-menu-item-content {
|
||||
@apply transition-colors duration-200 rounded-sm text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-menu-item-link {
|
||||
@apply cursor-pointer flex items-center no-underline overflow-hidden relative text-inherit
|
||||
px-3 py-2 gap-2 select-none outline-none
|
||||
}
|
||||
|
||||
.p-menu-item-icon {
|
||||
@apply text-surface-400 dark:text-surface-500
|
||||
}
|
||||
|
||||
.p-menu-item.p-focus .p-menu-item-content {
|
||||
@apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-menu-item.p-focus .p-menu-item-icon {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-menu-item:not(.p-disabled) .p-menu-item-content:hover {
|
||||
@apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-menu-item:not(.p-disabled) .p-menu-item-content:hover .p-menu-item-icon {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-menu-overlay {
|
||||
@apply shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
|
||||
}
|
||||
|
||||
.p-menu-submenu-label {
|
||||
@apply bg-transparent px-3 py-2 text-surface-500 dark:text-surface-400 font-semibold
|
||||
}
|
||||
|
||||
.p-menu-separator {
|
||||
@apply border-t border-surface-200 dark:border-surface-700
|
||||
}
|
||||
|
|
@ -1,169 +0,0 @@
|
|||
.p-menubar {
|
||||
@apply flex items-center rounded-md px-3 py-2 gap-2
|
||||
bg-surface-0 dark:bg-surface-900
|
||||
text-surface-700 dark:text-surface-0
|
||||
border border-surface-200 dark:border-surface-700
|
||||
}
|
||||
|
||||
.p-menubar-start,
|
||||
.p-megamenu-end {
|
||||
@apply flex items-center
|
||||
}
|
||||
|
||||
.p-menubar-root-list,
|
||||
.p-menubar-submenu {
|
||||
@apply flex m-0 p-0 list-none outline-none
|
||||
}
|
||||
|
||||
.p-menubar-root-list {
|
||||
@apply items-center flex-wrap gap-2
|
||||
}
|
||||
|
||||
.p-menubar-root-list > .p-menubar-item > .p-menubar-item-content {
|
||||
@apply rounded-md
|
||||
}
|
||||
|
||||
.p-menubar-root-list > .p-menubar-item > .p-menubar-item-content > .p-menubar-item-link {
|
||||
@apply px-3 py-2
|
||||
}
|
||||
|
||||
.p-menubar-item-content {
|
||||
@apply transition-colors duration-200 rounded-sm text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-menubar-item-link {
|
||||
@apply cursor-pointer flex items-center no-underline overflow-hidden relative text-inherit
|
||||
px-3 py-2 gap-2 select-none outline-none
|
||||
}
|
||||
|
||||
.p-menubar-item-icon {
|
||||
@apply text-surface-400 dark:text-surface-500
|
||||
}
|
||||
|
||||
.p-menubar-submenu-icon {
|
||||
@apply text-surface-400 dark:text-surface-500 ms-auto text-sm w-[0.875rem] h-[0.875rem]
|
||||
}
|
||||
|
||||
.p-menubar-submenu-icon:dir(rtl) {
|
||||
@apply rotate-180
|
||||
}
|
||||
|
||||
.p-menubar-item.p-focus > .p-menubar-item-content {
|
||||
@apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-menubar-item.p-focus > .p-menubar-item-content .p-menubar-item-icon {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-menubar-item.p-focus > .p-menubar-item-content .p-menubar-submenu-icon {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover {
|
||||
@apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover .p-menubar-item-icon {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover .p-menubar-submenu-icon {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-menubar-item-active > .p-menubar-item-content {
|
||||
@apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-menubar-item-active > .p-menubar-item-content .p-menubar-item-icon {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-menubar-item-active > .p-menubar-item-content .p-menubar-submenu-icon {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-menubar-submenu {
|
||||
@apply hidden absolute min-w-52 z-10
|
||||
bg-surface-0 dark:bg-surface-900
|
||||
border border-surface-200 dark:border-surface-700
|
||||
text-surface-700 dark:text-surface-0
|
||||
flex-col p-1 gap-[2px] rounded-md
|
||||
shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
|
||||
}
|
||||
|
||||
.p-menubar-submenu .p-menubar-separator {
|
||||
@apply border-t border-surface-200 dark:border-surface-700
|
||||
}
|
||||
|
||||
.p-menubar-submenu .p-menubar-item {
|
||||
@apply relative
|
||||
}
|
||||
|
||||
.p-menubar-submenu > .p-menubar-item-active > .p-menubar-submenu {
|
||||
@apply block start-full top-0
|
||||
}
|
||||
|
||||
.p-menubar-end {
|
||||
@apply ms-auto self-center
|
||||
}
|
||||
|
||||
.p-menubar-button {
|
||||
@apply hidden justify-center items-center cursor-pointer w-7 h-7 relative border-none rounded-full
|
||||
text-surface-500 dark:text-surface-400 hover:text-surface-600 dark:hover:text-surface-300
|
||||
bg-transparent hover:bg-surface-100 dark:hover:bg-surface-800
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
|
||||
transition-colors duration-200
|
||||
}
|
||||
|
||||
.p-menubar-mobile {
|
||||
@apply relative
|
||||
}
|
||||
|
||||
.p-menubar-mobile .p-menubar-button {
|
||||
@apply flex
|
||||
}
|
||||
|
||||
.p-menubar-mobile .p-menubar-root-list {
|
||||
@apply absolute hidden w-full flex-col top-full start-0 z-10 p-1 gap-[2px] rounded-md
|
||||
border border-surface-200 dark:border-surface-700
|
||||
bg-surface-0 dark:bg-surface-900
|
||||
shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
|
||||
}
|
||||
|
||||
.p-menubar-mobile .p-menubar-root-list > .p-menubar-item > .p-menubar-item-content > .p-menubar-item-link {
|
||||
@apply px-3 py-3
|
||||
}
|
||||
|
||||
.p-menubar-mobile-active .p-menubar-root-list {
|
||||
@apply flex
|
||||
}
|
||||
|
||||
.p-menubar-mobile .p-menubar-root-list .p-menubar-item {
|
||||
@apply w-full static
|
||||
}
|
||||
|
||||
.p-menubar-mobile .p-menubar-root-list .p-menubar-separator {
|
||||
@apply border-t border-surface-200 dark:border-surface-700
|
||||
}
|
||||
|
||||
.p-menubar-mobile .p-menubar-root-list > .p-menubar-item > .p-menubar-item-content .p-menubar-submenu-icon {
|
||||
@apply ms-auto transition-transform duration-[200ms]
|
||||
}
|
||||
|
||||
.p-menubar-mobile .p-menubar-root-list > .p-menubar-item-active > .p-menubar-item-content .p-menubar-submenu-icon {
|
||||
@apply -rotate-180
|
||||
}
|
||||
|
||||
.p-menubar-mobile .p-menubar-submenu .p-menubar-submenu-icon {
|
||||
@apply transition-transform duration-200 rotate-90
|
||||
}
|
||||
|
||||
.p-menubar-mobile .p-menubar-item-active > .p-menubar-item-content .p-menubar-submenu-icon {
|
||||
@apply -rotate-90
|
||||
}
|
||||
|
||||
.p-menubar-mobile .p-menubar-submenu {
|
||||
@apply w-full static shadow-none border-none ps-4 pe-0
|
||||
}
|
||||
|
|
@ -1,212 +0,0 @@
|
|||
.p-message {
|
||||
@apply rounded-md outline outline-1
|
||||
}
|
||||
|
||||
.p-message-content {
|
||||
@apply flex items-center px-3 py-2 gap-2 h-full
|
||||
}
|
||||
|
||||
.p-message-icon {
|
||||
@apply flex-shrink-0
|
||||
}
|
||||
|
||||
.p-message-close-button {
|
||||
@apply flex items-center justify-center flex-shrink-0 ms-auto overflow-hidden relative cursor-pointer select-none
|
||||
w-7 h-7 rounded-full bg-transparent transition-colors duration-200 text-inherit p-0 border-none
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
|
||||
}
|
||||
|
||||
.p-message-info {
|
||||
@apply bg-blue-50/95 outline-blue-200 text-blue-600
|
||||
dark:bg-blue-500/15 dark:outline-blue-700/35 dark:text-blue-500
|
||||
shadow-[0px_4px_8px_0px_theme(colors.blue.500/0.04)]
|
||||
}
|
||||
|
||||
.p-message-info .p-message-close-button {
|
||||
@apply hover:bg-blue-100 focus-visible:outline-blue-600
|
||||
dark:hover:bg-white/5 dark:focus-visible:outline-blue-500
|
||||
}
|
||||
|
||||
.p-message-info.p-message-outlined {
|
||||
@apply text-blue-500 outline-blue-500 dark:text-blue-600 dark:outline-blue-600
|
||||
}
|
||||
|
||||
.p-message-info.p-message-simple {
|
||||
@apply text-blue-500 dark:text-blue-600
|
||||
}
|
||||
|
||||
.p-message-success {
|
||||
@apply bg-green-50/95 outline-green-200 text-green-600
|
||||
dark:bg-green-500/15 dark:outline-green-700/35 dark:text-green-500
|
||||
shadow-[0px_4px_8px_0px_theme(colors.green.500/0.04)]
|
||||
}
|
||||
|
||||
.p-message-success .p-message-close-button {
|
||||
@apply hover:bg-green-100 focus-visible:outline-green-600
|
||||
dark:hover:bg-white/5 dark:focus-visible:outline-green-500
|
||||
}
|
||||
|
||||
.p-message-success.p-message-outlined {
|
||||
@apply text-green-500 outline-green-500 dark:text-green-600 dark:outline-green-600
|
||||
}
|
||||
|
||||
.p-message-success.p-message-simple {
|
||||
@apply text-green-500 dark:text-green-600
|
||||
}
|
||||
|
||||
.p-message-warn {
|
||||
@apply bg-yellow-50/95 outline-yellow-200 text-yellow-600
|
||||
dark:bg-yellow-500/15 dark:outline-yellow-700/35 dark:text-yellow-500
|
||||
shadow-[0px_4px_8px_0px_theme(colors.yellow.500/0.04)]
|
||||
}
|
||||
|
||||
.p-message-warn .p-message-close-button {
|
||||
@apply hover:bg-yellow-100 focus-visible:outline-yellow-600
|
||||
dark:hover:bg-white/5 dark:focus-visible:outline-yellow-500
|
||||
}
|
||||
|
||||
.p-message-warn.p-message-outlined {
|
||||
@apply text-yellow-500 outline-yellow-500 dark:text-yellow-600 dark:outline-yellow-600
|
||||
}
|
||||
|
||||
.p-message-warn.p-message-simple {
|
||||
@apply text-yellow-500 dark:text-yellow-600
|
||||
}
|
||||
|
||||
.p-message-error {
|
||||
@apply bg-red-50/95 outline-red-200 text-red-600
|
||||
dark:bg-red-500/15 dark:outline-red-700/35 dark:text-red-500
|
||||
shadow-[0px_4px_8px_0px_theme(colors.red.500/0.04)]
|
||||
}
|
||||
|
||||
.p-message-error .p-message-close-button {
|
||||
@apply hover:bg-red-100 focus-visible:outline-red-600
|
||||
dark:hover:bg-white/5 dark:focus-visible:outline-red-500
|
||||
}
|
||||
|
||||
.p-message-error.p-message-outlined {
|
||||
@apply text-red-500 outline-red-500 dark:text-red-600 dark:outline-red-600
|
||||
}
|
||||
|
||||
.p-message-error.p-message-simple {
|
||||
@apply text-red-500 dark:text-red-600
|
||||
}
|
||||
|
||||
.p-message-secondary {
|
||||
@apply bg-surface-100 outline-surface-200 text-surface-600
|
||||
dark:bg-surface-800 dark:outline-surface-700 dark:text-surface-300
|
||||
shadow-[0px_4px_8px_0px_rgba(0,0,0,0.04)]
|
||||
}
|
||||
|
||||
.p-message-secondary .p-message-close-button {
|
||||
@apply hover:bg-surface-200 focus-visible:outline-surface-600
|
||||
dark:hover:bg-surface-700 dark:focus-visible:outline-surface-300
|
||||
}
|
||||
|
||||
.p-message-secondary.p-message-outlined {
|
||||
@apply text-surface-500 outline-surface-500 dark:text-surface-600 dark:outline-surface-600
|
||||
}
|
||||
|
||||
.p-message-secondary.p-message-simple {
|
||||
@apply text-surface-500 dark:text-surface-600
|
||||
}
|
||||
|
||||
.p-message-contrast {
|
||||
@apply bg-surface-900 outline-surface-950 text-surface-50
|
||||
dark:bg-surface-0 dark:outline-surface-100 dark:text-surface-950
|
||||
shadow-[0px_4px_8px_0px_rgba(0,0,0,0.04)]
|
||||
}
|
||||
|
||||
.p-message-contrast .p-message-close-button {
|
||||
@apply hover:bg-surface-800 focus-visible:outline-surface-50
|
||||
dark:hover:bg-surface-100 dark:focus-visible:outline-surface-950
|
||||
}
|
||||
|
||||
.p-message-contrast.p-message-outlined {
|
||||
@apply text-surface-950 outline-surface-950 dark:text-surface-0 dark:outline-surface-0
|
||||
}
|
||||
|
||||
.p-message-contrast.p-message-simple {
|
||||
@apply text-surface-950 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-message-text {
|
||||
@apply text-base font-medium
|
||||
}
|
||||
|
||||
.p-message-icon {
|
||||
@apply text-lg w-[1.125rem] h-[1.125rem]
|
||||
}
|
||||
|
||||
.p-message-enter-from {
|
||||
@apply opacity-0
|
||||
}
|
||||
|
||||
.p-message-enter-active {
|
||||
@apply transition-opacity duration-300
|
||||
}
|
||||
|
||||
.p-message.p-message-leave-from {
|
||||
@apply max-h-[1000px]
|
||||
}
|
||||
|
||||
.p-message.p-message-leave-to {
|
||||
@apply max-h-0 opacity-0 m-0
|
||||
}
|
||||
|
||||
.p-message-leave-active {
|
||||
@apply overflow-hidden [transition:max-height_0.45s_cubic-bezier(0,1,0,1),opacity_0.3s,margin0.3s]
|
||||
}
|
||||
|
||||
.p-message-leave-active .p-message-close-button {
|
||||
@apply opacity-0
|
||||
}
|
||||
|
||||
.p-message-sm .p-message-content {
|
||||
@apply px-2.5 py-[0.375rem]
|
||||
}
|
||||
|
||||
.p-message-sm .p-message-text {
|
||||
@apply text-sm
|
||||
}
|
||||
|
||||
.p-message-sm .p-message-icon {
|
||||
@apply w-4 h-4 text-sm
|
||||
}
|
||||
|
||||
.p-message-sm .p-message-close-icon {
|
||||
@apply w-3.5 h-3.5 text-sm
|
||||
}
|
||||
|
||||
.p-message-lg .p-message-content {
|
||||
@apply px-3.5 py-2.5
|
||||
}
|
||||
|
||||
.p-message-lg .p-message-text {
|
||||
@apply text-xl
|
||||
}
|
||||
|
||||
.p-message-lg .p-message-icon {
|
||||
@apply w-5 h-5 text-xl
|
||||
}
|
||||
|
||||
.p-message-lg .p-message-close-icon {
|
||||
@apply w-[1.125rem] h-[1.125rem] text-xl
|
||||
}
|
||||
|
||||
.p-message-outlined {
|
||||
@apply bg-transparent outline outline-1
|
||||
}
|
||||
|
||||
.p-message-simple {
|
||||
@apply bg-transparent outline-none shadow-none
|
||||
}
|
||||
|
||||
.p-message-simple .p-message-content {
|
||||
@apply p-0
|
||||
}
|
||||
|
||||
.p-message-outlined .p-message-close-button:hover,
|
||||
.p-message-simple .p-message-close-button:hover {
|
||||
@apply bg-transparent
|
||||
}
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
.p-metergroup {
|
||||
@apply flex gap-4
|
||||
}
|
||||
|
||||
.p-metergroup-meters {
|
||||
@apply flex bg-surface-200 dark:bg-surface-700 rounded-md
|
||||
}
|
||||
|
||||
.p-metergroup-label-list {
|
||||
@apply flex flex-wrap m-0 p-0 list-none
|
||||
}
|
||||
|
||||
.p-metergroup-label {
|
||||
@apply inline-flex items-center gap-2
|
||||
}
|
||||
|
||||
.p-metergroup-label-marker {
|
||||
@apply inline-flex w-2 h-2 rounded-full
|
||||
}
|
||||
|
||||
.p-metergroup-label-icon {
|
||||
@apply text-base w-4 h-4
|
||||
}
|
||||
|
||||
.p-metergroup-horizontal {
|
||||
@apply flex-col
|
||||
}
|
||||
|
||||
.p-metergroup-label-list-horizontal {
|
||||
@apply gap-4
|
||||
}
|
||||
|
||||
.p-metergroup-horizontal .p-metergroup-meters {
|
||||
@apply h-2
|
||||
}
|
||||
|
||||
.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
|
||||
@apply rounded-s-md
|
||||
}
|
||||
|
||||
.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
|
||||
@apply rounded-e-md
|
||||
}
|
||||
|
||||
.p-metergroup-vertical {
|
||||
@apply flex-row
|
||||
}
|
||||
|
||||
.p-metergroup-label-list-vertical {
|
||||
@apply flex-col gap-2
|
||||
}
|
||||
|
||||
.p-metergroup-vertical .p-metergroup-meters {
|
||||
@apply flex-col w-2 h-full
|
||||
}
|
||||
|
||||
.p-metergroup-vertical .p-metergroup-label-list {
|
||||
@apply items-start
|
||||
}
|
||||
|
||||
.p-metergroup-vertical .p-metergroup-meter:first-of-type {
|
||||
@apply rounded-ss-md rounded-se-md
|
||||
}
|
||||
|
||||
.p-metergroup-vertical .p-metergroup-meter:last-of-type {
|
||||
@apply rounded-ee-md rounded-es-md
|
||||
}
|
||||
|
|
@ -1,143 +0,0 @@
|
|||
@import './checkbox';
|
||||
@import './chip';
|
||||
@import './inputtext';
|
||||
@import './iconfield';
|
||||
|
||||
.p-multiselect {
|
||||
@apply inline-flex cursor-pointer relative select-none rounded-md
|
||||
bg-surface-0 dark:bg-surface-950
|
||||
border border-surface-300 dark:border-surface-700
|
||||
shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
|
||||
transition-colors duration-200
|
||||
}
|
||||
|
||||
.p-multiselect:not(.p-disabled):hover {
|
||||
@apply border-surface-400 dark:border-surface-600
|
||||
}
|
||||
|
||||
.p-multiselect:not(.p-disabled).p-focus {
|
||||
@apply border-primary
|
||||
}
|
||||
|
||||
.p-multiselect.p-variant-filled {
|
||||
@apply bg-surface-50 dark:bg-surface-800
|
||||
}
|
||||
|
||||
.p-multiselect.p-invalid {
|
||||
@apply border-red-400 dark:border-red-300
|
||||
}
|
||||
|
||||
.p-multiselect.p-disabled {
|
||||
@apply bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400 opacity-100 cursor-default
|
||||
}
|
||||
|
||||
.p-multiselect-dropdown {
|
||||
@apply flex items-center justify-center shrink-0 bg-transparent
|
||||
text-surface-500 dark:text-surface-400 w-10 rounded-e-md
|
||||
}
|
||||
|
||||
.p-multiselect-clear-icon {
|
||||
@apply absolute top-1/2 -mt-2 text-surface-500 dark:text-surface-400 end-10
|
||||
}
|
||||
|
||||
.p-multiselect-label-container {
|
||||
@apply overflow-hidden flex-auto
|
||||
}
|
||||
|
||||
.p-multiselect-label {
|
||||
@apply flex items-center gap-1 whitespace-nowrap overflow-hidden text-ellipsis px-3 py-2 text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-multiselect-label.p-placeholder {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-multiselect.p-disabled .p-multiselect-label {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-multiselect-label-empty {
|
||||
@apply overflow-hidden opacity-0
|
||||
}
|
||||
|
||||
.p-multiselect .p-multiselect-overlay {
|
||||
@apply min-w-full
|
||||
}
|
||||
|
||||
.p-multiselect-overlay {
|
||||
@apply absolute top-0 left-0 rounded-md
|
||||
bg-surface-0 dark:bg-surface-900
|
||||
border border-surface-200 dark:border-surface-700
|
||||
text-surface-700 dark:text-surface-0
|
||||
shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
|
||||
}
|
||||
|
||||
.p-multiselect-header {
|
||||
@apply flex items-center pt-2 pb-1 px-4
|
||||
}
|
||||
|
||||
.p-multiselect-header .p-checkbox {
|
||||
@apply me-2
|
||||
}
|
||||
|
||||
.p-multiselect-filter-container {
|
||||
@apply flex-auto
|
||||
}
|
||||
|
||||
.p-multiselect-filter {
|
||||
@apply w-full
|
||||
}
|
||||
|
||||
.p-multiselect-list-container {
|
||||
@apply overflow-auto
|
||||
}
|
||||
|
||||
.p-multiselect-list {
|
||||
@apply m-0 p-1 list-none gap-[2px] flex flex-col
|
||||
}
|
||||
|
||||
.p-multiselect-option {
|
||||
@apply cursor-pointer font-normal whitespace-nowrap relative overflow-hidden flex items-center gap-2 px-3 py-2
|
||||
rounded-sm text-surface-700 dark:text-surface-0 bg-transparent border-none
|
||||
transition-colors duration-200
|
||||
}
|
||||
|
||||
.p-multiselect-option:not(.p-disabled).p-focus {
|
||||
@apply bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-multiselect-option-group {
|
||||
@apply m-0 px-3 py-2 bg-transparent text-surface-500 dark:text-surface-400 font-semibold
|
||||
}
|
||||
|
||||
.p-multiselect-empty-message {
|
||||
@apply px-3 py-2
|
||||
}
|
||||
|
||||
.p-multiselect-label .p-chip {
|
||||
@apply py-1 rounded-sm
|
||||
}
|
||||
|
||||
.p-multiselect-label:has(.p-chip) {
|
||||
@apply py-1 px-[0.375rem]
|
||||
}
|
||||
|
||||
.p-multiselect-fluid {
|
||||
@apply flex
|
||||
}
|
||||
|
||||
.p-multiselect-sm .p-multiselect-label {
|
||||
@apply text-sm px-[0.625rem] py-[0.375rem]
|
||||
}
|
||||
|
||||
.p-multiselect-sm .p-multiselect-dropdown .p-icon {
|
||||
@apply text-sm w-[0.875rem] h-[0.875rem]
|
||||
}
|
||||
|
||||
.p-multiselect-lg .p-multiselect-label {
|
||||
@apply text-lg px-[0.875rem] py-[0.625rem]
|
||||
}
|
||||
|
||||
.p-multiselect-lg .p-multiselect-dropdown .p-icon {
|
||||
@apply text-lg w-[1.125rem] h-[1.125rem]
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
@import './button';
|
||||
@import './listbox';
|
||||
|
||||
.p-orderlist {
|
||||
@apply flex gap-[1.125rem]
|
||||
}
|
||||
|
||||
.p-orderlist-controls {
|
||||
@apply flex flex-col justify-center gap-2
|
||||
}
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
.p-organizationchart-table {
|
||||
@apply border-spacing-0 border-separate my-0 mx-auto
|
||||
}
|
||||
|
||||
.p-organizationchart-table > tbody > tr > td {
|
||||
@apply text-center align-top py-0 px-3
|
||||
}
|
||||
|
||||
.p-organizationchart-node {
|
||||
@apply inline-block relative py-3 px-4 rounded-md
|
||||
border border-surface-200 dark:border-surface-700
|
||||
bg-surface-0 dark:bg-surface-900
|
||||
text-surface-700 dark:text-surface-0
|
||||
transition-colors duration-200
|
||||
}
|
||||
|
||||
.p-organizationchart-node:has(.p-organizationchart-node-toggle-button) {
|
||||
@apply pt-3 px-4 pb-5
|
||||
}
|
||||
|
||||
.p-organizationchart-node.p-organizationchart-node-selectable:not(.p-organizationchart-node-selected):hover {
|
||||
@apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-organizationchart-node-selected {
|
||||
@apply bg-highlight
|
||||
}
|
||||
|
||||
.p-organizationchart-node-toggle-button {
|
||||
@apply absolute -bottom-3 -ms-3 z-20 start-1/2 select-none cursor-pointer w-6 h-6 no-underline rounded-full
|
||||
inline-flex items-center justify-center transition-colors duration-200
|
||||
border border-surface-200 dark:border-surface-700
|
||||
bg-surface-0 text-surface-500 hover:bg-surface-100 hover:text-surface-700
|
||||
dark:bg-surface-900 dark:text-surface-400 dark:hover:bg-surface-800 dark:hover:text-surface-0
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
|
||||
}
|
||||
.p-organizationchart-node-toggle-button-icon {
|
||||
@apply relative top-px
|
||||
}
|
||||
|
||||
.p-organizationchart-connector-down {
|
||||
@apply my-0 mx-auto h-6 w-px bg-surface-200 dark:bg-surface-700
|
||||
}
|
||||
|
||||
.p-organizationchart-connector-right {
|
||||
@apply rounded-none
|
||||
}
|
||||
|
||||
.p-organizationchart-connector-left {
|
||||
@apply rounded-none border-e border-surface-200 dark:border-surface-700
|
||||
}
|
||||
|
||||
.p-organizationchart-connector-top {
|
||||
@apply border-t border-surface-200 dark:border-surface-700
|
||||
}
|
||||
|
||||
.p-organizationchart-node-selectable {
|
||||
@apply cursor-pointer
|
||||
}
|
||||
|
||||
.p-organizationchart-connectors :nth-child(1 of .p-organizationchart-connector-left) {
|
||||
@apply border-e-0
|
||||
}
|
||||
|
||||
.p-organizationchart-connectors :nth-last-child(1 of .p-organizationchart-connector-left) {
|
||||
@apply rounded-se-md
|
||||
}
|
||||
|
||||
.p-organizationchart-connectors :nth-child(1 of .p-organizationchart-connector-right) {
|
||||
@apply border-s border-surface-200 dark:border-surface-700 rounded-ss-md
|
||||
}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
@import './badge';
|
||||
|
||||
.p-overlaybadge {
|
||||
@apply relative
|
||||
}
|
||||
|
||||
.p-overlaybadge .p-badge {
|
||||
@apply absolute top-0 end-0 translate-x-[50%] translate-y-[-50%] origin-[100%_0] m-0 outline outline-2 outline-surface-0 dark:outline-surface-900
|
||||
}
|
||||
|
||||
.p-overlaybadge .p-badge:dir(rtl) {
|
||||
@apply -translate-x-1/2 -translate-y-1/2
|
||||
}
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
.p-paginator {
|
||||
@apply flex items-center justify-center flex-wrap py-2 px-4 rounded-md gap-1
|
||||
bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-paginator-content {
|
||||
@apply flex items-center justify-center flex-wrap gap-1
|
||||
}
|
||||
|
||||
.p-paginator-content-start {
|
||||
@apply ms-auto
|
||||
}
|
||||
|
||||
.p-paginator-content-end {
|
||||
@apply me-auto
|
||||
}
|
||||
|
||||
.p-paginator-page,
|
||||
.p-paginator-next,
|
||||
.p-paginator-last,
|
||||
.p-paginator-first,
|
||||
.p-paginator-prev {
|
||||
@apply cursor-pointer inline-flex items-center justify-center leading-none overflow-hidden relative
|
||||
bg-transparent border-none min-w-10 h-10 transition-colors duration-200 rounded-full p-0 m-0
|
||||
text-surface-500 dark:text-surface-400
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
|
||||
}
|
||||
|
||||
.p-paginator-page:not(.p-disabled):not(.p-paginator-page-selected):hover,
|
||||
.p-paginator-first:not(.p-disabled):hover,
|
||||
.p-paginator-prev:not(.p-disabled):hover,
|
||||
.p-paginator-next:not(.p-disabled):hover,
|
||||
.p-paginator-last:not(.p-disabled):hover {
|
||||
@apply bg-surface-100 text-surface-600 dark:bg-surface-800 dark:text-surface-300
|
||||
}
|
||||
|
||||
.p-paginator-page.p-paginator-page-selected {
|
||||
@apply bg-highlight
|
||||
}
|
||||
|
||||
.p-paginator-current {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-paginator-pages {
|
||||
@apply flex items-center gap-1
|
||||
}
|
||||
|
||||
.p-paginator-jtp-input .p-inputtext {
|
||||
@apply max-w-10
|
||||
}
|
||||
|
||||
.p-paginator-first:dir(rtl),
|
||||
.p-paginator-prev:dir(rtl),
|
||||
.p-paginator-next:dir(rtl),
|
||||
.p-paginator-last:dir(rtl) {
|
||||
@apply rotate-180
|
||||
}
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
@import './button';
|
||||
|
||||
.p-panel {
|
||||
@apply border border-surface-200 dark:border-surface-700 rounded-md
|
||||
bg-surface-0 dark:bg-surface-900
|
||||
text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-panel-header {
|
||||
@apply flex justify-between items-center p-[1.125rem]
|
||||
}
|
||||
|
||||
.p-panel-toggleable .p-panel-header {
|
||||
@apply py-[0.375rem] px-[1.125rem]
|
||||
}
|
||||
|
||||
.p-panel-title {
|
||||
@apply leading-none font-semibold
|
||||
}
|
||||
|
||||
.p-panel-content {
|
||||
@apply pt-0 pb-[1.125rem] px-[1.125rem]
|
||||
}
|
||||
|
||||
.p-panel-footer {
|
||||
@apply pt-0 pb-[1.125rem] px-[1.125rem]
|
||||
}
|
||||
|
|
@ -1,94 +0,0 @@
|
|||
.p-panelmenu {
|
||||
@apply flex flex-col gap-2
|
||||
}
|
||||
|
||||
.p-panelmenu-panel {
|
||||
@apply bg-surface-0 dark:bg-surface-900 rounded-md p-1
|
||||
border border-surface-200 dark:border-surface-700
|
||||
text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-panelmenu-header {
|
||||
@apply outline-none
|
||||
}
|
||||
|
||||
.p-panelmenu-header-content {
|
||||
@apply rounded-md transition-colors duration-200 text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-panelmenu-header-link {
|
||||
@apply flex items-center gap-2 px-3 py-2 select-none cursor-pointer relative no-underline text-inherit
|
||||
}
|
||||
|
||||
.p-panelmenu-header-icon,
|
||||
.p-panelmenu-item-icon {
|
||||
@apply text-surface-400 dark:text-surface-500
|
||||
}
|
||||
|
||||
.p-panelmenu-submenu-icon {
|
||||
@apply text-surface-400 dark:text-surface-500
|
||||
}
|
||||
|
||||
.p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
|
||||
@apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-icon {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-submenu-icon {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-panelmenu-header:not(.p-panelmenu-header-active) .p-panelmenu-submenu-icon:dir(rtl) {
|
||||
@apply rotate-180;
|
||||
}
|
||||
|
||||
.p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover {
|
||||
@apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover .p-panelmenu-header-icon {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover .p-panelmenu-submenu-icon {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-panelmenu-submenu {
|
||||
@apply m-0 py-0 ps-4 outline-none list-none
|
||||
}
|
||||
|
||||
.p-panelmenu-item-link {
|
||||
@apply flex items-center gap-2 px-3 py-2 select-none cursor-pointer no-underline text-inherit relative overflow-hidden
|
||||
}
|
||||
|
||||
.p-panelmenu-item-content {
|
||||
@apply rounded-md transition-colors duration-200 text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-panelmenu-item.p-focus > .p-panelmenu-item-content {
|
||||
@apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-panelmenu-item.p-focus > .p-panelmenu-item-content .p-panelmenu-item-icon {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-panelmenu-item.p-focus > .p-panelmenu-item-content .p-panelmenu-submenu-icon {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover {
|
||||
@apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover .p-panelmenu-item-icon {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover .p-panelmenu-submenu-icon {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
@import './inputtext';
|
||||
|
||||
.p-password {
|
||||
@apply inline-flex relative
|
||||
}
|
||||
|
||||
.p-password .p-password-overlay {
|
||||
@apply min-w-full
|
||||
}
|
||||
|
||||
.p-password-meter {
|
||||
@apply h-3 bg-surface-200 dark:bg-surface-700 rounded-md
|
||||
}
|
||||
|
||||
.p-password-meter-label {
|
||||
@apply h-full w-0 transition-[width] duration-1000 ease-in-out rounded-md
|
||||
}
|
||||
|
||||
.p-password-meter-weak {
|
||||
@apply bg-red-500 dark:bg-red-400
|
||||
}
|
||||
|
||||
.p-password-meter-medium {
|
||||
@apply bg-amber-500 dark:bg-amber-400
|
||||
}
|
||||
|
||||
.p-password-meter-strong {
|
||||
@apply bg-green-500 dark:bg-green-400
|
||||
}
|
||||
|
||||
.p-password-fluid {
|
||||
@apply flex
|
||||
}
|
||||
|
||||
.p-password-fluid .p-password-input {
|
||||
@apply w-full
|
||||
}
|
||||
|
||||
.p-password-input::-ms-reveal,
|
||||
.p-password-input::-ms-clear {
|
||||
@apply hidden
|
||||
}
|
||||
|
||||
.p-password-overlay {
|
||||
@apply p-3 rounded-md bg-surface-0 dark:bg-surface-900
|
||||
border border-surface-200 dark:border-surface-700
|
||||
text-surface-700 dark:text-surface-0
|
||||
shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
|
||||
}
|
||||
|
||||
.p-password-content {
|
||||
@apply flex flex-col gap-2
|
||||
}
|
||||
|
||||
.p-password-toggle-mask-icon {
|
||||
@apply end-3 text-surface-500 dark:text-surface-400 absolute top-1/2 -mt-2 w-4 h-4
|
||||
}
|
||||
|
||||
.p-password:has(.p-password-toggle-mask-icon) .p-password-input {
|
||||
@apply pe-10
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
@import './button';
|
||||
@import './listbox';
|
||||
|
||||
.p-picklist {
|
||||
@apply flex gap-[1.125rem]
|
||||
}
|
||||
|
||||
.p-picklist-controls {
|
||||
@apply flex flex-col justify-center gap-2
|
||||
}
|
||||
|
||||
.p-picklist-list-container {
|
||||
@apply flex-grow flex-shrink basis-1/2
|
||||
}
|
||||
|
||||
.p-picklist .p-listbox {
|
||||
@apply h-full
|
||||
}
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
.p-popover {
|
||||
@apply mt-[10px] bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
|
||||
border border-surface-200 dark:border-surface-700
|
||||
rounded-md shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
|
||||
before:bottom-full before:left-5 before:h-0 before:w-0 before:absolute before:pointer-events-none
|
||||
before:border-[10px] before:-ms-[10px] before:border-transparent before:border-b-surface-200 dark:before:border-b-surface-700
|
||||
after:bottom-full after:left-5 after:h-0 after:w-0 after:absolute after:pointer-events-none
|
||||
after:border-[8px] after:-ms-[8px] after:border-transparent after:border-b-surface-0 dark:after:border-b-surface-900
|
||||
}
|
||||
|
||||
.p-popover-content {
|
||||
@apply p-3
|
||||
}
|
||||
|
||||
.p-popover-flipped {
|
||||
@apply -mt-[10px] mb-[10px]
|
||||
}
|
||||
|
||||
.p-popover-enter-from {
|
||||
@apply opacity-0 scale-y-75
|
||||
}
|
||||
|
||||
.p-popover-leave-to {
|
||||
@apply opacity-0
|
||||
}
|
||||
|
||||
.p-popover-enter-active {
|
||||
@apply [transition:transform_120ms_cubic-bezier(0,0,0.2,1),opacity_120ms_cubic-bezier(0,0,0.2,1)]
|
||||
}
|
||||
|
||||
.p-popover-leave-active {
|
||||
@apply transition-opacity duration-100 ease-linear
|
||||
}
|
||||
|
||||
.p-popover-flipped:after,
|
||||
.p-popover-flipped:before {
|
||||
@apply bottom-auto top-full
|
||||
}
|
||||
|
||||
.p-popover.p-popover-flipped:after {
|
||||
@apply border-b-transparent border-t-surface-0 dark:border-t-surface-900
|
||||
}
|
||||
|
||||
.p-popover.p-popover-flipped:before {
|
||||
@apply border-b-transparent border-t-surface-200 dark:border-t-surface-700
|
||||
}
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
.p-progressbar {
|
||||
@apply relative overflow-hidden h-5 bg-surface-200 dark:bg-surface-700 rounded-md
|
||||
}
|
||||
|
||||
.p-progressbar-value {
|
||||
@apply m-0 bg-primary
|
||||
}
|
||||
|
||||
.p-progressbar-label {
|
||||
@apply text-primary-contrast text-xs font-semibold
|
||||
}
|
||||
|
||||
.p-progressbar-determinate .p-progressbar-value {
|
||||
@apply h-full w-0 absolute flex items-center justify-center overflow-hidden transition-[width] duration-1000 ease-in-out
|
||||
}
|
||||
|
||||
.p-progressbar-determinate .p-progressbar-label {
|
||||
@apply inline-flex
|
||||
}
|
||||
|
||||
.p-progressbar-indeterminate .p-progressbar-value::before {
|
||||
@apply content-[''] absolute bg-inherit top-0 start-0 bottom-0 will-change-[inset-inline-start,inset-inline-end];
|
||||
}
|
||||
|
||||
.p-progressbar-indeterminate .p-progressbar-value::before {
|
||||
animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
|
||||
}
|
||||
|
||||
.p-progressbar-indeterminate .p-progressbar-value::after {
|
||||
@apply content-[''] absolute bg-inherit top-0 start-0 bottom-0 will-change-[inset-inline-start,inset-inline-end];
|
||||
|
||||
}
|
||||
|
||||
.p-progressbar-indeterminate .p-progressbar-value::after {
|
||||
animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
|
||||
animation-delay: 1.15s;
|
||||
}
|
||||
|
||||
@keyframes p-progressbar-indeterminate-anim {
|
||||
0% {
|
||||
inset-inline-start: -35%;
|
||||
inset-inline-end: 100%;
|
||||
}
|
||||
60% {
|
||||
inset-inline-start: 100%;
|
||||
inset-inline-end: -90%;
|
||||
}
|
||||
100% {
|
||||
inset-inline-start: 100%;
|
||||
inset-inline-end: -90%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes p-progressbar-indeterminate-anim-short {
|
||||
0% {
|
||||
inset-inline-start: -200%;
|
||||
inset-inline-end: 100%;
|
||||
}
|
||||
60% {
|
||||
inset-inline-start: 107%;
|
||||
inset-inline-end: -8%;
|
||||
}
|
||||
100% {
|
||||
inset-inline-start: 107%;
|
||||
inset-inline-end: -8%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
.p-progressspinner {
|
||||
@apply relative my-0 mx-auto w-[100px] h-[100px] inline-block
|
||||
before:block before:pt-[100%]
|
||||
}
|
||||
|
||||
.p-progressspinner-spin {
|
||||
@apply h-full origin-center w-full absolute top-0 bottom-0 start-0 end-0 m-auto;
|
||||
}
|
||||
|
||||
.p-progressspinner-spin {
|
||||
animation: p-progressspinner-rotate 2s linear infinite;
|
||||
}
|
||||
|
||||
.p-progressspinner-circle {
|
||||
stroke-dasharray: 89, 200;
|
||||
stroke-dashoffset: 0;
|
||||
stroke: theme(colors.red.500);
|
||||
stroke-linecap: round;
|
||||
animation: p-progressspinner-dash 1.5s ease-in-out infinite, p-progressspinner-color 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes p-progressspinner-rotate {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes p-progressspinner-dash {
|
||||
0% {
|
||||
stroke-dasharray: 1, 200;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
50% {
|
||||
stroke-dasharray: 89, 200;
|
||||
stroke-dashoffset: -35px;
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: 89, 200;
|
||||
stroke-dashoffset: -124px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes p-progressspinner-color {
|
||||
100%,
|
||||
0% {
|
||||
stroke: theme(colors.red.500);
|
||||
}
|
||||
40% {
|
||||
stroke: theme(colors.blue.500);
|
||||
}
|
||||
66% {
|
||||
stroke: theme(colors.green.500);
|
||||
}
|
||||
80%,
|
||||
90% {
|
||||
stroke: theme(colors.yellow.500);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,93 +0,0 @@
|
|||
.p-radiobutton {
|
||||
@apply relative inline-flex select-none w-5 h-5
|
||||
}
|
||||
|
||||
.p-radiobutton-input {
|
||||
@apply cursor-pointer disabled:cursor-default appearance-none absolute start-0 top-0 w-full h-full m-0 p-0 opacity-0 z-10
|
||||
border border-transparent rounded-full
|
||||
}
|
||||
|
||||
.p-radiobutton-box {
|
||||
@apply flex justify-center items-center rounded-full
|
||||
border border-surface-300 dark:border-surface-700
|
||||
bg-surface-0 dark:bg-surface-950
|
||||
w-5 h-5
|
||||
transition-colors duration-200
|
||||
shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
|
||||
}
|
||||
|
||||
.p-radiobutton-icon {
|
||||
@apply bg-transparent text-xs w-3 h-3 rounded-full
|
||||
transition-all duration-200 backface-hidden
|
||||
}
|
||||
|
||||
.p-radiobutton-icon {
|
||||
@apply scale-[0.1]
|
||||
}
|
||||
|
||||
.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
|
||||
@apply border-surface-400 dark:border-surface-600
|
||||
}
|
||||
|
||||
.p-radiobutton-checked .p-radiobutton-box {
|
||||
@apply border-primary bg-primary
|
||||
}
|
||||
|
||||
.p-radiobutton-checked .p-radiobutton-box .p-radiobutton-icon {
|
||||
@apply bg-primary-contrast visible
|
||||
}
|
||||
|
||||
.p-radiobutton-checked .p-radiobutton-box .p-radiobutton-icon {
|
||||
@apply scale-100
|
||||
}
|
||||
|
||||
.p-radiobutton-checked:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
|
||||
@apply border-primary-emphasis bg-primary-emphasis
|
||||
}
|
||||
|
||||
.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-radiobutton-checked .p-radiobutton-box .p-radiobutton-icon {
|
||||
@apply bg-primary-contrast
|
||||
}
|
||||
|
||||
.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
|
||||
@apply outline outline-1 outline-offset-2 outline-primary
|
||||
}
|
||||
|
||||
.p-radiobutton.p-invalid > .p-radiobutton-box {
|
||||
@apply border-red-400 dark:border-red-300
|
||||
}
|
||||
|
||||
.p-radiobutton.p-variant-filled .p-radiobutton-box {
|
||||
@apply bg-surface-50 dark:bg-surface-800
|
||||
}
|
||||
|
||||
.p-radiobutton.p-disabled {
|
||||
@apply opacity-100
|
||||
}
|
||||
|
||||
.p-radiobutton.p-disabled .p-radiobutton-box {
|
||||
@apply bg-surface-200 dark:bg-surface-400
|
||||
border-surface-300 dark:border-surface-700
|
||||
}
|
||||
|
||||
.p-radiobutton-checked.p-disabled .p-radiobutton-box .p-radiobutton-icon {
|
||||
@apply bg-surface-700 dark:bg-surface-400
|
||||
}
|
||||
|
||||
.p-radiobutton-sm,
|
||||
.p-radiobutton-sm .p-radiobutton-box {
|
||||
@apply w-4 h-4
|
||||
}
|
||||
|
||||
.p-radiobutton-sm .p-radiobutton-icon {
|
||||
@apply w-2 h-2
|
||||
}
|
||||
|
||||
.p-radiobutton-lg,
|
||||
.p-radiobutton-lg .p-radiobutton-box {
|
||||
@apply w-6 h-6
|
||||
}
|
||||
|
||||
.p-radiobutton-lg .p-radiobutton-icon {
|
||||
@apply w-4 h-4
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
.p-rating {
|
||||
@apply relative flex items-center gap-1
|
||||
}
|
||||
|
||||
.p-rating-option {
|
||||
@apply inline-flex items-center cursor-pointer rounded-full
|
||||
}
|
||||
|
||||
.p-rating-option.p-focus-visible {
|
||||
@apply outline outline-1 outline-offset-2 outline-primary
|
||||
}
|
||||
|
||||
.p-rating-icon {
|
||||
@apply text-surface-500 dark:text-surface-400 text-base w-4 h-4 transition-colors duration-200
|
||||
}
|
||||
|
||||
.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-option:hover .p-rating-icon {
|
||||
@apply text-primary
|
||||
}
|
||||
|
||||
.p-rating-option-active .p-rating-icon {
|
||||
@apply text-primary
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
.p-ink {
|
||||
@apply block absolute bg-black/10 dark:bg-white/30 scale-0 rounded-[100%] pointer-events-none
|
||||
}
|
||||
|
||||
.p-ink-active {
|
||||
@apply transition-[opacity,transform] duration-500 scale-[2.5] opacity-0 ease-linear
|
||||
}
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
.p-scrollpanel-content-container {
|
||||
@apply overflow-hidden w-full h-full relative z-10 float-left
|
||||
}
|
||||
|
||||
.p-scrollpanel-content {
|
||||
@apply relative overflow-auto
|
||||
h-[calc(100%+18px)] w-[calc(100%+18px)]
|
||||
pt-0 ps-0 pr-[18px] pb-[18px] [scrollbar-width:none]
|
||||
}
|
||||
|
||||
.p-scrollpanel-content::-webkit-scrollbar {
|
||||
@apply hidden
|
||||
}
|
||||
|
||||
.p-scrollpanel-bar {
|
||||
@apply relative rounded-sm z-20 cursor-pointer opacity-0
|
||||
bg-surface-100 dark:bg-surface-800
|
||||
transition-opacity duration-200 border-none
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
|
||||
}
|
||||
|
||||
.p-scrollpanel-bar-y {
|
||||
@apply w-[9px] top-0
|
||||
}
|
||||
|
||||
.p-scrollpanel-bar-x {
|
||||
@apply h-[9px] bottom-0
|
||||
}
|
||||
|
||||
.p-scrollpanel-hidden {
|
||||
@apply invisible
|
||||
}
|
||||
|
||||
.p-scrollpanel:hover .p-scrollpanel-bar,
|
||||
.p-scrollpanel:active .p-scrollpanel-bar {
|
||||
@apply opacity-100
|
||||
}
|
||||
|
||||
.p-scrollpanel-grabbed {
|
||||
@apply select-none
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
@import './button';
|
||||
|
||||
.p-scrolltop.p-button {
|
||||
@apply fixed bottom-5 end-5
|
||||
}
|
||||
|
||||
.p-scrolltop-sticky.p-button {
|
||||
@apply sticky flex ms-auto
|
||||
}
|
||||
|
||||
.p-scrolltop-enter-from {
|
||||
@apply opacity-0
|
||||
}
|
||||
|
||||
.p-scrolltop-enter-active {
|
||||
@apply transition-opacity duration-150
|
||||
}
|
||||
|
||||
.p-scrolltop.p-scrolltop-leave-to {
|
||||
@apply opacity-0
|
||||
}
|
||||
|
||||
.p-scrolltop-leave-active {
|
||||
@apply transition-opacity duration-150
|
||||
}
|
||||
|
|
@ -1,144 +0,0 @@
|
|||
@import './button';
|
||||
@import './inputtext';
|
||||
@import './iconfield';
|
||||
|
||||
.p-select {
|
||||
@apply inline-flex cursor-pointer relative select-none rounded-md
|
||||
bg-surface-0 dark:bg-surface-950
|
||||
border border-surface-300 dark:border-surface-700
|
||||
shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
|
||||
transition-colors duration-200
|
||||
}
|
||||
|
||||
.p-select:not(.p-disabled):hover {
|
||||
@apply border-surface-400 dark:border-surface-600
|
||||
}
|
||||
|
||||
.p-select:not(.p-disabled).p-focus {
|
||||
@apply border-primary
|
||||
}
|
||||
|
||||
.p-select.p-variant-filled {
|
||||
@apply bg-surface-50 dark:bg-surface-800
|
||||
}
|
||||
|
||||
.p-select.p-invalid {
|
||||
@apply border-red-400 dark:border-red-300
|
||||
}
|
||||
|
||||
.p-select.p-disabled {
|
||||
@apply bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400 opacity-100 cursor-default
|
||||
}
|
||||
|
||||
.p-select-clear-icon {
|
||||
@apply absolute top-1/2 -mt-2 text-surface-500 dark:text-surface-400 end-10
|
||||
}
|
||||
|
||||
.p-select-dropdown {
|
||||
@apply flex items-center justify-center shrink-0 bg-transparent
|
||||
text-surface-500 dark:text-surface-400 w-10 rounded-e-md
|
||||
}
|
||||
|
||||
.p-select-label {
|
||||
@apply block whitespace-nowrap overflow-hidden flex-auto w-[1%]
|
||||
py-2 px-3 overflow-ellipsis
|
||||
text-surface-700 dark:text-surface-0 bg-transparent border-none outline-none
|
||||
}
|
||||
|
||||
.p-select-label.p-placeholder {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-select:has(.p-select-clear-icon) .p-select-label {
|
||||
@apply pe-7
|
||||
}
|
||||
|
||||
.p-select.p-disabled .p-select-label {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-select-label-empty {
|
||||
@apply overflow-hidden opacity-0
|
||||
}
|
||||
|
||||
input.p-select-label {
|
||||
@apply cursor-default
|
||||
}
|
||||
|
||||
.p-select .p-select-overlay {
|
||||
@apply min-w-full
|
||||
}
|
||||
|
||||
.p-select-overlay {
|
||||
@apply absolute top-0 left-0 rounded-md
|
||||
bg-surface-0 dark:bg-surface-900
|
||||
border border-surface-200 dark:border-surface-700
|
||||
text-surface-700 dark:text-surface-0
|
||||
shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
|
||||
}
|
||||
|
||||
.p-select-header {
|
||||
@apply pt-2 pb-1 px-4
|
||||
}
|
||||
|
||||
.p-select-filter {
|
||||
@apply w-full
|
||||
}
|
||||
|
||||
.p-select-list-container {
|
||||
@apply overflow-auto
|
||||
}
|
||||
|
||||
.p-select-option-group {
|
||||
@apply m-0 px-3 py-2 bg-transparent text-surface-500 dark:text-surface-400 font-semibold
|
||||
}
|
||||
|
||||
.p-select-list {
|
||||
@apply m-0 p-1 list-none gap-[2px] flex flex-col
|
||||
}
|
||||
|
||||
.p-select-option {
|
||||
@apply cursor-pointer font-normal whitespace-nowrap relative overflow-hidden flex items-center
|
||||
px-3 py-2 border-none text-surface-700 dark:text-surface-0 bg-transparent rounded-sm
|
||||
transition-colors duration-200
|
||||
}
|
||||
|
||||
.p-select-option:not(.p-select-option-selected):not(.p-disabled).p-focus {
|
||||
@apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-select-option.p-select-option-selected {
|
||||
@apply bg-highlight
|
||||
}
|
||||
|
||||
.p-select-option.p-select-option-selected.p-focus {
|
||||
@apply bg-highlight-emphasis
|
||||
}
|
||||
|
||||
.p-select-option-check-icon {
|
||||
@apply relative -ms-[0.375rem] me-[0.375rem] text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-select-empty-message {
|
||||
@apply px-3 py-2
|
||||
}
|
||||
|
||||
.p-select-fluid {
|
||||
@apply flex
|
||||
}
|
||||
|
||||
.p-select-sm .p-select-label {
|
||||
@apply text-sm px-[0.625rem] py-[0.375rem]
|
||||
}
|
||||
|
||||
.p-select-sm .p-select-dropdown .p-icon {
|
||||
@apply text-sm w-[0.875rem] h-[0.875rem]
|
||||
}
|
||||
|
||||
.p-select-lg .p-select-label {
|
||||
@apply text-lg px-[0.875rem] py-[0.625rem]
|
||||
}
|
||||
|
||||
.p-select-lg .p-select-dropdown .p-icon {
|
||||
@apply text-lg w-[1.125rem] h-[1.125rem]
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
@import './togglebutton';
|
||||
|
||||
.p-selectbutton {
|
||||
@apply inline-flex select-none rounded-md
|
||||
}
|
||||
|
||||
.p-selectbutton .p-togglebutton {
|
||||
@apply rounded-none border-y border-r border-s-0
|
||||
}
|
||||
|
||||
.p-selectbutton .p-togglebutton:focus-visible {
|
||||
@apply relative z-10
|
||||
}
|
||||
|
||||
.p-selectbutton .p-togglebutton:first-child {
|
||||
@apply border-s rounded-s-md
|
||||
}
|
||||
|
||||
.p-selectbutton .p-togglebutton:last-child {
|
||||
@apply rounded-e-md
|
||||
}
|
||||
|
||||
.p-selectbutton.p-invalid {
|
||||
@apply outline outline-offset-0 outline-red-400 dark:outline-red-300
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
.p-skeleton {
|
||||
@apply overflow-hidden bg-surface-200 dark:bg-surface-700 animate-pulse rounded-md
|
||||
}
|
||||
|
||||
.p-skeleton-circle {
|
||||
@apply rounded-full
|
||||
}
|
||||
|
||||
.p-skeleton-animation-none::after {
|
||||
@apply animate-none
|
||||
}
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
.p-slider {
|
||||
@apply relative bg-surface-200 dark:bg-surface-700 rounded-sm
|
||||
}
|
||||
|
||||
.p-slider-handle {
|
||||
@apply cursor-grab touch-none flex items-center justify-center h-[20px] w-[20px]
|
||||
bg-surface-200 dark:bg-surface-700 rounded-full
|
||||
transition-colors duration-200
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
|
||||
before:w-[16px] before:h-[16px] before:block before:rounded-full
|
||||
before:bg-surface-0 dark:before:bg-surface-950
|
||||
before:shadow-[0px_0.5px_0px_0px_rgba(0,0,0,0.08),0px_1px_1px_0px_rgba(0,0,0,0.14)]
|
||||
before:transition-colors before:duration-200
|
||||
}
|
||||
|
||||
.p-slider-range {
|
||||
@apply block bg-primary rounded-sm
|
||||
}
|
||||
|
||||
.p-slider.p-slider-horizontal {
|
||||
@apply h-[3px]
|
||||
}
|
||||
|
||||
.p-slider-horizontal .p-slider-range {
|
||||
@apply top-0 start-0 h-full
|
||||
}
|
||||
|
||||
.p-slider-horizontal .p-slider-handle {
|
||||
@apply top-1/2 -mt-[10px] -ms-[10px]
|
||||
}
|
||||
|
||||
.p-slider-vertical {
|
||||
@apply min-h-[100px] w-[3px]
|
||||
}
|
||||
|
||||
.p-slider-vertical .p-slider-handle {
|
||||
@apply start-1/2 -mb-[10px] -ms-[10px]
|
||||
}
|
||||
|
||||
.p-slider-vertical .p-slider-range {
|
||||
@apply bottom-0 start-0 w-full
|
||||
}
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
@import './button';
|
||||
|
||||
.p-speeddial {
|
||||
@apply static flex gap-2
|
||||
}
|
||||
|
||||
.p-speeddial-button {
|
||||
@apply z-10
|
||||
}
|
||||
|
||||
.p-speeddial-button.p-speeddial-rotate {
|
||||
@apply [transition:transform_250ms_cubic-bezier(0.4,0,0.2,1)_0ms,background_200ms,color_200ms,border-color_200ms] will-change-transform
|
||||
}
|
||||
|
||||
.p-speeddial-list {
|
||||
@apply m-0 p-0 list-none flex items-center justify-center pointer-events-none outline-none z-20 gap-2
|
||||
transition-[top] ease-linear duration-200
|
||||
}
|
||||
|
||||
.p-speeddial-item {
|
||||
@apply scale-0 opacity-0 [transition:transform_200ms_cubic-bezier(0.4,0,0.2,1)_0ms,opacity_0.8s] will-change-transform
|
||||
}
|
||||
|
||||
.p-speeddial-circle .p-speeddial-item,
|
||||
.p-speeddial-semi-circle .p-speeddial-item,
|
||||
.p-speeddial-quarter-circle .p-speeddial-item {
|
||||
@apply absolute
|
||||
}
|
||||
|
||||
.p-speeddial-mask {
|
||||
@apply absolute start-0 top-0 w-full h-full opacity-0 bg-black/40 dark:bg-black/60 rounded-md transition-opacity duration-150
|
||||
}
|
||||
|
||||
.p-speeddial-mask-visible {
|
||||
@apply pointer-events-none opacity-100 transition-opacity duration-150
|
||||
}
|
||||
|
||||
.p-speeddial-open .p-speeddial-list {
|
||||
@apply pointer-events-auto
|
||||
}
|
||||
|
||||
.p-speeddial-open .p-speeddial-item {
|
||||
@apply scale-100 opacity-100
|
||||
}
|
||||
|
||||
.p-speeddial-open .p-speeddial-rotate {
|
||||
@apply rotate-45
|
||||
}
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
@import './button';
|
||||
@import './tieredmenu';
|
||||
|
||||
.p-splitbutton {
|
||||
@apply inline-flex relative rounded-md
|
||||
}
|
||||
|
||||
.p-splitbutton-button {
|
||||
@apply rounded-e-none border-r-0 enabled:hover:border-r-0 enabled:active:border-r-0 focus-visible:z-10
|
||||
}
|
||||
|
||||
.p-splitbutton-dropdown {
|
||||
@apply rounded-s-none focus-visible:z-10
|
||||
}
|
||||
|
||||
.p-splitbutton .p-menu {
|
||||
@apply min-w-full
|
||||
}
|
||||
|
||||
.p-splitbutton-fluid {
|
||||
@apply w-full
|
||||
}
|
||||
|
||||
.p-splitbutton-rounded .p-splitbutton-dropdown {
|
||||
@apply rounded-e-[2rem]
|
||||
}
|
||||
|
||||
.p-splitbutton-rounded .p-splitbutton-button {
|
||||
@apply rounded-s-[2rem]
|
||||
}
|
||||
|
||||
.p-splitbutton-raised {
|
||||
@apply shadow-[0_3px_1px_-2px_rgba(0,0,0,0.2),0_2px_2px_0_rgba(0,0,0,0.14),0_1px_5px_0_rgba(0,0,0,0.12)]
|
||||
}
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
.p-splitter {
|
||||
@apply flex flex-wrap
|
||||
border border-surface-200 dark:border-surface-700 rounded-md
|
||||
bg-surface-0 dark:bg-surface-900
|
||||
text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-splitter-vertical {
|
||||
@apply flex-col
|
||||
}
|
||||
|
||||
.p-splitter-gutter {
|
||||
@apply flex-grow-0 flex-shrink-0 flex items-center justify-center z-10 bg-surface-200 dark:bg-surface-700
|
||||
}
|
||||
|
||||
.p-splitter-gutter-handle {
|
||||
@apply rounded-md bg-transparent
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
|
||||
transition-colors duration-200
|
||||
}
|
||||
|
||||
.p-splitter-horizontal.p-splitter-resizing {
|
||||
@apply cursor-col-resize select-none
|
||||
}
|
||||
|
||||
.p-splitter-vertical.p-splitter-resizing {
|
||||
@apply cursor-row-resize select-none
|
||||
}
|
||||
|
||||
.p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle {
|
||||
@apply h-[24px] w-full
|
||||
}
|
||||
|
||||
.p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle {
|
||||
@apply w-[24px] h-full
|
||||
}
|
||||
|
||||
.p-splitter-horizontal > .p-splitter-gutter {
|
||||
@apply cursor-col-resize
|
||||
}
|
||||
|
||||
.p-splitter-vertical > .p-splitter-gutter {
|
||||
@apply cursor-row-resize
|
||||
}
|
||||
|
||||
.p-splitterpanel {
|
||||
@apply flex-grow overflow-hidden
|
||||
}
|
||||
|
||||
.p-splitterpanel-nested {
|
||||
@apply flex
|
||||
}
|
||||
|
||||
.p-splitterpanel .p-splitter {
|
||||
@apply flex-grow border-none
|
||||
}
|
||||
|
|
@ -1,102 +0,0 @@
|
|||
.p-steplist {
|
||||
@apply relative flex justify-between items-center m-0 p-0 list-none overflow-x-auto
|
||||
}
|
||||
|
||||
.p-step {
|
||||
@apply relative flex flex-auto items-center gap-4 p-2 last-of-type:flex-initial
|
||||
}
|
||||
|
||||
.p-step-header {
|
||||
@apply border-none inline-flex items-center no-underline cursor-pointer
|
||||
transition-colors duration-200 rounded-md bg-transparent p-0 gap-2
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
|
||||
}
|
||||
|
||||
.p-step.p-disabled .p-step-header {
|
||||
@apply cursor-default
|
||||
}
|
||||
|
||||
|
||||
.p-stepper.p-stepper-readonly .p-step {
|
||||
@apply cursor-auto
|
||||
}
|
||||
|
||||
.p-step-title {
|
||||
@apply block whitespace-nowrap overflow-hidden text-ellipsis max-w-full
|
||||
text-surface-500 dark:text-surface-400 font-medium transition-colors duration-200
|
||||
}
|
||||
|
||||
.p-step-number {
|
||||
@apply flex items-center justify-center text-surface-500 dark:text-surface-400
|
||||
bg-surface-0 dark:bg-surface-900 border-2 border-surface-200 dark:border-surface-700
|
||||
min-w-8 h-8 leading-8 text-lg font-medium rounded-full z-10 relative
|
||||
after:absolute after:w-full after:h-full after:rounded-full after:shadow-[0px_0.5px_0px_0px_rgba(0,0,0,0.06),0px_1px_1px_0px_rgba(0,0,0,0.12)]
|
||||
}
|
||||
|
||||
.p-step-active .p-step-header {
|
||||
@apply cursor-default
|
||||
}
|
||||
|
||||
.p-step-active .p-step-number {
|
||||
@apply bg-surface-0 dark:bg-surface-900 text-primary border-surface-200 dark:border-surface-700
|
||||
}
|
||||
|
||||
.p-step-active .p-step-title {
|
||||
@apply text-primary
|
||||
}
|
||||
|
||||
.p-step:not(.p-disabled):focus-visible {
|
||||
@apply outline outline-1 outline-offset-2 outline-primary
|
||||
}
|
||||
|
||||
.p-step:has(~ .p-step-active) .p-stepper-separator {
|
||||
@apply bg-primary
|
||||
}
|
||||
|
||||
.p-stepper-separator {
|
||||
@apply flex-1 bg-surface-200 dark:bg-surface-700 w-full h-[2px] transition-colors duration-200
|
||||
}
|
||||
|
||||
.p-steppanels {
|
||||
@apply pt-[0.875rem] pb-[1.125rem] px-2
|
||||
}
|
||||
|
||||
.p-steppanel {
|
||||
@apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-stepper:has(.p-stepitem) {
|
||||
@apply flex flex-col
|
||||
}
|
||||
|
||||
.p-stepitem {
|
||||
@apply flex flex-col flex-initial
|
||||
}
|
||||
|
||||
.p-stepitem.p-stepitem-active {
|
||||
@apply flex-auto
|
||||
}
|
||||
|
||||
.p-stepitem .p-step {
|
||||
@apply flex-initial
|
||||
}
|
||||
|
||||
.p-stepitem .p-steppanel-content {
|
||||
@apply w-full ps-4
|
||||
}
|
||||
|
||||
.p-stepitem .p-steppanel {
|
||||
@apply flex flex-auto
|
||||
}
|
||||
|
||||
.p-stepitem .p-stepper-separator {
|
||||
@apply flex-grow-0 flex-shrink-0 basis-auto w-[2px] h-auto ms-[1.625rem] relative start-[-2.5px]
|
||||
}
|
||||
|
||||
.p-stepitem:has(~ .p-stepitem-active) .p-stepper-separator {
|
||||
@apply bg-primary
|
||||
}
|
||||
|
||||
.p-stepitem:last-of-type .p-steppanel {
|
||||
@apply ps-8
|
||||
}
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
.p-tabs {
|
||||
@apply flex flex-col
|
||||
}
|
||||
|
||||
.p-tablist {
|
||||
@apply flex relative
|
||||
}
|
||||
|
||||
.p-tabs-scrollable > .p-tablist {
|
||||
@apply overflow-hidden
|
||||
}
|
||||
|
||||
.p-tablist-viewport {
|
||||
@apply overflow-x-auto overflow-y-hidden overscroll-y-contain overscroll-x-auto
|
||||
}
|
||||
|
||||
.p-tablist-viewport::-webkit-scrollbar {
|
||||
@apply hidden
|
||||
}
|
||||
|
||||
.p-tablist-tab-list {
|
||||
@apply relative flex bg-surface-0 dark:bg-surface-900 border-b border-surface-200 dark:border-surface-700
|
||||
}
|
||||
|
||||
.p-tablist-content {
|
||||
@apply flex-grow
|
||||
}
|
||||
|
||||
.p-tablist-nav-button {
|
||||
@apply !absolute flex-shrink-0 top-0 z-20 h-full flex items-center justify-center cursor-pointer
|
||||
bg-surface-0 dark:bg-surface-900 text-surface-500 dark:text-surface-400 hover:text-surface-700 dark:hover:text-surface-0 w-10
|
||||
shadow-[0px_0px_10px_50px_rgba(255,255,255,0.6)] dark:shadow-[0px_0px_10px_50px] dark:shadow-surface-900/50
|
||||
focus-visible:z-10 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-[-1px] focus-visible:outline-primary
|
||||
transition-colors duration-200
|
||||
}
|
||||
|
||||
.p-tablist-prev-button {
|
||||
@apply start-0
|
||||
}
|
||||
|
||||
.p-tablist-next-button {
|
||||
@apply end-0
|
||||
}
|
||||
|
||||
.p-tablist-prev-button:dir(rtl),
|
||||
.p-tablist-next-button:dir(rtl) {
|
||||
@apply rotate-180
|
||||
}
|
||||
|
||||
.p-tab {
|
||||
@apply flex-shrink-0 cursor-pointer select-none relative whitespace-nowrap py-4 px-[1.125rem]
|
||||
border-b border-surface-200 dark:border-surface-700 font-semibold
|
||||
text-surface-500 dark:text-surface-400
|
||||
transition-colors duration-200 -mb-px
|
||||
}
|
||||
|
||||
.p-tab.p-disabled {
|
||||
@apply cursor-default
|
||||
}
|
||||
|
||||
.p-tab:not(.p-disabled):focus-visible {
|
||||
@apply z-10 outline outline-1 outline-offset-[-1px] outline-primary
|
||||
}
|
||||
|
||||
.p-tab:not(.p-tab-active):not(.p-disabled):hover {
|
||||
@apply text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-tab-active {
|
||||
@apply border-primary text-primary
|
||||
}
|
||||
|
||||
.p-tabpanels {
|
||||
@apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
|
||||
pt-[0.875rem] pb-[1.125rem] px-[1.125rem] outline-none
|
||||
}
|
||||
|
||||
.p-tablist-active-bar {
|
||||
@apply z-10 block absolute -bottom-px h-px bg-primary transition-[left] duration-200 ease-[cubic-bezier(0.35,0,0.25,1)]
|
||||
}
|
||||
|
||||
.p-tablist-viewport {
|
||||
@apply [scrollbar-behavior:smooth] [scrollbar-width:none]
|
||||
}
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
.p-tag {
|
||||
@apply inline-flex items-center justify-center
|
||||
bg-primary-100 dark:bg-primary-500/15
|
||||
text-primary-700 dark:text-primary-300
|
||||
text-sm font-bold py-1 px-2 rounded-md gap-1
|
||||
}
|
||||
|
||||
.p-tag-icon {
|
||||
@apply text-xs w-3 h-3
|
||||
}
|
||||
|
||||
.p-tag-rounded {
|
||||
@apply rounded-2xl
|
||||
}
|
||||
|
||||
.p-tag-success {
|
||||
@apply bg-green-100 dark:bg-green-500/15 text-green-700 dark:text-green-300
|
||||
}
|
||||
|
||||
.p-tag-info {
|
||||
@apply bg-sky-100 dark:bg-sky-500/15 text-sky-700 dark:text-sky-300
|
||||
}
|
||||
|
||||
.p-tag-warn {
|
||||
@apply bg-orange-100 dark:bg-orange-500/15 text-orange-700 dark:text-orange-300
|
||||
}
|
||||
|
||||
.p-tag-danger {
|
||||
@apply bg-red-100 dark:bg-red-500/15 text-red-700 dark:text-red-300
|
||||
}
|
||||
|
||||
.p-tag-secondary {
|
||||
@apply bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300
|
||||
}
|
||||
|
||||
.p-tag-contrast {
|
||||
@apply bg-surface-950 dark:bg-surface-0 text-surface-0 dark:text-surface-950
|
||||
}
|
||||
|
|
@ -1,104 +0,0 @@
|
|||
@import './common';
|
||||
|
||||
/* Form */
|
||||
@import './autocomplete';
|
||||
@import './cascadeselect';
|
||||
@import './checkbox';
|
||||
@import './colorpicker';
|
||||
@import './datepicker';
|
||||
@import './iconfield';
|
||||
@import './iftalabel';
|
||||
@import './inputgroup';
|
||||
@import './inputnumber';
|
||||
@import './inputotp';
|
||||
@import './inputtext';
|
||||
@import './floatlabel';
|
||||
@import './knob';
|
||||
@import './listbox';
|
||||
@import './multiselect';
|
||||
@import './password';
|
||||
@import './radiobutton';
|
||||
@import './rating';
|
||||
@import './select';
|
||||
@import './selectbutton';
|
||||
@import './slider';
|
||||
@import './textarea';
|
||||
@import './togglebutton';
|
||||
@import './toggleswitch';
|
||||
@import './treeselect';
|
||||
|
||||
/* Button */
|
||||
@import './button';
|
||||
@import './buttongroup';
|
||||
@import './speeddial';
|
||||
@import './splitbutton';
|
||||
|
||||
/* Data */
|
||||
@import './datatable';
|
||||
@import './dataview';
|
||||
@import './paginator';
|
||||
@import './picklist';
|
||||
@import './orderlist';
|
||||
@import './organizationchart';
|
||||
@import './timeline';
|
||||
@import './tree';
|
||||
@import './treetable';
|
||||
|
||||
/* Overlay */
|
||||
@import './confirmdialog';
|
||||
@import './confirmpopup';
|
||||
@import './dialog';
|
||||
@import './drawer';
|
||||
@import './popover';
|
||||
@import './tooltip';
|
||||
|
||||
/* Menu */
|
||||
@import './breadcrumb';
|
||||
@import './contextmenu';
|
||||
@import './dock';
|
||||
@import './menu';
|
||||
@import './menubar';
|
||||
@import './megamenu';
|
||||
@import './panelmenu';
|
||||
@import './tieredmenu';
|
||||
|
||||
/* Panel */
|
||||
@import './accordion';
|
||||
@import './card';
|
||||
@import './divider';
|
||||
@import './fieldset';
|
||||
@import './panel';
|
||||
@import './scrollpanel';
|
||||
@import './splitter';
|
||||
@import './stepper';
|
||||
@import './tabs';
|
||||
@import './toolbar';
|
||||
|
||||
/* File */
|
||||
@import './fileupload';
|
||||
|
||||
/* Message */
|
||||
@import './message';
|
||||
@import './toast';
|
||||
|
||||
/* Media */
|
||||
@import './carousel';
|
||||
@import './galleria';
|
||||
@import './image';
|
||||
@import './imagecompare';
|
||||
|
||||
/* Misc */
|
||||
@import './avatar';
|
||||
@import './badge';
|
||||
@import './blockui';
|
||||
@import './chip';
|
||||
@import './inplace';
|
||||
@import './metergroup';
|
||||
@import './overlaybadge';
|
||||
@import './progressbar';
|
||||
@import './progressspinner';
|
||||
@import './ripple';
|
||||
@import './scrolltop';
|
||||
@import './skeleton';
|
||||
@import './tag';
|
||||
@import './terminal';
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
.p-terminal {
|
||||
@apply h-72 overflow-auto px-3 py-2 rounded-md
|
||||
border border-surface-300 dark:border-surface-700
|
||||
bg-surface-0 dark:bg-surface-950
|
||||
text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-terminal-prompt {
|
||||
@apply flex items-center
|
||||
}
|
||||
|
||||
.p-terminal-prompt-value {
|
||||
@apply flex-auto border-none bg-transparent text-inherit p-0 outline-none text-base
|
||||
}
|
||||
|
||||
.p-terminal-prompt-label {
|
||||
@apply me-1
|
||||
}
|
||||
|
||||
.p-terminal-input::-ms-clear {
|
||||
@apply hidden
|
||||
}
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
.p-textarea {
|
||||
@apply appearance-none rounded-md
|
||||
border border-surface-300 dark:border-surface-700
|
||||
enabled:hover:border-surface-400 dark:enabled:hover:border-surface-600
|
||||
enabled:focus:border-primary
|
||||
bg-surface-0 dark:bg-surface-950
|
||||
text-surface-700 dark:text-surface-0
|
||||
disabled:bg-surface-200 disabled:text-surface-500 disabled:opacity-100 dark:disabled:bg-surface-700 dark:disabled:text-surface-400
|
||||
placeholder:text-surface-500 dark:placeholder:text-surface-400
|
||||
px-3 py-2
|
||||
transition-colors duration-200
|
||||
shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
|
||||
outline-none
|
||||
}
|
||||
|
||||
.p-textarea.p-invalid {
|
||||
@apply border-red-400 dark:border-red-300
|
||||
}
|
||||
|
||||
.p-textarea.p-variant-filled {
|
||||
@apply bg-surface-50 dark:bg-surface-800
|
||||
}
|
||||
|
||||
.p-textarea-fluid {
|
||||
@apply w-full
|
||||
}
|
||||
|
||||
.p-textarea-resizable {
|
||||
@apply overflow-hidden resize-none
|
||||
}
|
||||
|
||||
.p-textarea-sm {
|
||||
@apply text-sm px-[0.625rem] py-[0.375rem]
|
||||
}
|
||||
|
||||
.p-textarea-lg {
|
||||
@apply text-lg px-[0.875rem] py-[0.625rem]
|
||||
}
|
||||
|
|
@ -1,105 +0,0 @@
|
|||
.p-tieredmenu {
|
||||
@apply bg-surface-0 dark:bg-surface-900
|
||||
text-surface-700 dark:text-surface-0
|
||||
border border-surface-200 dark:border-surface-700
|
||||
rounded-md min-w-52
|
||||
}
|
||||
|
||||
.p-tieredmenu-root-list,
|
||||
.p-tieredmenu-submenu {
|
||||
@apply m-0 p-1 list-none outline-none flex flex-col gap-[2px]
|
||||
}
|
||||
|
||||
.p-tieredmenu-submenu {
|
||||
@apply absolute min-w-full z-10 rounded-md
|
||||
bg-surface-0 dark:bg-surface-900
|
||||
text-surface-700 dark:text-surface-0
|
||||
border border-surface-200 dark:border-surface-700
|
||||
shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
|
||||
}
|
||||
|
||||
.p-tieredmenu-item {
|
||||
@apply relative
|
||||
}
|
||||
|
||||
.p-tieredmenu-item-content {
|
||||
@apply transition-colors duration-200 rounded-sm text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-tieredmenu-item-link {
|
||||
@apply cursor-pointer flex items-center no-underline overflow-hidden relative text-inherit
|
||||
px-3 py-2 gap-2 select-none outline-none
|
||||
}
|
||||
|
||||
.p-tieredmenu-item-icon {
|
||||
@apply text-surface-400 dark:text-surface-500
|
||||
}
|
||||
|
||||
.p-tieredmenu-submenu-icon {
|
||||
@apply text-surface-400 dark:text-surface-500 ms-auto text-sm w-[0.875rem] h-[0.875rem]
|
||||
}
|
||||
|
||||
.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content {
|
||||
@apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content .p-tieredmenu-item-icon {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover {
|
||||
@apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover .p-tieredmenu-item-icon {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover .p-tieredmenu-submenu-icon {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-tieredmenu-item-active > .p-tieredmenu-item-content {
|
||||
@apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-item-icon {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-tieredmenu-separator {
|
||||
@apply border-t border-surface-200 dark:border-surface-700
|
||||
}
|
||||
|
||||
.p-tieredmenu-overlay {
|
||||
@apply shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
|
||||
}
|
||||
|
||||
.p-tieredmenu-enter-from,
|
||||
.p-tieredmenu-leave-active {
|
||||
@apply opacity-0
|
||||
}
|
||||
|
||||
.p-tieredmenu-enter-active {
|
||||
@apply transition-opacity duration-[250ms]
|
||||
}
|
||||
|
||||
.p-tieredmenu-mobile .p-tieredmenu-submenu {
|
||||
@apply static shadow-none border-none ps-4 pe-0
|
||||
}
|
||||
|
||||
.p-tieredmenu-mobile .p-tieredmenu-submenu-icon {
|
||||
@apply transition-transform duration-200 rotate-90
|
||||
}
|
||||
|
||||
.p-tieredmenu-mobile .p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon {
|
||||
@apply -rotate-90
|
||||
}
|
||||
|
|
@ -1,113 +0,0 @@
|
|||
.p-timeline {
|
||||
@apply flex flex-col flex-grow
|
||||
}
|
||||
|
||||
.p-timeline-left .p-timeline-event-opposite {
|
||||
@apply text-end
|
||||
}
|
||||
|
||||
.p-timeline-left .p-timeline-event-content {
|
||||
@apply text-start
|
||||
}
|
||||
|
||||
.p-timeline-right .p-timeline-event {
|
||||
@apply flex-row-reverse
|
||||
}
|
||||
|
||||
.p-timeline-right .p-timeline-event-opposite {
|
||||
@apply text-start
|
||||
}
|
||||
|
||||
.p-timeline-right .p-timeline-event-content {
|
||||
@apply text-end
|
||||
}
|
||||
|
||||
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) {
|
||||
@apply flex-row-reverse
|
||||
}
|
||||
|
||||
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite {
|
||||
@apply text-end
|
||||
}
|
||||
|
||||
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content {
|
||||
@apply text-start
|
||||
}
|
||||
|
||||
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite {
|
||||
@apply text-start
|
||||
}
|
||||
|
||||
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content {
|
||||
@apply text-end
|
||||
}
|
||||
|
||||
.p-timeline-vertical .p-timeline-event-opposite,
|
||||
.p-timeline-vertical .p-timeline-event-content {
|
||||
@apply py-0 px-4 leading-none
|
||||
}
|
||||
|
||||
.p-timeline-vertical .p-timeline-event-connector {
|
||||
@apply w-[2px]
|
||||
}
|
||||
|
||||
.p-timeline-event {
|
||||
@apply flex relative min-h-20 last:min-h-0
|
||||
}
|
||||
|
||||
.p-timeline-event-opposite {
|
||||
@apply flex-1
|
||||
}
|
||||
|
||||
.p-timeline-event-content {
|
||||
@apply flex-1
|
||||
}
|
||||
|
||||
.p-timeline-event-separator {
|
||||
@apply flex-none flex flex-col items-center
|
||||
}
|
||||
|
||||
.p-timeline-event-marker {
|
||||
@apply inline-flex items-center justify-center relative self-baseline
|
||||
border-2 rounded-full border-surface-200 dark:border-surface-700 w-[1.125rem] h-[1.125rem]
|
||||
bg-surface-0 dark:bg-surface-900
|
||||
before:rounded-full before:w-[0.375rem] before:h-[0.375rem] before:bg-primary
|
||||
after:absolute after:w-full after:h-full after:rounded-full after:shadow-[0px_0.5px_0px_0px_rgba(0,0,0,0.06),0px_1px_1px_0px_rgba(0,0,0,0.12)]
|
||||
}
|
||||
|
||||
.p-timeline-event-connector {
|
||||
@apply flex-grow bg-surface-200 dark:bg-surface-700
|
||||
}
|
||||
|
||||
.p-timeline-horizontal {
|
||||
@apply flex-row
|
||||
}
|
||||
|
||||
.p-timeline-horizontal .p-timeline-event {
|
||||
@apply flex-col flex-1
|
||||
}
|
||||
|
||||
.p-timeline-horizontal .p-timeline-event:last-child {
|
||||
@apply flex-none
|
||||
}
|
||||
|
||||
.p-timeline-horizontal .p-timeline-event-separator {
|
||||
@apply flex-row
|
||||
}
|
||||
|
||||
.p-timeline-horizontal .p-timeline-event-connector {
|
||||
@apply w-full h-[2px]
|
||||
}
|
||||
|
||||
.p-timeline-horizontal .p-timeline-event-opposite,
|
||||
.p-timeline-horizontal .p-timeline-event-content {
|
||||
@apply py-4 px-0
|
||||
}
|
||||
|
||||
.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {
|
||||
@apply flex-col-reverse
|
||||
}
|
||||
|
||||
.p-timeline-bottom .p-timeline-event {
|
||||
@apply flex-col-reverse
|
||||
}
|
||||
|
|
@ -1,172 +0,0 @@
|
|||
.p-toast {
|
||||
@apply w-96 rounded-md whitespace-pre-line break-words
|
||||
}
|
||||
|
||||
.p-toast-message {
|
||||
@apply mb-4
|
||||
}
|
||||
|
||||
.p-toast-message-icon {
|
||||
@apply flex-shrink-0 text-lg w-[1.125rem] h-[1.125rem]
|
||||
}
|
||||
|
||||
.p-toast-message-content {
|
||||
@apply flex items-start p-3 gap-2
|
||||
}
|
||||
|
||||
.p-toast-message-text {
|
||||
@apply flex-auto flex flex-col gap-2
|
||||
}
|
||||
|
||||
.p-toast-summary {
|
||||
@apply font-medium text-base
|
||||
}
|
||||
|
||||
.p-toast-detail {
|
||||
@apply font-medium text-sm
|
||||
}
|
||||
|
||||
.p-toast-close-button {
|
||||
@apply flex items-center justify-center overflow-hidden relative cursor-pointer bg-transparent select-none
|
||||
transition-colors duration-200 text-inherit w-7 h-7 rounded-full -mt-[25%] -end-1/4 p-0 border-none
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
|
||||
}
|
||||
|
||||
.p-toast-close-button:dir(rtl) {
|
||||
@apply ms-auto end-auto
|
||||
}
|
||||
|
||||
.p-toast-message-info,
|
||||
.p-toast-message-success,
|
||||
.p-toast-message-warn,
|
||||
.p-toast-message-error,
|
||||
.p-toast-message-secondary,
|
||||
.p-toast-message-contrast {
|
||||
@apply border backdrop-blur-sm dark:backdrop-blur-md rounded-md
|
||||
}
|
||||
|
||||
.p-toast-close-icon {
|
||||
@apply text-base w-4 h-4
|
||||
}
|
||||
|
||||
.p-toast-message-info {
|
||||
@apply bg-blue-50/95 border-blue-200 text-blue-600
|
||||
dark:bg-blue-500/15 dark:border-blue-700/35 dark:text-blue-500
|
||||
shadow-[0px_4px_8px_0px_theme(colors.blue.500/0.04)]
|
||||
}
|
||||
|
||||
.p-toast-message-info .p-toast-detail {
|
||||
@apply text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-toast-message-info .p-toast-close-button {
|
||||
@apply hover:bg-blue-100 focus-visible:outline-blue-600
|
||||
dark:hover:bg-white/5 dark:focus-visible:outline-blue-500
|
||||
}
|
||||
|
||||
.p-toast-message-success {
|
||||
@apply bg-green-50/95 border-green-200 text-green-600
|
||||
dark:bg-green-500/15 dark:border-green-700/35 dark:text-green-500
|
||||
shadow-[0px_4px_8px_0px_theme(colors.green.500/0.04)]
|
||||
}
|
||||
|
||||
.p-toast-message-success .p-toast-detail {
|
||||
@apply text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-toast-message-success .p-toast-close-button {
|
||||
@apply hover:bg-green-100 focus-visible:outline-green-600
|
||||
dark:hover:bg-white/5 dark:focus-visible:outline-green-500
|
||||
}
|
||||
|
||||
.p-toast-message-warn {
|
||||
@apply bg-yellow-50/95 border-yellow-200 text-yellow-600
|
||||
dark:bg-yellow-500/15 dark:border-yellow-700/35 dark:text-yellow-500
|
||||
shadow-[0px_4px_8px_0px_theme(colors.yellow.500/0.04)]
|
||||
}
|
||||
|
||||
.p-toast-message-warn .p-toast-detail {
|
||||
@apply text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-toast-message-warn .p-toast-close-button {
|
||||
@apply hover:bg-yellow-100 focus-visible:outline-yellow-600
|
||||
dark:hover:bg-white/5 dark:focus-visible:outline-yellow-500
|
||||
}
|
||||
|
||||
.p-toast-message-error {
|
||||
@apply bg-red-50/95 border-red-200 text-red-600
|
||||
dark:bg-red-500/15 dark:border-red-700/35 dark:text-red-500
|
||||
shadow-[0px_4px_8px_0px_theme(colors.blue.500/0.04)]
|
||||
}
|
||||
|
||||
.p-toast-message-error .p-toast-detail {
|
||||
@apply text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-toast-message-error .p-toast-close-button {
|
||||
@apply hover:bg-red-100 focus-visible:outline-red-600
|
||||
dark:hover:bg-white/5 dark:focus-visible:outline-red-500
|
||||
}
|
||||
|
||||
.p-toast-message-secondary {
|
||||
@apply bg-surface-100 border-surface-200 text-surface-600
|
||||
dark:bg-surface-800 dark:border-surface-700 dark:text-surface-300
|
||||
shadow-[0px_4px_8px_0px_rgba(0,0,0,0.04)]
|
||||
}
|
||||
|
||||
.p-toast-message-secondary .p-toast-detail {
|
||||
@apply text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-toast-message-secondary .p-toast-close-button {
|
||||
@apply hover:bg-surface-200 focus-visible:outline-surface-600
|
||||
dark:hover:bg-surface-700 dark:focus-visible:outline-surface-300
|
||||
}
|
||||
|
||||
.p-toast-message-contrast {
|
||||
@apply bg-surface-900 border-surface-950 text-surface-50
|
||||
dark:bg-surface-0 dark:border-surface-100 dark:text-surface-950
|
||||
shadow-[0px_4px_8px_0px_rgba(0,0,0,0.04)]
|
||||
}
|
||||
|
||||
.p-toast-message-contrast .p-toast-detail {
|
||||
@apply text-surface-0 dark:text-surface-950
|
||||
}
|
||||
|
||||
.p-toast-message-contrast .p-toast-close-button {
|
||||
@apply hover:bg-surface-800 focus-visible:outline-surface-50
|
||||
dark:hover:bg-surface-100 dark:focus-visible:outline-surface-950
|
||||
}
|
||||
|
||||
.p-toast-top-center {
|
||||
@apply -translate-x-1/2;
|
||||
}
|
||||
|
||||
.p-toast-bottom-center {
|
||||
@apply -translate-x-1/2;
|
||||
}
|
||||
|
||||
.p-toast-center {
|
||||
@apply min-w-[20vw] -translate-x-1/2 -translate-y-1/2
|
||||
}
|
||||
|
||||
.p-toast-message-enter-from {
|
||||
@apply opacity-0 translate-y-1/2
|
||||
}
|
||||
|
||||
.p-toast-message-leave-from {
|
||||
@apply max-h-[1000px]
|
||||
}
|
||||
|
||||
.p-toast .p-toast-message.p-toast-message-leave-to {
|
||||
@apply max-h-0 opacity-0 mb-0 overflow-hidden
|
||||
}
|
||||
|
||||
.p-toast-message-enter-active {
|
||||
@apply [transition:transform_0.3s,opacity_0.3s]
|
||||
}
|
||||
|
||||
.p-toast-message-leave-active {
|
||||
@apply [transition:max-height_0.45s_cubic-bezier(0,1,0,1),opacity_0.3s,margin-bottom_0.3s]
|
||||
}
|
||||
|
|
@ -1,63 +0,0 @@
|
|||
.p-togglebutton {
|
||||
@apply inline-flex items-center justify-center overflow-hidden relative cursor-pointer select-none
|
||||
border border-surface-100 dark:border-surface-950 rounded-md
|
||||
bg-surface-100 dark:bg-surface-950
|
||||
text-surface-500 dark:text-surface-400 text-base font-medium
|
||||
px-4 py-2
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
|
||||
disabled:opacity-100 disabled:cursor-default
|
||||
disabled:bg-surface-200 disabled:border-surface-200 disabled:text-surface-500
|
||||
disabled:dark:bg-surface-700 disabled:dark:border-surface-700 disabled:dark:text-surface-400
|
||||
transition-colors duration-300
|
||||
before:bg-transparent before:absolute before:start-1 before:top-1 before:rounded-md before:w-[calc(100%-0.5rem)] before:h-[calc(100%-0.5rem)]
|
||||
before:transition-colors before:duration-200
|
||||
}
|
||||
|
||||
.p-togglebutton-content {
|
||||
@apply relative inline-flex items-center justify-center gap-2
|
||||
}
|
||||
|
||||
.p-togglebutton-label,
|
||||
.p-togglebutton-icon {
|
||||
@apply relative transition-none
|
||||
}
|
||||
|
||||
.p-togglebutton.p-togglebutton-checked::before {
|
||||
@apply bg-surface-0 dark:bg-surface-800 shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02),0px_1px_2px_0px_rgba(0,0,0,0.04)]
|
||||
}
|
||||
|
||||
.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover {
|
||||
@apply bg-surface-100 dark:bg-surface-950 text-surface-700 dark:text-surface-300
|
||||
}
|
||||
|
||||
.p-togglebutton.p-togglebutton-checked {
|
||||
@apply bg-surface-100 dark:bg-surface-950 border-surface-100 dark:border-surface-950 text-surface-900 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-togglebutton.p-invalid {
|
||||
@apply border-red-400 dark:border-red-300
|
||||
}
|
||||
|
||||
.p-togglebutton-icon {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover .p-togglebutton-icon {
|
||||
@apply text-surface-700 dark:text-surface-300
|
||||
}
|
||||
|
||||
.p-togglebutton.p-togglebutton-checked .p-togglebutton-icon {
|
||||
@apply text-surface-900 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-togglebutton:disabled .p-togglebutton-icon {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-togglebutton-sm {
|
||||
@apply text-sm px-[0.75rem] py-[0.375rem]
|
||||
}
|
||||
|
||||
.p-togglebutton-lg {
|
||||
@apply text-lg px-[1.25rem] py-[0.625rem]
|
||||
}
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
.p-toggleswitch {
|
||||
@apply inline-block w-10 h-6
|
||||
}
|
||||
|
||||
.p-toggleswitch-input {
|
||||
@apply cursor-pointer disabled:cursor-default appearance-none absolute top-0 start-0 w-full h-full m-0 p-0 opacity-0 z-10 rounded-[30px]
|
||||
}
|
||||
|
||||
.p-toggleswitch-slider {
|
||||
@apply inline-block w-full h-full rounded-[30px] shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
|
||||
bg-surface-300 dark:bg-surface-700
|
||||
border border-transparent
|
||||
transition-colors duration-200
|
||||
}
|
||||
|
||||
.p-toggleswitch-handle {
|
||||
@apply absolute top-1/2 flex justify-center items-center
|
||||
bg-surface-0 dark:bg-surface-400
|
||||
text-surface-500 dark:text-surface-900
|
||||
w-4 h-4 start-1 -mt-2 rounded-full
|
||||
transition-[background,color,left] duration-200
|
||||
}
|
||||
|
||||
.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider {
|
||||
@apply bg-primary
|
||||
}
|
||||
|
||||
.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-handle {
|
||||
@apply bg-surface-0 dark:bg-surface-900 text-primary start-5
|
||||
}
|
||||
|
||||
.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-slider {
|
||||
@apply bg-surface-400 dark:bg-surface-600
|
||||
}
|
||||
|
||||
.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-handle {
|
||||
@apply bg-surface-0 dark:bg-surface-300 text-surface-700 dark:text-surface-800
|
||||
}
|
||||
|
||||
.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked .p-toggleswitch-slider {
|
||||
@apply bg-primary-emphasis
|
||||
}
|
||||
|
||||
.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked .p-toggleswitch-handle {
|
||||
@apply bg-surface-0 dark:bg-surface-900 text-primary-emphasis
|
||||
}
|
||||
|
||||
.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:focus-visible) .p-toggleswitch-slider {
|
||||
@apply outline outline-1 outline-offset-2 outline-primary
|
||||
}
|
||||
|
||||
.p-toggleswitch.p-invalid > .p-toggleswitch-slider {
|
||||
@apply border-red-400 dark:border-red-300
|
||||
}
|
||||
|
||||
.p-toggleswitch.p-disabled {
|
||||
@apply opacity-100
|
||||
}
|
||||
|
||||
.p-toggleswitch.p-disabled .p-toggleswitch-slider {
|
||||
@apply bg-surface-200 dark:bg-surface-600
|
||||
}
|
||||
|
||||
.p-toggleswitch.p-disabled .p-toggleswitch-handle {
|
||||
@apply bg-surface-700 dark:bg-surface-900
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
.p-toolbar {
|
||||
@apply flex items-center justify-between flex-wrap p-3 gap-2
|
||||
bg-surface-0 dark:bg-surface-900
|
||||
text-surface-700 dark:text-surface-0
|
||||
border border-surface-200 dark:border-surface-700 rounded-md
|
||||
}
|
||||
|
||||
.p-toolbar-start,
|
||||
.p-toolbar-center,
|
||||
.p-toolbar-end {
|
||||
@apply flex items-center
|
||||
}
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
.p-tooltip {
|
||||
@apply absolute hidden max-w-48
|
||||
}
|
||||
|
||||
.p-tooltip-right,
|
||||
.p-tooltip-left {
|
||||
@apply py-0 px-1
|
||||
}
|
||||
|
||||
.p-tooltip-top,
|
||||
.p-tooltip-bottom {
|
||||
@apply py-1 px-0
|
||||
}
|
||||
|
||||
.p-tooltip-text {
|
||||
@apply whitespace-pre-line break-words bg-surface-700 text-surface-0 py-2 px-3
|
||||
rounded-md shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
|
||||
}
|
||||
|
||||
.p-tooltip-arrow {
|
||||
@apply absolute w-0 h-0 border-solid border-transparent
|
||||
}
|
||||
|
||||
.p-tooltip-right .p-tooltip-arrow {
|
||||
@apply -mt-1 border-[.25rem] border-s-0 border-e-surface-700 rtl:rotate-180
|
||||
}
|
||||
|
||||
.p-tooltip-left .p-tooltip-arrow {
|
||||
@apply -mt-1 border-[.25rem] border-e-0 border-s-surface-700 rtl:rotate-180
|
||||
}
|
||||
|
||||
.p-tooltip-top .p-tooltip-arrow {
|
||||
@apply -ms-1 border-[.25rem] border-b-0 border-t-surface-700
|
||||
}
|
||||
|
||||
.p-tooltip-bottom .p-tooltip-arrow {
|
||||
@apply -ms-1 border-[.25rem] border-t-0 border-b-surface-700
|
||||
}
|
||||
|
|
@ -1,103 +0,0 @@
|
|||
.p-tree {
|
||||
@apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 p-4
|
||||
}
|
||||
|
||||
.p-tree-root-children,
|
||||
.p-tree-node-children {
|
||||
@apply flex flex-col list-none m-0 gap-[2px]
|
||||
}
|
||||
|
||||
.p-tree-root-children {
|
||||
@apply pt-[2px] pb-0 px-0
|
||||
}
|
||||
|
||||
.p-tree-node-children {
|
||||
@apply pt-[2px] pe-0 pb-0 ps-4
|
||||
}
|
||||
|
||||
.p-tree-node {
|
||||
@apply p-0 outline-none
|
||||
}
|
||||
|
||||
.p-tree-node-content {
|
||||
@apply rounded-md px-2 py-1 flex items-center text-surface-700 dark:text-surface-0 gap-1 transition-colors duration-200
|
||||
}
|
||||
|
||||
.p-tree-node:focus-visible > .p-tree-node-content {
|
||||
@apply outline outline-1 outline-offset-2 outline-primary
|
||||
}
|
||||
|
||||
.p-tree-node-content.p-tree-node-selectable:not(.p-tree-node-selected):hover {
|
||||
@apply bg-surface-100 text-surface-700 dark:bg-surface-800 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-tree-node-content.p-tree-node-selectable:not(.p-tree-node-selected):hover .p-tree-node-icon {
|
||||
@apply text-surface-600 dark:text-surface-300
|
||||
}
|
||||
|
||||
.p-tree-node-content.p-tree-node-selected {
|
||||
@apply bg-highlight
|
||||
}
|
||||
|
||||
.p-tree-node-content.p-tree-node-selected .p-tree-node-toggle-button {
|
||||
@apply text-inherit
|
||||
}
|
||||
|
||||
.p-tree-node-toggle-button {
|
||||
@apply cursor-pointer select-none inline-flex justify-center rounded-full items-center overflow-hidden relative flex-shrink-0
|
||||
w-7 h-7 p-0 transition-colors duration-200 border-none
|
||||
bg-transparent enabled:hover:bg-surface-100 dark:enabled:hover:bg-surface-800
|
||||
text-surface-500 dark:text-surface-400 enabled:hover:text-surface-600 dark:enabled:hover:text-surface-300
|
||||
}
|
||||
|
||||
.p-tree-node-content.p-tree-node-selected .p-tree-node-toggle-button:hover {
|
||||
@apply bg-surface-0 dark:bg-surface-900 text-primary
|
||||
}
|
||||
|
||||
.p-tree-root {
|
||||
@apply overflow-auto
|
||||
}
|
||||
|
||||
.p-tree-node-selectable {
|
||||
@apply cursor-pointer select-none
|
||||
}
|
||||
|
||||
.p-tree-node-leaf > .p-tree-node-content .p-tree-node-toggle-button {
|
||||
@apply invisible
|
||||
}
|
||||
|
||||
.p-tree-node-icon {
|
||||
@apply text-surface-500 dark:text-surface-400 transition-colors duration-200
|
||||
}
|
||||
|
||||
.p-tree-node-content.p-tree-node-selected .p-tree-node-icon {
|
||||
@apply text-primary
|
||||
}
|
||||
|
||||
.p-tree-filter {
|
||||
@apply mb-2
|
||||
}
|
||||
|
||||
.p-tree-filter-input {
|
||||
@apply w-full
|
||||
}
|
||||
|
||||
.p-tree-loading {
|
||||
@apply relative h-full
|
||||
}
|
||||
|
||||
.p-tree-loading-icon {
|
||||
@apply text-[2rem] h-8 w-8
|
||||
}
|
||||
|
||||
.p-tree .p-tree-mask {
|
||||
@apply absolute z-10 flex items-center justify-center
|
||||
}
|
||||
|
||||
.p-tree-flex-scrollable {
|
||||
@apply flex flex-1 h-full flex-col
|
||||
}
|
||||
|
||||
.p-tree-flex-scrollable .p-tree-root {
|
||||
@apply flex-1
|
||||
}
|
||||
|
|
@ -1,116 +0,0 @@
|
|||
@import './chip';
|
||||
@import './tree';
|
||||
|
||||
.p-treeselect {
|
||||
@apply inline-flex cursor-pointer relative select-none rounded-md
|
||||
bg-surface-0 dark:bg-surface-950
|
||||
border border-surface-300 dark:border-surface-700
|
||||
shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
|
||||
transition-colors duration-200
|
||||
}
|
||||
|
||||
.p-treeselect:not(.p-disabled):hover {
|
||||
@apply border-surface-400 dark:border-surface-600
|
||||
}
|
||||
|
||||
.p-treeselect:not(.p-disabled).p-focus {
|
||||
@apply border-primary
|
||||
}
|
||||
|
||||
.p-treeselect.p-variant-filled {
|
||||
@apply bg-surface-50 dark:bg-surface-800
|
||||
}
|
||||
|
||||
.p-treeselect.p-invalid {
|
||||
@apply border-red-400 dark:border-red-300
|
||||
}
|
||||
|
||||
.p-treeselect.p-disabled {
|
||||
@apply bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400 opacity-100 cursor-default
|
||||
}
|
||||
|
||||
.p-treeselect-dropdown {
|
||||
@apply flex items-center justify-center shrink-0 bg-transparent
|
||||
text-surface-500 dark:text-surface-400 w-10 rounded-e-md
|
||||
}
|
||||
|
||||
.p-treeselect-clear-icon {
|
||||
@apply absolute top-1/2 -mt-2 text-surface-500 dark:text-surface-400 end-10
|
||||
}
|
||||
|
||||
.p-treeselect-label-container {
|
||||
@apply overflow-hidden flex-auto
|
||||
}
|
||||
|
||||
.p-treeselect-label {
|
||||
@apply flex items-center gap-1 whitespace-nowrap text-ellipsis px-3 py-2 text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-treeselect-label.p-placeholder {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-treeselect.p-disabled .p-treeselect-label {
|
||||
@apply text-surface-500 dark:text-surface-400
|
||||
}
|
||||
|
||||
.p-treeselect-label-empty {
|
||||
@apply overflow-hidden invisible
|
||||
}
|
||||
|
||||
.p-treeselect .p-treeselect-overlay {
|
||||
@apply min-w-full
|
||||
}
|
||||
|
||||
.p-treeselect-overlay {
|
||||
@apply absolute top-0 left-0 rounded-md
|
||||
bg-surface-0 dark:bg-surface-900
|
||||
border border-surface-200 dark:border-surface-700
|
||||
text-surface-700 dark:text-surface-0
|
||||
shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
|
||||
}
|
||||
|
||||
|
||||
.p-treeselect-tree-container {
|
||||
@apply overflow-auto
|
||||
}
|
||||
|
||||
.p-treeselect-empty-message {
|
||||
@apply px-3 py-2
|
||||
}
|
||||
|
||||
.p-treeselect-fluid {
|
||||
@apply flex
|
||||
}
|
||||
|
||||
.p-treeselect-overlay .p-tree {
|
||||
@apply p-1
|
||||
}
|
||||
|
||||
.p-treeselect-overlay .p-tree-loading {
|
||||
@apply min-h-12
|
||||
}
|
||||
|
||||
.p-treeselect-label .p-chip {
|
||||
@apply pt-1 pb-1 rounded-sm
|
||||
}
|
||||
|
||||
.p-treeselect-label:has(.p-chip) {
|
||||
@apply py-1 px-1
|
||||
}
|
||||
|
||||
.p-treeselect-sm .p-treeselect-label {
|
||||
@apply text-sm px-[0.625rem] py-[0.375rem]
|
||||
}
|
||||
|
||||
.p-treeselect-sm .p-treeselect-dropdown .p-icon {
|
||||
@apply text-sm w-[0.875rem] h-[0.875rem]
|
||||
}
|
||||
|
||||
.p-treeselect-lg .p-treeselect-label {
|
||||
@apply text-lg px-[0.875rem] py-[0.625rem]
|
||||
}
|
||||
|
||||
.p-treeselect-lg .p-treeselect-dropdown .p-icon {
|
||||
@apply text-lg w-[1.125rem] h-[1.125rem]
|
||||
}
|
||||
|
|
@ -1,300 +0,0 @@
|
|||
@import './paginator';
|
||||
|
||||
.p-treetable {
|
||||
@apply relative
|
||||
}
|
||||
|
||||
.p-treetable-table {
|
||||
@apply border-spacing-0 w-full
|
||||
}
|
||||
|
||||
.p-treetable-scrollable > .p-treetable-table-container {
|
||||
@apply relative
|
||||
}
|
||||
|
||||
.p-treetable-scrollable-table > .p-treetable-thead {
|
||||
@apply top-0 z-10
|
||||
}
|
||||
|
||||
.p-treetable-scrollable-table > .p-treetable-frozen-tbody {
|
||||
@apply sticky z-10
|
||||
}
|
||||
|
||||
.p-treetable-scrollable-table>.p-treetable-tfoot {
|
||||
@apply bottom-0 z-10
|
||||
}
|
||||
|
||||
.p-treetable-scrollable .p-treetable-frozen-column {
|
||||
@apply sticky bg-surface-0 dark:bg-surface-900
|
||||
}
|
||||
|
||||
.p-treetable-scrollable th.p-treetable-frozen-column {
|
||||
@apply z-10
|
||||
}
|
||||
|
||||
.p-treetable-scrollable > .p-treetable-table-container > .p-treetable-table > .p-treetable-thead {
|
||||
@apply bg-surface-0 dark:bg-surface-900
|
||||
}
|
||||
|
||||
.p-treetable-scrollable > .p-treetable-table-container > .p-treetable-table > .p-treetable-tfoot {
|
||||
@apply bg-surface-0 dark:bg-surface-900
|
||||
}
|
||||
|
||||
.p-treetable-flex-scrollable {
|
||||
@apply flex flex-col h-full
|
||||
}
|
||||
|
||||
.p-treetable-flex-scrollable > .p-treetable-table-container {
|
||||
@apply flex flex-col flex-1 h-full
|
||||
}
|
||||
|
||||
.p-treetable-scrollable-table > .p-treetable-tbody > .p-treetable-row-group-header {
|
||||
@apply sticky z-10
|
||||
}
|
||||
|
||||
.p-treetable-resizable-table > .p-treetable-thead > tr > th,
|
||||
.p-treetable-resizable-table > .p-treetable-tfoot > tr > td,
|
||||
.p-treetable-resizable-table > .p-treetable-tbody > tr > td {
|
||||
@apply overflow-hidden whitespace-nowrap
|
||||
}
|
||||
|
||||
.p-treetable-resizable-table > .p-treetable-thead > tr > th.p-treetable-resizable-column:not(.p-treetable-frozen-column) {
|
||||
@apply bg-clip-padding relative
|
||||
}
|
||||
|
||||
.p-treetable-resizable-table-fit > .p-treetable-thead > tr > th.p-treetable-resizable-column:last-child .p-treetable-column-resizer {
|
||||
@apply hidden
|
||||
}
|
||||
|
||||
.p-treetable-column-resizer {
|
||||
@apply block absolute top-0 end-0 m-0 w-2 h-full p-0 cursor-col-resize border border-transparent
|
||||
}
|
||||
|
||||
.p-treetable-column-header-content {
|
||||
@apply flex items-center gap-2
|
||||
}
|
||||
|
||||
.p-treetable-column-resize-indicator {
|
||||
@apply w-px absolute z-10 hidden bg-primary
|
||||
}
|
||||
|
||||
.p-treetable-mask {
|
||||
@apply absolute flex items-center justify-center z-20
|
||||
}
|
||||
|
||||
.p-treetable-paginator-top {
|
||||
@apply border-b border-surface-200 dark:border-surface-700
|
||||
}
|
||||
|
||||
.p-treetable-paginator-bottom {
|
||||
@apply border-t border-surface-200 dark:border-surface-700
|
||||
}
|
||||
|
||||
.p-treetable-header {
|
||||
@apply py-3 px-4 border-b border-surface-200 dark:border-surface-700
|
||||
bg-surface-0 dark:bg-surface-900
|
||||
text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-treetable-footer {
|
||||
@apply py-3 px-4 border-b border-surface-200 dark:border-surface-700
|
||||
bg-surface-0 dark:bg-surface-900
|
||||
text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-treetable-header-cell {
|
||||
@apply py-3 px-4 font-normal text-start transition-colors duration-200
|
||||
border-b border-surface-200 dark:border-surface-700
|
||||
bg-surface-0 dark:bg-surface-900
|
||||
text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-treetable-column-title {
|
||||
@apply font-semibold
|
||||
}
|
||||
|
||||
.p-treetable-tbody > tr {
|
||||
@apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 transition-colors duration-200
|
||||
}
|
||||
|
||||
.p-treetable-tbody > tr > td {
|
||||
@apply text-start py-3 px-4 border-b border-surface-200 dark:border-surface-800
|
||||
}
|
||||
|
||||
.p-treetable-hoverable .p-treetable-tbody > tr:not(.p-treetable-row-selected):hover {
|
||||
@apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-treetable-tbody > tr.p-treetable-row-selected {
|
||||
@apply bg-highlight
|
||||
}
|
||||
|
||||
.p-treetable-tbody > tr:has(+ .p-treetable-row-selected) > td {
|
||||
@apply border-b-primary-100 dark:border-b-primary-900
|
||||
}
|
||||
|
||||
.p-treetable-tbody > tr.p-treetable-row-selected > td {
|
||||
@apply border-b-primary-100 dark:border-b-primary-900
|
||||
}
|
||||
|
||||
.p-treetable-tbody > tr:focus-visible,
|
||||
.p-treetable-tbody > tr.p-treetable-contextmenu-row-selected {
|
||||
@apply outline outline-1 -outline-offset-1 outline-primary
|
||||
}
|
||||
|
||||
.p-treetable-tfoot > tr > td {
|
||||
@apply text-start py-3 px-4 border-b border-surface-200 dark:border-surface-800
|
||||
bg-surface-0 dark:bg-surface-900
|
||||
text-surface-700 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-treetable-column-footer {
|
||||
@apply font-semibold
|
||||
}
|
||||
|
||||
.p-treetable-sortable-column {
|
||||
@apply cursor-pointer select-none focus-visible:outline focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-primary
|
||||
}
|
||||
|
||||
.p-treetable-column-title,
|
||||
.p-treetable-sort-icon,
|
||||
.p-treetable-sort-badge {
|
||||
@apply align-middle
|
||||
}
|
||||
|
||||
.p-treetable-sort-icon {
|
||||
@apply text-surface-500 dark:text-surface-400 transition-colors duration-200
|
||||
}
|
||||
|
||||
.p-treetable-sortable-column:not(.p-treetable-column-sorted):hover {
|
||||
@apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0
|
||||
}
|
||||
|
||||
.p-treetable-sortable-column:not(.p-treetable-column-sorted):hover .p-treetable-sort-icon {
|
||||
@apply text-surface-600 dark:text-surface-300
|
||||
}
|
||||
|
||||
.p-treetable-column-sorted {
|
||||
@apply bg-highlight
|
||||
}
|
||||
|
||||
.p-treetable-column-sorted .p-treetable-sort-icon {
|
||||
@apply bg-highlight
|
||||
}
|
||||
|
||||
.p-treetable-hoverable .p-treetable-selectable-row {
|
||||
@apply cursor-pointer
|
||||
}
|
||||
|
||||
.p-treetable-loading-icon {
|
||||
@apply text-[2rem] w-8 h-8
|
||||
}
|
||||
|
||||
.p-treetable-gridlines .p-treetable-header {
|
||||
@apply border-t border-x
|
||||
}
|
||||
|
||||
.p-treetable-gridlines .p-treetable-footer {
|
||||
@apply border-b border-x
|
||||
}
|
||||
|
||||
.p-treetable-gridlines .p-treetable-paginator-top {
|
||||
@apply border-t border-x
|
||||
}
|
||||
|
||||
.p-treetable-gridlines .p-treetable-paginator-bottom {
|
||||
@apply border-b border-x
|
||||
}
|
||||
|
||||
.p-treetable-gridlines .p-treetable-thead > tr > th {
|
||||
@apply border-t border-x last:border
|
||||
}
|
||||
|
||||
.p-treetable-gridlines .p-treetable-tbody > tr > td {
|
||||
@apply border-t border-s last:border-r
|
||||
}
|
||||
|
||||
.p-treetable-gridlines .p-treetable-tbody > tr:last-child > td {
|
||||
@apply border-y border-s last:border
|
||||
}
|
||||
|
||||
.p-treetable-gridlines .p-treetable-tfoot > tr > td {
|
||||
@apply border-y border-s last:border
|
||||
}
|
||||
|
||||
.p-treetable.p-treetable-gridlines .p-treetable-thead + .p-treetable-tfoot > tr > td {
|
||||
@apply border-b border-s last:border-r
|
||||
}
|
||||
|
||||
.p-treetable.p-treetable-gridlines:has(.p-treetable-thead):has(.p-treetable-tbody) .p-treetable-tbody > tr > td {
|
||||
@apply border-b border-s last:border-r
|
||||
}
|
||||
|
||||
.p-treetable.p-treetable-gridlines:has(.p-treetable-tbody):has(.p-treetable-tfoot) .p-treetable-tbody > tr:last-child > td {
|
||||
@apply border-x
|
||||
}
|
||||
|
||||
.p-treetable.p-treetable-sm .p-treetable-header {
|
||||
@apply py-1 px-2
|
||||
}
|
||||
|
||||
.p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
|
||||
@apply py-1 px-2
|
||||
}
|
||||
|
||||
.p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
|
||||
@apply py-1 px-2
|
||||
}
|
||||
|
||||
.p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
|
||||
@apply py-1 px-2
|
||||
}
|
||||
|
||||
.p-treetable.p-treetable-sm .p-treetable-footer {
|
||||
@apply py-1 px-2
|
||||
}
|
||||
|
||||
.p-treetable.p-treetable-lg .p-treetable-header {
|
||||
@apply py-4 px-5
|
||||
}
|
||||
|
||||
.p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
|
||||
@apply py-4 px-5
|
||||
}
|
||||
|
||||
.p-treetable.p-treetable-lg .p-treetable-tbody>tr>td {
|
||||
@apply py-4 px-5
|
||||
}
|
||||
|
||||
.p-treetable.p-treetable-lg .p-treetable-tfoot>tr>td {
|
||||
@apply py-4 px-5
|
||||
}
|
||||
|
||||
.p-treetable.p-treetable-lg .p-treetable-footer {
|
||||
@apply py-4 px-5
|
||||
}
|
||||
|
||||
.p-treetable-body-cell-content {
|
||||
@apply flex items-center gap-2
|
||||
}
|
||||
|
||||
.p-treetable-tbody > tr.p-treetable-row-selected .p-treetable-node-toggle-button {
|
||||
@apply text-inherit
|
||||
}
|
||||
|
||||
.p-treetable-node-toggle-button {
|
||||
@apply inline-flex items-center justify-center overflow-hidden relative select-none
|
||||
transition-colors duration-200 w-7 h-7 rounded-full border-none bg-transparent cursor-pointer
|
||||
enabled:hover:bg-surface-100 dark:enabled:hover:bg-surface-900
|
||||
text-surface-500 dark:text-surface-400 enabled:hover:text-surface-700 dark:enabled:hover:text-surface-0
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
|
||||
|
||||
}
|
||||
|
||||
.p-treetable-tbody > tr.p-treetable-row-selected .p-treetable-node-toggle-button:hover {
|
||||
@apply bg-surface-0 dark:bg-surface-900 text-primary
|
||||
}
|
||||
|
||||
.p-treetable-node-toggle-icon:dir(rtl) {
|
||||
@apply rotate-180
|
||||
}
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
@import "tailwindcss/base";
|
||||
@import "tailwindcss/components";
|
||||
@import "./primevue/tailwind.css";
|
||||
@import "tailwindcss/utilities";
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
Loading…
Reference in New Issue