vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor #5667

pull/5677/head
Mert Sincan 2024-05-01 09:32:36 +01:00
parent b7caa4e442
commit b8e0b4b851
4 changed files with 367 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
components/lib/dialog/style/DialogStyle.js
View File

@ -1,5 +1,135 @@
import BaseStyle from 'primevue/base/style'; import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-dialog {
max-height: 90%;
transform: scale(1);
border-radius: ${dt('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: ${dt('dialog.background')};
border: 1px solid ${dt('dialog.border.color')};
color: ${dt('dialog.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-actions {
display: flex;
align-items: center;
gap: 0.5rem;
}
.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;
}
`;
/* Position */ /* Position */
const inlineStyles = { const inlineStyles = {
mask: ({ position, modal }) => ({ mask: ({ position, modal }) => ({
@ -52,6 +182,7 @@ const classes = {
export default BaseStyle.extend({ export default BaseStyle.extend({
name: 'dialog', name: 'dialog',
theme,
classes, classes,
inlineStyles inlineStyles
}); });

114
components/lib/image/style/ImageStyle.js
View File

@ -1,5 +1,118 @@
import BaseStyle from 'primevue/base/style'; import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-image-mask {
display: flex;
align-items: center;
justify-content: center;
--p-mask-background: ${dt('image.mask.background')};
}
.p-image-preview {
position: relative;
display: inline-flex;
line-height: 0;
}
.p-image-preview-mask {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s;
border: 0 none;
padding: 0;
cursor: pointer;
background: transparent;
color: ${dt('image.preview.indicator.color')};
transition: background-color ${dt('transition.duration')};
}
.p-image-preview:hover > .p-image-preview-mask {
opacity: 1;
cursor: pointer;
background: ${dt('image.preview.indicator.background')};
}
.p-image-preview-icon {
width: 1.5rem;
height: 1.5rem;
}
.p-image-toolbar {
position: absolute;
top: 0;
right: 0;
display: flex;
z-index: 1;
padding: 1rem;
gap: 0.5rem;
}
.p-image-action {
display: inline-flex;
justify-content: center;
align-items: center;
color: ${dt('image.action.color')};
background: transparent;
width: 3rem;
margin: 0;
padding: 0;
border: 0 none;
cursor: pointer;
user-select: none;
height: 3rem;
border-radius: 50%;
outline-color: transparent;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
}
.p-image-action:hover {
color: ${dt('image.action.hover.color')};
background: ${dt('image.action.hover.background')};
}
.p-image-action:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-image-action .p-icon {
font-size: 1.5rem;
width: 1.5rem;
height: 1.5rem;
}
.p-image-action.p-disabled {
pointer-events: auto;
}
.p-image-original {
transition: transform 0.15s;
max-width: 100vw;
max-height: 100vh;
}
.p-image-original-enter-active {
transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
}
.p-image-original-leave-active {
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.p-image-original-enter-from,
.p-image-original-leave-to {
opacity: 0;
transform: scale(0.7);
}
`;
const classes = { const classes = {
root: ({ props }) => [ root: ({ props }) => [
'p-image p-component', 'p-image p-component',
@ -31,5 +144,6 @@ const classes = {
export default BaseStyle.extend({ export default BaseStyle.extend({
name: 'image', name: 'image',
theme,
classes classes
}); });

122
components/lib/progressbar/style/ProgressBarStyle.js
View File

@ -1,5 +1,126 @@
import BaseStyle from 'primevue/base/style'; import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-progressbar {
position: relative;
overflow: hidden;
border: 0 none;
height: 1.25rem;
background: ${dt('progressbar.background')};
border-radius: ${dt('rounded.base')};
}
.p-progressbar-value {
border: 0 none;
margin: 0;
background: ${dt('progressbar.value.background')};
}
.p-progressbar-label {
color: ${dt('progressbar.label.color')};
line-height: 1.25rem;
font-size: .75rem;
font-weight: 600;
}
.p-progressbar-determinate .p-progressbar-value {
height: 100%;
width: 0%;
position: absolute;
display: none;
border: 0 none;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: width 1s ease-in-out;
}
.p-progressbar-determinate .p-progressbar-label {
display: inline-flex;
}
.p-progressbar-indeterminate .p-progressbar-value::before {
content: "";
position: absolute;
background-color: inherit;
top: 0;
left: 0;
bottom: 0;
will-change: left, right;
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 {
content: "";
position: absolute;
background-color: inherit;
top: 0;
left: 0;
bottom: 0;
will-change: left, right;
animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
animation-delay: 1.15s;
}
@-webkit-keyframes p-progressbar-indeterminate-anim {
0% {
left: -35%;
right: 100%;
}
60% {
left: 100%;
right: -90%;
}
100% {
left: 100%;
right: -90%;
}
}
@keyframes p-progressbar-indeterminate-anim {
0% {
left: -35%;
right: 100%;
}
60% {
left: 100%;
right: -90%;
}
100% {
left: 100%;
right: -90%;
}
}
@-webkit-keyframes p-progressbar-indeterminate-anim-short {
0% {
left: -200%;
right: 100%;
}
60% {
left: 107%;
right: -8%;
}
100% {
left: 107%;
right: -8%;
}
}
@keyframes p-progressbar-indeterminate-anim-short {
0% {
left: -200%;
right: 100%;
}
60% {
left: 107%;
right: -8%;
}
100% {
left: 107%;
right: -8%;
}
}
`;
const classes = { const classes = {
root: ({ instance }) => [ root: ({ instance }) => [
'p-progressbar p-component', 'p-progressbar p-component',
@ -15,5 +136,6 @@ const classes = {
export default BaseStyle.extend({ export default BaseStyle.extend({
name: 'progressbar', name: 'progressbar',
theme,
classes classes
}); });

1
components/lib/themes/primeone/presets/index.js
View File

@ -1 +0,0 @@
export { default as Aura } from 'primevue/themes/primeone/presets/aura';