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

Implemented Avatar and Fieldset

pull/5507/head
Cagatay Civici 2024-02-08 00:06:00 +03:00
parent 1924e6867c
commit 93fe4bf941
6 changed files with 152 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
components/lib/theme/aura/avatar/index.js Normal file
View File

@ -0,0 +1,68 @@
export default {
css: `
.p-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
font-size: 1rem;
background-color: var(--p-dark-surface-700, var(--p-surface-200));
border-radius: 6px;
}
.p-avatar-image {
background-color: transparent;
}
.p-avatar-circle {
border-radius: 50%;
}
.p-avatar-circle img {
border-radius: 50%;
}
.p-avatar-icon {
font-size: 1rem;
}
.p-avatar img {
width: 100%;
height: 100%;
}
.p-avatar-lg {
width: 3rem;
height: 3rem;
font-size: 1.5rem;
}
.p-avatar-lg .p-avatar-icon {
font-size: 1.5rem;
}
.p-avatar-xl {
width: 4rem;
height: 4rem;
font-size: 2rem;
}
.p-avatar-xl .p-avatar-icon {
font-size: 2rem;
}
.p-avatar-group {
display: flex;
align-items: center;
}
.p-avatar-group .p-avatar + .p-avatar {
margin-left: -1rem;
}
.p-avatar-group .p-avatar {
border: 2px solid var(--p-dark-surface-900, var(--p-surface-0));
}
`
};

6
components/lib/theme/aura/avatar/package.json Normal file
View File

@ -0,0 +1,6 @@
{
"main": "./index.cjs.js",
"module": "./index.esm.js",
"unpkg": "./index.min.js",
"types": "./index.d.ts"
}

66
components/lib/theme/aura/fieldset/index.js Normal file
View File

@ -0,0 +1,66 @@
export default {
css: `
.p-fieldset {
border: 1px solid var(--p-dark-surface-700, var(--p-surface-200));
background: var(--p-dark-surface-900, var(--p-surface-0));
color: var(--p-dark-surface-0, var(--p-surface-700));
border-radius: 6px;
padding: 0 1.125rem 1.125rem 1.125rem;
margin: 0;
}
.p-fieldset-legend {
color: var(--p-dark-surface-0, var(--p-surface-700));
background: var(--p-dark-surface-900, var(--p-surface-0));
font-weight: 600;
border-radius: 6px;
border: 0 none;
padding: 0.5rem 0.75rem;
margin-bottom: 0.375rem;
}
.p-fieldset-toggleable > .p-fieldset-legend {
padding: 0;
}
.p-fieldset-toggleable > .p-fieldset-legend > a {
cursor: pointer;
user-select: none;
overflow: hidden;
position: relative;
text-decoration: none;
display: flex;
gap: 0.5rem;
align-items: center;
justify-content: center;
padding: 0.5rem 0.75rem;
color: var(--p-dark-surface-0, var(--p-surface-700));
border-radius: 6px;
transition: background-color 0.2s, color 0.2s, outline-color 0.2s;
outline-color: transparent;
}
.p-fieldset-toggleable > .p-fieldset-legend > a: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-fieldset-toggleable > .p-fieldset-legend > a:hover {
color: var(--p-dark-surface-0, var(--p-surface-800));
background-color: var(--p-dark-hover-bg, var(--p-hover-bg));
}
.p-fieldset-toggler {
color: var(--p-dark-surface-400, var(--p-surface-500));
transition: color 0.2s;
}
.p-fieldset-toggleable > .p-fieldset-legend > a:hover > .p-fieldset-toggler {
color: var(--p-dark-surface-400, var(--p-surface-600));
}
.p-fieldset .p-fieldset-content {
padding: 0;
}
`
};

6
components/lib/theme/aura/fieldset/package.json Normal file
View File

@ -0,0 +1,6 @@
{
"main": "./index.cjs.js",
"module": "./index.esm.js",
"unpkg": "./index.min.js",
"types": "./index.d.ts"
}

9
components/lib/theme/aura/index.js
View File

@ -1,4 +1,6 @@
import avatar from 'primevue/theme/aura/avatar';
import divider from 'primevue/theme/aura/divider';
import fieldset from 'primevue/theme/aura/fieldset';
import global from 'primevue/theme/aura/global';
import panel from 'primevue/theme/aura/panel';
@ -151,9 +153,6 @@ export default {
textColor: 'var(--p-dark-highlight-text-color, var(--p-highlight-text-color))'
},
anchorGutter: '2px',
hover: {
bg: 'var(--p-dark-hover-bg, var(--p-hover-bg))'
},
mask: {
bg: 'rgba(0,0,0,0.4)'
}
@ -162,6 +161,8 @@ export default {
components: {
global,
panel,
divider
divider,
fieldset,
avatar
}
};

2
components/lib/theme/aura/panel/index.js
View File

@ -41,7 +41,7 @@ export default {
.p-panel-header-icon:enabled:hover {
color: var(--p-text-color);
background: var(--p-hover-bg);
background: var(--p-dark-hover-bg, var(--p-hover-bg));
}
.p-panel-header-icon:focus-visible {