Migrated Dialog
Cagatay Civici
parent
a6a2dc3e71
commit
da87ce3864
|
|
@ -0,0 +1,175 @@
|
|||
export default {
|
||||
variables: {
|
||||
colorScheme: {
|
||||
light: {
|
||||
root: {
|
||||
background: '{surface.0}',
|
||||
borderColor: '{surface.200}',
|
||||
textColor: '{surface.700}'
|
||||
},
|
||||
headerIcon: {
|
||||
color: '{surface.500}',
|
||||
colorHover: '{surface.600}',
|
||||
backgroundHover: '{surface.100}'
|
||||
}
|
||||
},
|
||||
dark: {}
|
||||
}
|
||||
},
|
||||
css: `
|
||||
.p-dialog {
|
||||
max-height: 90%;
|
||||
transform: scale(1);
|
||||
border-radius: var(--p-rounded-xl);
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
|
||||
background: var(--p-dialog-background);
|
||||
border: 1px solid var(--p-dialog-border-color);
|
||||
color: var(--p-dialog-text-color);
|
||||
}
|
||||
|
||||
.p-dialog-content {
|
||||
overflow-y: auto;
|
||||
padding: 0 1.5rem 1.5rem 1.5rem;
|
||||
}
|
||||
|
||||
.p-dialog-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-shrink: 0;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.p-dialog-title {
|
||||
font-weight: 600;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.p-dialog-footer {
|
||||
flex-shrink: 0;
|
||||
padding: 0 1.5rem 1.5rem 1.5rem;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.p-dialog-header-icons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.p-dialog-header-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
color: var(--p-dialog-header-icon-color);
|
||||
border: 0 none;
|
||||
background: transparent;
|
||||
border-radius: 50%;
|
||||
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
|
||||
outline-color: transparent;
|
||||
}
|
||||
|
||||
.p-dialog-header-icon:enabled:hover {
|
||||
color: var(--p-dialog-header-icon-color-hover);
|
||||
background: var(--p-dialog-header-icon-background-hover);
|
||||
}
|
||||
|
||||
.p-dialog-header-icon:focus-visible {
|
||||
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
|
||||
outline-offset: var(--p-focus-ring-offset);
|
||||
}
|
||||
|
||||
.p-dialog-enter-active {
|
||||
transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.p-dialog-leave-active {
|
||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.p-dialog-enter-from,
|
||||
.p-dialog-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0.7);
|
||||
}
|
||||
|
||||
.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 {
|
||||
margin: 0.75rem;
|
||||
transform: translate3d(0px, 0px, 0px);
|
||||
}
|
||||
|
||||
.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 {
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.p-dialog-top .p-dialog-enter-from,
|
||||
.p-dialog-top .p-dialog-leave-to {
|
||||
transform: translate3d(0px, -100%, 0px);
|
||||
}
|
||||
|
||||
.p-dialog-bottom .p-dialog-enter-from,
|
||||
.p-dialog-bottom .p-dialog-leave-to {
|
||||
transform: translate3d(0px, 100%, 0px);
|
||||
}
|
||||
|
||||
.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 {
|
||||
transform: translate3d(-100%, 0px, 0px);
|
||||
}
|
||||
|
||||
.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 {
|
||||
transform: translate3d(100%, 0px, 0px);
|
||||
}
|
||||
|
||||
.p-dialog-maximized {
|
||||
width: 100vw !important;
|
||||
height: 100vh !important;
|
||||
top: 0px !important;
|
||||
left: 0px !important;
|
||||
max-height: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.p-dialog-maximized .p-dialog-content {
|
||||
flex-grow: 1;
|
||||
}
|
||||
`
|
||||
};
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"main": "./index.cjs.js",
|
||||
"module": "./index.esm.js",
|
||||
"unpkg": "./index.min.js",
|
||||
"types": "./index.d.ts"
|
||||
}
|
||||
|
|
@ -4,6 +4,7 @@ import badge from 'primevue/theme/aura/badge';
|
|||
import blockui from 'primevue/theme/aura/blockui';
|
||||
import card from 'primevue/theme/aura/card';
|
||||
import chip from 'primevue/theme/aura/chip';
|
||||
import dialog from 'primevue/theme/aura/dialog';
|
||||
import divider from 'primevue/theme/aura/divider';
|
||||
import fieldset from 'primevue/theme/aura/fieldset';
|
||||
import global from 'primevue/theme/aura/global';
|
||||
|
|
@ -26,7 +27,8 @@ export default {
|
|||
rounded: {
|
||||
sm: '4px',
|
||||
base: '6px',
|
||||
lg: '12px'
|
||||
lg: '8px',
|
||||
xl: '12px'
|
||||
},
|
||||
emerald: { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22' },
|
||||
green: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', 950: '#052e16' },
|
||||
|
|
@ -136,6 +138,7 @@ export default {
|
|||
blockui,
|
||||
card,
|
||||
chip,
|
||||
dialog,
|
||||
divider,
|
||||
fieldset,
|
||||
metergroup,
|
||||
|
|
|
|||
Loading…
Reference in New Issue