mirror of
https://github.com/filamentphp/filament.git
synced 2026-10-16 15:42:48 +08:00
405 lines
9.4 KiB
CSS
405 lines
9.4 KiB
CSS
.fi-modal {
|
|
&.fi-modal-slide-over,
|
|
&.fi-width-screen {
|
|
& > .fi-modal-window-ctn > .fi-modal-window {
|
|
@apply h-dvh;
|
|
|
|
& .fi-modal-content {
|
|
@apply flex-1;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.fi-modal-slide-over {
|
|
& > .fi-modal-window-ctn > .fi-modal-window {
|
|
@apply ms-auto overflow-y-auto;
|
|
|
|
&.fi-transition-enter-start,
|
|
&.fi-transition-leave-end {
|
|
@apply translate-x-full rtl:-translate-x-full;
|
|
}
|
|
|
|
&.fi-transition-enter-end,
|
|
&.fi-transition-leave-start {
|
|
@apply translate-x-0;
|
|
}
|
|
|
|
& .fi-modal-header {
|
|
@apply gap-x-3;
|
|
}
|
|
|
|
& .fi-modal-icon-bg {
|
|
@apply -my-2 -ms-2 p-2;
|
|
}
|
|
|
|
& .fi-modal-close-btn {
|
|
@apply end-6 top-6;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:not(.fi-modal-slide-over) {
|
|
&:not(.fi-width-screen) {
|
|
& > .fi-modal-window-ctn {
|
|
@apply overflow-y-auto;
|
|
|
|
& .fi-modal-footer {
|
|
&.fi-sticky {
|
|
@apply rounded-b-xl;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
& > .fi-modal-window-ctn > .fi-modal-window {
|
|
&.fi-transition-enter-start,
|
|
&.fi-transition-leave-end {
|
|
@apply scale-95 opacity-0;
|
|
}
|
|
|
|
&.fi-transition-enter-end,
|
|
&.fi-transition-leave-start {
|
|
@apply scale-100 opacity-100;
|
|
}
|
|
|
|
& .fi-modal-close-btn {
|
|
@apply end-4 top-4;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.fi-align-start {
|
|
& > .fi-modal-window-ctn > .fi-modal-window-has-icon {
|
|
&:not(.fi-modal-window-has-sticky-header) {
|
|
& .fi-modal-content {
|
|
@apply ps-[5.25rem] pe-6;
|
|
}
|
|
|
|
& .fi-modal-footer {
|
|
&:not(.fi-align-center) {
|
|
@apply ps-[5.25rem] pe-6;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&:not(.fi-align-start) {
|
|
& > .fi-modal-window-ctn > .fi-modal-window {
|
|
& .fi-modal-content,
|
|
& .fi-modal-footer {
|
|
@apply px-6;
|
|
}
|
|
}
|
|
}
|
|
|
|
& > .fi-modal-close-overlay {
|
|
@apply fixed inset-0 z-40 bg-gray-950/50 dark:bg-gray-950/75;
|
|
}
|
|
|
|
& > .fi-modal-window-ctn {
|
|
@apply fixed inset-0 z-40 grid min-h-full grid-rows-[1fr_auto_1fr] justify-items-center sm:grid-rows-[1fr_auto_3fr];
|
|
|
|
&.fi-clickable {
|
|
@apply cursor-pointer;
|
|
}
|
|
}
|
|
|
|
&:not(.fi-modal-slide-over):not(.fi-width-screen) {
|
|
& > .fi-modal-window-ctn {
|
|
@apply p-4;
|
|
|
|
& .fi-modal-window {
|
|
@apply mx-auto rounded-xl;
|
|
|
|
& .fi-modal-header {
|
|
&.fi-sticky {
|
|
@apply rounded-t-xl;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
& > .fi-modal-window-ctn > .fi-modal-window {
|
|
@apply pointer-events-auto relative row-start-2 flex w-full cursor-default flex-col bg-white shadow-xl ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10;
|
|
contain: layout;
|
|
|
|
& .fi-modal-header {
|
|
@apply flex px-6 pt-6;
|
|
|
|
&.fi-vertical-align-center {
|
|
@apply items-center;
|
|
}
|
|
|
|
&.fi-sticky {
|
|
@apply sticky top-0 z-10 border-b border-gray-200 bg-white pb-6 dark:border-white/10 dark:bg-gray-900;
|
|
}
|
|
}
|
|
|
|
& .fi-modal-heading {
|
|
@apply text-base leading-6 font-semibold text-gray-950 dark:text-white;
|
|
}
|
|
|
|
& .fi-modal-description {
|
|
@apply mt-2 text-sm text-gray-500 dark:text-gray-400;
|
|
}
|
|
|
|
& .fi-modal-content {
|
|
@apply flex flex-col gap-y-4 py-6;
|
|
}
|
|
|
|
&.fi-align-start,
|
|
&.fi-align-left {
|
|
& .fi-modal-header {
|
|
@apply gap-x-5;
|
|
}
|
|
|
|
& .fi-modal-icon-bg {
|
|
@apply p-2;
|
|
}
|
|
}
|
|
|
|
&.fi-align-center {
|
|
& .fi-modal-header {
|
|
@apply flex-col text-center;
|
|
}
|
|
|
|
& .fi-modal-icon-ctn {
|
|
@apply mb-5 flex items-center justify-center;
|
|
}
|
|
|
|
& .fi-modal-icon-bg {
|
|
@apply p-3;
|
|
}
|
|
}
|
|
|
|
&.fi-hidden {
|
|
@apply hidden;
|
|
}
|
|
|
|
&.fi-width-xs {
|
|
@apply max-w-xs;
|
|
}
|
|
|
|
&.fi-width-sm {
|
|
@apply max-w-sm;
|
|
}
|
|
|
|
&.fi-width-md {
|
|
@apply max-w-md;
|
|
}
|
|
|
|
&.fi-width-lg {
|
|
@apply max-w-lg;
|
|
}
|
|
|
|
&.fi-width-xl {
|
|
@apply max-w-xl;
|
|
}
|
|
|
|
&.fi-width-2xl {
|
|
@apply max-w-2xl;
|
|
}
|
|
|
|
&.fi-width-3xl {
|
|
@apply max-w-3xl;
|
|
}
|
|
|
|
&.fi-width-4xl {
|
|
@apply max-w-4xl;
|
|
}
|
|
|
|
&.fi-width-5xl {
|
|
@apply max-w-5xl;
|
|
}
|
|
|
|
&.fi-width-6xl {
|
|
@apply max-w-6xl;
|
|
}
|
|
|
|
&.fi-width-7xl {
|
|
@apply max-w-7xl;
|
|
}
|
|
|
|
&.fi-width-full {
|
|
@apply max-w-full;
|
|
}
|
|
|
|
&.fi-width-min {
|
|
@apply max-w-min;
|
|
}
|
|
|
|
&.fi-width-max {
|
|
@apply max-w-max;
|
|
}
|
|
|
|
&.fi-width-fit {
|
|
@apply max-w-fit;
|
|
}
|
|
|
|
&.fi-width-prose {
|
|
@apply max-w-prose;
|
|
}
|
|
|
|
&.fi-width-screen-sm {
|
|
@apply max-w-screen-sm;
|
|
}
|
|
|
|
&.fi-width-screen-md {
|
|
@apply max-w-screen-md;
|
|
}
|
|
|
|
&.fi-width-screen-lg {
|
|
@apply max-w-screen-lg;
|
|
}
|
|
|
|
&.fi-width-screen-xl {
|
|
@apply max-w-screen-xl;
|
|
}
|
|
|
|
&.fi-width-screen-2xl {
|
|
@apply max-w-screen-2xl;
|
|
}
|
|
|
|
&.fi-width-screen {
|
|
@apply fixed inset-0;
|
|
}
|
|
|
|
&.fi-transition-enter,
|
|
&.fi-transition-leave {
|
|
@apply duration-300;
|
|
}
|
|
|
|
&:not(.fi-modal-window-has-content) {
|
|
& .fi-modal-footer {
|
|
&:not(.fi-sticky) {
|
|
@apply mt-6;
|
|
}
|
|
}
|
|
|
|
&:not(.fi-modal-window-has-footer) {
|
|
& .fi-modal-header {
|
|
@apply pb-6;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:not(.fi-modal-window-has-icon),
|
|
&.fi-modal-window-has-sticky-header {
|
|
& .fi-modal-content,
|
|
& .fi-modal-footer {
|
|
@apply px-6;
|
|
}
|
|
}
|
|
|
|
&.fi-modal-window-has-close-btn {
|
|
&.fi-align-center:not(.fi-modal-window-has-icon) {
|
|
& .fi-modal-heading {
|
|
@apply ms-6;
|
|
}
|
|
}
|
|
|
|
&:not(.fi-modal-window-has-icon),
|
|
&.fi-align-start,
|
|
&.fi-align-left {
|
|
& .fi-modal-heading {
|
|
@apply me-6;
|
|
}
|
|
}
|
|
}
|
|
|
|
& .fi-modal-close-btn {
|
|
@apply absolute;
|
|
}
|
|
|
|
& .fi-modal-footer {
|
|
@apply w-full;
|
|
|
|
&.fi-sticky {
|
|
@apply sticky bottom-0 border-t border-gray-200 bg-white py-5 dark:border-white/10 dark:bg-gray-900;
|
|
}
|
|
|
|
&:not(.fi-sticky) {
|
|
@apply pb-6;
|
|
}
|
|
|
|
&:is(.fi-modal-slide-over .fi-modal-footer) {
|
|
@apply mt-auto;
|
|
}
|
|
|
|
& .fi-modal-footer-actions {
|
|
@apply gap-3;
|
|
}
|
|
|
|
&.fi-align-start,
|
|
&.fi-align-left {
|
|
& .fi-modal-footer-actions {
|
|
@apply flex flex-wrap items-center;
|
|
}
|
|
}
|
|
|
|
&.fi-align-center {
|
|
@apply px-6;
|
|
|
|
& .fi-modal-footer-actions {
|
|
@apply flex flex-col-reverse;
|
|
}
|
|
}
|
|
|
|
&.fi-align-end,
|
|
&.fi-align-right {
|
|
& .fi-modal-footer-actions {
|
|
@apply flex flex-row-reverse flex-wrap items-center;
|
|
}
|
|
}
|
|
}
|
|
|
|
& .fi-modal-icon-bg {
|
|
@apply rounded-full bg-gray-100 dark:bg-gray-500/20;
|
|
|
|
& > .fi-icon {
|
|
@apply text-gray-500 dark:text-gray-400;
|
|
}
|
|
|
|
&.fi-color {
|
|
@apply bg-color-100 dark:bg-color-500/20;
|
|
|
|
& > .fi-icon {
|
|
@apply text-color-600 dark:text-color-400;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@supports (container-type: inline-size) {
|
|
& > .fi-modal-window-ctn > .fi-modal-window {
|
|
@apply @container;
|
|
|
|
& .fi-modal-footer {
|
|
&.fi-align-center {
|
|
& .fi-modal-footer-actions {
|
|
@apply @sm:grid @sm:grid-cols-[repeat(auto-fit,minmax(0,1fr))];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@supports not (container-type: inline-size) {
|
|
& > .fi-modal-window-ctn > .fi-modal-window {
|
|
& .fi-modal-footer {
|
|
&.fi-align-center {
|
|
& .fi-modal-footer-actions {
|
|
@apply sm:grid sm:grid-cols-[repeat(auto-fit,minmax(0,1fr))];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
& .fi-modal-trigger {
|
|
@apply flex;
|
|
}
|