primevue-mirror/components/lib/themes/primeone/base/global.js

233 lines
4.0 KiB
JavaScript

export default {
css: ({ dt }) => `
.p-component,
.p-component * {
box-sizing: border-box;
}
.p-hidden-space {
visibility: hidden;
}
.p-reset {
margin: 0;
padding: 0;
border: 0;
outline: 0;
text-decoration: none;
font-size: 100%;
list-style: none;
}
.p-disabled,
.p-disabled * {
cursor: default;
pointer-events: none;
user-select: none;
}
.p-component-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.p-unselectable-text {
user-select: none;
}
.p-sr-only {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal;
}
.p-link {
text-align: left;
background-color: transparent;
margin: 0;
padding: 0;
border: none;
cursor: pointer;
user-select: none;
}
.p-link:disabled {
cursor: default;
}
/* Non vue overlay animations */
.p-connected-overlay {
opacity: 0;
transform: scaleY(0.8);
transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1),
opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
}
.p-connected-overlay-visible {
opacity: 1;
transform: scaleY(1);
}
.p-connected-overlay-hidden {
opacity: 0;
transform: scaleY(1);
transition: opacity 0.1s linear;
}
/* Vue based overlay animations */
.p-connected-overlay-enter-from {
opacity: 0;
transform: scaleY(0.8);
}
.p-connected-overlay-leave-to {
opacity: 0;
}
.p-connected-overlay-enter-active {
transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1),
opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
}
.p-connected-overlay-leave-active {
transition: opacity 0.1s linear;
}
/* Toggleable Content */
.p-toggleable-content-enter-from,
.p-toggleable-content-leave-to {
max-height: 0;
}
.p-toggleable-content-enter-to,
.p-toggleable-content-leave-from {
max-height: 1000px;
}
.p-toggleable-content-leave-active {
overflow: hidden;
transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
}
.p-toggleable-content-enter-active {
overflow: hidden;
transition: max-height 1s ease-in-out;
}
* {
box-sizing: border-box;
}
.p-component {
font-family: var(--p-font-family);
font-feature-settings: var(--p-font-feature-settings, normal);
font-size: 1rem;
font-weight: normal;
}
.p-component-overlay {
background-color: rgba(0, 0, 0, 0.4);
transition-duration: ${dt('transition.duration')};
}
.p-disabled,
.p-component:disabled {
opacity: 0.6;
}
.p-error {
color: #f87171;
}
.p-text-secondary {
color: #64748b;
}
.pi {
font-size: 1rem;
}
.p-icon {
width: 1rem;
height: 1rem;
}
.p-link {
font-family: var(--p-font-family);
font-feature-settings: var(--p-font-feature-settings, normal);
font-size: 1rem;
border-radius: 6px;
outline-color: transparent;
}
.p-link:focus-visible {
outline: 1px solid ${dt('focus.ring.color')};
outline-offset: 2px;
box-shadow: none;
}
.p-component-overlay-enter {
animation: p-component-overlay-enter-animation 150ms forwards;
}
.p-component-overlay-leave {
animation: p-component-overlay-leave-animation 150ms forwards;
}
@keyframes p-component-overlay-enter-animation {
from {
background-color: transparent;
}
to {
background-color: var(--p-mask-background);
}
}
@keyframes p-component-overlay-leave-animation {
from {
background-color: var(--p-mask-background);
}
to {
background-color: transparent;
}
}
.p-ripple {
overflow: hidden;
position: relative;
}
.p-ink {
display: block;
position: absolute;
background: rgba(255, 255, 255, 0.5);
border-radius: 100%;
transform: scale(0);
pointer-events: none;
}
.p-ink-active {
animation: ripple 0.4s linear;
}
.p-ripple-disabled .p-ink {
display: none;
}
@keyframes ripple {
100% {
opacity: 0;
transform: scale(2.5);
}
}
`
};