diff --git a/components/lib/themes/primeone/base/fileupload/index.js b/components/lib/themes/primeone/base/fileupload/index.js index b992fb7b6..94bf1bfa7 100644 --- a/components/lib/themes/primeone/base/fileupload/index.js +++ b/components/lib/themes/primeone/base/fileupload/index.js @@ -1,5 +1,92 @@ export default { css: ` +.p-fileupload-choose { + position: relative; + overflow: hidden; +} +.p-fileupload-choose input[type="file"] { + display: none; +} + +.p-fluid .p-fileupload .p-button { + width: auto; +} + +.p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + background: var(--p-fileupload-header-background); + padding: 1.125rem; + border: 1px solid var(--p-fileupload-header-border-color); + color: var(--p-fileupload-header-text-color); + border-bottom: 0 none; + border-top-right-radius: var(--p-rounded-base); + border-top-left-radius: var(--p-rounded-base); + gap: 0.5rem; +} + +.p-fileupload-content { + position: relative; + background: var(--p-fileupload-content-background); + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid var(--p-fileupload-content-border-color); + color: var(--p-fileupload-content-text-color); + border-bottom-right-radius: var(--p-rounded-base); + border-bottom-left-radius: var(--p-rounded-base); + border-top: 0 none; +} + +.p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + height: 0.25rem; +} + +.p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + padding: 1rem; + border: 1px solid var(--p-fileupload-file-border-color); + border-radius: var(--p-rounded-base); + gap: 0.5rem; + margin-bottom: 0.5rem; +} + +.p-fileupload-file:last-child { + margin-bottom: 0; +} + +.p-fileupload-file-thumbnail { + flex-shrink: 0; +} + +.p-fileupload-file-actions { + margin-left: auto; +} + +.p-fileupload-highlight { + border: 1px dashed var(--p-fileupload-highlight-border-color-highlight); + background-color: var(--p-fileupload-highlight-background-highlight); +} + +.p-fileupload-file-name { + margin-bottom: 0.5rem; +} + +.p-fileupload-file-size { + margin-right: 0.5rem; +} + +.p-fileupload-row > div { + padding: 0.75rem 1rem; +} + +.p-fileupload-advanced .p-message { + margin-top: 0; +} ` }; diff --git a/components/lib/themes/primeone/base/index.js b/components/lib/themes/primeone/base/index.js index e8d9c557d..6fa251584 100644 --- a/components/lib/themes/primeone/base/index.js +++ b/components/lib/themes/primeone/base/index.js @@ -24,6 +24,7 @@ import dock from 'primevue/themes/primeone/base/dock'; import dropdown from 'primevue/themes/primeone/base/dropdown'; import editor from 'primevue/themes/primeone/base/editor'; import fieldset from 'primevue/themes/primeone/base/fieldset'; +import fileupload from 'primevue/themes/primeone/base/fileupload'; import floatlabel from 'primevue/themes/primeone/base/floatlabel'; import galleria from 'primevue/themes/primeone/base/galleria'; import global from 'primevue/themes/primeone/base/global'; @@ -108,6 +109,7 @@ export default { dock, editor, fieldset, + fileupload, floatlabel, galleria, iconfield, diff --git a/components/lib/themes/primeone/presets/aura/fileupload/index.js b/components/lib/themes/primeone/presets/aura/fileupload/index.js index ff8b4c563..ecce594e7 100644 --- a/components/lib/themes/primeone/presets/aura/fileupload/index.js +++ b/components/lib/themes/primeone/presets/aura/fileupload/index.js @@ -1 +1,38 @@ -export default {}; +export default { + colorScheme: { + light: { + header: { + background: '{surface.0}', + borderColor: '{surface.200}', + textColor: '{surface.700}' + }, + content: { + background: '{surface.0}', + backgroundHighlight: '{highlight.background}', + borderColor: '{surface.200}', + borderColorHighlight: '{highlight.textColor}', + textColor: '{surface.700}' + }, + file: { + borderColor: '{surface.200}' + } + }, + dark: { + header: { + background: '{surface.900}', + borderColor: '{surface.700}', + textColor: '{surface.0}' + }, + content: { + background: '{surface.900}', + backgroundHighlight: '{highlight.background}', + borderColor: '{surface.700}', + borderColorHighlight: '{highlight.textColor}', + textColor: '{surface.0}' + }, + file: { + borderColor: '{surface.200}' + } + } + } +}; diff --git a/components/lib/themes/primeone/presets/aura/index.js b/components/lib/themes/primeone/presets/aura/index.js index 5ff7e3f86..002206aae 100644 --- a/components/lib/themes/primeone/presets/aura/index.js +++ b/components/lib/themes/primeone/presets/aura/index.js @@ -24,6 +24,7 @@ import dock from 'primevue/themes/primeone/presets/aura/dock'; import dropdown from 'primevue/themes/primeone/presets/aura/dropdown'; import editor from 'primevue/themes/primeone/presets/aura/editor'; import fieldset from 'primevue/themes/primeone/presets/aura/fieldset'; +import fileupload from 'primevue/themes/primeone/presets/aura/fileupload'; import floatlabel from 'primevue/themes/primeone/presets/aura/floatlabel'; import galleria from 'primevue/themes/primeone/presets/aura/galleria'; import iconfield from 'primevue/themes/primeone/presets/aura/iconfield'; @@ -255,6 +256,7 @@ export default { dropdown, editor, fieldset, + fileupload, floatlabel, galleria, iconfield,