diff --git a/components/lib/themes/primeone/base/dropdown/index.js b/components/lib/themes/primeone/base/dropdown/index.js new file mode 100644 index 000000000..f3bc49a68 --- /dev/null +++ b/components/lib/themes/primeone/base/dropdown/index.js @@ -0,0 +1,216 @@ +export default { + css: ` +.p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + background: var(--p-dropdown-background); + border: 1px solid var(--p-dropdown-border-color); + transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), outline-color var(--p-transition-duration); + border-radius: var(--p-rounded-base); + outline-color: transparent; + box-shadow: var(--p-dropdown-box-shadow); +} + +.p-dropdown:not(.p-disabled):hover { + border-color: var(--p-dropdown-border-color-hover); +} + +.p-dropdown:not(.p-disabled).p-focus { + border-color: var(--p-dropdown-border-color-focus); + outline: 0 none; +} + +.p-dropdown.p-variant-filled { + background: var(--p-dropdown-background-filled); +} + +.p-dropdown.p-variant-filled.p-focus { + background: var(--p-dropdown-background-filled-focus); +} + +.p-dropdown.p-invalid { + border-color: var(--p-dropdown-border-color-invalid); +} + +.p-dropdown.p-disabled { + opacity: 1; + background: var(--p-dropdown-background-disabled); +} + +.p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + color: #94a3b8; + right: 2.5rem; +} + +.p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + background: transparent; + color: var(--p-dropdown-toggle-color); + width: 2.5rem; + border-top-right-radius: var(--p-rounded-base); + border-bottom-right-radius: var(--p-rounded-base); +} + +.p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + padding: 0.5rem 0.75rem; + text-overflow: ellipsis; + cursor: pointer; + color: var(--p-dropdown-text-color); + background: transparent; + border: 0 none; + outline: 0 none; +} + +.p-dropdown-label.p-placeholder { + color: var(--p-dropdown-placeholder-text-color); +} + +.p-dropdown-clearable .p-dropdown-label { + padding-right: 1.75rem; +} + +.p-dropdown.p-disabled .p-dropdown-label { + color: var(--p-dropdown-text-color-disabled); +} + +.p-dropdown-label-empty { + overflow: hidden; + opacity: 0; +} + +input.p-dropdown-label { + cursor: default; +} + +.p-dropdown .p-dropdown-panel { + min-width: 100%; +} + +.p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + background: var(--p-dropdown-overlay-background); + color: var(--p-dropdown-overlay-text-color); + border: 1px solid var(--p-dropdown-overlay-border-color); + border-radius: var(--p-rounded-base); + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); +} + + +.p-dropdown-panel .p-dropdown-header { + padding: 0.5rem 0.5rem 0 0.5rem; +} + +.p-dropdown-filter { + width: 100%; + padding-right: 1.75rem; + margin-right: -1.75rem; +} + +.p-dropdown-filter-container { + position: relative; +} + +.p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + right: 0.75rem; + color: var(--p-dropdown-filter-icon-color); +} + +.p-dropdown-items-wrapper { + overflow: auto; +} + +.p-dropdown-item-group { + cursor: auto; + margin: 0; + padding: 0.5rem 0.75rem; + color: var(--p-dropdown-item-group-text-color); + background: var(--p-dropdown-item-group-background); + font-weight: 600; +} + +.p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + padding: 0.25rem 0.25rem; +} + +.p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: var(--p-dropdown-item-text-color); + background: transparent; + transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration); + border-radius: var(--p-rounded-sm); +} + +.p-dropdown-item:first-child { + margin-top: 0; +} + +.p-dropdown-item:last-child { + margin-bottom: 0; +} + +.p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { + color: var(--p-dropdown-item-text-color-focus); + background: var(--p-dropdown-item-background-focus); +} + +.p-dropdown-item.p-highlight { + color: var(--p-dropdown-item-text-color-selected); + background: var(--p-dropdown-item-background-selected); +} + +.p-dropdown-item.p-highlight.p-focus { + color: var(--p-dropdown-item-text-color-selected-focus); + background: var(--p-dropdown-item-background-selected-focus); +} + +.p-dropdown-check-icon { + position: relative; + margin-left: -0.375rem; + margin-right: 0.375rem; +} + +.p-dropdown-empty-message { + padding: 0.5rem 0.75rem; + color: var(--p-dropdown-checkmark-color); + background: transparent; +} + +.p-fluid .p-dropdown { + display: flex; +} + +.p-fluid .p-dropdown .p-dropdown-label { + width: 1%; +} +` +}; diff --git a/components/lib/themes/primeone/base/dropdown/package.json b/components/lib/themes/primeone/base/dropdown/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/primeone/base/dropdown/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/primeone/base/index.js b/components/lib/themes/primeone/base/index.js index a905d3469..760689ce3 100644 --- a/components/lib/themes/primeone/base/index.js +++ b/components/lib/themes/primeone/base/index.js @@ -20,6 +20,7 @@ import dataview from 'primevue/themes/primeone/base/dataview'; import dialog from 'primevue/themes/primeone/base/dialog'; import divider from 'primevue/themes/primeone/base/divider'; import dock from 'primevue/themes/primeone/base/dock'; +import dropdown from 'primevue/themes/primeone/base/dropdown'; import fieldset from 'primevue/themes/primeone/base/fieldset'; import galleria from 'primevue/themes/primeone/base/galleria'; import global from 'primevue/themes/primeone/base/global'; @@ -96,6 +97,7 @@ export default { datatable, dialog, divider, + dropdown, dock, fieldset, galleria, diff --git a/components/lib/themes/primeone/presets/aura/dropdown/index.js b/components/lib/themes/primeone/presets/aura/dropdown/index.js new file mode 100644 index 000000000..abbefff96 --- /dev/null +++ b/components/lib/themes/primeone/presets/aura/dropdown/index.js @@ -0,0 +1,76 @@ +export default { + root: { + background: '{form.field.background}', + backgroundDisabled: '{form.field.background.disabled}', + backgroundFilled: '{form.field.background.filled}', + backgroundFilledFocus: '{form.field.background.filled.focus}', + borderColor: '{form.field.border.color}', + borderColorHover: '{form.field.border.color.hover}', + borderColorFocus: '{form.field.border.color.focus}', + borderColorInvalid: '{form.field.border.color.invalid}', + textColor: '{form.field.text.color}', + textColorDisabled: '{form.field.text.disabled}', + placeholderTextColor: '{form.field.placeholder.text.color}', + boxShadow: '{form.field.box.shadow}' + }, + colorScheme: { + light: { + toggle: { + color: '{surface.400}' + }, + overlay: { + background: '{surface.0}', + borderColor: '{surface.200}', + textColor: '{surface.700}' + }, + filterIcon: { + color: '{surface.400}' + }, + itemGroup: { + background: '{surface.0}', + textColor: '{surface.500}' + }, + item: { + backgroundFocus: '{surface.100}', + backgroundSelected: '{highlight.background}', + backgroundSelectedFocus: '{highlight.background.focus}', + textColor: '{surface.700}', + textColorFocus: '{surface.800}', + textColorSelected: '{highlight.text.color}', + textColorSelectedFocus: '{highlight.text.color.focus}' + }, + checkmark: { + color: '{surface.400}' + } + }, + dark: { + toggle: { + color: '{surface.400}' + }, + overlay: { + background: '{surface.900}', + borderColor: '{surface.700}', + textColor: '{surface.0}' + }, + filterIcon: { + color: '{surface.400}' + }, + itemGroup: { + background: '{surface.900}', + textColor: '{surface.400}' + }, + item: { + backgroundFocus: '{surface.800}', + backgroundSelected: '{highlight.background}', + backgroundSelectedFocus: '{highlight.background.focus}', + textColor: '{surface.0}', + textColorFocus: '{surface.0}', + textColorSelected: '{highlight.text.color}', + textColorSelectedFocus: '{highlight.text.color.focus}' + }, + checkmark: { + color: '{surface.400}' + } + } + } +}; diff --git a/components/lib/themes/primeone/presets/aura/dropdown/package.json b/components/lib/themes/primeone/presets/aura/dropdown/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/primeone/presets/aura/dropdown/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/primeone/presets/aura/index.js b/components/lib/themes/primeone/presets/aura/index.js index 3936ff24c..11bdaccc3 100644 --- a/components/lib/themes/primeone/presets/aura/index.js +++ b/components/lib/themes/primeone/presets/aura/index.js @@ -20,6 +20,7 @@ import dataview from 'primevue/themes/primeone/presets/aura/dataview'; import dialog from 'primevue/themes/primeone/presets/aura/dialog'; import divider from 'primevue/themes/primeone/presets/aura/divider'; import dock from 'primevue/themes/primeone/presets/aura/dock'; +import dropdown from 'primevue/themes/primeone/presets/aura/dropdown'; import fieldset from 'primevue/themes/primeone/presets/aura/fieldset'; import galleria from 'primevue/themes/primeone/presets/aura/galleria'; import iconfield from 'primevue/themes/primeone/presets/aura/iconfield'; @@ -238,6 +239,7 @@ export default { dialog, divider, dock, + dropdown, fieldset, galleria, iconfield,