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

Fixed #6878 - Textarea filled variant fails in Material Theme

pull/6880/head
Cagatay Civici 2024-11-27 10:37:05 +03:00
parent b6a94b874e
commit 71892f8915
1 changed files with 46 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
packages/themes/src/presets/material/textarea/index.js
View File

@ -3,6 +3,7 @@ export default {
background: '{form.field.background}',
disabledBackground: '{form.field.disabled.background}',
filledBackground: '{form.field.filled.background}',
filledHoverBackground: '{form.field.filled.hover.background}',
filledFocusBackground: '{form.field.filled.focus.background}',
borderColor: '{form.field.border.color}',
hoverBorderColor: '{form.field.hover.border.color}',
@ -34,5 +35,49 @@ export default {
paddingX: '{form.field.lg.padding.x}',
paddingY: '{form.field.lg.padding.y}'
}
}
},
css: ({ dt }) => `
.p-textarea.p-variant-filled {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border: 1px solid transparent;
background: ${dt('textarea.filled.background')} no-repeat;
background-image: linear-gradient(to bottom, ${dt('textarea.focus.border.color')}, ${dt('textarea.focus.border.color')}), linear-gradient(to bottom, ${dt('textarea.border.color')}, ${dt('textarea.border.color')});
background-size: 0 2px, 100% 1px;
background-position: 50% 100%, 50% 100%;
background-origin: border-box;
transition: background-size 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
}
.p-textarea.p-variant-filled:enabled:hover {
background: ${dt('textarea.filled.hover.background')} no-repeat;
background-image: linear-gradient(to bottom, ${dt('textarea.focus.border.color')}, ${dt('textarea.focus.border.color')}), linear-gradient(to bottom, ${dt('textarea.hover.border.color')}, ${dt('textarea.hover.border.color')});
background-size: 0 2px, 100% 1px;
background-position: 50% 100%, 50% 100%;
background-origin: border-box;
border-color: transparent;
}
.p-textarea.p-variant-filled:enabled:focus {
outline: 0 none;
background: ${dt('textarea.filled.focus.background')} no-repeat;
background-image: linear-gradient(to bottom, ${dt('textarea.focus.border.color')}, ${dt('textarea.focus.border.color')}), linear-gradient(to bottom, ${dt('textarea.border.color')}, ${dt('textarea.border.color')});
background-size: 100% 2px, 100% 1px;
background-position: 50% 100%, 50% 100%;
background-origin: border-box;
border-color: transparent;
}
.p-textarea.p-variant-filled:enabled:hover:focus {
background-image: linear-gradient(to bottom, ${dt('textarea.focus.border.color')}, ${dt('textarea.focus.border.color')}), linear-gradient(to bottom, ${dt('textarea.hover.border.color')}, ${dt('textarea.hover.border.color')});
}
.p-textarea.p-variant-filled.p-invalid {
background-image: linear-gradient(to bottom, ${dt('textarea.invalid.border.color')}, ${dt('textarea.invalid.border.color')}), linear-gradient(to bottom, ${dt('textarea.invalid.border.color')}, ${dt('textarea.invalid.border.color')});
}
.p-textarea.p-variant-filled.p-invalid:enabled:focus {
background-image: linear-gradient(to bottom, ${dt('textarea.invalid.border.color')}, ${dt('textarea.invalid.border.color')}), linear-gradient(to bottom, ${dt('textarea.invalid.border.color')}, ${dt('textarea.invalid.border.color')});
}
`
};